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

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