View Morph

import { ViewMorph } from '@/components/blocks/view-morph'

import { ViewMorph } from '@/components/blocks/view-morph'

export default function ViewMorphDemo() {
  return (
    <ViewMorph
      eyebrow="Lab · Shared elements"
      heading="The card becomes the page."
      items={[
        {
          id: 'geometry',
          kicker: 'Geometry',
          title: 'One name, two states',
          body: 'The selected card and its detail sheet share a view-transition-name for the duration of the swap, the browser interpolates position, size, and radius between the two layouts. No measured FLIP math, no absolutely-positioned clones.',
          meta: 'view-transition-name: vm-shared',
        },
        {
          id: 'fallback',
          kicker: 'Fallback',
          title: 'Instant when unsupported',
          body: 'Browsers without startViewTransition get an immediate state swap. The interaction contract is identical, the animation is a bonus layer, never a requirement.',
          meta: 'progressive enhancement · no polyfill',
        },
        {
          id: 'focus',
          kicker: 'Focus',
          title: 'Focus rides the morph',
          body: 'Opening moves focus to the close control; closing returns it to the card that sent you. Escape works from anywhere in the sheet.',
          meta: 'wcag 2.4.3 focus order',
        },
        {
          id: 'reduced',
          kicker: 'Reduced motion',
          title: 'Respects the setting completely',
          body: 'prefers-reduced-motion switches the kit to instant swaps, the View Transitions API is never engaged, not merely shortened.',
          meta: 'prefers-reduced-motion: reduce',
        },
        {
          id: 'react',
          kicker: 'React',
          title: 'flushSync, the documented recipe',
          body: 'React commits the next state synchronously inside the transition callback so the browser snapshots exactly the before and after frames.',
          meta: 'react-dom · flushSync',
        },
        {
          id: 'ssr',
          kicker: 'SSR',
          title: 'Server-safe by construction',
          body: 'Support detection happens after mount; the server render is the plain grid with a neutral capability line, no hydration drift.',
          meta: 'no window at render',
        },
      ]}
    />
  )
}