Tap a card and it morphs into a detail view — then morphs back. Aperto wraps the browser's native View Transitions API in a small set of headless, composable React parts: no animation library, no FLIP math, zero dependencies, ~5 kB gzipped.

npm install aperto

import * as Aperto from "aperto"
import "aperto/styles.css"

<Aperto.Root>
  <Aperto.Card id="album-1">
    <Aperto.Shared name="cover" kind="media">
      <img src="/cover.jpg" alt="" />
    </Aperto.Shared>
  </Aperto.Card>

  <Aperto.Detail id="album-1">
    <Aperto.Overlay />
    <Aperto.Shared name="cover" kind="media">
      <img src="/cover.jpg" alt="" />
    </Aperto.Shared>
    <Aperto.Title>Album title</Aperto.Title>
    <Aperto.Close>Close</Aperto.Close>
  </Aperto.Detail>
</Aperto.Root>

Status: early preview. The API is small and settling, but expect changes before 1.0.

Live demos and full API reference: aperto.alexpate.com

Why aperto

• Native first — document.startViewTransition() does the animation. The browser owns every frame.
• Headless — plain markup and your CSS. State arrives as data-state attributes; the morph is styled with ::view-transition-* selectors and custom properties.
• Interruption-safe — mash open and close mid-flight and it settles on your last intent.
• Accessible — dialog semantics, background inert, focus management, Esc to close, automatic labelling.
• Honest fallback — no View Transitions support, or reduced motion? Same components, instant swap. Feature detection, never UA sniffing.
• Tiny — ~5 kB gzipped with zero dependencies; the standalone useViewTransition() engine is under 1 kB.

Requires React 19+. ESM only. TypeScript types included.

License

MIT © Alex Pate