# reelcn

> Copy-paste Remotion components that adapt to any aspect ratio and restyle from a single theme.

Install any item: `npx shadcn@latest add https://www.reelcn.dev/r/<name>.json`. Files land in `src/reelcn/`; no components.json and no path aliases are needed.

How they work:
- Wrap scenes in `<ThemeProvider theme="midnight">` (themes: midnight, daylight, paper, neon, mono, sunset); `createTheme` makes a brand kit.
- Sizes are design units: `u(n)` is n px when the canvas short side is 1080px, so one component fits 16:9, 9:16 and 1:1.
- Motion props are frames: `delay`, `duration`, `exit`, `motion` (smooth, snappy, bouncy, gentle, linear).
- Components exit automatically at the end of their `<Sequence>`; pass `exit={false}` to hold.

## lib

- [Chart Scale](https://www.reelcn.dev/r/chart-scale.json): Pure math shared by the data components: nice axis ticks, linear scales, an on-theme series palette and jitter-free number formatting.

```tsx
const ticks = niceTicks(0, 87); // [0, 20, 40, 60, 80, 100]
const y = scaleLinear([ticks[0], ticks[ticks.length - 1]], [400, 0]);
const colors = palette(theme.colors.accent, theme.colors.highlight, theme.colors.foreground, 4);
const label = formatter([12.5, 40], "en-US")(12.5); // "12.5"
```

- [Code Tokens](https://www.reelcn.dev/r/code-tokens.json): Tiny dependency-free syntax tokenizer for ts, js, tsx, py, bash and json. Powers code-block and terminal.

```tsx
const lines = tokenize("const answer = 42; // done", "ts");
// lines[0] → [{ text: "const", kind: "keyword" }, { text: " answer ", kind: "plain" }, { text: "=", kind: "punctuation" }, …]
```

- [Core](https://www.reelcn.dev/r/core.json): Theme tokens, responsive design units, platform safe zones and motion presets. Every reelcn component builds on this file.

```tsx
<ThemeProvider theme="midnight">
  <Stage>
    <Center><TextReveal text="Hello" /></Center>
  </Stage>
</ThemeProvider>
```

- [Fonts](https://www.reelcn.dev/r/fonts.json): Loads the curated font set used by the built-in themes, so renders look identical on every machine.

```tsx
import { fonts } from "./fonts";

const heading = `${fonts.instrumentSerif}, ui-serif, Georgia, serif`;
```

- [SFX](https://www.reelcn.dev/r/sfx.json): Thirty CC0 sound effects, played from one component. Streams from www.reelcn.dev, or from your own public folder after `reelcn-sfx-pull`.

```tsx
<Sequence from={30}>
  <Sfx name="whoosh" />
</Sequence>
```

- [Story Scenes](https://www.reelcn.dev/r/story-scenes.json): Draws each of the storyboard's 15 scene types from catalog items; `storyboard` renders stories with it.

```tsx
<SceneView scene={{ type: "stat", label: "Weekly users", value: 48200, delta: 12 }} />
```

- [Story](https://www.reelcn.dev/r/story.json): The storyboard's JSON schema and scene-length rules, as pure functions shared by `storyboard` and every template.

```tsx
import { storyFrames } from "./story";
// 5 s of text + 3 s of image, minus a 15-frame fade: 225 frames at 30 fps.
storyFrames({
  scenes: [
    { type: "text", text: "Ten words take a viewer about four seconds to read" },
    { type: "image", src: "/shot.png" },
  ],
});
```


## text

- [Blur In](https://www.reelcn.dev/r/blur-in.json): Headline whose words fade up out of a soft blur, one after another. (length 30f@30fps · use for Calm, premium intros and brand statements; Titles laid over footage or gradients · avoid Punchy, high-energy hooks — use `pop-in`)

```tsx
<Center>
  <BlurIn text="Quietly, then all at once" />
</Center>
```

- [Char Rise](https://www.reelcn.dev/r/char-rise.json): A short word or name whose characters rise in one after another. (length 30f@30fps · use for Single words, names and short brand lines; Big title cards with only a few letters · avoid Sentences longer than a few words — use `rise-up`)

```tsx
<Center>
  <CharRise text="Launch day" size={150} />
</Center>
```

- [Counter](https://www.reelcn.dev/r/counter.json): Number that counts between two values with Intl formatting, or rolls its digits like an odometer. (length 45f@30fps · use for Revenue, users, downloads and other headline metrics; Prices and percentages that should tick up on screen · avoid A metric with a label and a change indicator — use `stat-counter`; Several metrics at once — use `kpi-grid`)

```tsx
<Center>
  <Counter to={48200} format={{ style: "currency", currency: "USD" }} suffix="/mo" rolling />
</Center>
```

- [Drop In](https://www.reelcn.dev/r/drop-in.json): Headline whose words drop in from above with a slight tilt that settles. (length 30f@30fps · use for Playful announcements, drops and release titles; Friendly, casual brands · avoid Serious or premium tone — use `blur-in`)

```tsx
<Center>
  <DropIn text="Fresh drops every Friday" />
</Center>
```

- [Fit Title](https://www.reelcn.dev/r/fit-title.json): One-line title that sizes itself to fill the available width, measured with the real font once it has loaded. (length 30f@30fps · use for Big one-word or short titles that should fill the frame at every aspect ratio; Titles of unknown length, such as data-driven names or chapter titles · avoid Headlines that should wrap onto several lines — use `text-reveal`)

```tsx
<Center>
  <FitTitle text="Season finale" effect="mask" />
</Center>
```

- [Highlight](https://www.reelcn.dev/r/highlight.json): Sentence with one phrase emphasized by a marker sweep, a hand-drawn underline or circle, or an outlined box. (length 30f@30fps · use for Calling out the key phrase in a quote, claim or hook; Tutorial titles that point at a single term · avoid Cycling through several words in one slot — use `word-rotator`)

```tsx
<Center>
  <Highlight text="Render videos with plain React" highlight="plain React" variant="marker" />
</Center>
```

- [Line Slide](https://www.reelcn.dev/r/line-slide.json): Multi-line statement where each line slides up from behind a mask, one line after another. (length 30f@30fps · use for Two- or three-line statements, with lines separated by "\n"; Manifesto-style sequences and closing statements · avoid A single word or name — use `char-rise`)

```tsx
<Center>
  <LineSlide text={"Write the script.\nRender the story."} align="left" />
</Center>
```

- [Mask Reveal](https://www.reelcn.dev/r/mask-reveal.json): Headline whose words slide up from behind an invisible edge, as if uncovered by a mask. (length 30f@30fps · use for Editorial and cinematic titles; Crisp reveals where fading would feel soft · avoid Multi-line statements that should arrive line by line — use `line-slide`)

```tsx
<Center>
  <MaskReveal text="Made for vertical first" />
</Center>
```

- [Pop In](https://www.reelcn.dev/r/pop-in.json): Headline whose words scale up with a springy overshoot. (length 30f@30fps · use for Energetic hooks, sales and launch callouts; Short labels that should feel lively · avoid Calm or premium tone — use `blur-in`)

```tsx
<Center>
  <PopIn text="Now in beta" size={130} />
</Center>
```

- [Rise Up](https://www.reelcn.dev/r/rise-up.json): Headline whose words rise into place from just below the line. (length 30f@30fps · use for The default choice for clean, confident headlines; Section titles and short-form hooks · avoid Letter-by-letter reveals of a single word — use `char-rise`)

```tsx
<Center>
  <RiseUp text="Every frame is code" accentWords={["code"]} />
</Center>
```

- [Scramble](https://www.reelcn.dev/r/scramble.json): Decodes a line out of random glyphs, resolving characters left to right from a stable seed. (length data-driven · use for Tech, security and launch reveals; Names, codes or numbers that should feel computed · avoid Long sentences — use `text-reveal`)

```tsx
<Center>
  <Scramble text="Access granted" font="mono" seed="login" />
</Center>
```

- [Stamp](https://www.reelcn.dev/r/stamp.json): A line that lands in one hit with a springy scale and a tilt that straightens as it settles. (length 30f@30fps · use for Verdicts and labels such as sold out, approved or new; One- or two-word punchlines · avoid Headlines longer than a few words — use `pop-in`)

```tsx
<Center>
  <Stamp text="Sold out" size={170} />
</Center>
```

- [Text Reveal](https://www.reelcn.dev/r/text-reveal.json): Headline that animates in by word, character or line with rise, blur, fade, scale, drop or mask effects. (length 30f@30fps · use for Hero headlines, section titles and short-form hooks; Any line of up to about twelve words that needs an entrance)

```tsx
<Center>
  <TextReveal text="Ship videos, not keyframes" effect="blur" accentWords={["videos"]} />
</Center>
```

- [Typewriter](https://www.reelcn.dev/r/typewriter.json): Types text out character by character, with pause markers and a caret that blinks once typing stops. (length data-driven · use for Prompts, search queries and chat-style reveals; Quotes and statements that should read at speaking pace · avoid Code listings — use `code-block`; Shell commands with output — use `terminal`)

```tsx
<Center>
  <Typewriter text="Make a launch video^ for vertical" cps={20} />
</Center>
```

- [Word Rotator](https://www.reelcn.dev/r/word-rotator.json): Sentence with one slot that cycles through a list of words by sliding, flipping or blurring them in place. (length sustained · use for Taglines that list audiences, platforms or benefits; Hooks such as "Made for creators / startups / agencies" · avoid Emphasizing one fixed phrase — use `highlight`)

```tsx
<Center>
  <WordRotator before="Made for" words={["creators", "startups", "agencies"]} effect="slide" />
</Center>
```


## motion

- [Animate](https://www.reelcn.dev/r/animate.json): Wrap anything (logo, screenshot, card, image) to give it a themed enter and exit. The swiss-army knife of reelcn. (length 18f@30fps · use for Entrances and exits for logos, screenshots, cards and anything without its own animation; Quick prototypes before reaching for a dedicated component · avoid Headlines — use `text-reveal`)

```tsx
<Animate effect="up" delay={10}>
  <Img src={staticFile("logo.png")} />
</Animate>
```

- [Bento Grid](https://www.reelcn.dev/r/bento-grid.json): Grid of themed feature tiles that reveal one after another and reflow to four, three or two columns by orientation. (length data-driven · use for Product feature overviews, launch recaps and "what's new" slides; Summing up four to eight short points on one screen · avoid Cards in a single row or column, use `stagger`)

```tsx
<Center>
  <BentoGrid
    tiles={[
      { title: "Themes", body: "Six presets, one prop", span: 2, accent: true },
      { title: "Responsive", body: "16:9, 9:16 and 1:1" },
      { title: "Deterministic", body: "Seeded, frame-driven" },
    ]}
  />
</Center>
```

- [Camera](https://www.reelcn.dev/r/camera.json): Virtual camera that pans, zooms, rolls and shakes over whatever it wraps, eased between keyframes. (length data-driven · use for Pushing in on a detail of a screenshot, dashboard or illustration, then pulling back out; Handheld energy or an impact shake on a title card · avoid Giving one element its own zoom or slide entrance, use `animate`)

```tsx
<Camera
  keyframes={[
    { frame: 0, zoom: 1 },
    { frame: 30, x: -210, y: -210, zoom: 2 },
    { frame: 75, zoom: 1 },
  ]}
  shake={4}
>
  <Img src={staticFile("dashboard.png")} style={{ width: "100%" }} />
</Camera>
```

- [Marquee](https://www.reelcn.dev/r/marquee.json): Endless ticker of words or logos that scrolls at a steady speed with softly faded edges. (length sustained · use for Logo walls, keyword bands, "as seen in" strips and breaking-news tickers; A tilted accent band behind a headline for extra movement · avoid A short list that should arrive and then hold still, use `stagger`)

```tsx
<Marquee items={["Remotion", "React", "TypeScript", "shadcn"]} speed={180} />
```

- [Split Screen](https://www.reelcn.dev/r/split-screen.json): Two to four full-bleed panes that wipe in one after another, each laid out as if it were its own canvas. (length 30f@30fps · use for Before and after, side-by-side comparisons, reaction layouts and multi-angle shots; Showing the same component at two sizes, since each pane has its own viewport · avoid Arranging several small cards on one canvas, use `bento-grid`)

```tsx
<SplitScreen labels={["Before", "After"]}>
  <Img src={staticFile("before.png")} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
  <Img src={staticFile("after.png")} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
</SplitScreen>
```

- [Stagger](https://www.reelcn.dev/r/stagger.json): Lays out its children in a row or column and gives each one an `animate` entrance a few frames after the last. (length data-driven · use for Feature lists, logo rows, bullet points and card groups that should arrive one by one; Any set of elements that should read as a sequence rather than a block · avoid Staggering the words of a single headline, use `text-reveal`)

```tsx
<Center>
  <Stagger effect="pop" gap={48}>
    <Img src={staticFile("logo-1.png")} />
    <Img src={staticFile("logo-2.png")} />
    <Img src={staticFile("logo-3.png")} />
  </Stagger>
</Center>
```


## transitions

- [Brand Sweep](https://www.reelcn.dev/r/brand-sweep.json): Layered panels in the brand colors sweep diagonally across the frame, cover the cut, then peel away in reverse order onto the next scene. (length 30f@30fps · use for Branded section breaks in explainers and launch videos; Moving between topics with the brand palette on screen)

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <Chapter1 />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={brandSweep()} timing={linearTiming({ durationInFrames: 30 })} />
  <TransitionSeries.Sequence durationInFrames={90}>
    <Chapter2 />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

- [Card Push](https://www.reelcn.dev/r/card-push.json): The outgoing scene shrinks into a rounded card and flies off while the next scene rises from behind as a card and expands to full frame. (length 30f@30fps · use for Stepping through screens, slides or features like a deck of cards; Product walkthroughs and app demos)

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <FeatureOne />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={cardPush({ direction: "left" })} timing={linearTiming({ durationInFrames: 30 })} />
  <TransitionSeries.Sequence durationInFrames={90}>
    <FeatureTwo />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

- [Circle Burst](https://www.reelcn.dev/r/circle-burst.json): A colored circle bursts out from a point to cover the frame, then a second circle opens from the same point onto the next scene. (length 30f@30fps · use for Moving from a point of interest, like a button, logo or face, into the next scene; Bold, playful scene changes in social clips)

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <AppScreen />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    presentation={circleBurst({ origin: { x: 80, y: 20 } })}
    timing={linearTiming({ durationInFrames: 30 })}
  />
  <TransitionSeries.Sequence durationInFrames={60}>
    <NextScreen />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

- [Glitch](https://www.reelcn.dev/r/glitch.json): A digital hit: RGB channel split and seeded horizontal slice offsets build to a peak, cut to the next scene, then settle. (length 16f@30fps · use for Tech, gaming and music edits; Hard cuts that need a jolt of energy · avoid Calm, premium or corporate pieces — use `card-push`)

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={45}>
    <Hook />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={glitch({ intensity: 1.2 })} timing={linearTiming({ durationInFrames: 16 })} />
  <TransitionSeries.Sequence durationInFrames={60}>
    <Reveal />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

- [Light Flash](https://www.reelcn.dev/r/light-flash.json): Overexposes the outgoing scene into a flash of light, cuts at the peak, and lets the glow burn off the next scene. (length 20f@30fps · use for Beat-synced cuts, reveals and before-and-after moments; Hiding the jump between two very different scenes)

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <Before />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={lightFlash()} timing={linearTiming({ durationInFrames: 20 })} />
  <TransitionSeries.Sequence durationInFrames={60}>
    <After />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

- [Scenes](https://www.reelcn.dev/r/scenes.json): Plays a list of scenes back to back with a transition between each pair, and computes the total length for calculateMetadata. (length data-driven · use for Assembling a whole video from scene components, one entry per scene; Mixing reelcn transitions with the ones built into @remotion/transitions)

```tsx
<Scenes
  items={[
    { node: <Intro />, duration: 90, transition: splitDoors() },
    { node: <Features />, duration: 150, transition: fade(), timing: linearTiming({ durationInFrames: 15 }) },
    { node: <Outro />, duration: 90 },
  ]}
  defaultTiming={linearTiming({ durationInFrames: 24 })}
/>
```

- [Shutter](https://www.reelcn.dev/r/shutter.json): Slats close one after another over the outgoing scene, then open in the same direction onto the next one. (length 30f@30fps · use for Section changes in slideshows, listicles and countdowns; Editorial or retro looks that want a mechanical rhythm)

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <NumberThree />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={shutter({ slats: 8 })} timing={linearTiming({ durationInFrames: 30 })} />
  <TransitionSeries.Sequence durationInFrames={60}>
    <NumberTwo />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

- [Slice Slide](https://www.reelcn.dev/r/slice-slide.json): Cuts the frame into horizontal slices that slide out alternately left and right, each pushed out by the matching slice of the next scene. (length 30f@30fps · use for Stylised scene changes in promos, music and fashion edits; Swapping between two layouts with a strong horizontal rhythm · avoid Scenes that play audio or video, since both render once per slice — use `brand-sweep`)

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <LookOne />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={sliceSlide({ slices: 6 })} timing={linearTiming({ durationInFrames: 30 })} />
  <TransitionSeries.Sequence durationInFrames={60}>
    <LookTwo />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

- [Split Doors](https://www.reelcn.dev/r/split-doors.json): The outgoing scene splits down the middle and its two halves slide apart like doors, revealing the next scene. (length 24f@30fps · use for Revealing a product shot, logo or new chapter behind the current scene; Moving from a title card into the main content · avoid An outgoing scene that plays audio or video, since it renders once per door — use `circle-burst`)

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <TitleCard />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={splitDoors()} timing={linearTiming({ durationInFrames: 24 })} />
  <TransitionSeries.Sequence durationInFrames={90}>
    <ProductShot />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

- [Stripe Wipe](https://www.reelcn.dev/r/stripe-wipe.json): A band of tapered diagonal stripes sweeps across the frame, wiping the next scene in behind it. (length 24f@30fps · use for Energetic scene changes in sports, promo and social edits; Wipes that should carry the brand color)

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <Score />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={stripeWipe({ stripes: 6 })} timing={linearTiming({ durationInFrames: 24 })} />
  <TransitionSeries.Sequence durationInFrames={60}>
    <Highlights />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

- [Tile Reveal](https://www.reelcn.dev/r/tile-reveal.json): A grid of tiles pops in over the outgoing scene in a diagonal or seeded wave, then clears the same way onto the next scene. (length 36f@30fps · use for Openers and section breaks with a designed, grid-based feel; Moving between portfolio, gallery or dashboard scenes)

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <Gallery />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={tileReveal({ pattern: "random" })} timing={linearTiming({ durationInFrames: 36 })} />
  <TransitionSeries.Sequence durationInFrames={60}>
    <Project />
  </TransitionSeries.Sequence>
</TransitionSeries>
```


## backgrounds

- [Aurora](https://www.reelcn.dev/r/aurora.json): Translucent curtains of accent and highlight light that sway slowly across the top of the frame. (length sustained · use for Atmospheric openers, reveals and calm title scenes; Night-sky, wellness or premium product moods · avoid Flat, evenly lit color — use `gradient-mesh`)

```tsx
<AbsoluteFill>
  <Aurora />
  <Center><TextReveal text="Hello" /></Center>
</AbsoluteFill>
```

- [Beams](https://www.reelcn.dev/r/beams.json): Soft shafts of accent light fanning out from a corner and sweeping slowly, like stage lights through haze. (length sustained · use for Launch reveals, award-style titles and event promos; Adding energy behind a logo or headline without busy shapes · avoid A single soft pool of light — use `spotlight`)

```tsx
<AbsoluteFill>
  <Beams origin="top-left" />
  <Center><TextReveal text="Hello" /></Center>
</AbsoluteFill>
```

- [Bokeh](https://www.reelcn.dev/r/bokeh.json): Seeded out-of-focus light discs floating upward, larger and softer ones moving faster for depth. (length sustained · use for Warm, celebratory or lifestyle scenes: holidays, thank-yous, testimonials; A soft, cinematic backdrop behind quotes and names · avoid Tiny pin-sharp points of light — use `starfield`)

```tsx
<AbsoluteFill>
  <Bokeh />
  <Center><TextReveal text="Hello" /></Center>
</AbsoluteFill>
```

- [Brand Solid](https://www.reelcn.dev/r/brand-solid.json): Theme background with a slow, breathing radial tint of the accent color for clean brand scenes. (length sustained · use for Title cards, logo reveals and end screens that need a calm, on-brand canvas; Text-heavy scenes where a busier background would compete with the words · avoid Scenes that need visible movement behind them — use `gradient-mesh`)

```tsx
<AbsoluteFill>
  <BrandSolid />
  <Center><TextReveal text="Hello" /></Center>
</AbsoluteFill>
```

- [Dots](https://www.reelcn.dev/r/dots.json): Dot matrix with a soft wave of brighter, larger dots sweeping or rippling across it. (length sustained · use for Clean tech, SaaS and data scenes that want texture without lines; Behind charts, code blocks and UI mockups · avoid A structured line pattern or a perspective floor — use `grid`)

```tsx
<AbsoluteFill>
  <Dots wave="ripple" />
  <Center><TextReveal text="Hello" /></Center>
</AbsoluteFill>
```

- [Gradient Mesh](https://www.reelcn.dev/r/gradient-mesh.json): Soft color blobs in the theme accent, highlight and surface drifting slowly over the background. (length sustained · use for Hero scenes, launch titles and product intros that need color and gentle motion; Behind glass cards, device frames and stat callouts · avoid A still, single-color brand canvas — use `brand-solid`)

```tsx
<AbsoluteFill>
  <GradientMesh />
  <Center><TextReveal text="Hello" /></Center>
</AbsoluteFill>
```

- [Grain](https://www.reelcn.dev/r/grain.json): Animated film-grain overlay from SVG noise that re-seeds every few frames; place it last, over anything. (length sustained · use for A filmic, tactile finish over gradients, footage and flat color; Breaking up banding in dark gradients such as `gradient-mesh` or `aurora`)

```tsx
<AbsoluteFill>
  <GradientMesh />
  <Center><TextReveal text="Hello" /></Center>
  <Grain />
</AbsoluteFill>
```

- [Grid](https://www.reelcn.dev/r/grid.json): Line grid that pans slowly, or a perspective floor that scrolls toward the viewer and fades into a glowing horizon. (length sustained · use for Tech, developer and product scenes that want structure behind the content; Retro or futuristic openers with the perspective floor · avoid A soft dotted texture — use `dots`)

```tsx
<AbsoluteFill>
  <Grid perspective />
  <Center><TextReveal text="Hello" /></Center>
</AbsoluteFill>
```

- [Spotlight](https://www.reelcn.dev/r/spotlight.json): Soft pool of accent light that drifts slowly or holds a position, with a vignette that darkens the edges. (length sustained · use for Product hero shots, single-idea statements and dramatic reveals; Drawing the eye to one area of the frame without a hard shape · avoid Several directional light shafts — use `beams`)

```tsx
<AbsoluteFill>
  <Spotlight />
  <Center><TextReveal text="Hello" /></Center>
</AbsoluteFill>
```

- [Starfield](https://www.reelcn.dev/r/starfield.json): Seeded field of twinkling stars that drifts sideways with depth parallax or flies slowly toward the viewer. (length sustained · use for Space, AI and "big idea" openers, countdowns and launch intros; A dark, quiet backdrop with a sense of depth · avoid Large soft out-of-focus discs — use `bokeh`)

```tsx
<AbsoluteFill>
  <Starfield travel="toward" />
  <Center><TextReveal text="Hello" /></Center>
</AbsoluteFill>
```


## overlays

- [Arrow](https://www.reelcn.dev/r/arrow.json): Hand-drawn arrow that draws itself from one point to another along a gentle curve, then flicks its head on. (length 20f@30fps · use for Pointing at a detail in a screenshot, chart or product demo; Annotating a feature with a short handwritten-style label · avoid Circling a whole card or number — use `scribble-circle`)

```tsx
<Arrow from={{ x: 27, y: 72 }} to={{ x: 47, y: 48.5 }} label="Best week yet" />
```

- [Callout](https://www.reelcn.dev/r/callout.json): Dims the frame around a target rectangle, rings it, and points a label bubble at it from the side with the most room. (length 26f@30fps · use for Highlighting a button, field or panel in product demos and walkthroughs; Explaining one region of a screenshot or screen recording · avoid A quick pointer that leaves the rest of the frame undimmed — use `arrow`)

```tsx
<Sequence from={30} durationInFrames={90}>
  <Callout target={{ x: 65, y: 71, width: 23, height: 8 }} label="Ship it from here" />
</Sequence>
```

- [Confetti](https://www.reelcn.dev/r/confetti.json): Seeded confetti burst with closed-form physics: launch spread, gravity, air drag, spin and flutter, in theme colors. (length 90f@30fps · use for Launches, milestones and end cards; Celebrating the moment a number or result lands · avoid Emphasis on a single word or button — use `sparkle-burst`)

```tsx
<Sequence from={45} durationInFrames={90}>
  <Confetti origin={{ x: 50, y: 70 }} count={120} />
</Sequence>
```

- [Flash](https://www.reelcn.dev/r/flash.json): Full-frame flash with a near-instant attack and an exponential decay, fired at `delay`. (length 20f@30fps · use for Hitting a beat, a drop or a hard cut; Camera-flash moments and reveals · avoid A slow, warm glow over footage — use `light-leak`)

```tsx
<Flash delay={24} strength={0.8} />
```

- [Light Leak](https://www.reelcn.dev/r/light-leak.json): Warm film light leak: large soft glows sweep across the frame in screen blend, swell to a peak and fade. (length 63f@30fps · use for Organic warmth between shots, over B-roll, photos or a title card; Softening a cut with a filmic glow · avoid A hard, fast accent on a beat — use `flash`)

```tsx
<Sequence from={60} durationInFrames={70}>
  <LightLeak side="right" strength={0.8} />
</Sequence>
```

- [Progress Bar](https://www.reelcn.dev/r/progress-bar.json): Video progress bar on the top or bottom edge, split into chapter segments, with the current chapter's name. (length data-driven · use for Tutorials, explainers and long-form edits with named chapters; Showing viewers how much of a short is left)

```tsx
<Sequence durationInFrames={900}>
  <ProgressBar chapters={[{ at: 0, label: "Intro" }, { at: 240, label: "Setup" }, { at: 600, label: "Result" }]} />
</Sequence>
```

- [Reaction Burst](https://www.reelcn.dev/r/reaction-burst.json): Live-stream style reactions (heart, thumbs-up, star, flame) that pop in, float up with a sway and fade. (length 100f@30fps · use for Showing audience love for a clip, a hot take or a product reveal; Social proof in short-form and live-stream style edits · avoid A single celebratory moment — use `confetti`)

```tsx
<Sequence from={30} durationInFrames={120}>
  <ReactionBurst icons={["heart", "flame"]} count={16} />
</Sequence>
```

- [Safe Zone Guide](https://www.reelcn.dev/r/safe-zone-guide.json): Dev aid that hatches the regions a platform's own UI would cover. Defaults to the generic `useViewport().safe` insets; a `platform` prop swaps in TikTok, Reels, Shorts or YouTube's own reserved zones. (length 24f@30fps · use for Checking a caption, lower third or button clears a platform's UI before publishing; Auditing a layout across 16:9, 9:16 and 1:1 while building a component · avoid Shipping in the final render — this is a development-time guide, not a look)

```tsx
<SafeZoneGuide platform="tiktok" />
```

- [Scribble Circle](https://www.reelcn.dev/r/scribble-circle.json): Hand-drawn loop that circles a target area and overshoots its own start like a marker stroke, with seeded wobble. (length 18f@30fps · use for Circling a number, button or face in a screenshot or recording; Marking the one thing viewers should look at in a busy frame · avoid Pointing at something from a distance — use `arrow`)

```tsx
<ScribbleCircle target={{ x: 65, y: 29, width: 23, height: 17 }} />
```

- [Sparkle Burst](https://www.reelcn.dev/r/sparkle-burst.json): A ring of four-point star sparkles that pops out from a point, spins and fades, over a soft pulse ring. (length 27f@30fps · use for Drawing the eye to a button, price or word the moment it appears; A small "done" or "new" accent on a card · avoid Full-screen celebrations — use `confetti`)

```tsx
<Sequence from={20} durationInFrames={40}>
  <SparkleBurst origin={{ x: 72, y: 64 }} count={8} />
</Sequence>
```


## product

- [App Window](https://www.reelcn.dev/r/app-window.json): Native desktop window with a title bar and no address bar, wrapped around any app content you pass as children. (length data-driven · use for Framing a desktop app, editor or settings panel in a launch video; Two app windows side by side inside `split-screen` · avoid A website with an address bar — use `browser-window`)

```tsx
<Center>
  <AppWindow title="Settings">
    <div style={{ width: "100%", height: "100%", background: "#fff" }} />
  </AppWindow>
</Center>
```

- [Before After](https://www.reelcn.dev/r/before-after.json): Comparison slider: a divider with a handle wipes from one position to another, revealing "after" past it. (length 45f@30fps · use for Redesigns, edits and upgrades — anything with a clear before and after state; A single screenshot that changes at one point, rather than two panes shown at once · avoid Two panes shown side by side the whole time — use `split-screen`)

```tsx
<BeforeAfter labels={["Before", "After"]} before={<OldUI />} after={<NewUI />} />
```

- [Browser Window](https://www.reelcn.dev/r/browser-window.json): Neutral browser chrome with back/forward arrows and a rounded url pill, wrapped around any page content you pass as children. (length data-driven · use for Framing a website, landing page or web app screenshot in a launch or demo video; Two pages side by side inside `split-screen` for a before/after · avoid A native desktop app with a title bar and no address bar — use `app-window`)

```tsx
<Center>
  <BrowserWindow url="reelcn.dev/pricing">
    <div style={{ width: "100%", height: "100%", background: "#fff" }} />
  </BrowserWindow>
</Center>
```

- [Chat Thread](https://www.reelcn.dev/r/chat-thread.json): Message thread that shows three bouncing typing dots before a "them" reply, pops bubbles in, and scrolls up as it fills. (length data-driven · use for A DM, support chat or group thread inside a `phone-frame` or app mockup; Showing a bot or assistant "typing" before it answers · avoid A single command-and-output log — use `terminal`)

```tsx
<PhoneFrame>
  <ChatThread
    messages={[
      { from: "me", text: "Can it render 9:16?", at: 0 },
      { from: "them", text: "Yes — same component, three formats.", at: 30 },
    ]}
  />
</PhoneFrame>
```

- [Code Block](https://www.reelcn.dev/r/code-block.json): Themed editor card with syntax colors, line numbers and a file tab that can type code out, focus lines and mark a diff. (length data-driven · use for Showing an API, config file or snippet in a launch, docs or tutorial video; Typing code on screen, then focusing the lines that matter · avoid Shell sessions with commands and output — use `terminal`)

```tsx
<Center>
  <CodeBlock
    title="render.ts"
    language="ts"
    code={'const video = await render({\n  fps: 30,\n  codec: "h264",\n});'}
    typing={45}
    highlightLines={[3]}
  />
</Center>
```

- [Command Palette](https://www.reelcn.dev/r/command-palette.json): Search panel that types a query, narrows the list live, glides its highlight to the surviving match and presses it. (length data-driven · use for A ⌘K launcher, quick switcher or fuzzy search in a product demo; Showing how fast a search or command feature narrows results · avoid A shell session with commands and output — use `terminal`)

```tsx
<Center>
  <CommandPalette
    items={[{ label: "New project" }, { label: "New template" }, { label: "Open settings" }]}
    query="new t"
    select="New template"
    selectAt={70}
  />
</Center>
```

- [Cursor](https://www.reelcn.dev/r/cursor.json): Pointer that glides between waypoints over whatever is behind it, pressing down and rippling on a click. (length data-driven · use for Demonstrating a click path through a UI mockup, dashboard or website; Drawing the eye to a button just before a `toast` or `callout` appears · avoid A static pointer aimed at one target — use `arrow`)

```tsx
<AbsoluteFill>
  <BrowserWindow url="app.dev">
    <Dashboard />
  </BrowserWindow>
  <Cursor
    waypoints={[
      { x: 20, y: 30, frame: 0 },
      { x: 62, y: 48, frame: 30, click: true },
      { x: 62, y: 70, frame: 60 },
    ]}
  />
</AbsoluteFill>
```

- [Feature Card](https://www.reelcn.dev/r/feature-card.json): Icon, title, body copy and an optional badge on a themed card that rises into place. (length 24f@30fps · use for One feature at a time in a launch video, or several staggered inside `stagger` or `bento-grid`; A pricing tier or plan card with a "New" or "Popular" badge · avoid Several feature tiles on one canvas at once — use `bento-grid`)

```tsx
<Center>
  <FeatureCard title="Zero config" body="Install with shadcn, no path aliases." badge="New" />
</Center>
```

- [Laptop Frame](https://www.reelcn.dev/r/laptop-frame.json): Laptop lid with a bezel around your screen content, sitting on a simple deck with a hinge line. (length data-driven · use for Framing a desktop app, dashboard or website screenshot in a launch video; Two builds side by side inside `split-screen` for a before/after · avoid A phone or tablet screen — use `phone-frame`)

```tsx
<Center>
  <LaptopFrame>
    <div style={{ width: "100%", height: "100%", background: "#fff" }} />
  </LaptopFrame>
</Center>
```

- [Phone Frame](https://www.reelcn.dev/r/phone-frame.json): Rounded phone body with a pill cutout at the top and a gesture bar at the bottom, clipping your screen content to the display's corners. (length data-driven · use for Framing an app screen, onboarding flow or social feed in a product video; Two phones side by side inside `split-screen` for a before/after · avoid A laptop or desktop screen — use `laptop-frame`)

```tsx
<Center>
  <PhoneFrame>
    <div style={{ width: "100%", height: "100%", background: "#fff" }} />
  </PhoneFrame>
</Center>
```

- [Screen Zoom](https://www.reelcn.dev/r/screen-zoom.json): Zooms and pans across whatever you wrap so a rectangle of the content — a button, a chart, a card — fills the frame, eased between keyframes. (length data-driven · use for Pushing in on a detail inside a `browser-window`, `app-window` or dashboard mockup; A guided tour that visits several parts of the same screen in turn · avoid Panning and zooming over a photo or footage with pixel offsets — use `camera`)

```tsx
<BrowserWindow url="app.dev">
  <ScreenZoom
    focus={[
      { frame: 0, x: 0, y: 0, width: 100, height: 100 },
      { frame: 40, x: 55, y: 30, width: 30, height: 24 },
    ]}
  >
    <Dashboard />
  </ScreenZoom>
</BrowserWindow>
```

- [Svg Draw](https://www.reelcn.dev/r/svg-draw.json): Draws any set of SVG paths on stroke by stroke, staggered, with an optional fill fade once each finishes. (length data-driven · use for A logo mark, icon or custom illustration drawing itself on screen; Sketching a diagram or shape that a `callout` or label then points at · avoid A single hand-drawn circle or arrow — use `scribble-circle` or `arrow`)

```tsx
<Center>
  <SvgDraw viewBox="0 0 24 24" paths={["M4 12h16", "M4 6h10", "M4 18h7"]} size={220} />
</Center>
```

- [Terminal](https://www.reelcn.dev/r/terminal.json): Terminal window that types commands, prints their output line by line and scrolls as it fills. (length data-driven · use for Install steps, CLI demos and deploy logs in product and tutorial videos; Any sequence of shell commands with their output · avoid Source files or snippets without a prompt — use `code-block`)

```tsx
<Center>
  <Terminal
    lines={[
      { type: "command", text: "npx shadcn@latest add ./r/terminal.json" },
      { type: "output", text: "Created 3 files" },
    ]}
  />
</Center>
```

- [Toast](https://www.reelcn.dev/r/toast.json): Notification card with a status icon that slides in from an edge, holds, then slides back out. (length 90f@30fps · use for Confirming an action, a deploy, an upload or a saved state in a product demo; A short system message that appears over a UI mockup · avoid A message pointing at part of the screen — use `callout`)

```tsx
<Toast variant="success" title="Deployed" description="Live in 12 regions" />
```


## social

- [Captions: Bold Pop](https://www.reelcn.dev/r/captions-bold-pop.json): Heavy centered captions where the spoken word grows and lifts. (length data-driven · use for Shorts and reels that need captions to carry the edit)

```tsx
<CaptionsBoldPop captions={captions} emphasize={["free"]} />
```

- [Captions: Boxed](https://www.reelcn.dev/r/captions-boxed.json): Each word in its own rounded chip, with the spoken chip filled in the accent color. (length data-driven · use for Busy footage where plain text would get lost)

```tsx
<CaptionsBoxed captions={captions} />
```

- [Captions: Highlight Box](https://www.reelcn.dev/r/captions-highlight-box.json): A marker block travels word by word, like a highlighter following the speech. (length data-driven · use for Explainers and teaching clips where the key word should be unmissable)

```tsx
<CaptionsHighlightBox captions={captions} emphasize={["never"]} />
```

- [Captions: Karaoke](https://www.reelcn.dev/r/captions-karaoke.json): Captions that fill in word by word as they are spoken, and dim the words still to come. (length data-driven · use for Lyric videos and sing-along clips; Tutorials where viewers follow along word by word)

```tsx
<CaptionsKaraoke captions={captions} />
```

- [Captions: Minimal](https://www.reelcn.dev/r/captions-minimal.json): Quiet captions: one line, no effects, with only the spoken word brightening. (length data-driven · use for Interviews and documentary footage where captions should stay out of the way)

```tsx
<CaptionsMinimal captions={captions} />
```

- [Captions: Neon](https://www.reelcn.dev/r/captions-neon.json): Captions where the spoken word glows in the accent color. (length data-driven · use for Night-time and club footage, music clips · avoid Corporate or documentary footage — use `captions-minimal`)

```tsx
<CaptionsNeon captions={captions} />
```

- [Captions: Subtitle Bar](https://www.reelcn.dev/r/captions-subtitle-bar.json): Broadcast-style subtitles on a translucent bar, readable over anything. (length data-driven · use for Long-form video, webinars and anything with a wide audience)

```tsx
<CaptionsSubtitleBar captions={captions} position="bottom" />
```

- [Captions: Word Stack](https://www.reelcn.dev/r/captions-word-stack.json): Words stacked one per line, with the spoken word growing and lifting. (length data-driven · use for Vertical video where a wide caption block would crowd the frame)

```tsx
<CaptionsWordStack captions={captions} maxWords={3} />
```

- [Captions](https://www.reelcn.dev/r/captions.json): Word-synced captions that page like TikTok, highlight the spoken word and pop the words you choose. (length data-driven · use for Shorts, reels and talking-head videos that need burned-in captions; Podcast and tutorial clips watched without sound · avoid A single static line of text — use `text-reveal`)

```tsx
import captions from "../../public/captions/talk.json";

<Captions captions={captions} emphasize={["free", "today"]} variant="bold-pop" />
```

- [Chapter Title](https://www.reelcn.dev/r/chapter-title.json): A numbered chapter card that wipes in over the footage and leaves again. (length 36f@30fps · use for Section breaks in tutorials and long-form video; Naming the step a viewer is about to watch · avoid A speaker's name — use `lower-third`)

```tsx
<Sequence from={300} durationInFrames={110}>
  <ChapterTitle number={2} title="Setting the key light" />
</Sequence>
```

- [Comment Bubble](https://www.reelcn.dev/r/comment-bubble.json): A viewer comment card, optionally marked as a reply, with a like count that ticks up. (length 36f@30fps · use for Answering a comment on camera; Showing the question a video is about to answer · avoid A full post with author metrics — use `post-card`)

```tsx
<Center>
  <CommentBubble name="Katherine" handle="@kj" text="Which mic is that?" replyTo="Ada" likes={42} />
</Center>
```

- [Countdown](https://www.reelcn.dev/r/countdown.json): A ring that empties while the number counts down to zero. (length data-driven · use for Waiting rooms and "starting soon" cards for streams; Timed challenges inside a video)

```tsx
<Sequence durationInFrames={150}>
  <Countdown seconds={5} label="Starting in" />
</Sequence>
```

- [End Screen](https://www.reelcn.dev/r/end-screen.json): Closing screen with a next-video slot, a subscribe slot and a countdown. (length 60f@30fps · use for The last ten seconds of a long-form video; Handing viewers one clear next step)

```tsx
<Sequence from={900} durationInFrames={240}>
  <EndScreen title="Watch this next" nextTitle="How we cut render times in half" seconds={8} />
</Sequence>
```

- [Follow Card](https://www.reelcn.dev/r/follow-card.json): A profile card whose follow button presses itself and flips to "Following", with the count ticking up. (length 50f@30fps · use for Asking for a follow at the end of a short; Introducing a guest or a collaborator · avoid A subscribe ask for long-form video — use `subscribe-cta`)

```tsx
<Center>
  <FollowCard name="Ada Lovelace" handle="@ada" followers="24.8k" />
</Center>
```

- [Hook Title](https://www.reelcn.dev/r/hook-title.json): The opening line of a short, parked at the top of the frame with a drawn underline. (length 30f@30fps · use for The first two seconds of a short, reel or TikTok; Restating the promise over b-roll halfway through · avoid Full headlines in landscape video — use `text-reveal`)

```tsx
<Sequence durationInFrames={90}>
  <HookTitle text="Nobody tells you this about lighting" kicker="Part 3" />
</Sequence>
```

- [Lower Third](https://www.reelcn.dev/r/lower-third.json): Name and title strap that slides in above the bottom safe zone and centers itself in vertical video. (length 30f@30fps · use for Interviews, podcasts, tutorials and talking-head intros; Naming a speaker, product or location on screen)

```tsx
<Sequence durationInFrames={120}>
  <LowerThird name="Ada Lovelace" title="Founder, Analytical Engines" variant="card" />
</Sequence>
```

- [Post Card](https://www.reelcn.dev/r/post-card.json): A platform-neutral social post: avatar, name, handle, text and engagement counts that tick up. (length 40f@30fps · use for Turning a post into a video without copying any platform's interface; Showing praise or a quote in a shareable form · avoid Attributed praise from a customer — use `quote-card`)

```tsx
<Center>
  <PostCard name="Ada Lovelace" handle="@ada" time="2h" text="One timeline, three formats." metrics={{ likes: 1248, comments: 86, shares: 210 }} />
</Center>
```

- [Quote Card](https://www.reelcn.dev/r/quote-card.json): A pulled quote with its attribution, and an oversized quote mark drawn behind it. (length 40f@30fps · use for Customer praise and testimonials; Lifting one line out of an interview · avoid A social post with engagement counts — use `post-card`)

```tsx
<Center>
  <QuoteCard quote="We cut a week of editing down to an afternoon." name="Grace Hopper" role="Head of Video" />
</Center>
```

- [Subscribe CTA](https://www.reelcn.dev/r/subscribe-cta.json): A subscribe button that presses itself, with a bell that rings once after the click. (length 45f@30fps · use for The last five seconds of a video, or right after a payoff; Any moment that asks for one specific action · avoid Several competing asks at once — show one call to action)

```tsx
<Sequence from={120} durationInFrames={90}>
  <SubscribeCta label="Subscribe" note="New videos every Thursday" />
</Sequence>
```


## data

- [Area Chart](https://www.reelcn.dev/r/area-chart.json): Line chart with a gradient fill that is revealed by a clip following each line as it draws. (length 60f@30fps · use for Volume over time: traffic, storage used, cumulative revenue; One or two series where the filled shape carries the story · avoid Three or more overlapping series — use `line-chart`)

```tsx
<Center>
  <AreaChart
    labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
    series={[{ label: "Visitors", points: [3200, 4100, 3900, 5200, 6100, 4800, 7400] }]}
  />
</Center>
```

- [Bar Chart](https://www.reelcn.dev/r/bar-chart.json): Bars that grow in one by one over nice gridlines with counting value labels; vertical in landscape and square, horizontal in portrait. (length 40f@30fps · use for Comparing a handful of categories: revenue by quarter, survey answers, signups by channel; Calling out one bar in the accent while the rest stay muted · avoid Rankings that change over time — use `bar-race`; Trends across many points — use `line-chart`)

```tsx
<Center>
  <BarChart
    data={[
      { label: "Q1", value: 42 },
      { label: "Q2", value: 58 },
      { label: "Q3", value: 51 },
      { label: "Q4", value: 87 },
    ]}
    highlight={3}
    format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
  />
</Center>
```

- [Bar Race](https://www.reelcn.dev/r/bar-race.json): Ranked horizontal bars that grow and swap places smoothly as values change step by step, with a large step label. (length data-driven · use for Rankings over time: adoption by year, votes by round, leaderboard changes; Five to twelve series with a value at every step · avoid A single snapshot — use `bar-chart`)

```tsx
<Sequence durationInFrames={150}>
  <Center>
    <BarRace
      steps={["2021", "2022", "2023", "2024"]}
      series={[
        { label: "Atlas", values: [12, 30, 45, 61] },
        { label: "Nimbus", values: [25, 34, 40, 44] },
        { label: "Quill", values: [8, 20, 52, 70] },
      ]}
    />
  </Center>
</Sequence>
```

- [Donut](https://www.reelcn.dev/r/donut.json): Ring chart whose segments sweep in one after another around a counting total, with a legend beside it (below in portrait and square). (length 50f@30fps · use for Share of a whole: traffic sources, budget split, time spent across a few groups; Two to six segments · avoid A single percentage — use `progress-ring`; Many small categories — use `bar-chart`)

```tsx
<Center>
  <Donut
    label="Visits"
    data={[
      { label: "Search", value: 4200 },
      { label: "Direct", value: 2600 },
      { label: "Social", value: 1500 },
      { label: "Email", value: 700 },
    ]}
  />
</Center>
```

- [KPI Grid](https://www.reelcn.dev/r/kpi-grid.json): Two to six stat cards that pop in one after another, reflowing to up to four columns in landscape (never leaving a lone card on its own row), two in square, and one or two in portrait. (length 75f@30fps · use for A dashboard summary slide: revenue, users, churn and NPS side by side; End-of-video recap of the numbers that mattered · avoid A single metric — use `stat-counter`)

```tsx
<Center>
  <KpiGrid
    items={[
      { label: "MRR", to: 48200, format: { style: "currency", currency: "USD", maximumFractionDigits: 0 }, delta: 12.4 },
      { label: "Active teams", to: 312, delta: 6.1 },
      { label: "Churn", to: 2.1, suffix: "%", delta: -0.4 },
      { label: "NPS", to: 61, delta: 4 },
    ]}
  />
</Center>
```

- [Line Chart](https://www.reelcn.dev/r/line-chart.json): One or more series drawn on over nice gridlines, with a dot and a counting value label riding the tip of each line. (length 60f@30fps · use for Trends over time: monthly signups, latency, revenue run-rate; Comparing two to four series on one axis · avoid Comparing separate categories — use `bar-chart`; Volume or cumulative totals — use `area-chart`)

```tsx
<Center>
  <LineChart
    labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
    series={[
      { label: "Organic", points: [120, 180, 170, 260, 310, 420] },
      { label: "Paid", points: [90, 110, 150, 140, 190, 230] },
    ]}
  />
</Center>
```

- [Progress Ring](https://www.reelcn.dev/r/progress-ring.json): Single percentage drawn as a round-capped ring that fills while the number in its center counts up. (length 45f@30fps · use for Goal completion, adoption rate, uptime, a score out of 100; One number with a short label such as "of teams onboarded" · avoid Splitting a whole into parts — use `donut`; Several numbers side by side — use `kpi-grid`)

```tsx
<Center>
  <ProgressRing value={72} label="Onboarding complete" />
</Center>
```

- [Stat Counter](https://www.reelcn.dev/r/stat-counter.json): Single metric: a label above a big counting number, an optional up/down delta badge beside it, and a caption underneath. (length 60f@30fps · use for A headline KPI on its own slide: revenue, active users, churn; A metric that should show change since last period · avoid Several metrics together — use `kpi-grid`; A bare number with no label — use `counter`)

```tsx
<Center>
  <StatCounter
    label="Monthly recurring revenue"
    to={48200}
    format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
    delta={12.4}
    caption="vs. last month"
  />
</Center>
```

- [Timeline](https://www.reelcn.dev/r/timeline.json): Milestones on a single axis whose line draws on while dots pop and labels rise in sequence; horizontal in landscape and square, vertical in portrait. (length 90f@30fps · use for A roadmap, launch history or step-by-step process with three to seven beats; Company milestones or a project's key dates · avoid Ranked values changing over time — use `bar-race`)

```tsx
<Center>
  <Timeline
    milestones={[
      { label: "Founded", date: "2019", body: "Two co-founders, one laptop" },
      { label: "Seed round", date: "2021", body: "$3.2M raised" },
      { label: "Series A", date: "2023", body: "40 people, 12 countries" },
      { label: "1M events/day", date: "2025" },
    ]}
  />
</Center>
```

- [Versus](https://www.reelcn.dev/r/versus.json): Two-column comparison: numbers become mirrored bars, booleans become check/cross marks, strings stay text, and the side with more wins is highlighted in the accent. (length 70f@30fps · use for Plan or tier comparisons, before/after specs, us-vs-them feature tables; Three to eight rows mixing numbers, yes/no features and short text · avoid A single trend over time — use `line-chart`)

```tsx
<Center>
  <Versus
    left="Starter"
    right="Pro"
    rows={[
      { label: "Price / mo", left: 19, right: 49 },
      { label: "Seats included", left: 5, right: 25 },
      { label: "Priority support", left: false, right: true },
      { label: "Response time", left: "48h", right: "2h" },
    ]}
  />
</Center>
```


## audio

- [Audio Reactive](https://www.reelcn.dev/r/audio-reactive.json): Wraps anything and drives its scale, or a glow, from how loud the audio is right now. (length sustained · use for Making a logo, headline or card move with the track; Reacting to a voice whose tempo you do not know · avoid A known BPM, where pure math is steadier — use `use-beat`)

```tsx
<AudioReactive src={staticFile("track.mp3")} effect="both">
  <Img src={staticFile("logo.png")} />
</AudioReactive>
```

- [Radial Visualizer](https://www.reelcn.dev/r/radial-visualizer.json): Frequency bars arranged around a circle, for cover art and square posts. (length sustained · use for Square and vertical music posts built around cover art; A centred visual when a full-width band would not fit · avoid Wide landscape banners — use `spectrum`)

```tsx
<RadialVisualizer src={staticFile("track.mp3")}>
  <Img src={staticFile("cover.jpg")} style={{ width: "100%", borderRadius: "50%" }} />
</RadialVisualizer>
```

- [Speaker Card](https://www.reelcn.dev/r/speaker-card.json): A speaker's avatar and name, with a ring that swells while they talk. (length sustained · use for Podcast clips and audiograms with two or more voices; Showing who is speaking when there is no camera)

```tsx
<SpeakerCard src={staticFile("episode.mp3")} name="Ada Lovelace" role="Founder" />
```

- [Spectrum](https://www.reelcn.dev/r/spectrum.json): Frequency bars, from bass on the left to treble on the right, moving with the track. (length sustained · use for Music clips and visualisers; Any scene that should feel driven by the track · avoid Speech, where a waveform reads better — use `waveform`)

```tsx
<Spectrum src={staticFile("track.mp3")} bars={48} />
```

- [Use Beat](https://www.reelcn.dev/r/use-beat.json): A pulse that follows a fixed tempo, with no audio analysis: pure math, so it renders identically every time. (length sustained · use for Cutting, popping or shaking anything in time with a music bed; Beat-synced motion when you know the track's BPM · avoid Reacting to a voice or an unknown track — use `audio-reactive`)

```tsx
const { pulse, beat } = useBeat({ bpm: 120 });

<div style={{ scale: String(1 + pulse * 0.2) }}>{beat}</div>
```

- [Waveform](https://www.reelcn.dev/r/waveform.json): The audio's shape, drawn as bars, a line or a mirrored band that moves with the sound. (length sustained · use for Audiograms and podcast clips; Any full-bleed band of motion tied to a voice or a track · avoid A frequency view — use `spectrum`)

```tsx
<Waveform src={staticFile("episode.mp3")} variant="mirror" bars={64} />
```


## templates

- [App Promo](https://www.reelcn.dev/r/app-promo.json): Vertical app ad: the app's name and promise, its screens on a phone or laptop, its rating, and a download call. (length data-driven · use for App store previews and paid social ads; Showing a mobile or desktop app screen by screen · avoid A web product in a browser window — use `product-launch`)

```tsx
<Composition
  id="AppPromo"
  component={AppPromo}
  schema={appPromoSchema}
  defaultProps={appPromoDefaults}
  calculateMetadata={appPromoMetadata}
  width={1080}
  height={1920}
  fps={30}
  durationInFrames={1}
/>
```

- [Audiogram](https://www.reelcn.dev/r/audiogram.json): Square podcast clip with cover art, show and episode titles, a live waveform of the audio, speaker names and captions. (length data-driven · use for Sharing a podcast episode or segment on social feeds; Turning any voice recording into a video · avoid A short vertical teaser built on one quote — use `podcast-teaser`)

```tsx
<Composition
  id="Audiogram"
  component={Audiogram}
  schema={audiogramSchema}
  defaultProps={{ ...audiogramDefaults, audio: staticFile("episode-42.mp3"), captions }}
  calculateMetadata={audiogramMetadata}
  width={1080}
  height={1080}
  fps={30}
  durationInFrames={1}
/>
```

- [Changelog](https://www.reelcn.dev/r/changelog.json): Release video listing what is new, improved and fixed in a version, three changes per card set. (length data-driven · use for Monthly or per-release update videos; Turning a changelog page into something people watch · avoid A whole product story — use `product-launch`)

```tsx
<Composition
  id="Changelog"
  component={Changelog}
  schema={changelogSchema}
  defaultProps={changelogDefaults}
  calculateMetadata={changelogMetadata}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={1}
/>
```

- [Data Story](https://www.reelcn.dev/r/data-story.json): Report video that walks through numbers: a title, then one bar, line, donut or stat scene per section with its caption. (length data-driven · use for Quarterly results, year-in-review and research findings; Turning a dashboard into a narrated walkthrough · avoid A single number — use `stat-counter`)

```tsx
<Composition
  id="DataStory"
  component={DataStory}
  schema={dataStorySchema}
  defaultProps={dataStoryDefaults}
  calculateMetadata={dataStoryMetadata}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={1}
/>
```

- [Feature Short](https://www.reelcn.dev/r/feature-short.json): Vertical short about one feature: a hook, the feature in a line, the feature running on a phone, and a call to action. (length data-driven · use for Social shorts that show off a single feature; Weekly "did you know" clips for a product · avoid A full product story — use `product-launch`)

```tsx
<Composition
  id="FeatureShort"
  component={FeatureShort}
  schema={featureShortSchema}
  defaultProps={featureShortDefaults}
  calculateMetadata={featureShortMetadata}
  width={1080}
  height={1920}
  fps={30}
  durationInFrames={1}
/>
```

- [Listicle Short](https://www.reelcn.dev/r/listicle-short.json): Vertical numbered list: a title, then one scene per item with its number, point and optional image. (length data-driven · use for "Three ways to…" and top-five shorts; Splitting a blog post into a quick video · avoid Mixed scene types — use `storyboard`)

```tsx
<Composition
  id="ListicleShort"
  component={ListicleShort}
  schema={listicleShortSchema}
  defaultProps={listicleShortDefaults}
  calculateMetadata={listicleShortMetadata}
  width={1080}
  height={1920}
  fps={30}
  durationInFrames={1}
/>
```

- [Podcast Teaser](https://www.reelcn.dev/r/podcast-teaser.json): Vertical teaser cut from a podcast: one clip of the audio with its waveform, the show, and a pull quote. (length data-driven · use for Promoting an episode with its best thirty seconds · avoid Whole episodes or segments with captions — use `audiogram`)

```tsx
<Composition
  id="PodcastTeaser"
  component={PodcastTeaser}
  schema={podcastTeaserSchema}
  defaultProps={{ ...podcastTeaserDefaults, audio: staticFile("episode-42.mp3"), clipStart: 734, clipEnd: 762 }}
  calculateMetadata={podcastTeaserMetadata}
  width={1080}
  height={1920}
  fps={30}
  durationInFrames={1}
/>
```

- [Post to Video](https://www.reelcn.dev/r/post-to-video.json): Turns one social post into a vertical video: the post card builds in, its text reveals and its counts climb. (length data-driven · use for Reposting a popular post as a short; Quoting a customer's public post in a video · avoid Several posts in a row — use `storyboard` with post scenes)

```tsx
<Composition
  id="PostToVideo"
  component={PostToVideo}
  schema={postToVideoSchema}
  defaultProps={postToVideoDefaults}
  calculateMetadata={postToVideoMetadata}
  width={1080}
  height={1920}
  fps={30}
  durationInFrames={1}
/>
```

- [Product Launch](https://www.reelcn.dev/r/product-launch.json): Launch video for a product: name and tagline, feature cards, screenshots in a browser window, and a call to action. (length data-driven · use for Announcing a new product or a major version; A hero video for a landing page · avoid One feature in a vertical short — use `feature-short`)

```tsx
<Composition
  id="ProductLaunch"
  component={ProductLaunch}
  schema={productLaunchSchema}
  defaultProps={productLaunchDefaults}
  calculateMetadata={productLaunchMetadata}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={1}
/>
```

- [Storyboard](https://www.reelcn.dev/r/storyboard.json): Turns a JSON story (theme, brand, audio and a list of scenes) into a finished video whose length comes from its content. (length data-driven · use for Whole videos written as data, by hand or by an agent; Rendering one story at 16:9, 9:16 and 1:1 · avoid Scenes you lay out by hand in JSX — use `scenes`)

```tsx
// src/Root.tsx — then: npx remotion render Storyboard out.mp4 --props=story.json
<Composition
  id="Storyboard"
  component={StoryVideo}
  schema={storySchema}
  calculateMetadata={storyMetadata}
  defaultProps={{ scenes: [{ type: "title", title: "Hello from a story" }] }}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={1}
/>
```

- [Talking Head Short](https://www.reelcn.dev/r/talking-head-short.json): Vertical talking-head clip with a three-second hook and word-by-word captions, running as long as the video. (length data-driven · use for Turning a recorded explanation or interview answer into a short; Captioned clips for feeds that autoplay muted · avoid Captions over a layout you build yourself — use `captions`)

```tsx
<Composition
  id="TalkingHeadShort"
  component={TalkingHeadShort}
  schema={talkingHeadShortSchema}
  defaultProps={{ ...talkingHeadShortDefaults, video: staticFile("take-3.mp4"), captions }}
  calculateMetadata={talkingHeadShortMetadata}
  width={1080}
  height={1920}
  fps={30}
  durationInFrames={1}
/>
```

- [Testimonial Reel](https://www.reelcn.dev/r/testimonial-reel.json): Square reel of customer quotes, one card per testimonial, pushed in one after another. (length data-driven · use for Social proof for a landing page or an ad; Collecting launch-day reactions into one clip · avoid One quote on its own — use `quote-card`)

```tsx
<Composition
  id="TestimonialReel"
  component={TestimonialReel}
  schema={testimonialReelSchema}
  defaultProps={testimonialReelDefaults}
  calculateMetadata={testimonialReelMetadata}
  width={1080}
  height={1080}
  fps={30}
  durationInFrames={1}
/>
```

- [Tutorial](https://www.reelcn.dev/r/tutorial.json): Step-by-step coding tutorial: typed code, terminal sessions and screenshots, one step per scene, timed to the typing. (length data-driven · use for Getting-started guides and "how to" videos for developer tools; Walking through a setup one command at a time · avoid A single snippet — use `code-block`)

```tsx
<Composition
  id="Tutorial"
  component={Tutorial}
  schema={tutorialSchema}
  defaultProps={tutorialDefaults}
  calculateMetadata={tutorialMetadata}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={1}
/>
```

- [YouTube Intro](https://www.reelcn.dev/r/youtube-intro.json): Channel opener: the channel mark, then the video's title, joined by an accent sweep. (length data-driven · use for The first seconds of a YouTube video or a series episode · avoid End cards — use `youtube-outro`)

```tsx
<Composition
  id="YoutubeIntro"
  component={YoutubeIntro}
  schema={youtubeIntroSchema}
  defaultProps={youtubeIntroDefaults}
  calculateMetadata={youtubeIntroMetadata}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={1}
/>
```

- [YouTube Outro](https://www.reelcn.dev/r/youtube-outro.json): Ten-second end card with a next-video slot and a subscribe slot, sized for YouTube's end-screen elements. (length data-driven · use for The last seconds of a YouTube video · avoid Openers — use `youtube-intro`)

```tsx
<Composition
  id="YoutubeOutro"
  component={YoutubeOutro}
  schema={youtubeOutroSchema}
  defaultProps={youtubeOutroDefaults}
  calculateMetadata={youtubeOutroMetadata}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={1}
/>
```


## tools

- [Check Determinism](https://www.reelcn.dev/r/check-determinism.json): Scans your source for code that renders differently each time: wall-clock time, unseeded randomness, CSS animation and direct canvas-size reads. (use for Before a final render, or as a CI step)

```tsx
node scripts/reelcn-check-determinism.ts
node scripts/reelcn-check-determinism.ts src remotion
```

- [Contact Sheet](https://www.reelcn.dev/r/contact-sheet.json): Renders one PNG grid of evenly spaced frames from any composition, so a whole video can be reviewed in a single image.

```tsx
node scripts/reelcn-contact-sheet.ts ProductLaunch
node scripts/reelcn-contact-sheet.ts Storyboard --frames 9 --props story.json --out review.png
node scripts/reelcn-contact-sheet.ts MyVideo --entry src/index.ts
```

- [SFX Pull](https://www.reelcn.dev/r/sfx-pull.json): Downloads the reelcn sound pack into your public folder so renders work offline. (use for Rendering on a machine with no network, or in CI; Pinning the sounds so a later reelcn release cannot change them)

```tsx
node scripts/reelcn-sfx-pull.ts
```

- [Transcribe](https://www.reelcn.dev/r/transcribe.json): Turns audio or video into word-level captions JSON for the caption components. (use for Captioning a talking-head short, a podcast clip or a tutorial; Converting an existing .srt into the caption format)

```tsx
node scripts/reelcn-transcribe.ts talk.mp4
node scripts/reelcn-transcribe.ts talk.mp4 --openai --out public/captions/talk.json
node scripts/reelcn-transcribe.ts subtitles.srt
```