Reel Collage — Remotion photo collage animation

Q: How do I add Reel Collage to a Remotion project?

Run npx shadcn@latest add @snapcn/reel-collage. 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 Reel Collage?

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/reel-collage

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

A three-beat scene, 2.6 seconds of motion then a hold:

Reel — eight shots cut between topLine and bottomLine while everything slowly zooms.
Eyelid — the frame shuts to a hairline and the captions fold into one stacked pair.
Collage — the copy swaps to swapTop / swapBottom, the lines split apart, and six pictures bloom in around them on a peach flush.

Every curve was fitted on a reference recording's timestamps, so the timing is the reference's, frame for frame.

// src/Root.tsx
import { Composition, staticFile } from "remotion";
import { ReelCollage } from "@/components/snap-cn/reel-collage";

const Scene = () => (
  <ReelCollage
    topLine="The videos"
    bottomLine="That you ship"
    swapTop="Especially on"
    swapBottom="Launch day"
    slides={[staticFile("shots/1.jpg") /* …8 shots */]}
    collage={[staticFile("shots/a.jpg") /* …6 pictures */]}
  />
);

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

Images take a root-relative /… path (served by Next in the Player, rewritten through staticFile() in a render) or an http(s)/data URL. Each is cropped to cover its frame, so any aspect works. Fewer than eight shots or six pictures are repeated.

The reel cuts every three to six frames and the captions scale, which a live <Player> mispaces — so the docs preview plays the rendered mp4. Re-render after any change: pnpm run render:previews --only reel-collage.

Props

Prop	Type	Default	Description
`topLine`	`string`	`"The videos"`	Caption above the reel
`bottomLine`	`string`	`"That you ship"`	Caption below the reel
`swapTop`	`string`	`"Especially on"`	First line after the swap — drifts up and left
`swapBottom`	`string`	`"Launch day"`	Second line after the swap — drifts down and right
`slides`	`string[]`	—	The reel, in cut order. Eight shots; the last is the one that shuts. Defaults to snapcn's own scenes
`collage`	`string[]`	—	Six pictures, in slot order: left, centre, top right, bottom left, bottom right, centre right
`background`	`string`	`"#f5f4f2"`	The page
`glowColor`	`string`	`"#dfe7e3"`	The soft glow the scene sits on
`flushColor`	`string`	`"#fdc7bc"`	The flush that rises around the edges as the collage blooms
`textColor`	`string`	`theme foreground`	Caption ink
`fontFamily`	`string`	—	A label from fonts.ts or a family you have loaded. Defaults to Inter
`speed`	`number`	`1`	Global playback multiplier
`className`	`string`	—	Optional className passed to the outer wrapper
`theme`	`Partial<SnapCnTheme>`	—	Design-system token overrides
`mode`	`"light" \| "dark"`	—	Which end of the design system to resolve tokens against

Frequently asked questions

How do I add Reel Collage to a Remotion project?

Run npx shadcn@latest add @snapcn/reel-collage. 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 Reel Collage?

Reel Collage is a Remotion photo collage animation for React. A photo reel between two captions shuts like an eyelid, the captions fold into one line, then split as a collage blooms in on a peach flush.

What do I need before using Reel Collage?

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.