Shared Element Expand free

A project card whose picture stretches into the detail page header, using the browser View Transitions with a hand-made fallback.

Customize

Project names

Picture addresses, one per project

One line about each project

How long the picture takes to travel (ms)

Corner roundness of the cards (px)

Delay between the lines of text rising in (ms)

Let the browser animate it when it can (the result looks the same either way)

import SharedExpand from './SharedExpand';

<SharedExpand />

Checking your access…

Dependencies: none