Image Expand To Fullscreen

A thumbnail in a feed post lifts off the card and morphs seamlessly into a fullscreen editor, with toolbars sliding in to meet it.

A shared-element transition in the spirit of native iOS photo editors. The image starts life as a thumbnail inside a fake feed post — when the morph fires, the post UI fades, the dark editor canvas swells in underneath, and the image itself rides a single spring all the way to its fullscreen rect. Toolbars slide in from the top and bottom in the last third, called in by the image landing.

Installation

$ pnpm dlx shadcn@latest add @remocn/image-expand-to-fullscreen

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ImageExpandToFullscreen } from "@/components/remocn/image-expand-to-fullscreen";

const ImageExpandScene = () => (
  <ImageExpandToFullscreen
    from={{ left: 460, top: 280, width: 360, height: 200 }}
    to={{ left: 200, top: 120, width: 880, height: 480 }}
    morphAt={30}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ImageExpandToFullscreen"
    component={ImageExpandScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`from`	`{ top, left, width, height }`	—	Source rect of the thumbnail inside the feed post.
`to`	`{ top, left, width, height }`	—	Target rect of the image inside the fullscreen editor.
`borderRadiusFrom`	`number`	`12`	Border radius of the thumbnail in pixels.
`borderRadiusTo`	`number`	`16`	Border radius of the editor image in pixels.
`morphAt`	`number`	`30`	Frame at which the shared-element morph fires.
`imageColorA`	`string`	`"#ff6b6b"`	First stop of the faked image gradient.
`imageColorB`	`string`	`"#845ec2"`	Second stop of the faked image gradient.
`imageColorC`	`string`	`"#4d8dff"`	Third stop of the faked image gradient.
`feedBackground`	`string`	`"#f4f4f5"`	Page background color of the feed (before the morph).
`editorBackground`	`string`	`"#0a0a0a"`	Canvas background color of the editor (after the morph).
`accent`	`string`	`"#fafafa"`	Accent color used for toolbar text and the active tool chip.
`postAuthor`	`string`	`"Maya Larsson"`	Author name shown on the feed post.
`postBody`	`string`	—	Caption shown on the feed post above the thumbnail.
`speed`	`number`	`1`	Playback speed multiplier.
`className`	`string`	—	Optional className passed to the root container.

Notes

One spring, four properties

top, left, width, and height are all derived from a single spring() value. Independent springs would drift out of phase and the image would warp during travel.

Toolbars arrive last

The toolbars only slide in across [0.5, 1] of the morph spring — that delay is what makes them feel summoned by the image landing, instead of racing it to the finish line.