# Device Morph
URL: https://remocn.dev/docs/media/device-morph

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

- Install: `npx shadcn@latest add @remocn/device-morph`
- Vibe: clean
- Natural length: 170f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `boolean` | `false` | Go from phone to desktop instead of desktop to phone. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the selection handles and chips. |
| `speed` | `number` | `1` | 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. |

## Use when
- Showing that a product or site is responsive, with the layout actually reflowing at each size.
- A feature beat where a cursor picks tablet then phone in a size switcher.
- A design or builder tool demo showing one design across three devices.

## Don't use when
- The change is a light and dark theme switch — use `theme-flip`.
- You want a rendered set of phone screens side by side — use `phone-trio`.
- A fixed screenshot should be toured region by region — use `screenshot-tour`.