Phone Stack — Remotion stacked phone screens animation

Q: How do I add Phone Stack to a Remotion project?

Run npx shadcn@latest add @snapcn/phone-stack. The source is copied into components/snap-cn/ (or wherever your components.json points) with anything it depends on, and you own the code from then on — there is no runtime package to keep installed.

Q: What do I need before using Phone Stack?

An existing Remotion project (npx create-video@latest) with a components.json. shadcn init does not recognise Remotion, so the installation guide has you write that file by hand — it takes two minutes. The component is MIT licensed and free.

Installation

$ pnpm dlx shadcn@latest add @snapcn/phone-stack

Needs an existing Remotion project and a components.json. Two-minute setup if this is your first snapcn component.

Component code

The exact file shadcn add copies into your project.

Usage

Each clip gets its own screen. Screens arrive stagger frames apart: the new one rises out of a blur into the front, and every screen already there steps back — smaller, and higher, so its top peeks out above the newest. Screens more than three steps back fade away, so any number of clips works.

import { Composition, staticFile } from "remotion";
import { PhoneStack } from "@/components/snap-cn/phone-stack";

const Scene = () => (
  <PhoneStack
    videos={[
      staticFile("clips/onboarding.mp4"),
      staticFile("clips/dashboard.mp4"),
      staticFile("clips/checkout.mp4"),
    ]}
  />
);

export const RemotionRoot = () => (
  <Composition id="PhoneStack" component={Scene} durationInFrames={120} fps={30} width={1280} height={720} />
);

Clips take a root-relative /… path or an http(s) URL and play muted from the moment their screen arrives; images work too. Screen recordings at 9:19.5 fit exactly; any aspect is cropped to cover.

Props

Prop	Type	Default	Description
`videos`	`string[]`	—	One clip per screen, in the order they arrive
`stagger`	`number`	`14`	Frames between one screen arriving and the next
`time`	`string`	`"9:41"`	The time in the status bar
`background`	`string`	`"#f3f3ee"`	The page
`glowColor`	`string`	`"#cdb4e6"`	The glow the stack rises out of
`statusColor`	`string`	`"#ffffff"`	The status bar's ink over the clips
`speed`	`number`	`1`	Global playback multiplier
`className`	`string`	—	Optional className passed to the outer wrapper

Frequently asked questions

How do I add Phone Stack to a Remotion project?

Run npx shadcn@latest add @snapcn/phone-stack. The source is copied into components/snap-cn/ (or wherever your components.json points) with anything it depends on, and you own the code from then on — there is no runtime package to keep installed.

What is Phone Stack?

Phone Stack is a Remotion stacked phone screens animation for React. Phone screens playing clips rise out of a blur one after another, each pushing the stack back so the older ones peek out on top.

What do I need before using Phone Stack?

An existing Remotion project (npx create-video@latest) with a components.json. shadcn init does not recognise Remotion, so the installation guide has you write that file by hand — it takes two minutes. The component is MIT licensed and free.