A card that grows into a detail view and shrinks back.

react-morphcard is one React hook, useMorph. It works in desktop and mobile browsers, installed PWAs and WebViews. Every card on this site uses it.

Get startedGitHub

Click a card. Esc, Back or a click outside shrinks it back.

  • Lisbon

    Walking

    4 days · April

    12 saved places

  • Kyoto

    Temples

    5 days · November

    18 saved places

  • Reykjavík

    Road trip

    6 days · February

    9 saved places

  • Oaxaca

    Food

    5 days · October

    21 saved places

  • Tromsø

    Aurora

    3 days · January

    6 saved places

  • Marrakesh

    Markets

    4 days · March

    14 saved places

What it does

The details that make it feel native

Each tile opens the same way the cards above do.

Surface

One surface that opens

The sheet is clipped to the card's shape and the clip opens. Nothing is scaled, so text stays sharp.

Shared elements

Shared text flies, the rest fades

Give the card's title and the sheet's heading the same data-morph key and they travel between the two.

Timing

Closing has its own timing

Back takes 300 ms against 400 ms to open, and the big heading hands over to the card text early.

Interruptions

Back works mid-flight

Close while it opens and the same animations turn around from where they are.

Fallbacks

Knows when not to fly

If the card is off screen or the target is missing, the sheet fades instead of flying.

Where it runs

Desktop, phones, PWAs, WebViews

One React hook on the Web Animations API. Reduced motion becomes a fade.

Recordings

Slowed down to a quarter speed

Recorded frame by frame from the demo app. A tile grows into a player, and Back shrinks it into the tile.

Open and back

4× slower

Back mid-flight

4× slower

Reduced motion

4× slower

On a desktop

1×

Usage

Three refs and one call

bun add react-morphcardReact 18 or 19. No other dependencies.
deliveries.tsxReact

A list of cards and one sheet. The card's route, company and status fly into the header.

sheet.cssCSS

The sheet and scrim are positioned over the list and hidden while closed.

The getting started guide walks through it step by step, and the playground lets you change the timing on this site.

Same hook, small screen

In a mobile app or PWA

On a phone the sheet usually covers the whole screen under the app bar. This frame is a small deliveries app built with the same hook. Its list scrolls inside the frame, the tab bar stays put, and the action bar slides up from the bottom.

Slow it down to see the order: the surface opens, the route and company fly, the stops come in one after another. Reduced motion turns all of it into a fade.

It runs in any browser engine React DOM runs in, including installed PWAs and WebViews. It is not for React Native.

Relay

Deliveries

This week · 10 deliveries

Search deliveries
All 10ScheduledIn transitDelivered
  • RotterdamNLAntwerpBE
    Northwind Logistics
    #2041 · Sep 27
    Pickup at 08:30
    Scheduled
  • LyonFRMilanIT
    Bellweather Foods
    #2042 · Sep 27
    2 of 3 stops done
    In transit
  • HamburgDECopenhagenDK
    Fjord Freight
    #2043 · Sep 26
    Signed by M. Holm
    Delivered
  • Saint-Jean-de-LuzFRFrankfurt am MainDE
    Compagnie Générale de Transports et d'Entreposage du Sud-Ouest
    #2044 · Sep 26
    Waiting at the border
    Delayed
  • PortoPTMadridES
    Atlântico Cargo
    #2045 · Sep 25
    ETA 16:45
    In transit
  • ViennaATPragueCZ
    Danube Parcel Co.
    #2046 · Sep 25
    Pickup at 14:00
    Scheduled
  • OsloNOGothenburgSE
    Skagerrak Shipping
    #2047 · Sep 24
    Signed by A. Berg
    Delivered
  • ZurichCHMunichDE
    Alpine Express
    #2048 · Sep 24
    1 of 2 stops done
    In transit
  • BarcelonaESMarseilleFR
    Costa Brava Transports
    #2049 · Sep 23
    Pickup at 07:45
    Scheduled
  • DublinIEManchesterGB
    Liffey Line
    #2050 · Sep 23
    Signed by R. Doyle
    Delivered
state: closed