Device Morph

A device frame on a design canvas morphs from desktop to tablet to phone while the layout reflows.

Installation

$ pnpm dlx shadcn@latest add @remocn/device-morph

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DeviceMorph } from "@/components/remocn/device-morph";
 
const DeviceMorphScene = () => (
  <DeviceMorph
    images={["/p/1.jpg", "/p/2.jpg", "/p/3.jpg", "/p/4.jpg", "/p/5.jpg", "/p/6.jpg"]}
    reverse={false}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="DeviceMorph"
    component={DeviceMorphScene}
    durationInFrames={205}
    fps={30}
    width={1280}
    height={720}
  />
);

A device frame appears over a size switcher. A cursor picks the tablet size, the frame morphs, then picks the phone size and morphs again, with the content reflowing at each width. Pass your own responsive UI as children (it lays out at the live viewport width), or a flat src screenshot, and set reverse to go from phone to desktop. The built-in dashboard uses staticFile thumbnails from the Remocn repo, so pass your own images. It ships light and dark through theme.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props10

Prop	Type	Default
children	React.ReactNode— Your responsive UI. It lays out at the live viewport width.
src	string— Screenshot shown instead of the built-in dashboard. No reflow.
stops	{ label: string; width: number; height: number }[]DEFAULT_STOPS Exactly three stops, desktop then tablet then phone.
reverse	booleanfalse Go from phone to desktop instead of desktop to phone.
accent	string"#3B5BFD" Accent color of the selection handles and chips.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"light" \| "dark""light" Color scheme. Ships light and dark.
images	string[]DEFAULT_IMAGES Six thumbnails for the built-in project cards. Defaults to repo-only files.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.

childrenReact.ReactNode
Your responsive UI. It lays out at the live viewport width.
srcstring
Screenshot shown instead of the built-in dashboard. No reflow.
stops{ label: string; width: number; height: number }[]
Exactly three stops, desktop then tablet then phone.
DefaultDEFAULT_STOPS
reverseboolean
Go from phone to desktop instead of desktop to phone.
Defaultfalse
accentstring
Accent color of the selection handles and chips.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"light" | "dark"
Color scheme. Ships light and dark.
Default"light"
imagesstring[]
Six thumbnails for the built-in project cards. Defaults to repo-only files.
DefaultDEFAULT_IMAGES
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.