Reel Wall — Remotion 3D video wall carousel

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

Run npx shadcn@latest add @snapcn/reel-wall. 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 Wall?

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-wall

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 ring of vertical clips on a 3D wall. It eases in from rest, moving on twos like the reference it was fitted from, then keeps turning at an even speed for as long as the composition runs — make the composition longer for a longer turn.

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

const Scene = () => (
  <ReelWall videos={[staticFile("clips/1.mp4") /* …your vertical clips */]} />
);

export const RemotionRoot = () => (
  <Composition
    id="ReelWall"
    component={Scene}
    durationInFrames={216}
    fps={24}
    width={1280}
    height={720}
  />
);

Clips take a root-relative /… path or an http(s) URL, play muted, and repeat around the ring. Vertical 9:16 clips fit best; any aspect is cropped to cover. Pass clips at least as long as the composition — a shorter clip stops on its last frame.

Props

Prop	Type	Default	Description
`videos`	`string[]`	—	Clips for the wall, left to right; they repeat around the ring
`background`	`string`	`"#0e0e0e"`	The page behind the wall
`cardColor`	`string`	`"#1a1a1a"`	A card before its clip has a frame to show
`speed`	`number`	`1`	Global playback multiplier
`className`	`string`	—	Optional className passed to the outer wrapper

Frequently asked questions

How do I add Reel Wall to a Remotion project?

Run npx shadcn@latest add @snapcn/reel-wall. 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 Wall?

Reel Wall is a Remotion 3D video wall carousel for React. A curved wall of vertical clips turns past in the dark — it eases in from rest, then keeps turning.

What do I need before using Reel Wall?

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.