View Transitions API

import { useState } from 'react';
import { flushSync } from 'react-dom';

const products = [
  { id: 'chair', name: 'Lounge chair', price: '$420' },
  { id: 'lamp', name: 'Arc floor lamp', price: '$180' },
  { id: 'table', name: 'Oak side table', price: '$240' }
];
type Product = (typeof products)[number];

function viewTransition(update: () => void) {
  const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (!document.startViewTransition || reduceMotion) return update();
  // flushSync commits the new view inside the callback, before the browser snapshots it.
  document.startViewTransition(() => flushSync(update));
}

// Matching names pair a thumbnail with the hero image. Each name is unique on the page.
const image = (product: Product) => ({
  src: `/products/${product.id}.jpg`,
  style: { viewTransitionName: `product-${product.id}` },
  className: 'aspect-square w-full rounded-xl object-cover'
});

export function ProductBrowser() {
  const [selected, setSelected] = useState<Product | null>(null);
  const show = (next: Product | null) =>
    viewTransition(() => setSelected(next));

  if (selected) {
    return (
      <article className='w-80'>
        <img {...image(selected)} alt={selected.name} />
        <h2 className='mt-4 text-xl font-semibold'>{selected.name}</h2>
        <p className='text-muted-foreground'>{selected.price}</p>
        <button
          type='button'
          onClick={() => show(null)}
          className='mt-4 rounded-full border px-4 py-2 text-sm font-medium'
        >
          All products
        </button>
      </article>
    );
  }

  return (
    <ul className='grid w-80 grid-cols-3 gap-3 text-sm'>
      {products.map((product) => (
        <li key={product.id}>
          <button type='button' onClick={() => show(product)}>
            <img {...image(product)} alt='' />
            {product.name}
          </button>
        </li>
      ))}
    </ul>
  );
}