Cards that open into a page

When a card opens into its detail view, a stock app swaps one screen for the other. With MatchCut, the detail grows out of the card, and going back shrinks it into the card again.

InstallCopy Anchor Link

npx shadcn add @keyframery/match-cut

If your project doesn't know @keyframery yet, do the Quick start first.

UseCopy Anchor Link

Wrap the small version and the big version in MatchCut, with the same id:

import { MatchCut } from "@/components/keyframery/match-cut"

// app/orders/page.tsx
<MatchCut id={`order-${order.id}`}>
  <OrderCard order={order} />
</MatchCut>

// app/orders/[id]/page.tsx
<MatchCut id={`order-${order.id}`}>
  <OrderDetail order={order} />
</MatchCut>

It works for a conditional render on one page and for a client-side route change. See Detail pages on their own route.

You should seeCopy Anchor Link

Click a card: the detail grows out of the card's box, while a copy of the card fades out above it. Go back: the detail shrinks into the card.

OptionsCopy Anchor Link

Good to knowCopy Anchor Link

• A MatchCut that mounts within a second of another one with the same id leaving grows out of it.
• The new element animates from the old box to its own over 420 ms: position, scale and corner radius. The copy of the old one fades out by 40% of the way.
• If the old and the new element sit at the same spot on the page, nothing plays.

In film, this is a match cut: a shape in one shot becomes the same shape in the next.