Cards that open.

App Store-style shared element transitions for React, built on the browser's native View Transitions API.

Live demo — open one

Composed like you'd write it

Radix-style parts that pair by id. Mark what's shared, style everything yourself — Aperto only manages the morph.

today-card.tsx

<Aperto.Root>
  <Aperto.Card id="game" className="today-card">
    <Aperto.Shared name="art" kind="media" className="artwork" />
    <Aperto.Shared name="title" kind="text" asChild>
      <span className="title">Alto's Descent</span>
    </Aperto.Shared>
  </Aperto.Card>

  <Aperto.Detail id="game" className="today-sheet">
    <Aperto.Overlay />
    <Aperto.Shared name="art" kind="media" className="artwork" />
    <Aperto.Shared name="title" kind="text" asChild>
      <Aperto.Title>Alto's Descent</Aperto.Title>
    </Aperto.Shared>
    <p>Artwork, title and container morph independently…</p>
    <Aperto.Close aria-label="Close" />
  </Aperto.Detail>
</Aperto.Root>

Row to detail pane

Widget to full screen