Reel Collage
A photo reel between two captions shuts like an eyelid, the copy swaps, and a collage blooms in around the lines
Installation
$ pnpm dlx shadcn@latest add @snapcn/reel-collageNeeds 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
topLineandbottomLinewhile 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.