Moodboard Reveal

Installation

$ pnpm dlx shadcn@latest add @snapcn/moodboard-reveal

Component code

The exact file shadcn add copies into your project.

Usage

A four-beat, camera-drives-through montage:

1. Headline — <leadIn> · an inline image that swaps · <emphasis> · <tailIn>, on a near-black dotted field.
2. Gallery — the image cards fly in and scatter into a moodboard.
3. Push — the camera dollies through the gallery (with motion blur) while the background lifts from near-black to off-white.
4. Hero — it lands on a single image, held to the end, with thin wireframe markers drifting.

Pass your own images (used for both the intro swap and the gallery) and a heroImage. Everything is frame-driven, so scrubbing and rendering are deterministic.

// src/Root.tsx
import { Composition, staticFile } from "remotion";
import { MoodboardReveal } from "@/components/snap-cn/moodboard-reveal";

const Reel = () => (
  <MoodboardReveal
    leadIn="that lets you"
    emphasis="filter"
    tailIn="out AI."
    images={[
      staticFile("showcase-assets/438b9e6b50654a44d404fbf358c26e9f.webp"),
      staticFile("showcase-assets/821d815affa6496c39cbdeeec7a84603.jpg"),
      // …up to 8 look best
    ]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="MoodboardReveal"
    component={Reel}
    durationInFrames={150}
    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. Eight portrait images fill the gallery cleanly; fewer are tiled across the slots.

This is a slow camera scale over the whole gallery, which a live <Player> mispaces on a high-refresh display — so the docs preview plays the rendered mp4. Re-render after any change: pnpm run render:previews --only moodboard-reveal.

Props