# Components URL: https://remocn.dev/docs/components Every component in remocn, grouped by category A complete index of every component in remocn. Browse by category or jump straight to the one you need. ## Layout Scene scaffolding — backgrounds and camera wrappers. - [Backdrop](https://remocn.dev/docs/layout/backdrop) — Full-frame fill with an optional rounded, shadowed content frame for any scene - [Drift](https://remocn.dev/docs/layout/drift) — Wrap any scene in a slow camera push-in so no frame is ever static ## Typography Text effects, reveals, and kinetic type. ### Reveals - [SoftBlurIn](https://remocn.dev/docs/typography/soft-blur-in) — Per-character fade-in with a gentle blur and upward motion - [PerCharacterRise](https://remocn.dev/docs/typography/per-character-rise) — Letters slide up from below with no blur — crisp and kinetic - [BottomUpLetters](https://remocn.dev/docs/typography/bottom-up-letters) — Letters rise from below in a pronounced staircase, one symbol at a time - [TopDownLetters](https://remocn.dev/docs/typography/top-down-letters) — Letters descend from above in a pronounced staircase, one symbol at a time - [Handwrite](https://remocn.dev/docs/typography/handwrite) — Letters laid down one pose at a time, each with its own slant and baseline wobble - [SpringScaleIn](https://remocn.dev/docs/typography/spring-scale-in) — Words pop in with a soft overshoot scale, like a spring settling - [MicroScaleFade](https://remocn.dev/docs/typography/micro-scale-fade) — A calm, tiny scale pop for subtle premium polish - [ScaleDownFade](https://remocn.dev/docs/typography/scale-down-fade) — Subtle premium settle-in with a restrained scale-down fade on exit - [BlurOutUp](https://remocn.dev/docs/typography/blur-out-up) — Words arrive clean and depart upward with increasing blur - [FocusBlurResolve](https://remocn.dev/docs/typography/focus-blur-resolve) — A premium focus pull from heavy blur to crisp text, then a soft blur-out exit - [LineByLineSlide](https://remocn.dev/docs/typography/line-by-line-slide) — Each line slides in from the left with a staggered flow - [StaggeredFadeUp](https://remocn.dev/docs/typography/staggered-fade-up) — Words rise from below with a soft cascading delay - [MaskRevealUp](https://remocn.dev/docs/typography/mask-reveal-up) — Lines reveal upward with a soft masked feel and compact stagger - [TrackingIn](https://remocn.dev/docs/typography/tracking-in) — Letter-spacing collapses from wide to normal with a spring snap ### Highlights - [InlineHighlight](https://remocn.dev/docs/typography/inline-highlight) — Animates one word inside a sentence from a base color to a brand color - [MarkerHighlight](https://remocn.dev/docs/typography/marker-highlight) — Marker bar sweeps in behind a phrase, optionally inverting the text color - [InkUnderline](https://remocn.dev/docs/typography/ink-underline) — A hand-dragged ink stroke that draws itself across in a few stop-motion poses - [ShimmerSweep](https://remocn.dev/docs/typography/shimmer-sweep) — Bright gradient sweeps across dim text, lighting it up ### Dynamic Text - [Typewriter](https://remocn.dev/docs/typography/typewriter) — Character-by-character text reveal with a deterministic blinking cursor - [HandCount](https://remocn.dev/docs/typography/hand-count) — A number that counts up in stop-motion poses, rewritten by hand at every pose - [SlotMachineRoll](https://remocn.dev/docs/typography/slot-machine-roll) — Numbers and characters roll into place like a casino reel - [RolodexFlip](https://remocn.dev/docs/typography/rolodex-flip) — Cycle a word through a list of values with a 3D rolodex card flip - [ValueSwap](https://remocn.dev/docs/typography/value-swap) — Swap a value in place with a vertical slide so the layout never shifts ### Hero & Display - [InfiniteMarquee](https://remocn.dev/docs/typography/infinite-marquee) — Endlessly scrolling horizontal text band - [PerspectiveMarquee](https://remocn.dev/docs/typography/perspective-marquee) — Marquee tilted into 3D space with depth fade ### Tech & Glitch - [MatrixDecode](https://remocn.dev/docs/typography/matrix-decode) — Random characters scramble and resolve into the target string - [RGBGlitchText](https://remocn.dev/docs/typography/rgb-glitch-text) — Three-channel RGB split with a brief horizontal jitter ### Text Transitions - [PerWordCrossfade](https://remocn.dev/docs/typography/per-word-crossfade) — One phrase fades out as the next fades in, word by word - [FadeThrough](https://remocn.dev/docs/typography/fade-through) — Old text fades out as new fades in, Material-style - [SharedAxisY](https://remocn.dev/docs/typography/shared-axis-y) — Per-word hard-cut staircase for sharp editorial swaps - [SharedAxisZ](https://remocn.dev/docs/typography/shared-axis-z) — Scale-based depth transition for focus shifts ### Kinetic - [ShortSlideRight](https://remocn.dev/docs/typography/short-slide-right) — The whole phrase glides in from the left while words reveal in sequence - [KineticCenterBuild](https://remocn.dev/docs/typography/kinetic-center-build) — Words enter from the right and push the line until the phrase locks centered - [ShortSlideDown](https://remocn.dev/docs/typography/short-slide-down) — Words drop in from above and stack into a centered composition ## UI Blocks Pre-assembled interface elements: code editors, layouts, charts, and workflow visualizations. ### Code & CLI - [GlassCodeBlock](https://remocn.dev/docs/ui-blocks/glass-code-block) — Premium frosted-glass code window with rim light and traffic-light controls - [TerminalSimulator](https://remocn.dev/docs/ui-blocks/terminal-simulator) — CLI build simulation with chunked log output and step-function scrolling - [TerminalCursorZoom](https://remocn.dev/docs/ui-blocks/terminal-cursor-zoom) — Camera rides the typing cursor, dollying across a terminal as a command types at high zoom ### Data & System - [AnimatedLineChart](https://remocn.dev/docs/ui-blocks/animated-line-chart) — SVG line chart drawn left-to-right via stroke-dashoffset - [AnimatedBarChart](https://remocn.dev/docs/ui-blocks/animated-bar-chart) — Bars spring up from the baseline with deterministic stagger ### Paper & Scrapbook - [CheckList](https://remocn.dev/docs/ui-blocks/check-list) — A handwritten checklist that writes itself out, then ticks and strikes through every done item - [PaperSticker](https://remocn.dev/docs/ui-blocks/paper-sticker) — A taped paper chip that slaps onto the scene over two stop-motion poses - [Polaroid](https://remocn.dev/docs/ui-blocks/polaroid) — An instant-photo frame with a handwritten caption for video, images, or live compositions - [Reel](https://remocn.dev/docs/ui-blocks/reel) — A fixed centered card where images stack on the z-axis and each blooms open over the last ## Transitions Scene transitions, camera moves, and stylized wipes. ### Camera Motion - [WhipPan](https://remocn.dev/docs/transitions/whip-pan) — Whip the camera sideways with motion blur so both scenes fly through in one move - [PushThrough](https://remocn.dev/docs/transitions/push-through) — Dolly through the outgoing scene while the next one approaches from the depth - [FocusPull](https://remocn.dev/docs/transitions/focus-pull) — Rack focus from one scene to the next through a soft defocus breath - [ZoomBlur](https://remocn.dev/docs/transitions/zoom-blur) — Push the outgoing scene through the viewer while the incoming one resolves out of blur - [PageTurn](https://remocn.dev/docs/transitions/page-turn) — The exiting scene swings up and away like a notebook page in stop-motion poses ### Shader - [SwirlDissolve](https://remocn.dev/docs/transitions/swirl-dissolve) — Unwind a swirl shader open and wind it shut to reveal the next scene - [DitherDissolve](https://remocn.dev/docs/transitions/dither-dissolve) — Dissolve one scene into the next through a drifting field of dither pixels - [PerlinDissolve](https://remocn.dev/docs/transitions/perlin-dissolve) — Sweep a perlin-noise threshold across the frame to dissolve into the next scene - [SmokeDissolve](https://remocn.dev/docs/transitions/smoke-dissolve) — Expand a smoke ring outward across the frame to reveal the next scene - [GrainDissolve](https://remocn.dev/docs/transitions/grain-dissolve) — Disintegrate the outgoing scene into soft grainy shapes and condense the next out of the noise - [WaveWipe](https://remocn.dev/docs/transitions/wave-wipe) — Sweep a grainy wave up across the frame and reveal the next scene from below - [RippleZoom](https://remocn.dev/docs/transitions/ripple-zoom) — Fly the camera through the center of grainy ripple rings while the next scene approaches from the depth - [WarpDissolve](https://remocn.dev/docs/transitions/warp-dissolve) — Melt the outgoing scene into a folding domain-warp field that straightens into the next ### Stylized - [AsciiDissolve](https://remocn.dev/docs/transitions/ascii-dissolve) — Dissolve one scene into the next through a drifting field of ASCII glyphs - [CaretWipe](https://remocn.dev/docs/transitions/caret-wipe) — Sweep a typing caret across the frame, wiping the outgoing scene into the next - [IconScatter](https://remocn.dev/docs/transitions/icon-scatter) — Scatter a field of icons over the cut, hiding the scene swap at the field's peak - [GlitchCut](https://remocn.dev/docs/transitions/glitch-cut) — Tear a hard cut into displaced slices with channel split and corrupted blocks - [EmberBurn](https://remocn.dev/docs/transitions/ember-burn) — Set the outgoing frame on fire so it boils, chars, and blows away as sparks that carry its own colour - [ParticleDissolve](https://remocn.dev/docs/transitions/particle-dissolve) — Grind the frame into drifting grey dust and let the next scene coalesce back out of it - [GridWave](https://remocn.dev/docs/transitions/grid-wave) — Send a wave across the frame that raises the picture into solid blocks and sets them down carrying the next scene - [Displacement](https://remocn.dev/docs/transitions/displacement) — Shear the frame into a grid of offset colour-fringed tiles and settle them back on the next scene ### Scene Sequencers Sequencers rather than presentations — they own the whole run of scenes and the boundary between them. - [SlideSwapScenes](https://remocn.dev/docs/transitions/slide-swap) — Shove one scene off the canvas and spring the next in from the opposite edge - [SpringSettleScenes](https://remocn.dev/docs/transitions/spring-settle) — Shrink a scene away as one group, hold the stage empty for a beat, then land the next from above ## Effects Physical overlays and hand-made motion. - [PaperWobble](https://remocn.dev/docs/effects/paper-wobble) — Per-pose reshoot jitter that makes any content feel hand-placed on a desk - [InkArrow](https://remocn.dev/docs/effects/ink-arrow) — A hand-drawn arrow that draws itself from one point to another, head popping on the final pose - [ScribbleCircle](https://remocn.dev/docs/effects/scribble-circle) — A brush circle that sweeps itself around a region of the frame, opening thin and closing thick - [CrumpleToss](https://remocn.dev/docs/effects/crumple-toss) — Crushes an element into a ball of paper and throws it out of frame - [Confetti](https://remocn.dev/docs/effects/confetti) — A one-shot burst of paper confetti for milestone and celebration beats ## Compositions Full scenes built by composing primitives and UI blocks. ### Hero & Outro - [EcosystemConstellation](https://remocn.dev/docs/compositions/ecosystem-constellation) — Central logo orbited by integration satellites with pulsing data lines - [InfiniteBentoPan](https://remocn.dev/docs/compositions/infinite-bento-pan) — Camera diagonally drifts across an oversized bento grid behind a soft vignette ### Product Showcases - [LiveCodeCompilation](https://remocn.dev/docs/compositions/live-code-compilation) — Split-screen where typed code on the left snaps a live UI preview on the right --- # ChatGPT URL: https://remocn.dev/docs/ai/chat-gpt Animated ChatGPT composer that types a prompt and morphs the voice button into a send button - Install: `npx shadcn@latest add @remocn/chat-gpt` - Vibe: tech - Natural length: 150f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/chat-gpt ``` > **Note** > > Installing `chat-gpt` pulls the `caret` primitive and the `remocn-ui` core lib (which provides the shared `useTypewriter` hook) via `registryDependencies`, plus the `Inter` font via `@remotion/google-fonts` automatically. No additional install needed. ## Usage Standalone in a Remotion `` — renders immediately after install: ```tsx // src/Root.tsx import { Composition } from "remotion"; import { ChatGpt } from "@/components/remocn/chat-gpt"; const ChatGptScene = () => ( ); export const RemotionRoot = () => ( ); ``` Timeline: heading + pill + chips ease in (0–16), default state with blinking caret holds (16–42), the prompt types in from frame 42, the blue voice button morphs into the send button the instant text appears, and the suggestion chips fade out, then holds to the end. ### With Backdrop Renders transparent and single-theme — supply the background via `Backdrop`; edit the copied file to re-theme: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; import { ChatGpt } from "@/components/remocn/chat-gpt"; ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `greeting` | `string` | `"What's on your mind today?"` | Sans heading above the input | | `placeholder` | `string` | `"Ask anything"` | Muted placeholder before typing | | `prompt` | `string` | `"Make a sunset over a calm ocean"` | The text that types in character-by-character | | `accentColor` | `string` | `"#2F6FED"` | Blue voice-button color | | `speed` | `number` | `1` | Animation speed multiplier (minimum 1 so the prompt finishes typing) | ## Notes - **Button morph:** The voice-to-send morph is gated purely on text presence — the moment the prompt has any characters, the send button appears. - **Suggestion chips:** The three suggestion chips fade out once typing starts. - **Offline-friendly:** No network requests or images are used, so the preview works offline and MP4 export requires no CORS setup. - **Shared hook:** Reuses the `useTypewriter` hook and the `caret` primitive shared with the other chat components. ## Use when - Announcing a ChatGPT integration or GPT-powered feature where the OpenAI brand must be recognizable. - Showing a prompt-to-result workflow where the ChatGPT interface is the entry point. - A comparison video contrasts multiple AI products — use this for the ChatGPT card, `claude-chat` for Claude. ## Don't use when - The product being demoed is Claude — use `claude-chat` instead to match Anthropic's UI and warm color palette. - The product is Vercel's v0 — use `v0` instead, which replicates the v0 dark textarea and mic-to-send morph. - The product is a CLI/terminal AI agent — use `claude-code` or `opencode` instead. --- # Claude Chat URL: https://remocn.dev/docs/ai/claude-chat Animated Claude chat input that types a prompt and morphs the waveform button into a send button - Install: `npx shadcn@latest add @remocn/claude-chat` - Vibe: tech - Natural length: 150f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/claude-chat ``` > **Note** > > Installing `claude-chat` pulls the `Inter` and `Fraunces` fonts via `@remotion/google-fonts` automatically. No additional install needed. ## Usage Standalone in a Remotion `` — renders immediately after install: ```tsx // src/Root.tsx import { Composition } from "remotion"; import { ClaudeChat } from "@/components/remocn/claude-chat"; const ClaudeChatScene = () => ( ); export const RemotionRoot = () => ( ); ``` Timeline: card + greeting ease in (0–16), default state with blinking caret holds (16–42), the prompt types in from frame 42, and the waveform button morphs into the terracotta send button the instant text appears, then holds to the end. ### With Backdrop The component renders transparent by default — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors. ```tsx import { Composition } from "remotion"; import { ClaudeChat } from "@/components/remocn/claude-chat"; import { Backdrop } from "@/components/remocn/backdrop"; const ClaudeChatScene = () => ( ); export const RemotionRoot = () => ( ); ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `greeting` | `string` | `"Back at it, Dima"` | Serif greeting headline shown above the input | | `placeholder` | `string` | `"Try: draft an email · summarize a doc · plan your week"` | Muted placeholder shown before typing begins | | `prompt` | `string` | `"Draft a launch tweet for our new release"` | The text that types in character-by-character | | `modelName` | `string` | `"Opus 4.8"` | Model label in the toolbar | | `modelTier` | `string` | `"Max"` | Tier label shown next to the model name | | `accentColor` | `string` | `"#D97757"` | Terracotta accent used for the sunburst and send button | | `speed` | `number` | `1` | Animation speed multiplier (minimum 1 so the prompt finishes typing) | ## Notes - **Button morph:** The waveform-to-send morph is gated purely on text presence — the moment the prompt has any characters, the terracotta send button appears. - **Static mic:** The microphone button stays static throughout the animation. - **Offline-friendly:** No network requests or images are used, so the preview works offline and MP4 export requires no CORS setup. - **Serif greeting:** The greeting headline uses the `Fraunces` serif typeface. ## Use when - Announcing a Claude integration or Anthropic-powered feature where the Claude brand must be visible. - Showcasing a prompt workflow where claude.ai is the UI surface — the warm terracotta accent is the brand signal. - A multi-AI comparison video needs the Claude card alongside `chat-gpt` and `v0`. ## Don't use when - The product is Claude Code CLI — use `claude-code` instead, which shows the terminal welcome screen with `cwd` and agent context. - The product is ChatGPT — use `chat-gpt` instead for the correct pill-input and blue accent. - The integration is with OpenCode's TUI — use `opencode` instead. --- # Claude Code URL: https://remocn.dev/docs/ai/claude-code Animated Claude Code CLI welcome screen that types a command into the terminal prompt - Install: `npx shadcn@latest add @remocn/claude-code` - Vibe: tech - Natural length: 160f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/claude-code ``` > **Note** > > Installing `claude-code` pulls the `caret` primitive and the `remocn-ui` core lib (which provides the shared `useTypewriter` hook) via `registryDependencies`, plus the `JetBrains Mono` font via `@remotion/google-fonts` automatically. No additional install needed. ## Usage Standalone in a Remotion `` — renders immediately after install: ```tsx // src/Root.tsx import { Composition } from "remotion"; import { ClaudeCode } from "@/components/remocn/claude-code"; const ClaudeCodeScene = () => ( ); export const RemotionRoot = () => ( ); ``` Timeline: terminal window + welcome box ease in (0–20), default state with the block cursor blinking at the prompt holds (20–48), the command types into the prompt from frame 48, then holds to the end. ### With Backdrop Renders transparent and single-theme — supply the background via `Backdrop`; edit the copied file to re-theme: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; import { ClaudeCode } from "@/components/remocn/claude-code"; ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `title` | `string` | `"Claude Code v2.0.0"` | Box title on the top border | | `userName` | `string` | `"Meaghan"` | Name in the welcome line | | `model` | `string` | `"Sonnet 4.5 • Max 20x"` | Model line in the left column | | `cwd` | `string` | `"/users/meaghan/code/apps"` | Working directory line | | `placeholder` | `string` | `Try "edit to ..."` | Muted prompt placeholder before typing | | `prompt` | `string` | `"edit src/theme.ts to add a dark mode toggle"` | The command that types in character-by-character | | `accentColor` | `string` | `"#D97757"` | Terracotta accent for the dashed borders and headings | | `speed` | `number` | `1` | Animation speed multiplier (minimum 1 so the command finishes typing) | ## Notes - **Sample data:** The Recent activity and What's new lists use built-in sample data. - **Dark by default:** Defaults to the dark terminal look. - **Offline-friendly:** No network requests or images are used, so the preview works offline and MP4 export requires no CORS setup. - **Shared hook:** Reuses the `useTypewriter` hook and the `caret` primitive (rendered as a block cursor) shared with the other chat components. ## Use when - Depicting a Claude Code / agentic-CLI workflow as a recognizable branded surface in a dev-tool demo. - You want a coding-agent prompt to type itself out with the authentic welcome-screen chrome. - The scene calls for a terminal-app card rather than a raw shell — recent-activity and what's-new panels carry product context. ## Don't use when - You need a generic, unbranded terminal — use `terminal-simulator`. - You're depicting a different product's UI — use the matching card (`opencode`, `v0`, `chat-gpt`, `claude-chat`). - You only need a typed command line with a cursor and no app frame — use `typewriter` over a plain surface. --- # AI URL: https://remocn.dev/docs/ai Animated AI tool interfaces — chat composers and CLI welcome screens that type a prompt Recreations of the interfaces people open every day to talk to AI — chat composers and coding-agent CLIs. Each one types a prompt on the timeline and shares the same `useTypewriter` hook and `caret` primitive. ## Chat composers - [ClaudeChat](https://remocn.dev/docs/ai/claude-chat) — Claude chat input — types a prompt and the waveform button morphs into a send button - [ChatGPT](https://remocn.dev/docs/ai/chat-gpt) — ChatGPT composer — types a prompt, morphs the voice button to send, and fades the suggestion chips - [v0](https://remocn.dev/docs/ai/v0) — Vercel v0 composer — types into the dark textarea and morphs the mic button into a send button ## Coding agents - [ClaudeCode](https://remocn.dev/docs/ai/claude-code) — Claude Code CLI welcome screen — types a command into the terminal prompt with a block cursor - [OpenCode](https://remocn.dev/docs/ai/opencode) — OpenCode TUI welcome screen — types a query into the input below the wordmark --- # OpenCode URL: https://remocn.dev/docs/ai/opencode Animated OpenCode TUI welcome screen that types a query into the input - Install: `npx shadcn@latest add @remocn/opencode` - Vibe: tech - Natural length: 150f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/opencode ``` > **Note** > > Installing `opencode` pulls the `caret` primitive and the `remocn-ui` core lib (which provides the shared `useTypewriter` hook) via `registryDependencies`, plus the `JetBrains Mono` font via `@remotion/google-fonts` automatically. No additional install needed. ## Usage Standalone in a Remotion `` — renders immediately after install: ```tsx // src/Root.tsx import { Composition } from "remotion"; import { OpenCode } from "@/components/remocn/opencode"; const OpenCodeScene = () => ( ); export const RemotionRoot = () => ( ); ``` Timeline: wordmark + input box + hints ease in (0–18), default state with the block cursor blinking holds (18–48), the query types into the input from frame 48, then holds to the end. ### With Backdrop Renders transparent and single-theme — supply the background via `Backdrop`; edit the copied file to re-theme: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; import { OpenCode } from "@/components/remocn/opencode"; ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `placeholder` | `string` | `"Ask anything... "` | Muted prompt prefix before the query | | `query` | `string` | `"What is the tech stack of this project?"` | The text that types in character-by-character | | `agentName` | `string` | `"Build"` | Agent label in the status line shown in the accent color | | `modelName` | `string` | `"Kimi K2.5"` | Model name in the status line | | `provider` | `string` | `"Moonshot AI"` | Provider name in the status line | | `accentColor` | `string` | `"#2B7FFF"` | Blue accent bar and agent label color | | `speed` | `number` | `1` | Animation speed multiplier (minimum 1 so the query finishes typing) | ## Notes - **Dark by default:** Defaults to the dark OpenCode look. - **Offline-friendly:** No network requests or images are used, so the preview works offline and MP4 export requires no CORS setup. - **Shared hook:** Reuses the `useTypewriter` hook and the `caret` primitive (rendered as a block cursor) shared with the other terminal and chat components. ## Use when - Depicting the OpenCode TUI as a recognizable branded surface in a dev-tool demo. - A coding-agent query should type itself into the authentic welcome screen with model/provider context. - The scene wants a terminal-UI card rather than a raw shell. ## Don't use when - You're depicting a different product — use the matching card (`claude-code`, `v0`, `chat-gpt`, `claude-chat`). - You need a generic, unbranded terminal — use `terminal-simulator`. - You only need a typed line with a cursor and no app chrome — use `typewriter`. --- # v0 URL: https://remocn.dev/docs/ai/v0 Animated Vercel v0 composer that types a prompt and morphs the mic button into a send button - Install: `npx shadcn@latest add @remocn/v0` - Vibe: tech - Natural length: 150f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/v0 ``` > **Note** > > Installing `v0` pulls the `caret` primitive and the `remocn-ui` core lib (which provides the shared `useTypewriter` hook) via `registryDependencies`, plus the `Inter` font via `@remotion/google-fonts` automatically. No additional install needed. ## Usage Standalone in a Remotion `` — renders immediately after install: ```tsx // src/Root.tsx import { Composition } from "remotion"; import { V0 } from "@/components/remocn/v0"; const V0Scene = () => ( ); export const RemotionRoot = () => ( ); ``` Timeline: heading + box ease in (0–16), default state with blinking caret holds (16–42), the prompt types in from frame 42, the white mic button morphs into a send button the instant text appears, then holds to the end. ### With Backdrop Renders transparent and single-theme — supply the background via `Backdrop`; edit the copied file to re-theme: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; import { V0 } from "@/components/remocn/v0"; ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `greeting` | `string` | `"What do you want to create?"` | Bold heading above the box | | `placeholder` | `string` | `"Ask v0 to build…"` | Muted placeholder before typing | | `prompt` | `string` | `"a landing page for my SaaS with pricing and testimonials"` | The text that types in character-by-character | | `modelName` | `string` | `"v0 Max"` | Model chip label in the toolbar | | `projectName` | `string` | `"Project"` | Project selector label | | `speed` | `number` | `1` | Animation speed multiplier (minimum 1 so the prompt finishes typing) | ## Notes - **Dark by default:** Defaults to the dark v0 look. - **Button morph:** The mic-to-send morph is gated purely on text presence — the moment the prompt has any characters, the send button appears. - **Offline-friendly:** No network requests or images are used, so the preview works offline and MP4 export requires no CORS setup. - **Shared hook:** Reuses the `useTypewriter` hook and the `caret` primitive shared with the other chat components. ## Use when - Depicting the Vercel v0 composer as a recognizable branded surface in a generative-UI demo. - A build prompt should type itself in with the mic→send button morph as the action beat. - The scene wants the v0 product surface specifically, not a generic chat box. ## Don't use when - You're depicting a different product — use the matching card (`chat-gpt`, `claude-chat`, `claude-code`, `opencode`). - You need a general AI chat exchange rather than a prompt composer — use `chat-gpt` or `claude-chat`. - You only need a typed input with a cursor and no app chrome — use `typewriter`. --- # Ecosystem Constellation URL: https://remocn.dev/docs/compositions/ecosystem-constellation A central product logo orbited by integration satellites with pulsing data lines - Install: `npx shadcn@latest add @remocn/ecosystem-constellation` - Vibe: tech - Natural length: 240f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/ecosystem-constellation ``` ## Usage ```tsx // src/Root.tsx import { Composition } from "remotion"; import { EcosystemConstellation } from "@/components/remocn/ecosystem-constellation"; const EcosystemConstellationScene = () => ( ); export const RemotionRoot = () => ( ); ``` ### With Backdrop Renders its scene transparent — supply the background via `Backdrop`: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; import { EcosystemConstellation } from "@/components/remocn/ecosystem-constellation"; ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `satelliteCount` | `number` | `6` | Number of orbiting integration satellites (clamped to 3..8) | | `centerLabel` | `string` | `"V"` | Single character or short label rendered inside the central hub | | `accentColor` | `string` | `"#a855f7"` | Color of the hub, glow, and connection lines | | `speed` | `number` | `1` | Time multiplier applied as frame × speed. Above 1 the satellites assemble and orbit sooner | | `className` | `string` | — | Optional className for the outer container | ## Use when - The story is "we plug into everything" — one hub product ringed by the tools it connects to. - You want recognizable integration marks on screen without shipping any logo assets: GitHub, Vercel, Stripe, Slack, Linear, Figma, Notion and Discord are inline SVGs in the component. - The shot has to hold for a while — satellites assemble once on a staggered spring, then orbit and fire their connection lines one at a time indefinitely. ## Don't use when - You need your own integration logos; the eight marks are hardcoded in the file, so swapping them means editing the copied component. - You just want a set of brand chips to arrive and hold with no orbit; `logo-enter` springs a stacked group in one-by-one. --- # Compositions URL: https://remocn.dev/docs/compositions Full scenes built by composing primitives and UI blocks Higher-level templates that combine multiple primitives, UI blocks, and transitions into finished shots: heroes, product showcases, and journeys. ## Hero & Outro - [EcosystemConstellation](https://remocn.dev/docs/compositions/ecosystem-constellation) — Central logo orbited by integration satellites with pulsing data lines - [InfiniteBentoPan](https://remocn.dev/docs/compositions/infinite-bento-pan) — Camera diagonally drifts across an oversized bento grid behind a soft vignette ## Product Showcases - [LiveCodeCompilation](https://remocn.dev/docs/compositions/live-code-compilation) — Split-screen where typed code on the left snaps a live UI preview on the right --- # Infinite Bento Pan URL: https://remocn.dev/docs/compositions/infinite-bento-pan A hypnotic diagonal camera glide over an oversized grid of bento cards - Install: `npx shadcn@latest add @remocn/infinite-bento-pan` - Vibe: data - Natural length: 300f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/infinite-bento-pan ``` ## Usage ```tsx // src/Root.tsx import { Composition } from "remotion"; import { InfiniteBentoPan } from "@/components/remocn/infinite-bento-pan"; const InfiniteBentoPanScene = () => ( ); export const RemotionRoot = () => ( ); ``` ### With Backdrop Renders its scene transparent — supply the background via `Backdrop`: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; import { InfiniteBentoPan } from "@/components/remocn/infinite-bento-pan"; ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `panSpeed` | `number` | `1` | Multiplier for the diagonal camera distance traveled across the duration. Clamped to a single full traversal at 1. | | `accentColor` | `string` | `"#7c3aed"` | Color used by chart strokes, bar fills, counters, and logo gradients | | `speed` | `number` | `1` | Multiplier applied to the current frame for global timing control | | `className` | `string` | — | Optional className for the outer container | ## Use when - You need an ambient establishing shot that says "a lot is happening here" without asking anyone to read a single number. - The shot should be one uninterrupted camera move — the diagonal traversal is interpolated across the composition's whole `durationInFrames`, so a longer duration slows the glide rather than changing its path. - A background layer is wanted behind a title or logo, with dozens of dashboard cards drifting past and a built-in vignette darkening the frame edges. ## Don't use when - The figures on screen have to mean something — every counter, stat and chart here is sine-driven filler, so use `animated-line-chart` or `animated-bar-chart` for a number the viewer should actually read. - You need the camera to slow down, hold, or land on one specific card; the pan is a single linear diagonal with no easing and no dwell. - You want a horizontal loop rather than a camera over a grid; `infinite-marquee` and `perspective-marquee` scroll a strip seamlessly instead. --- # Live Code Compilation URL: https://remocn.dev/docs/compositions/live-code-compilation A split-screen where code is typed on the left and the right-side UI snaps to match in a single frame - Install: `npx shadcn@latest add @remocn/live-code-compilation` - Vibe: tech - Natural length: 260f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/live-code-compilation ``` ## Usage ```tsx // src/Root.tsx import { Composition } from "remotion"; import { LiveCodeCompilation } from "@/components/remocn/live-code-compilation"; const LiveCodeCompilationScene = () => ( ); export const RemotionRoot = () => ( ); ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `accentColor` | `string` | `"#3b82f6"` | Color used for the JSX prop highlight, the HMR flash, and the default button background | | `speed` | `number` | `1` | Time multiplier applied as frame × speed. The typing schedule is a fixed set of frame constants, so this shifts the whole sequence rather than remapping it cleanly — leave it at 1 unless you are matching an external beat | | `className` | `string` | — | Optional className for the outer container | ## Use when - You want to show cause and effect for a developer audience: a style prop finishes typing on the left and the button on the right changes on that exact frame. - The pitch needs an HMR moment — the preview button carries `transition: none`, so every property lands as a hard snap rather than an ease. - You need a self-contained developer-tooling beat that takes no props beyond an accent colour and runs its own typing schedule to completion. ## Don't use when - The code on screen has to be yours — the eight typed fragments and the resulting button are hardcoded, while `glass-code-block` and `glass-code-walk` take arbitrary code as a `code` prop. - The shot is about commands and their output rather than an editor next to a preview; `terminal-simulator` types commands and rolls older lines off the top. - The split should read as a conversation driving the result; `chat-to-preview-layout` shrinks a chat column while the preview column expands. --- # Anti-patterns URL: https://remocn.dev/docs/craft/anti-patterns The dozen mistakes that recur when a video is generated, each with the fix beside it Common mistakes when generating remocn videos. Each is something a model tends to get wrong. ## Clipping a component by under-budgeting its Sequence Every component has a natural length. Budget the `Sequence` around it — under-budgeting cuts the animation off mid-motion, over-budgeting leaves dead air. ```tsx // ❌ blur-out-up needs ~90f, gets cut at 30 // ✅ ``` Natural lengths for every component are listed in [`/llms-components.txt`](https://remocn.dev/llms-components.txt). ## Mounting a transition as a component Transitions are presentations for `@remotion/transitions` — pass them to `TransitionSeries.Transition`, never mount them directly. ```tsx // ❌ // ✅ ``` ## Animation-tier props on a UI primitive Primitives (`remocn-ui`) are state-based and have **no `speed`**. Drive them with `state`. ```tsx // ❌ // ✅ ``` ## Wrong canvas size The standard composition is `1280×720 @ 30fps`. Components are laid out for it. Don't invent `1920×1080` and wonder why things are off-center. ## Animating layout properties Animate `transform` (and individual `translate` / `scale`), never `top` / `left` / `width` / `height` — layout animation reflows every frame and breaks split layouts. ```tsx // ❌ left: interpolate(frame, [0,30], [0,200]) // ✅ transform: `translateX(${interpolate(frame,[0,30],[0,200])}px)` ``` ## Non-deterministic code Renders are multi-pass — `Math.random()`, `setInterval` / `setTimeout` and `Date.now()` all produce flicker or diverging frames. ```tsx // ❌ const x = Math.random(); // ✅ import { random } from "@remotion/random"; const x = random(`seed-${frame}`); ``` ## Mishandling registryDependencies Dependencies install **automatically** — don't tell the user to add them manually, and don't inline-copy a dependency's code. Also don't import deeper than one path segment (`@/components/remocn/`); the tsconfig glob doesn't resolve `/helpers`. ## Loading fonts mid-render Load fonts once before render via `@remotion/google-fonts` (`loadFont()`), not inside a component body per frame. Unloaded fonts flash a fallback in the export. ## Hardcoding a background on a component remocn components render **transparent** — they don't own a background. Set the scene background with [`backdrop`](/docs/layout/backdrop) or your own container, not by hardcoding a fill into the component. ## Slop styling on your own additions ALL-CAPS plus wide tracking plus gradient text plus glow shadows on text *you* add. See [Design defaults](/docs/craft/design-defaults). ## Everything enters on one frame Stagger sibling entrances by 3–6 frames. Landing a whole group simultaneously reads robotic. See [Motion principles](/docs/craft/motion-principles) → follow-through and overlapping action. ## Promoting the wrong layer under a slow zoom Text under [`drift`](/docs/layout/drift) trembles — glyph rasters snap to whole device pixels while the zoom keeps them in sub-pixel motion. The fix is one `willChange: "transform"` layer per **text container**. Never promote per-word or per-character spans (many small text layers shimmer even at rest) and never `Drift` itself (borders become resampled texture, so 1px lines pulse between sharp and blurry as the scale creeps). ```tsx // ❌
{scene}
 — borders pulse // ❌ chars.map((c) => {c}) — shimmer at rest // ✅ bordered card unpromoted; inner text block gets willChange: "transform" ``` --- # Design defaults URL: https://remocn.dev/docs/craft/design-defaults Restraint rules for the text, chrome and cards you add yourself, plus the palette and fonts the library already uses These are defaults for content **you author** — your own text, scene chrome, cards, and overlays. They keep output from reading as generic AI-slop. They are **not** retroactive rules for the prebuilt remocn components. > **Scope and exception** > > Never strip these traits from a component whose essence *is* the effect. `tracking-in` is > letter-spacing; the shader backdrops and the social cards are gradients; some primitives use > subtle elevation. The rules govern your additions, not the library. ## No decorative letter-spacing Don't widen tracking on text you add. It reads as "designed by AI". ```tsx // ✅ default tracking
Ship faster
// ❌ decorative wide tracking
SHIP FASTER
``` **Exception:** [`tracking-in`](/docs/typography/tracking-in) animates letter-spacing as its whole effect — that's intentional. ## No uppercase or ALL-CAPS defaults Prefer sentence case. Don't `text-transform: uppercase` and don't write ALL-CAPS string literals as defaults. ```tsx // ✅ // ❌ ``` Use ALL-CAPS only when the design genuinely calls for it (e.g. a glitch/tech label), not as a reflex for emphasis. ## No gradient text-fills or decorative washes Gradients belong on **backgrounds** that are meant to be gradients — not as text fills or decorative overlays sprinkled on cards. ```tsx // ✅ gradient as an intentional background
Clear, solid text on top
// ❌ gradient-clipped text + decorative wash

Slop headline

``` **Exception:** [`shimmer-sweep`](/docs/typography/shimmer-sweep) uses `background-clip: text` deliberately; social-card cover and avatar fallbacks render gradients by design. ## No glow or heavy shadows No colored glows, no large blur radii, no multi-layer drop-shadows. Use a 1px border or a small, neutral elevation if you need separation. ```tsx // ✅ subtle elevation boxShadow: "0 1px 2px rgba(0,0,0,0.08)" border: "1px solid #e5e5e5" // ❌ glow / oversized shadow boxShadow: "0 0 80px 20px rgba(14,165,233,0.6)" filter: "blur(60px)" // decorative glow blob ``` Threshold to avoid: shadow or `filter` blur `> ~24px`, any `spread`, any colored/glow shadow, stacked shadow layers. Decorative radial-gradient or blur "glow blobs" are never acceptable. **Exception:** components that intentionally model real UI elevation (cards, modals) keep their designed shadow — don't flatten them. ## Design tokens When you author your own text, surfaces, or chrome, pull from the palette the library already uses so your additions don't clash with the components. ### Canvas `1280×720 @ 30fps`. Font weights in use: `400 · 500 · 600 · 700`. ### Palette | Role | Hex | |---|---| | Primary text (on light) | `#171717` | | Text on dark | `#fafafa` / `#ffffff` | | Background — near-black | `#0a0a0a` / `#050505` | | Surface — zinc | `#27272a` | | Accent — green / success | `#22c55e` | | Accent — sky | `#0ea5e9` | | Accent — violet | `#a855f7` / `#7c3aed` | | Brand — warm (Claude) | `#D97757` | Stay within this set for your own elements. Brand cards (`claude-chat`, `claude-code`, `v0`, `chat-gpt`) carry their own brand hex — don't override it. ### Fonts Loaded through `@remotion/google-fonts`. | Use | Font | |---|---| | UI / body | `Inter` | | Display | `Manrope` | | Serif display | `Fraunces` | | Code / mono | `JetBrainsMono` / `GeistMono` | Load fonts before render (`@remotion/google-fonts/Inter` → `loadFont()`), never mid-frame. --- # Craft URL: https://remocn.dev/docs/craft The house rules behind a remocn video — restraint in design, intent in motion, and the mistakes that give a generated video away The component pages tell you what each block does. This section tells you how to put them together without the result reading as machine-made. Three pages, in the order they bite: - [Design defaults](/docs/craft/design-defaults) — what your **own** additions should look like. Sentence case, default tracking, solid text, no glow. The library's components are exempt where the effect *is* the point. - [Motion principles](/docs/craft/motion-principles) — the classic animation principles reduced to the eight that matter when you assemble scenes from prebuilt blocks, each mapped to a Remotion mechanic and a component that demonstrates it. - [Anti-patterns](/docs/craft/anti-patterns) — the dozen mistakes that recur, with the fix beside each one. Clipped sequences, transitions mounted as components, `speed` on a primitive. > **Writing for an agent** > > These pages are written to be read by coding agents as much as by people. Each is served as raw > Markdown at the same URL with `.md` appended, and the > [remocn skill](/docs/getting-started/agent-skill) points agents here. --- # Motion principles URL: https://remocn.dev/docs/craft/motion-principles The classic animation principles reduced to the eight that matter when you assemble scenes from prebuilt blocks The 12 classic animation principles, adapted to **composing Remotion videos from remocn blocks**. Each entry gives the principle, the Remotion mechanic that expresses it, a remocn component that demonstrates it, and a do/avoid tuned to remocn's restraint. This page is about **which** principle and **when** — intent. For **how** the APIs work (easing curves, sequencing, spring config), read the Remotion docs. Where a principle pushes toward boldness (squash, exaggeration), the cap in [Design defaults](/docs/craft/design-defaults) always wins. remocn components drive motion with `spring()` and `interpolate()` + `Easing`; the examples below use that same idiom. The eight principles here are routinely useful when assembling scenes. The remaining four are character-animation territory and are compressed at the end. ## Anticipation A short wind-up before the action makes it feel intentional: a drawer dips before it expands. - **Mechanic:** `spring()` with light overshoot, or a brief reverse `interpolate` (e.g. `−4px`) for 1–3 frames before the main move. - **remocn:** [`spring-scale-in`](/docs/typography/spring-scale-in). - **Do/Avoid:** keep the wind-up to 1–3 frames, ≤110% scale. ❌ No bouncy cartoon recoil. ## Staging Direct the eye: one clear idea per scene. Clear the stage before introducing the next element. - **Mechanic:** `` / `` to isolate beats; stagger entrances so only one focal element moves at a time; dim or scale down what's leaving. - **remocn:** most [compositions](/docs/compositions). - **Do/Avoid:** one focal action per beat. ❌ Don't enter five elements on the same frame. ## Follow-through and overlapping action Nothing stops at once; elements arrive staggered. Lighter things lead, heavier lag. - **Mechanic:** per-element delay offsets (`frame - index * stagger`) on the same animation. - **remocn:** [`staggered-fade-up`](/docs/typography/staggered-fade-up), [`short-slide-right`](/docs/typography/short-slide-right). - **Do/Avoid:** stagger 3–6 frames between siblings. ❌ Don't land a whole group on one frame (reads robotic) and don't over-stagger (feels sluggish). ## Slow in and slow out Ease into and out of poses — almost nothing should move linearly. - **Mechanic:** `interpolate(..., { easing: Easing.out(Easing.cubic) })`; a sharp curve reads snappy, a gentle one graceful. - **remocn:** transitions ([`whip-pan`](/docs/transitions/whip-pan), [`focus-pull`](/docs/transitions/focus-pull)), most text reveals. - **Do/Avoid:** default to ease-out for entrances. ❌ Linear `interpolate` for visible motion unless it's a constant drift (e.g. marquee, grid pan). ## Arc Living motion follows curves, not straight lines — especially cursors and gestures. - **Mechanic:** drive `x` and `y` from separate eased interpolations, or a bezier path. - **remocn:** [`cursor`](/docs/ui/components/cursor) and `useCursorPath`, the social cards' cursor travel to the Follow button. - **Do/Avoid:** curve cursor and hand paths. ❌ No straight diagonal cursor jumps. ## Secondary action Supporting motion that reinforces the primary action without stealing focus. - **Mechanic:** a small parallel channel — a cursor ripple on click, a shadow that breathes as a card opens, a caret blink under typing. - **remocn:** [`x-follow-card`](/docs/social/x-follow-card) (ripple at click), [`typewriter`](/docs/typography/typewriter) (caret blink). - **Do/Avoid:** secondary motion stays subtle and on-theme. ❌ Don't add competing animation that splits attention. ## Timing Frame counts set weight: fast reads light, slow reads heavy. Vary timing for contrast. - **Mechanic:** budget in frames at the composition fps (remocn defaults to 30fps; component durations run ~90–300 frames). The `speed` prop scales the animation tier. - **remocn:** every animation-tier component (`speed`); composition `durationInFrames`. - **Do/Avoid:** match duration to weight — a heavy hero assemble is slower than a toast. ❌ Don't reuse one duration for everything; it kills rhythm. ## Exaggeration, capped Push slightly past literal reality for clarity — but remocn's house style is restraint. - **Mechanic:** a touch of overshoot on `spring()`, a brief ≤110% scale peak. - **remocn:** [`spring-scale-in`](/docs/typography/spring-scale-in), [`micro-scale-fade`](/docs/typography/micro-scale-fade). - **Do/Avoid:** subtle UI exaggeration only (≤110%, gentle overshoot). ❌ No stretched or cartoon exaggeration. This is the principle most likely to collide with [Design defaults](/docs/craft/design-defaults); the cap wins. ## Rarely needed when composing blocks Character-animation territory — reach for these only when hand-drawing motion, not when assembling catalog components. - **Squash and stretch** — at most a 2–4% `scaleX`/`scaleY` volume trade on a hard landing (`spring-scale-in`, `confetti`); rubber-band squash on text or cards fights the design defaults. - **Straight-ahead vs pose-to-pose** — remocn is pose-to-pose by construction: `interpolate(frame, [k0, k1, k2], [v0, v1, v2])` keyframes are your poses. Straight-ahead (frame-by-frame) is for hand-drawn organic effects. - **Solid drawing** — keep one `perspective` and vanishing point per scene when stacking 3D layers ([`push-through`](/docs/transitions/push-through), [`perspective-marquee`](/docs/typography/perspective-marquee)). - **Appeal** — emergent from staging, timing and restraint, not a knob. More motion is not more appeal. --- # Confetti URL: https://remocn.dev/docs/effects/confetti Deterministic confetti burst for Remotion — seeded particles with gravity, spin, and flutter - Install: `npx shadcn@latest add @remocn/confetti` - Vibe: playful - Natural length: 90f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/confetti ``` ## Usage Confetti is an overlay — render it on top of any scene and set `startFrame` to the frame the burst should fire: ```tsx // src/Root.tsx import { Composition } from "remotion"; import { Confetti } from "@/components/remocn/confetti"; const ConfettiScene = () => ( ); export const RemotionRoot = () => ( ); ``` Every piece is generated from a seeded PRNG, so a given `seed` renders an identical burst on every machine — required for deterministic Remotion output and headless MP4 export. Particles launch radially from the origin, fall under `gravity`, and flutter as they spin. ## Props | Prop | Type | Default | Description | |---|---|---|---| | `particleCount` | `number` | `140` | Number of confetti pieces | | `colors` | `string[]` | `6 brand colors` | Palette each piece is drawn from | | `originX` | `number` | `0.5` | Burst origin X as a 0..1 fraction of the canvas | | `originY` | `number` | `0.5` | Burst origin Y as a 0..1 fraction of the canvas | | `startFrame` | `number` | `0` | Frame the burst fires on | | `lifetime` | `number` | `90` | How long the burst lives, in frames | | `power` | `number` | `17` | Initial launch speed (px/frame at the 720px reference height) | | `gravity` | `number` | `0.45` | Downward acceleration (px/frame² at the 720px reference height) | | `size` | `number` | `13` | Base piece size in reference px | | `seed` | `number` | `1` | PRNG seed — the same seed renders an identical burst every time | ## Notes - **Deterministic:** Particles come from a `mulberry32` seeded PRNG, never `Math.random()`, so renders are frame-stable and reproducible. - **Overlay:** The component is a transparent, `pointer-events: none` `AbsoluteFill` — layer it over any composition. - **Used by:** `x-followers-overview` fires this on the follower-count reveal. ## Use when - A milestone moment needs a celebratory payoff — product launch, plan completion, success screen. - You want a deterministic particle burst that renders identically on every export pass (seed-controlled). - The effect should fire mid-composition at a specific frame via `startFrame`. ## Don't use when - The video has a clean, minimal, or corporate tone — confetti reads as celebration-specific and breaks professional pacing; use a subtle shader backdrop like `shader-grain-gradient` instead. - You need a looping ambient particle background — confetti is a one-shot burst with gravity falloff, not a loop; use `shader-dot-orbit` for sustained motion. - The burst should originate from a specific UI element offscreen — `originX`/`originY` are normalized 0–1 to the frame, not element-relative; compose with `AbsoluteFill` positioning instead. --- # Crumple Toss URL: https://remocn.dev/docs/effects/crumple-toss Crushes an element into a ball of paper and throws it out of frame - Install: `npx shadcn@latest add @remocn/crumple-toss` - Vibe: paper - Natural length: 27f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/crumple-toss ``` ## Usage Everything else in the kit **arrives**. This is the piece that takes something off the desk: it crushes one element into a ball and throws it away while the scene around it keeps running. That unlocks the beat product videos lean on — *this is how it used to work* → crumple → *here is the new way*. Stack the replacement behind it and it is revealed as the ball leaves. ```tsx // src/Root.tsx import { AbsoluteFill, Composition } from "remotion"; import { CrumpleToss } from "@/components/remocn/crumple-toss"; const BeforeAfterScene = () => (
); export const RemotionRoot = () => ( ); ``` The children are never modified — each wedge renders its own copy and clips to its slice — so a `polaroid`, a chart, or a whole composed card can be thrown as-is. `width` and `height` are required: the fold geometry is computed in pixels, and measuring the child would not survive Remotion's server-side render. It is the same call `scribble-circle` makes. ### It is an exit, not a transition `crumple-toss` removes **one element** while everything else carries on. It is not a `TransitionPresentation` and does not belong in a ``. For a scene-level paper exit, `page-turn` replaces the whole frame. ### The card folds into the ball — there is no swap This is the part worth understanding, because the naive version is visibly wrong. The component does **not** hide your card and reveal a ball on top; you would see the cut. Instead the card is sliced into wedges radiating from its centre, and each wedge carries its own piece of the content while it folds inward, rotates, and shrinks. The wad **is** the card, folded. At rest the wedges tile the card exactly — their areas sum to the whole box — so before `at` there is nothing to see. `segments` sets how many pieces the paper tears into; more pieces read as thinner paper. Each wedge is then cut again, radially, into `layers` panels: a core panel near the middle and one or more rim panels out toward the edge. This is what stops the fold reading as a card sliced into pie slices. A single layer gives long straight seams running from the centre to the rim; splitting them lets the inner and outer halves of one wedge fold by different amounts, so the seam zigzags the way a crease does. The wedge still curls **one way** — the tilt grows toward the rim rather than flipping sign halfway — because paper bends, it does not hinge in the middle of a panel. Layers cost render time: the child is drawn once per panel, so `segments × layers` copies. The default 9 × 2 is cheap; 14 × 3 is 42 copies of whatever you pass in. `randomness` is how uneven the fold is. At `0` every wedge folds identically — even angles, no tilt, all panels landing the same distance in — which reads as neat origami and, notably, ignores `seed` entirely because there is nothing left to randomise. Turn it up and the wedges tear at uneven angles, tilt further, and land at different depths. `1` is a proper mess. Each panel is shaded as it folds, so the finished wad has lit faces and shadowed creases rather than reading as a flat blob. The shading is not one flat wash per panel — that just tints triangles. Every facet gets a light side and a dark side with a fold between them, and the gradient counter-rotates against the panel's own tilt so the light stays fixed while the paper turns under it. Panels nearer the core are shaded darker, because the inside of a wad is occluded. All of it only fades in with the crush, which is why the card looks untouched until it starts. ### Aiming the throw `direction` is measured in screen space: `0` throws right, **negative angles throw upward**, and anything past `±90` throws leftward. The default `-35` sends the ball up and away. `distance` is the **scale of the arc, not the pixels travelled** — gravity is added on top of the launch, so at the defaults a `distance` of 900 puts the ball 737px right and 294px down, a 794px displacement. The opacity drops once, on the final flight pose, and then the element is gone. Everything in this kit is constant within a pose, so there is no sub-pose time to fade across; one stepped drop reads as the ball leaving, where a gradient would read as a dissolve. ### It returns null when it is done After `at + (crumpleSteps + tossSteps) * step` the component renders nothing. In absolute positioning — the intended use — that is invisible. In normal flow the element's box collapses on that frame, so wrap it in an `` or a sized container if the layout has to hold. ## Props | Prop | Type | Default | Description | |---|---|---|---| | `children` (required) | `React.ReactNode` | — | What gets thrown away; it is never modified | | `width` (required) | `number` | — | Width of what is being thrown; the fold geometry derives from it | | `height` (required) | `number` | — | Height of what is being thrown | | `at` (required) | `number` | — | Frame the crumple starts; nothing moves before it | | `segments` | `number` | `9` | Wedges the paper tears into; more pieces read as thinner paper | | `layers` | `number` | `2` | Radial cuts per wedge; 1 gives straight seams, more breaks the fold up | | `randomness` | `number` | `0.6` | How uneven the fold is; 0 folds every wedge identically and ignores seed | | `crumpleSteps` | `number` | `4` | Poses spent crushing | | `tossSteps` | `number` | `5` | Poses spent in flight | | `direction` | `number` | `-35` | Throw angle in screen space; negative throws upward, past ±90 throws left | | `distance` | `number` | `900` | Scale of the throw arc, not the pixels travelled | | `spin` | `number` | `220` | Degrees of tumble across the flight | | `crushTo` | `number` | `0.34` | Size of the finished wad, as a fraction of the shorter side | | `seed` | `string` | `"toss"` | Seed for the wedge angles, the fold tilts, and where each panel lands | | `step` | `number` | `3` | Frames per stop-motion pose | ## Use when - Discarding something on screen — the old plan, the wrong answer, the previous version. - Building a before/after beat where the replacement is revealed as the ball leaves. ## Don't use when - You want a general element exit in a clean UI scene — this one is loud and physical; use a fade instead. - You need a scene-level exit that replaces the whole frame — that is `page-turn`. This is **not** a `TransitionPresentation` and does not belong in a ``. - You want the ball to land, bounce, or hit a wastebasket; none of that is here. --- # Cursor Gravity URL: https://remocn.dev/docs/effects/cursor-gravity A rounded triangular cursor tugs a button out of the screen edge with pulsed elastic resistance - Install: `npx shadcn@latest add @remocn/cursor-gravity` - Vibe: playful - Natural length: 151f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/cursor-gravity ``` ## Usage An empty scene. A soft triangular cursor arrives from below, approaches the right edge and catches a hidden button. Two quick tugs pull its leading edge into view, pause under load, and recoil. The button's back remains outside the frame, stretching the surface into a narrow neck. A final pull frees the whole button, which settles at center as the cursor exits below. ```tsx import { CursorGravity } from "@/components/remocn/cursor-gravity"; export const Scene = () => ; ``` `Tension` controls the recoil and surface deformation. The cursor’s rear bows backward under each tug while its tip stays at the attachment point, then springs back as the effort releases. The pulse is in the movement itself: a fast pull, a short hold, a small release, then a stronger pull. All motion is frame-driven, including the spring and cursor shape. ## Custom content The button has a 300 × 88 reference-pixel content slot. Supply `children` to replace its label and arrow with your own content. The surrounding surface is still the elastic button; text remains unstretched as it travels with the material. Use compact content that fits the slot. ```tsx Start creating ↗ ``` The composition's actual right edge is always the extraction boundary, including in portrait and square renders. Element sizes scale with the smaller of `width / 1280` and `height / 720`. A transparent background lets the button appear over an existing scene. ## Timing Reference frames at 30 fps and `speed={1}`: | Frames | Motion | | --- | --- | | 0–10 | Empty scene | | 10–39 | Triangular cursor enters from below | | 39–48 | Cursor approaches and catches the right edge | | 48–70 | First tug, hold, and recoil | | 70–94 | Stronger second tug, hold, and recoil | | 94–132 | Final pull; the trailing edge releases and springs inward | | 132–151 | Button settles; cursor finishes exiting below | | 151–180 | Centered button holds | `cursorGravityLength` is 151, when the reveal and cursor exit have finished. `getCursorGravityDuration({ speed })` includes the final hold and returns frames at 30 fps. Multiply by `fps / 30` and round up for another frame rate. Playback duration in seconds is consistent across frame rates. The final button stays in place after the sequence ends. ## Props | Prop | Type | Default | Description | |---|---|---|---| | `children` | `ReactNode` | — | Replace the label and arrow; fits a 300 × 88 content slot | | `label` | `string` | `"Create something"` | Default button label; long text truncates; ignored with children | | `tension` | `number` | `1` | Elastic neck deformation and recoil, clamped to 0–1.5 | | `cursorColor` | `string` | `"#fffaf0"` | Rounded triangular cursor and short attachment thread | | `color` | `string` | `"#fffaf0"` | Elastic button surface | | `textColor` | `string` | `"#32153c"` | Button label and arrow | | `backgroundColor` | `string` | `"#a800b7"` | Full-frame background; accepts transparent | | `speed` | `number` | `1` | Time multiplier; zero or negative freezes the empty initial frame | | `className` | `string` | — | Class on the full-frame root | ## Use when - An empty scene should reveal a call to action through a physical pulling gesture. - A button needs to feel extracted from beyond the frame with tension, recoil, and release. ## Don't use when - A cursor must accurately demonstrate an existing interface — use simulated-cursor. - Two complete scenes need to swap — this reveals one element rather than replacing the whole frame. --- # Effects URL: https://remocn.dev/docs/effects Reusable Remotion effect overlays for celebratory and atmospheric moments Drop-in effect overlays you compose on top of any scene — fire them on a frame and let them play out. - [Cursor Gravity](https://remocn.dev/docs/effects/cursor-gravity) — A soft triangular cursor extracts a hidden button from the screen edge with elastic tugs - [Radial Burst](https://remocn.dev/docs/effects/radial-burst) — A sculptural intro — twisting ribbons fold into a tilted ring and sweep outward with contour echoes - [TV Power Off](https://remocn.dev/docs/effects/tv-power-off) — Collapses a scene into a glowing line and a phosphor dot the way a tube switches off, leaving the frame dead black - [Confetti](https://remocn.dev/docs/effects/confetti) — Deterministic confetti burst — seeded particles with gravity, spin, and flutter, fired on any frame --- # Ink Arrow URL: https://remocn.dev/docs/effects/ink-arrow A hand-drawn arrow that draws itself from one point to another in stop-motion poses - Install: `npx shadcn@latest add @remocn/ink-arrow` - Vibe: paper - Natural length: 150f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/ink-arrow ``` ## Usage `from` and `to` are in the arrow's own local space — you place the component, the arrow draws inside it. The SVG lets its contents overflow, so the bow and the head are never clipped. ```tsx // src/Root.tsx import { AbsoluteFill, Composition } from "remotion"; import { InkArrow } from "@/components/remocn/ink-arrow"; const InkArrowScene = () => (

Start here

 ); export const RemotionRoot = () => ( ); ``` The pen drags the curve over `drawDur` frames, quantized to the stop-motion clock. When the line lands, the head is drawn rather than dropped in: one stroke out from the tip, then the other, over `headDur` frames split evenly between them. `curvature` is the perpendicular bow as a fraction of the distance between the two points, so the arc keeps its shape as the arrow gets longer. Flip its sign to bow the other way. Each control point also carries a small per-`seed` wobble, which is what stops the curve looking machine-drawn; the same seed always gives the same hand. ## Props | Prop | Type | Default | Description | |---|---|---|---| | `from` (required) | `{ x: number; y: number }` | — | Start point, in the component's local space | | `to` (required) | `{ x: number; y: number }` | — | End point — where the head lands | | `curvature` | `number` | `0.35` | Perpendicular bow as a fraction of the distance; negative bows the other way | | `color` | `string` | `"#26242c"` | Ink colour (any valid CSS color) | | `strokeWidth` | `number` | `8` | Brush width in pixels at full pressure | | `pressure` | `number` | `0.2` | Weight the brush opens on, as a fraction of strokeWidth | | `release` | `number` | `1` | Weight the brush reaches at the head; above pressure the shaft thickens as it travels | | `grain` | `number` | `1` | Edge roughness; breaks the thin opening into dry-brush flecks, 0 gives clean edges | | `delay` | `number` | `0` | Frames on the local clock before the drag begins | | `drawDur` | `number` | `36` | Frames the contour takes to draw | | `headSize` | `number` | `24` | Length of each head stroke in pixels; a floor, never shrinking below what the brush width needs | | `headDur` | `number` | `step * 4` | Frames to draw both head strokes, split evenly between them | | `seed` | `string` | `"arrow"` | Seed for the curve wobble — same seed, same arrow | | `step` | `number` | `3` | Frames per stop-motion pose — the tempo control | ## Use when - A hand-drawn annotation should point from one thing to another — callouts over paper or scrapbook scenes. - The pointing itself is part of the story and should be seen being drawn, pose by pose. ## Don't use when - You need a straight technical connector or a diagram edge — this is a wobbly pen line with a personality, not a flowchart arrow. - The arrow must anchor itself to another component's live position: `from`/`to` are fixed coordinates you supply. --- # Paper Wobble URL: https://remocn.dev/docs/effects/paper-wobble Per-pose reshoot jitter that makes any content feel hand-placed on a desk - Install: `npx shadcn@latest add @remocn/paper-wobble` - Vibe: paper - Natural length: 90f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/paper-wobble ``` ## Usage Wrap anything. The wrapper holds one offset for a whole stop-motion pose, then snaps to the next — the wobble of a photo that was picked up and put back down. ```tsx // src/Root.tsx import { AbsoluteFill, Composition } from "remotion"; import { PaperWobble } from "@/components/remocn/paper-wobble"; const PaperWobbleScene = () => (

Shot on a desk

 ); export const RemotionRoot = () => ( ); ``` Give each wrapped block its own `seed` — two instances sharing a seed move in lockstep, which reads as one rigid sheet rather than two objects on a desk. Components that already carry their own jitter, like `paper-sticker`, do not need this wrapper — doubling it up just doubles the shake. The wrapper is `display: inline-block` and nothing else: no size, no background, no positioning. If you pass a `transform` through `style`, it is applied first and the jitter is appended, so your own positioning survives. ## Props | Prop | Type | Default | Description | |---|---|---|---| | `children` (required) | `React.ReactNode` | — | The content to wobble | | `seed` | `string` | `"wobble"` | Seed for the jitter — same seed, same motion | | `amp` | `number` | `1.4` | Maximum offset in pixels on each axis | | `rotAmp` | `number` | `0.35` | Maximum rotation in degrees | | `step` | `number` | `3` | Frames per stop-motion pose — the tempo control | | `className` | `string` | — | Passed through to the wrapper div | | `style` | `React.CSSProperties` | — | Merged over the defaults; a transform here is composed before the jitter | ## Use when - Any block should carry the stop-motion reshoot wobble — headlines, cards, or content that must feel hand-placed rather than laid out. - Two or more elements should read as separate objects on a desk: give each its own `seed`. ## Don't use when - The content should sit rock-still — UI simulations, code blocks being read. - You want smooth floating motion rather than discrete poses — use `drift`. - The component already jitters itself, like `paper-sticker`; wrapping it just doubles the shake. --- # Radial Burst URL: https://remocn.dev/docs/effects/radial-burst Sculptural ribbons twist into a tilted ring and sweep outward through layered contour echoes - Install: `npx shadcn@latest add @remocn/radial-burst` - Vibe: playful - Natural length: 114f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/radial-burst ``` ## Usage `RadialBurst` is a four-second sculptural stinger. A small circle bursts into wide, tapered ribbons that twist through an asymmetric bloom. Fine contour echoes trace their movement while a warm accent picks out a few petals. The ribbons fold into a tilted ring, compress, then sweep outward through layered rings to leave a clean field for the next title, logo, or scene. ```tsx import { RadialBurst } from "@/components/remocn/radial-burst"; export const Intro = () => ; ``` The default palette is white and warm cream on remocn's primary purple. No text, logo, images, fonts, or shaders are included. SVG geometry, springs, and curves are derived directly from the Remotion frame, so seeking and rendering are deterministic. The geometry scales with the shorter composition dimension; the exit uses the full diagonal to clear portrait, square, and wide frames. ## Timing and title handoff At 30 fps and `speed={1}`: | Frames | Motion | | --- | --- | | 0–18 | Central circle enters with a small overshoot | | 18–44 | Ribbons burst outward, stretching into broad petals | | 44–84 | Ribbons twist through a tilted bloom, then close into a ring | | 84–96 | Ring contracts to anticipate the exit | | 96–114 | Ring and contour echoes expand out of frame | | 114–120 | Clean background | Place a title above the animation as the ring opens up. This example shares the purple background and uses the burst as a transparent overlay. ```tsx import { AbsoluteFill, Sequence } from "remotion"; import { RadialBurst } from "@/components/remocn/radial-burst"; export const ProductIntro = () => ( Introducing something new ); ``` `radialBurstLength` is 114 frames, the point where all shapes have left. `getRadialBurstDuration({ speed })` includes the clean tail and returns the duration at 30 fps. Multiply by `fps / 30` and round up for another frame rate. The docs preview adjusts its duration when speed changes. Enable `loop` to repeat the full 120-frame cycle; otherwise the background stays clear after the first pass. ## Variations Use four segments for broad, sculptural shapes or twelve for a dense radial pattern. `intensity` controls ribbon swelling, asymmetric movement, and plane tilt. Set it to `0` for the original flat capsule-to-ring animation. `twist` changes the ribbon bend; negative values curl in the opposite direction. `echoes={0}` removes the contour trails. Negative `rotation` reverses the assembly. `radius` and `thickness` are measured at a 720px reference size and scale with the composition. ```tsx ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `segments` | `number` | `8` | Rounded segment count, clamped to 4–16 and rounded to an integer | | `radius` | `number` | `210` | Burst radius at 720px, clamped to 100–280 | | `thickness` | `number` | `30` | Segment thickness at 720px, clamped to 8–60 | | `rotation` | `number` | `135` | Assembly rotation in degrees; negative values reverse it | | `intensity` | `number` | `1` | Ribbon swelling, asymmetric movement, and tilt; 0 restores classic geometry, maximum 1.5 | | `twist` | `number` | `110` | Ribbon bend in degrees, from -180 to 180 | | `echoes` | `number` | `3` | Contour echo count, from 0 to 5 | | `accentColor` | `string` | `"#f4e4a7"` | Warm accent on selected ribbons and exit echoes | | `color` | `string` | `"#ffffff"` | Circle, segment, and ring color | | `backgroundColor` | `string` | `"#a800b7"` | Full-frame background; use transparent for an overlay | | `speed` | `number` | `1` | Playback multiplier; 0 freezes the initial frame | | `loop` | `boolean` | `false` | Repeat the entire animation, including its clean tail | | `className` | `string` | — | Optional class name on the full-frame root | ## Use when - A product introduction needs a short abstract geometric opening before its title. - A motion-design stinger should build anticipation and leave a clean frame for the next beat. - A brand-colored animation needs editable segment count, rotation, and scale without external assets. ## Don't use when - The effect should celebrate an action with scattered particles — use `confetti`. - Two complete scenes need a camera move through concentric rings — use `ripple-zoom`. - The introduction should be driven by editable words — use `kinetic-morph-text`. --- # Scribble Circle URL: https://remocn.dev/docs/effects/scribble-circle A brush circle that sweeps itself around a region of the frame, opening thin and closing thick - Install: `npx shadcn@latest add @remocn/scribble-circle` - Vibe: paper - Natural length: 30f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/scribble-circle ``` ## Usage Position it absolutely over whatever you are pointing at. The component draws nothing but the loop — no background, no children — so it composes over a screenshot, a card, or a number without touching the layout underneath. ```tsx // src/Root.tsx import { AbsoluteFill, Composition } from "remotion"; import { ScribbleCircle } from "@/components/remocn/scribble-circle"; const ScribbleScene = () => (
); export const RemotionRoot = () => ( ); ``` ### Circle it, then point at it Pairing with `ink-arrow` is the full annotation beat — the loop lands first, then the arrow arrives to explain it. Give the arrow a `delay` past the end of the circle's draw, which is `durationSteps * step` frames after its own delay. ```tsx const CIRCLE_AT = 18; const CIRCLE_DRAW = 10 * 3; <>
; ``` ### It is a brush, not a pen The mark is a filled ribbon whose width follows a pressure profile, not a constant-width stroke. `pressure` is where the brush starts, as a fraction of `strokeWidth`: at the default `0.2` the loop opens at a fifth of full weight and thickens all the way round to a blunt, fully loaded end. `pressure: 1` turns the taper off and gives a uniform band. `grain` roughens the edges. It is worth understanding what it does, because it is what keeps the mark from looking printed: the ribbon is displaced by a noise field whose amplitude is proportional to `strokeWidth`. Where the ribbon is thicker than that amplitude the edges merely go ragged; where it is thinner — which is exactly the opening, by construction — the ribbon breaks apart into dry-brush flecks. So the stroke is never uniformly filled in, and the thin opening fades rather than ending abruptly. `grain: 0` switches the filter off and leaves clean vector edges. ### Tuning the gesture `laps` is a float and it is the character knob. The default `1.15` sends the brush once round and about 54° past where it started — that overshoot is what stops the loop reading as a drawn ``. `2` gives the double-loop scribble; `0.9` leaves an open arc. Where the brush passes its own starting angle the two passes sit at slightly different radii, because the radius noise is keyed on the sample index rather than the angle, so the laps never retrace each other. The loop draws in equal arcs per pose, so you watch the brush travel rather than seeing the circle appear nearly finished on its first frame. More `durationSteps` means more, smaller poses. ### Why there is no children API `{target}`, measuring its child and sizing itself, is the nicer-looking API and it does not work here. Measurement needs `useLayoutEffect` and `getBoundingClientRect`, neither of which runs during Remotion's server-side render: the ellipse would size correctly in the browser preview and collapse in the exported video. Explicit `width` and `height` is the honest contract, the same call `ink-underline` makes with its required `width`. The root element keeps exactly the `width` and `height` you pass, so your positioning math stays predictable. Only the SVG overflows, by enough to cover the radius noise, the centre nudge, and the stroke. ## Props | Prop | Type | Default | Description | |---|---|---|---| | `width` (required) | `number` | — | Nominal width of the loop and of the root element | | `height` (required) | `number` | — | Nominal height of the loop and of the root element | | `color` | `string` | `"#6f7f35"` | Ink colour of the stroke | | `strokeWidth` | `number` | `14` | Brush width at full pressure; the grain amplitude scales from it | | `pressure` | `number` | `0.2` | Weight the brush opens on, as a fraction of strokeWidth; 1 removes the taper | | `grain` | `number` | `1` | Edge roughness; breaks the thin opening into dry-brush flecks, 0 gives clean edges | | `delay` | `number` | `0` | Local frame the pen starts moving | | `durationSteps` | `number` | `10` | Poses the loop takes to draw, each advancing an equal arc | | `laps` | `number` | `1.15` | How far round the pen travels; above 1 it overshoots its start | | `seed` | `string` | `"scribble"` | Seed for the radius noise, the centre nudge, and the grain field | | `step` | `number` | `3` | Frames per stop-motion pose | ## Use when - Circling the one element that matters — a button, a number, a row in a screenshot. - Building the full annotation beat: circle the thing, then point at it with `ink-arrow`. ## Don't use when - You need a permanent border or a focus ring. This is a gesture that happens once, not a state. - You want a rectangular or bracket-shaped annotation, or to cross something out. - The target's size is not known at author time — this component cannot measure it. --- # Simulated Cursor URL: https://remocn.dev/docs/effects/simulated-cursor A synthetic mouse cursor that travels between waypoints and fires a click ripple, for narrating a UI on screen - Install: `npx shadcn@latest add @remocn/simulated-cursor` - Vibe: clean - Natural length: 150f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/simulated-cursor ``` ## Usage The cursor walks the `points` array in order. Each leg takes a fixed 24 frames of travel, then rests for that point's `hold` (default `15`). A point marked `click` fires a ripple when the cursor arrives. ```tsx // src/Root.tsx import { Composition } from "remotion"; import { SimulatedCursor } from "@/components/remocn/simulated-cursor"; const CursorScene = () => ( ); export const RemotionRoot = () => ( ); ``` > **Coordinates are canvas pixels** > > `x` and `y` are absolute pixels on the composition canvas, not normalized `0–1` values. On the > standard `1280×720` canvas, `{ x: 640, y: 360 }` is dead center. Change the canvas size and the > waypoints move with it. ### Over a screenshot The component renders transparent, so layer it above whatever it is pointing at. ```tsx import { AbsoluteFill, Img, staticFile } from "remotion"; import { SimulatedCursor } from "@/components/remocn/simulated-cursor"; const DemoScene = () => ( ); ``` ## Timing Budget the `Sequence` from the waypoints: `24` frames per leg plus each point's `hold`. The default three-point path runs about `93` frames; leave headroom for the click ripple to finish. ## Props | Prop | Type | Default | Description | |---|---|---|---| | `points` | `CursorPoint[]` | `DEFAULT_POINTS` | Waypoints the cursor travels through, in order. Each is { x, y, hold?, click? } in absolute canvas pixels. | | `color` | `string` | `"#ffffff"` | Fill color of the cursor arrow. Use a dark value over light UI screenshots. | | `size` | `number` | `32` | Height of the cursor arrow in pixels. | | `speed` | `number` | `1` | Time multiplier applied as frame × speed. Above 1 the cursor completes its path sooner. | | `className` | `string` | — | Optional className passed to the wrapper element. | ### CursorPoint | Prop | Type | Default | Description | |---|---|---|---| | `x` (required) | `number` | — | Horizontal position in canvas pixels. | | `y` (required) | `number` | — | Vertical position in canvas pixels. | | `hold` | `number` | `15` | Frames the cursor rests at this point after arriving, before starting the next leg. | | `click` | `boolean` | `false` | Fires a click ripple when the cursor arrives at this point. | ## Use when - You are narrating a screen demo and need a synthetic cursor that moves predictably over a UI screenshot or recording - You want to direct attention to a specific element by having the cursor travel to it and click - You are pairing it with `typewriter` to simulate a user typing into a field the cursor just landed on ## Don't use when - You need a real screen recording — this draws a synthetic overlay, not a capture of actual mouse movement - The video is abstract or non-UI (motion graphics, product reveal, pure text) — a floating arrow reads as a tutorial and breaks the mood - The underlying layout shifts between scenes — waypoints are absolute canvas pixels, so the cursor will land in the wrong place --- # TV Power Off URL: https://remocn.dev/docs/effects/tv-power-off End a scene the way a tube does — the picture collapses into a glowing line, pinches to a phosphor dot, and the frame is left dead black - Install: `npx shadcn@latest add @remocn/tv-power-off` - Vibe: tech - Natural length: 18f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/tv-power-off ``` ## Usage Wrap a scene and, on the frame you point it at, its power is cut. The picture squashes toward the centre line while the light it loses is pushed into what is left, so the last few rows are a blown-out band rather than a squashed thumbnail. The band pinches to a dot, the dot decays, and the frame is black. ```tsx import { TvPowerOff } from "@/components/remocn/tv-power-off"; export const MyScene = () => ( ); ``` ## Timing it `delay` is counted from the start of the enclosing `Sequence`, so the scene plays untouched for `delay` frames and the collapse runs for the next `durationInFrames`. Budget both: a `Sequence` that ends before `delay + durationInFrames` cuts away mid-collapse. The default 18 frames is a hard power cut. Stretch it toward 30 and the line hangs long enough to read as a tube giving up rather than being switched. ```tsx ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `durationInFrames` | `number` | `18` | How long the whole collapse takes. The first 60% is the vertical squash, the next 22% pinches the line to a dot, and the rest is the dot decaying. | | `delay` | `number` | `0` | Frames of untouched scene before the collapse starts, counted from the enclosing Sequence. | | `gain` | `number` | `1` | How hard the picture brightens as it is squashed. At 1 the light lost to the collapse is pushed back into the remaining rows, which is what blows the line out to white. At 0 the picture simply shrinks. | | `afterglow` | `number` | `1` | Reach of the phosphor bleed — the glow that spills above and below the line, and the halo around the dot. At 0 the collapse is geometry only. | | `phosphor` | `string` | `"#d8ecff"` | Colour of that glow. The cool white of a monochrome tube by default; warm it toward amber for an older terminal. | | `children` | `React.ReactNode` | — | The scene being switched off. | ## Notes The squash is an integral, not a scale. Every output row averages the source rows that collapse into it, so text does not alias into stripes on the way down and the line keeps the horizontal colour of the columns above it — that is why the last frames of the band still carry the scene rather than a grey smear. Once the collapse begins the frame behind the picture is opaque black, and it stays black after the dot is gone. That is a dead screen rather than a hole, so do not expect a backdrop to show through afterwards. Nothing is carried between frames: progress is a pure function of the current frame, so parallel and server-side renders produce identical pixels. ## Use when - A scene should end like a device being switched off rather than fading out — the picture collapses, a dot lingers, and the frame is dead. - The video is about something that lives on a screen — a terminal, a dashboard, a retro build — and powering it down is the punctuation the story already implies. - A beat needs a hard, unambiguous end: everything after the collapse is black, so whatever you cut to next starts from nothing. ## Don't use when - The tube look should hold for the whole scene instead of ending it — use `crt-screen`, which is a sustained filter with no duration of its own. - Both scenes should be visible while the change happens — this plays over one scene at a time, so reach for a transition such as `glitch-cut`. - The frame has to stay transparent over a backdrop once the scene is gone, since what this leaves behind is opaque black. --- # Agent Skill URL: https://remocn.dev/docs/getting-started/agent-skill Install the remocn agent skill with skills.sh so your AI generates better Remotion videos Remocn ships an **agent skill** — a knowledge pack that teaches AI coding agents (Claude Code and friends) how to build videos with remocn: how the two component tiers differ, how to budget a timeline, how to compose a video out of beats, and where to read the rest. Once installed, your agent picks the right components, budgets the timeline correctly, and styles your additions to match the library — without you pasting context every time. > **The catalog is not bundled** > > The skill does not carry a copy of the component reference. It reads these docs live, starting > from [`/llms-components.txt`](https://remocn.dev/llms-components.txt) and following the link to > each component's page. That way a component added today is visible to an agent whose skill was > installed months ago, and a prop that changed cannot go stale in two places at once. Your agent > needs network access to remocn.dev; without it, it will tell you rather than guess. ## Install with skills.sh The skill lives in the [`skills/`](https://github.com/Remocn/remocn/tree/main/skills) folder of the remocn repo. Install it with the [`skills`](https://skills.sh) CLI: ```bash npx skills add Remocn/remocn ``` This finds the `remocn` skill and installs it into your agent (for Claude Code: `.claude/skills/remocn/`). The CLI is interactive — pick the skill and target agent when prompted. ### Common flags ```bash # Install straight to the remocn skill, no prompts npx skills add Remocn/remocn --skill remocn --yes # Install globally (available in every project) npx skills add Remocn/remocn --skill remocn -g # Target a specific agent npx skills add Remocn/remocn -a claude-code # Just list what's available in the repo npx skills add Remocn/remocn --list ``` ### Use without installing To try it for a single session without writing files: ```bash npx skills use Remocn/remocn@remocn | claude ``` ## What's inside | File | Contents | |---|---| | `SKILL.md` | Install flow, the two tiers and their differing APIs, canvas and timing rules, remocn-specific gotchas, and where to fetch everything else | | `references/anatomy.md` | Composing a full video — template vs compose vs build, the product-demo beats, the good-vs-slop bar | | `references/archetypes/` | Per-archetype recipes: product demo, changelog, feature announcement, OSS showcase, CLI demo, testimonial reel, year in review, pricing reveal, logo bumper | What the skill reads from this site instead of bundling: | URL | Contents | |---|---| | [`/llms-components.txt`](https://remocn.dev/llms-components.txt) | Every installable component with its use / avoid signal, natural length, vibe, tier and dependencies | | `/docs/
/.md` | One component's full reference — props, examples, all use / don't-use notes | | [`/docs/craft/`](/docs/craft) | Design defaults, motion principles, anti-patterns | Any docs URL serves raw Markdown when you append `.md`, so you can read the same pages your agent does. ## Prerequisites - An AI agent that loads skills (e.g. Claude Code). - A Remotion project with remocn — see [Installation](/docs/getting-started/installation). --- # Installation URL: https://remocn.dev/docs/getting-started/installation Add remocn to an existing Remotion project remocn assumes you already have Remotion installed. If you don't, run `npx create-video@latest` first. ## 1. Initialize shadcn If your project doesn't already have a `components.json`, run: ```bash npx shadcn@latest init ``` Pick the defaults: remocn components are framework-agnostic and only need the path aliases. ## 2. Add a component ## Installation ```bash npx shadcn@latest add @remocn/soft-blur-in ``` This copies `soft-blur-in.tsx` into `components/remocn/` (or wherever your `components.json` points). ## Install everything Want the whole library at once? Copy this command to add every remocn component in a single run. ```bash npx shadcn@latest add @remocn/soft-blur-in @remocn/per-character-rise @remocn/bottom-up-letters @remocn/top-down-letters @remocn/spring-scale-in @remocn/micro-scale-fade @remocn/scale-down-fade @remocn/blur-out-up @remocn/focus-blur-resolve @remocn/lens-zoom @remocn/line-by-line-slide @remocn/per-word-crossfade @remocn/word-stream @remocn/word-push @remocn/sheen-slide-in @remocn/squeeze-in @remocn/fog-rise @remocn/caret-swap @remocn/zoom-words @remocn/centered-word-build @remocn/inline-pill-takeover @remocn/typed-split-wipe @remocn/shadow-sweep-text @remocn/outline-fill-track-text @remocn/gradient-scale-cut-text @remocn/rush-type @remocn/extrude-pop @remocn/fade-through @remocn/shared-axis-y @remocn/shared-axis-z @remocn/short-slide-right @remocn/kinetic-morph-text @remocn/kinetic-warp @remocn/kinetic-center-build @remocn/short-slide-down @remocn/typewriter @remocn/inline-highlight @remocn/stretch-in @remocn/strikethrough-replace @remocn/staggered-fade-up @remocn/mask-reveal-up @remocn/tracking-in @remocn/shimmer-sweep @remocn/marker-highlight @remocn/slot-machine-roll @remocn/matrix-decode @remocn/rgb-glitch-text @remocn/infinite-marquee @remocn/shader-mesh-gradient @remocn/shader-grain-gradient @remocn/shader-warp @remocn/shader-swirl @remocn/shader-water @remocn/shader-spiral @remocn/shader-liquid-metal @remocn/shader-color-panels @remocn/shader-neuro-noise @remocn/shader-perlin-noise @remocn/shader-simplex-noise @remocn/shader-voronoi @remocn/shader-dot-orbit @remocn/shader-dithering @remocn/shader-god-rays @remocn/shader-smoke-ring @remocn/shader-metaballs @remocn/shader-pulsing-border @remocn/simulated-cursor @remocn/swirl-dissolve @remocn/dither-dissolve @remocn/perlin-dissolve @remocn/smoke-dissolve @remocn/wave-wipe @remocn/ripple-zoom @remocn/gooey-morph @remocn/grain-dissolve @remocn/warp-dissolve @remocn/whip-pan @remocn/push-through @remocn/focus-pull @remocn/zoom-blur @remocn/rolodex-flip @remocn/value-swap @remocn/chat-to-preview-layout @remocn/animated-line-chart @remocn/animated-bar-chart @remocn/terminal-simulator @remocn/terminal-cursor-zoom @remocn/glass-code-block @remocn/glass-code-walk @remocn/perspective-marquee @remocn/perspective-squeeze @remocn/ecosystem-constellation @remocn/live-code-compilation @remocn/infinite-bento-pan @remocn/github-sponsors @remocn/github-stars @remocn/number-wheel @remocn/rolling-number @remocn/x-follow-card @remocn/x-followers-overview @remocn/claude-chat @remocn/chat-gpt @remocn/v0 @remocn/claude-code @remocn/opencode @remocn/chromatic-wave @remocn/radial-burst @remocn/confetti @remocn/backdrop @remocn/drift @remocn/stage @remocn/logo-enter @remocn/handwrite @remocn/ink-underline @remocn/paper-wobble @remocn/ink-arrow @remocn/paper-sticker @remocn/polaroid @remocn/hand-count @remocn/brush @remocn/crumple-toss @remocn/scribble-circle @remocn/check-list @remocn/page-turn @remocn/stop-motion @remocn/ascii-dissolve @remocn/caret-wipe @remocn/icon-scatter @remocn/shader-caustics @remocn/shader-gem-smoke @remocn/shader-strata @remocn/shader-weave @remocn/reel @remocn/scene-motion @remocn/slide-swap @remocn/spring-settle @remocn/canvas-presentation @remocn/ember-burn @remocn/displacement @remocn/hologram @remocn/security-cam @remocn/tv-power-off @remocn/camera-lens @remocn/underwater-ripple @remocn/halftone-print @remocn/ascii-render @remocn/pixelate-region @remocn/sustained-glitch @remocn/crt-screen @remocn/vhs-filter @remocn/grid-wave @remocn/particle-dissolve @remocn/glitch-cut @remocn/search-reveal @remocn/cursor-gravity @remocn/type-fossil @remocn/shader-seam @remocn/shader-text-reveal @remocn/inline-word-roll @remocn/shader-light-tunnel @remocn/shader-spiral-pass @remocn/remocn-ui @remocn/spinner @remocn/caret @remocn/button @remocn/accordion @remocn/alert-dialog @remocn/dialog @remocn/sheet @remocn/drawer @remocn/checkbox @remocn/radio @remocn/switch @remocn/input @remocn/blur-in @remocn/field @remocn/select-item @remocn/select @remocn/select-menu @remocn/dropdown-menu-item @remocn/tabs @remocn/dropdown-menu @remocn/cursor @remocn/toast @remocn/command-menu-item @remocn/command-menu @remocn/tooltip @remocn/progress @remocn/skeleton-block @remocn/skeleton @remocn/slider @remocn/combobox @remocn/popover @remocn/context-menu @remocn/toggle-group @remocn/stepper @remocn/resizable @remocn/signup-flow @remocn/ai-prompt-flow @remocn/checkout-flow @remocn/onboarding-stepper-flow @remocn/settings-toggle-flow @remocn/message-bubble @remocn/typing-indicator @remocn/chat-flow @remocn/telegram-chat-flow @remocn/imessage-chat-flow ``` ## Add straight to Remotion Studio If a [Remotion Studio](https://www.remotion.dev/docs/studio) (4.0.502 or newer) is running locally, most components can skip the CLI entirely. Component pages show an **Add to Studio** button next to the preview — it finds your running Studio and drops the component into the active composition as source code. The drag handle beside it does the same thing by drag and drop, so you can place the element on the timeline yourself. Icons work the same way from the [icons gallery](/docs/icons/gallery). Either way the result matches `npx shadcn add`: the source lands in your project and is yours to edit. On top of that, elements arrive with editable controls — the same knobs each docs page shows (text, colors, timings, speed) appear as native controls in the Studio sidebar, alongside the standard timeline and transform handles. Compositions and components that build on other remocn components install through the CLI only. ## 3. Use it in a Remotion composition ```tsx import { Composition } from "remotion"; import { SoftBlurIn } from "@/components/remocn/soft-blur-in"; export const RemotionRoot = () => ( ); ``` That's it. Render with `npx remotion render HelloWorld out.mp4`. --- # Introduction URL: https://remocn.dev/docs/getting-started/introduction What remocn is and who it's for remocn is built for solo builders and small teams who need to ship product demo videos without rebuilding the same animation primitives every time. If you've used [shadcn/ui](https://ui.shadcn.com), you'll feel at home: the workflow is identical, just for video instead of UI. ## Why remocn - **Production-ready Remotion code:** every component uses `useCurrentFrame()`, `interpolate()`, and `spring()` correctly. No `Math.random()` traps that break rendering. - **Own your code:** components are copied into your project, not installed as a dependency. Tweak them however you like. - **Live previews:** each component page mounts a real `@remotion/player` you can scrub frame-by-frame. ## Prerequisites You should already have a Remotion project set up. If you don't: ```bash npx create-video@latest ``` ## What's next - [Installation](/docs/getting-started/installation): add remocn to an existing Remotion project --- # Gallery URL: https://remocn.dev/docs/icons/gallery Browse every remocn icon, hover to play its motion, and copy the install command Icon paths are derived from [Lucide](https://lucide.dev), licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/main/LICENSE), and re-authored from scratch for deterministic Remotion video. Install any icon by name — swap `icon-check` for the one you want from the gallery below. ## Installation ```bash npx shadcn@latest add @remocn/icon-check ``` ## Gallery Hover or focus a tile to play its animation, then click to copy the install command --- # Changelog video URL: https://remocn.dev/docs/guides/changelog-video A ~25-second release update for the weeks that ship several small things — same open, same pace, every release Not every release deserves a launch. Most weeks ship three or four small improvements — a fix, a speedup, a new option — and that's exactly what this video carries. About twenty-five seconds, no big reveal, posted on a rhythm: weekly, monthly, every release. It's the lightweight sibling of the [Feature announcement](/docs/guides/feature-announcement) — when one change deserves the spotlight, use that recipe; when the week shipped several small things, use this one. ## The storyboard 1. **The stamp** — your product name and the date or version land together, like a postmark. This is the recurring open viewers learn to recognize. 2. **Item one** — the change's name and one line on what it does. 3. **Item two** — same shape, next change. 4. **Item three** — same shape again. If a change is visual, show it instead of describing it. 5. **The nudge** — one line pointing to the full changelog. 6. **The lockup** — your logo, one short closing line. The value of this video isn't any single edition — it's the rhythm. Same open, same pace, every release. By the third one, viewers recognize your update in the feed before they read a word. So resist redesigning it each time; change the items, keep the frame. ## Your words - **Product name** - **Version or date** — whatever you stamp releases with - **Three or four changes** — each a name plus a one-line payoff, six words or fewer - **Changelog URL** - **Closing line** — e.g. "Shipping weekly" Struggling with the payoff lines? [Words on screen](/docs/guides/words-on-screen) is the cheat sheet. ## The prompt ```text I'm making a changelog video with remocn (remocn.dev). Build a ~25-second, 1920×1080, 30fps release update for in this Remotion project, using remocn components — install anything you need with `npx shadcn add @remocn/`: 1. Stamp — "" with "" beneath it, landing together like a postmark. Short and confident — this open repeats every release, so keep it simple enough to reuse. 2. Items — one beat per change, every beat built the same way: the change name lands first, its payoff line follows beneath it: - "" — "" - "" — "" - "" — "" If a change is visual, replace its text beat with a small fake app screen showing it happen. 3. Nudge — one calm line: "Full changelog at ". 4. Lockup — my logo () with a closing line: "". Style: warm dark background (#141318), off-white text, one accent color , Manrope. One quiet shader-simplex-noise field behind the whole video. Keep motion restrained and identical across the item beats — this is a stamp, not a show. Use my copy exactly as written. ``` ## Directing the result - "Item two runs long — tighten it." - "Hold the stamp a beat longer." - "Change three is visual — show the screen instead of the words." - "The items feel different from each other — make the motion identical." More directing vocabulary: [Directing your agent](/docs/guides/directing-your-agent). Next release, don't start over — ask your agent to reuse this video and swap the version and the items. ## Get the file Ask your agent: **"Render the video."** You'll get an `.mp4` in the project folder, ready to post. --- # Directing your agent URL: https://remocn.dev/docs/guides/directing-your-agent The first cut is a draft — how to get from there to the video you meant Your agent's first cut will be roughly right and specifically wrong. That's not failure — that's where directing starts. You watch, you say what's off in plain sentences, you watch again. Two or three rounds is normal. ## The loop 1. Watch the whole video once, start to finish, without commenting. 2. Go beat by beat and say what's wrong, referring to beats by number. 3. Put several notes in one message — one sentence per note. ```text In beat 1, hold each line longer — I can't finish reading. In beat 3, the background is too loud, calm it down. Cut beat 5 entirely. ``` ## Pacing words - **"Hold it longer"** / "it goes by too fast" - **"Tighter"** — cut the dead air between beats - **"Let it breathe"** — add a pause after a big moment - **"Make the whole thing two seconds shorter"** ## Motion words - **"Snappier"** — faster, more decisive movement - **"Softer"** / "calmer" — less travel, less drama - **"Come in from the left"** (or right, or below) - **"Less bouncy"** — when things wobble too much - **"The background is too loud"** — dim it or slow it down ## Asking for options When you can't name what's wrong, don't try — ask for variants instead: *"Show me two different openings for beat 1."* Watch both, pick one, move on. ## Redirect or restart The one judgment call that saves the most time: - **The details are wrong** — pacing, a color, one beat's motion → direct, with the words above. - **The structure is wrong** — wrong story, wrong order, wrong number of beats → don't patch it. Rewrite your beat list and prompt again from scratch. Rebuilding structure through comments is always slower than restating it. ## Finishing - **"Render the video."** — you get an `.mp4` in the project folder. - Need another shape? Ask: *"Render a vertical version too."* --- # Exporting your video URL: https://remocn.dev/docs/guides/exporting-your-video The preview in your browser is not a file yet — one prompt turns it into an mp4 you can post The preview studio plays your video, but it isn't a file. Nothing to upload, nothing to send. Rendering fixes that: it turns the preview into a real mp4, and it's one prompt. ## The one move When the video looks right in the player, paste: ```text Render the video to an mp4 in the project folder, and tell me the full path to the file when it's done. ``` That's it. Your agent runs the render and tells you where the file landed. ## What to expect Rendering builds the file frame by frame — every frame of your video gets drawn and encoded. A thirty-second video takes a few minutes, longer than the video itself. That's normal, not a sign something is stuck. Let it finish; your agent will report back with the path. ## Where the file goes next The mp4 is ready to upload as-is. X, YouTube and LinkedIn all take the horizontal file directly — no conversion, no export settings, no editor in between. Posting to Shorts, Reels or TikTok too? Those want a vertical cut of the same video: [One video, three formats](/docs/guides/one-video-three-formats). ## Changed something after rendering? Just render again. The old file is not precious — a render costs a few minutes, so tweak the video, paste the same prompt, get a fresh mp4. Render as many times as it takes. --- # Feature announcement URL: https://remocn.dev/docs/guides/feature-announcement A ~40-second release video that shows the feature working — the one we shipped remocn/ui with This is the video we announced remocn/ui with. A launch video sells the whole product; a feature announcement sells one release — and it earns its runtime by showing the feature work, not by talking about it. Eight beats, about forty seconds, and the demo beat gets the most screen time. ## The storyboard 1. **The moments** — three quick situations your users know, swapping in one spot, then the problem lands in one line. 2. **The reveal** — "Meet <Feature>", with your one-line promise. 3. **The mechanism** — the single idea behind the feature, one calm beat. 4. **The demo** — the feature acting on camera: a fake app screen doing the real thing. The longest part of the video. 5. **The breadth** — a fast montage of what else ships in this release. 6. **The value** — three claims stack up. 7. **The install** — a terminal types your command or call to action. 8. **The outro** — your logo, one quiet closing line. ## Your words Ten blanks: - **Feature name** - **Three moments** — situations where users need it, two to four words each - **Problem line** — the claim that lands after the moments - **Promise line** — what changes now, one sentence - **Mechanism line** — how it works, one plain sentence - **Demo actions** — two or three things we should watch happen ("a dialog opens, a menu filters, a form fills itself") - **What else ships** — three to six short names; skip this beat if the release is one thing - **Three value claims** - **Install command or CTA** - **Closing line** Struggling with the lines? [Words on screen](/docs/guides/words-on-screen) is the cheat sheet. ## The prompt ```text I'm making a feature announcement video with remocn (remocn.dev). Build a ~40-second, 1920×1080, 30fps release video for in this Remotion project, using remocn components — install anything you need with `npx shadcn add @remocn/`: 1. Hook — three quick moments swapping in one center slot: "", "", "" — then the problem lands beneath them: "". 2. Reveal — "Meet ", then the promise: "". 3. Mechanism — one calm beat naming the idea: "". 4. Demo — the feature acting on camera: a fake app screen where . Give this the most screen time — it is the proof. 5. Breadth — a fast montage of what else ships: . 6. Value — three claims stacking line by line (line-by-line-slide): . 7. Install — a terminal line that types itself: ``. 8. Outro — my logo () with a quiet closing line: "". Style: warm dark background (#141318), off-white text, one accent color , Manrope. One quiet shader-simplex-noise field runs behind the entire video with a radial scrim. Keep transitions restrained — crossfades, plus one signature transition at the reveal. Use my copy exactly as written. ``` ## Directing the result - "The demo is too fast — I can't follow what the screen does." - "Give the reveal more room to breathe." - "Cut the breadth montage — this release is one thing." - "The hook moments should swap faster." More directing vocabulary: [Directing your agent](/docs/guides/directing-your-agent). ## Get the file Ask your agent: **"Render the video."** You'll get an `.mp4` in the project folder, ready to post. --- # How a video is built URL: https://remocn.dev/docs/guides/how-a-video-is-built Think in beats — the one mental model behind every video you'll make Every video in these guides — and every video you'll invent yourself — is built the same way: as a list of beats. ## Beats A beat is one idea on screen. A line of text landing. A feature name over a background. A logo drawing itself on. When the idea changes, the beat changes. Three rules cover most of it: - **One idea per beat.** If describing a beat needs the word "and", it's two beats. - **A text beat lives about two seconds** — long enough to read once, not twice. - **A video is five to ten beats.** The [launch video](/docs/guides/launch-video) is eight. ## The skeleton Every video that works has the same three acts: 1. **Hook** — why anyone should care: a pain, a bold claim, a question. 2. **Body** — what it is: features, value, proof. 3. **Close** — what to do next: a command, a URL, a date. Not sure what beats to write? One or two hook beats, three to five body beats, one close beat. That's a video. ## The vocabulary When you describe a beat to your agent, plain words work — and some plain words map especially well to what remocn can build: - **"an animated headline"** — a line of text that enters with motion - **"lines that stack up"** — claims appearing one after another - **"a living background"** — slow, animated color behind everything - **"a hard cut" / "a scene change"** — how one beat hands over to the next - **"a terminal that types"** — a command line typing itself out - **"a fake app screen"** — an interface with buttons, menus, and dialogs that act - **"a logo that draws itself on"** - **"a counter"** — a number counting up to a milestone You never need to know what any of these are called internally. Your agent does. ## From beats to prompt Write your video as a numbered list of beats — one line each, your copy in quotes. That list is 80% of a prompt; add a format line and a style line and it's done: ```text Build a ~15-second, 1920×1080, 30fps video in this Remotion project, using remocn components: 1. Hook — an animated headline: "". 2. Body — three lines that stack up: . 3. Close — a terminal that types: ``. Style: dark background, one accent color , calm pacing. ``` When the first cut plays, switch hats: you're the director now — see [Directing your agent](/docs/guides/directing-your-agent). --- # Guides URL: https://remocn.dev/docs/guides Finished videos you can make yours — pick one, fill in your words, paste a prompt Each guide starts from a finished video and ends with your version of it. You don't write code and you don't learn a video editor. Your AI agent builds the video — you direct it: pick a guide, fill in your product's words, paste the prompt. First time here? Do the one-time [Setup](/docs/guides/setup) — about ten minutes, all copy-paste. ## The videos - [Launch video](/docs/guides/launch-video) — the ~35-second video we launched remocn with, rebuilt around your product. - [Feature announcement](/docs/guides/feature-announcement) — a ~40-second release video that shows your feature working on camera. - [Showcase reel](/docs/guides/showcase-reel) — a fast reel where every item in a collection gets its own beat. - [Teaser](/docs/guides/teaser) — the ~15-second pre-launch video: something is coming, here is its name, here is the date. - [Product demo](/docs/guides/product-demo) — a ~50-second video where your product is on camera doing its job, one flow start to finish. - [Changelog video](/docs/guides/changelog-video) — a ~25-second release update on a rhythm viewers learn to recognize. ## The practices Recipes tell you what to make. Practices make you better at every one of them: - [How a video is built](/docs/guides/how-a-video-is-built) — think in beats, and write your own videos beyond the recipes - [Directing your agent](/docs/guides/directing-your-agent) — from the first cut to the video you meant - [Words on screen](/docs/guides/words-on-screen) — lines people can read in two seconds - [Your brand](/docs/guides/your-brand) — hand your brand over once, stay on-brand forever - [Music and sound](/docs/guides/music-and-sound) — a music bed is the cheapest upgrade that makes a video feel finished - [One video, three formats](/docs/guides/one-video-three-formats) — finish the horizontal video, then re-cut it to vertical and square - [Exporting your video](/docs/guides/exporting-your-video) — one prompt turns the browser preview into an mp4 you can post --- # Launch video URL: https://remocn.dev/docs/guides/launch-video The ~35-second launch video we made for remocn itself — with your product in it This is the video we launched remocn with. Eight beats, thirty-five seconds, built entirely from remocn components. Below is everything you need to make the same video for your product. ## The storyboard 1. **The pain** — two short lines land one after the other, naming the problem you solve. 2. **The reveal** — "Meet <Product>", uncovered by a swirl of color. 3. **The tagline** — your one-liner slides in. 4. **The positioning** — "Like X, for Y" assembles itself word by word. 5. **The montage** — six fast cuts: a feature name over a different animated background each time. 6. **The value** — three claims stack up, line by line. 7. **The install** — a terminal types out your install command or call to action. 8. **The outro** — your logo draws itself on, with one quiet closing line. ## Your words This is the whole creative work — nine blanks: - **Product name** - **Two pain lines** — six words or fewer each; they're on screen for about two seconds - **Tagline** — one line - **Positioning** — the "Like X, for Y" sentence - **Six feature labels** — one or two words each - **Three value claims** — short, concrete, no adjectives you can't prove - **Install command or CTA** — whatever you want typed on screen - **Closing line** — e.g. "Open source, all the way down" - **Accent color** — one hex value; optional, the default lime looks good Have a logo? Drop the SVG into the project folder and mention the file name in the prompt. No logo — your agent will use the product name as a wordmark. Struggling with the lines? [Words on screen](/docs/guides/words-on-screen) is the cheat sheet. ## The prompt ```text I'm making a product launch video with remocn (remocn.dev). Build a ~35-second, 1920×1080, 30fps launch video for in this Remotion project, using remocn components — install anything you need with `npx shadcn add @remocn/`: 1. Pain — two short lines, one after the other (scale-down-fade): "" then "". 2. Reveal — "Meet ", uncovered by a swirling shader transition (shader-swirl as a transition cover). 3. Tagline — "" (short-slide-right). 4. Positioning — "", assembling word by word (kinetic-center-build). 5. Montage — six hard cuts, one per feature: a fullscreen shader background (color-panels, warp, mesh-gradient, voronoi, metaballs, god-rays), a dark scrim, and one label each: . 6. Value — three claims stacking line by line (line-by-line-slide): . 7. Install — a short title beat, then a terminal line that types itself: ``. 8. Outro — my logo () over a blooming shader-smoke-ring, with a quiet closing line: "". Style: warm dark background (#141318), off-white text, one accent color , Manrope. One quiet shader-simplex-noise field runs behind the entire video with a radial scrim for readability. Transitions are shader covers (swirl, dithering), not plain crossfades. Use my copy exactly as written. ``` ## Directing the result The first cut won't be the final one — that's normal. Direct with plain sentences: - "The pain lines go by too fast — hold each one longer." - "Cut the montage to four beats." - "Use my brand background #0B0B0F instead." - "The tagline should come in from the left." - "Make the outro two seconds shorter." More directing vocabulary: [Directing your agent](/docs/guides/directing-your-agent). ## Get the file Ask your agent: **"Render the video."** You'll get an `.mp4` in the project folder, ready to post. --- # Music and sound URL: https://remocn.dev/docs/guides/music-and-sound The recipes produce silent videos — a music bed is the cheapest upgrade that makes one feel finished Every recipe on this site produces a silent video. That's on purpose — the cut has to work on its own first. But once it does, a music bed is the single cheapest upgrade left: same video, one track underneath, and it suddenly feels finished. ## Where to get a track Use a royalty-free library, not a song you like: - [Pixabay Music](https://pixabay.com/music/) — free, no attribution required - [Uppbeat](https://uppbeat.io) — free tier with attribution, curated for creators - [YouTube Audio Library](https://studio.youtube.com) — free, inside YouTube Studio One rule, no exceptions: before you publish, check that the track's license allows commercial use. A product video is commercial use even if the product is free. ## What kind of track works - **Instrumental.** Vocals fight your words on screen — and your words win the video, so the vocals just lose. - **Steady energy.** A track that builds and drops fights your cut. Pick one that holds a level. - **Match the mood to the video.** A launch wants drive. A changelog wants calm. A showcase reel wants pulse. If you can imagine the video over the track, it fits. Thirty seconds of the right track beats three minutes of a great one. ## Handing it to your agent Drop the audio file into the project folder, then paste: ```text There's an audio file in the project folder: . Add it as background music under the whole video. Keep it quiet enough that it never competes with the screen, and fade it out over the outro so the video ends clean. ``` That's the whole job. Your agent handles the volume, the timing and the fade. ## Directing the sound Sound takes the same plain sentences as the cut — see [Directing your agent](/docs/guides/directing-your-agent): - "Start the music on beat 2, not from the first frame." - "Duck the music under the demo, bring it back after." - "The music is too loud over the value beat." - "End the fade exactly with the logo." - "Try a harder cut — stop the music dead on the last beat instead of fading." Watch with sound on, say what's off, watch again. Two rounds is normal. ## When to skip sound Most feeds autoplay muted. The version of your video most people see is the silent one — which is why every recipe builds the silent version first. Sound is polish on top, not a crutch: if a beat only works with music under it, fix the beat. Then add the track for everyone who taps unmute. --- # One video, three formats URL: https://remocn.dev/docs/guides/one-video-three-formats Every recipe builds a horizontal video — Reels, Shorts and TikTok want vertical, and you re-cut instead of rebuilding Every recipe on this site builds a horizontal video — 16:9, the shape of YouTube, X and your landing page. But Reels, Shorts and TikTok want vertical (9:16), and some feeds like square (1:1). You don't make three videos. You make one, then re-cut it. ## Finish horizontal first Direct the horizontal version all the way to done — the words, the pacing, the brand, everything. Formats are the last step, not a fork. If you branch early, every note you give afterwards has to be given three times. ## The ask When the horizontal version is the one you'd publish, the whole ask is one sentence: ```text Make a vertical 9:16 version of this video, keeping every beat. ``` Your agent reflows the same video into the new shape. Same words, same order, same timing — a taller stage. ## What breaks in vertical A vertical frame is narrow, and a few things won't survive the move. Watch for them and direct in plain sentences: - **Long lines wrap or shrink.** A line that sat comfortably across a wide frame now breaks in half or gets small. Don't ask for a smaller font — shorten the line. [Words on screen](/docs/guides/words-on-screen) has the rules; vertical just enforces them harder. - **Side-by-side layouts stack.** Anything that sat left-and-right should now sit top-and-bottom. Say it directly: "Stack the two panels vertically." - **Keep the important content in the middle.** Platform UI — captions, buttons, your own handle — covers the top and bottom edges of a vertical video. Tell your agent: "Keep text and logos in the middle of the frame, away from the top and bottom edges." ## Square Same move, one line: "Make a square 1:1 version, keeping every beat." Square sits between the two shapes and mostly just works. ## Watch each one through Before you publish, watch every format start to finish — not just the beats you expect to break. A re-cut is a new video, and you direct it like one: same plain sentences, same standard. More vocabulary: [Directing your agent](/docs/guides/directing-your-agent). --- # Product demo URL: https://remocn.dev/docs/guides/product-demo A ~50-second video where your product is on camera doing its job — one flow, start to finish This is the video where your product does the talking. A recreated app screen acts out your core flow — something is clicked, the UI responds, the result lands — pixel-perfect and scripted, which is why it looks better than any screen recording. No cursor hunting for a button, no loading spinners, no stray notifications. In the [Feature announcement](/docs/guides/feature-announcement) this is one beat called the demo; here that beat grows into the whole video. ## The storyboard 1. **The setup** — one line naming who this is for and the job to be done. 2. **The screen appears** — your app UI slides in, calm, no action yet. Let the viewer see where they are. 3. **Step one** — the flow begins: something is clicked or typed, the UI responds. 4. **Step two** — the next step of the same flow, given room to be seen. 5. **Step three** — the last step; the flow completes on camera. 6. **The payoff** — the outcome on screen, plus one line saying what just happened in the user's terms. 7. **The close** — a terminal types your install command or URL, then your logo. The three flow steps are most of the runtime. Everything else frames them. ## Your words - **Product name** - **Setup line** — who this is for and the job, one sentence - **The one flow** — told as three steps, each a short sentence describing what happens on screen ("the user pastes a link", "a preview builds itself", "the share button lights up") - **Payoff line** — what the user just got, in their words - **Install command or URL** — one, not both - **Closing line** - **Accent color** — one hex value; optional, the default lime looks good Pick one flow. A demo that shows three features demos none — the viewer should finish the video able to retell the flow from memory. If your product has three flows worth showing, that's three videos. Have a logo? Drop the SVG into the project folder and mention the file name in the prompt. No logo — your agent will use the product name as a wordmark. Struggling with the lines? [Words on screen](/docs/guides/words-on-screen) is the cheat sheet. ## The prompt ```text I'm making a product demo video with remocn (remocn.dev). Build a ~50-second, 1920×1080, 30fps demo video for in this Remotion project, using remocn components — install anything you need with `npx shadcn add @remocn/`: 1. Setup — one calm line: "". 2. The screen — a recreated app screen for slides in and settles. No action yet — just the interface at rest. 3. Step one — . Show the interaction and the UI responding. 4. Step two — . Same screen, the flow continuing. 5. Step three — . The flow completes on camera. 6. Payoff — the outcome stays on screen while one line lands: "". 7. Close — a terminal line that types itself: ``, then my logo () with a closing line: "". The app screen is the star: recreate a clean, believable version of my UI and script every interaction — deliberate clicks, typing that a viewer can follow, responses that land with a beat of rest. Give the three flow steps the most screen time. Style: warm dark background (#141318), off-white text, one accent color , Manrope. Keep transitions restrained — the screen holds still, the flow moves. Use my copy exactly as written. ``` ## Directing the result - "Step two goes by too fast — I can't see what was clicked." - "The screen should look more like my app — here's a screenshot." - "Hold the payoff longer before the close." - "The typing is too quick — slow it to a human pace." - "Cut straight from the setup line to the screen." More directing vocabulary: [Directing your agent](/docs/guides/directing-your-agent). ## Get the file Ask your agent: **"Render the video."** You'll get an `.mp4` in the project folder, ready to post. --- # Setup URL: https://remocn.dev/docs/guides/setup One-time setup for making videos with an AI agent — about ten minutes You need two things: an AI coding agent and an empty folder. **1. Get an agent.** We recommend [Claude Code](/docs/ai/claude-code) — also works with [ChatGPT](/docs/ai/chat-gpt), [opencode](/docs/ai/opencode) and others. **2. Open the agent in an empty folder and paste:** ```text Set up a new Remotion video project in this folder, then install the remocn agent skill: npx skills add Remocn/remocn --yes. When you're done, start the preview studio so I can watch the video while we work. ``` When a browser tab opens with an empty video player, you're ready. Pick a [guide](/docs/guides) and make it yours. --- # Showcase reel URL: https://remocn.dev/docs/guides/showcase-reel A fast ~30-second reel where every item in a collection gets its own beat — the one we shipped the typography wave with This is the video we shipped eighteen new text animations with. The trick that carries it: nothing is described — every item gets two seconds of stage and demonstrates itself. If you have a collection — templates, integrations, themes, effects — this recipe turns the list into a reel. ## The storyboard 1. **The hook** — one line on why this collection matters. 2. **The number** — the count lands big. In ours, "18 new text animations". 3. **The reel** — the heart of the video: one item per beat, a small counter ticking in a corner while items change, each item named with its own motion. If your items are visual, each one demonstrates itself. 4. **The mechanism** — one line on the property every item shares. 5. **The value** — two or three claims stack up. 6. **The close** — a terminal types your command or link. 7. **The lockup** — your logo and a closing line. ## Your words - **The collection** — what the things are, and the count - **Hook line** - **The items** — six to eighteen names, one or two words each. Fewer than six? Make a [Feature announcement](/docs/guides/feature-announcement) instead. - **Mechanism line** — the property every item shares - **Two or three value claims** - **Command or link** - **Closing line** Struggling with the lines? [Words on screen](/docs/guides/words-on-screen) is the cheat sheet. ## The prompt ```text I'm making a showcase reel with remocn (remocn.dev). Build a ~30-second, 1920×1080, 30fps reel for new in this Remotion project, using remocn components — install anything you need with `npx shadcn add @remocn/`: 1. Hook — an animated headline: "". 2. The number — the count lands big: " new ". 3. The reel — one beat per item, roughly two seconds each, with a small "NN / " counter holding perfectly still in a corner while the items change: . Vary the motion between items — use remocn's text animations — and where an item can demonstrate itself, let it. 4. Mechanism — one calm line: "". 5. Value — claims stacking line by line (line-by-line-slide): . 6. Close — a terminal line that types itself: ``. 7. Lockup — my logo () with a closing line: "". Style: warm dark background (#141318), off-white text, one accent color , Manrope. One quiet shader-simplex-noise field behind the whole video. Keep the reel snappy — no long holds, effect after effect. Use my copy exactly as written. ``` ## Directing the result - "The reel drags in the middle — tighten items six through ten." - "The counter is too prominent — smaller and dimmer." - "Item four moves like item three — give it a different motion." - "Hold the number beat a little longer." More directing vocabulary: [Directing your agent](/docs/guides/directing-your-agent). ## Get the file Ask your agent: **"Render the video."** You'll get an `.mp4` in the project folder, ready to post. --- # Teaser URL: https://remocn.dev/docs/guides/teaser The ~15-second pre-launch video — something is coming, here is its name, here is the date The teaser is the shortest video in these guides. Fifteen seconds, one job: something is coming, here is its name, here is the date or the waitlist link. You make it before launch day — when there's nothing to demo yet and the whole point is the itch. Short is the feature: a fifteen-second teaser loops well in a feed and earns rewatches. Resist adding beats. ## The storyboard 1. **The itch** — one line naming the problem or the hunger. No product yet. 2. **The tease** — a second line promising something is coming. Still no name. 3. **The reveal** — the product name lands, with one quiet line on what it is. 4. **The date** — the launch date, or "Join the waitlist", big and alone. 5. **The lockup** — your logo or wordmark and the URL. Five beats is the ceiling. If you're tempted to add a sixth, you're making a [Launch video](/docs/guides/launch-video) — save it for launch day. ## Your words Six blanks, and most of them are one line: - **Product name** - **Two tease lines** — six words or fewer each; the first names the itch, the second promises relief - **What-it-is line** — one plain line for under the name - **The date or CTA** — "March 12" or "Join the waitlist" - **The URL** - **Accent color** — one hex value; optional, the default lime looks good Have a logo? Drop the SVG into the project folder and mention the file name in the prompt. No logo — your agent will use the product name as a wordmark. Struggling with the lines? [Words on screen](/docs/guides/words-on-screen) is the cheat sheet. ## The prompt ```text I'm making a pre-launch teaser with remocn (remocn.dev). Build a ~15-second, 1920×1080, 30fps teaser for in this Remotion project, using remocn components — install anything you need with `npx shadcn add @remocn/`: 1. The itch — one line lands alone: "". 2. The tease — the second line takes its place: "". 3. The reveal — "" lands big, uncovered by a swirling shader transition (shader-swirl as a transition cover), with one quiet line under it: "". 4. The date — "" alone on screen, big. 5. The lockup — my logo () with the URL underneath: "". Style: warm dark background (#141318), off-white text, one accent color , Manrope. One quiet shader-simplex-noise field runs behind the entire video with a radial scrim for readability. Five beats, no filler — each beat holds just long enough to read. Use my copy exactly as written. ``` ## Directing the result - "The tease lines go by too fast — hold each one longer." - "The reveal should hit harder — bigger, faster in." - "Put the date in the accent color." - "Tighten it to twelve seconds." More directing vocabulary: [Directing your agent](/docs/guides/directing-your-agent). ## Get the file Ask your agent: **"Render the video."** You'll get an `.mp4` in the project folder, ready to post. --- # Words on screen URL: https://remocn.dev/docs/guides/words-on-screen Video copy is not website copy — how to write lines people can read in two seconds On a landing page the reader controls the clock — they can reread. In a video the line is gone in two seconds. Writing for the screen is its own small craft, and this page is all of it. ## The rules - **Six words or fewer.** If a line doesn't fit, it's two beats — or it's too clever. - **One idea per line.** Split sentences; don't compress them. - **Verbs over adjectives.** "Ships in one command" beats "incredibly simple". - **Concrete over grand.** Numbers, commands, names: "110+ components", not "a huge library". - **No adjectives you can't prove.** - **Read it aloud once.** If you stumble, the viewer will too. ## Formulas for common beats **Pain lines** — name the problem in the viewer's words, not yours; the second line twists or promises a way out: > "Every launch needs a video" / "Yours shouldn't take a week" **Taglines** — what it is plus who it's for, zero filler: > "Cinematic video components for React" **Positioning** — borrow a shape people already know; nothing transfers a mental model faster: > "Like shadcn/ui, for video" **Value claims** — three, each concrete, each provable: > "110+ components" / "One command to install" / "The code is yours" **The close** — the single shortest next action. A command *or* a URL — one, not both. ## The two-second test Whatever you're filling in — a worksheet, a prompt, a rewrite — say each line out loud at speaking pace. Longer than two seconds to say? Tighten it. --- # Your brand URL: https://remocn.dev/docs/guides/your-brand Hand your brand to the agent once — every video after that comes out looking like yours The recipes default to remocn's look — a warm dark background and one lime accent. Your videos should look like your product instead. Do it once: write a brand brief, have your agent save it in the project, and reference it forever. ## The brand brief Fill this in and paste it to your agent: ```text Save this as BRAND.md in the project and use it for every video we make here: # Brand brief - Product: — - Background: (dark or light) - Text color: - Accent color: — use sparingly, one accented element per beat at most - Font mood: - Logo: - Copy tone: ``` From then on, start every new video prompt with one line: **"Use the brand brief."** ## Picking the values - **Background** — your app's or landing page's background is usually right. Dark backgrounds forgive more. - **One accent, used sparingly.** If everything is accented, nothing is. - **Text color** — off-white on dark, near-black on light. Pure white on pure black reads harsh on video. - **Font mood** — you don't have to name a font; describe the mood and your agent picks one. If you know your font's name, name it. - **Logo** — an SVG beats a PNG: it scales cleanly and can be drawn on. ## Staying on brand - Open every new video prompt with "Use the brand brief." - Rebranded? Ask your agent to update `BRAND.md` — every video after that follows. - Consistency compounds: three videos with one look read as a channel; three looks read as three experiments. --- # Backdrop URL: https://remocn.dev/docs/layout/backdrop Full-frame fill with an optional rounded, shadowed content frame — accepts a color, gradient, image, or any React element as a live animated background - Install: `npx shadcn@latest add @remocn/backdrop` - Vibe: clean - Natural length: 150f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/backdrop ``` ## Usage Solid color fill with a content frame: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; ``` Gradient fill: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; ``` Image fill using Remotion's `` (CORS-safe for MP4 export): ```tsx import { Backdrop } from "@/components/remocn/backdrop"; ``` Live animated React element as the fill: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; import { ShaderGrainGradient } from "@/components/remocn/shader-grain-gradient"; }> ``` Custom padding, radius, and shadow: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; ``` Disable shadow: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; ``` ## Fill variants Each `fill` type renders differently — pick the one that fits your scene. ### Color ### Gradient ### Image ### Live background Any React element as fill, e.g. ``. ## Background only When no children are passed, the content frame is not rendered — the fill covers the full composition bleed with no inset, rounding, or shadow. ```tsx import { Backdrop } from "@/components/remocn/backdrop"; // full-bleed fill, no frame // or a live animated background as the fill } /> ``` To render content edge-to-edge without any decorative frame, pass children but zero out padding, radius, and shadow: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `fill` | `BackdropFill \| ReactNode` | `undefined` | The background layer. Pass a BackdropFill object ({ type: "color" \| "gradient" \| "image", ... }) for static fills, or any React element (e.g. ) to render a live animated background. | | `padding` | `number` | `4` | Inset of the content frame as a percentage of the composition width. Scales automatically across 720p, 1080p, and 4K. | | `radius` | `number` | `1` | Corner radius of the content frame as a percentage of the composition width. Scales automatically across resolutions. | | `shadow` | `string` | `"0 20px 60px rgba(0,0,0,0.4)"` | CSS box-shadow applied to the content frame. Pass an empty string to disable the shadow. | | `children` | `ReactNode` | `undefined` | Content rendered inside the rounded, shadowed frame. When omitted, only the fill is shown full-bleed. | | `className` | `string` | `undefined` | Additional class names applied to the outer full-frame container. | ### BackdropFill shape | Prop | Type | Default | Description | |---|---|---|---| | `type: "color"` | `{ type: "color"; value: string }` | — | Solid CSS color value (hex, hsl, oklch, etc.) applied as the background. | | `type: "gradient"` | `{ type: "gradient"; value: string }` | — | Any CSS gradient string (linear-gradient, radial-gradient, conic-gradient) applied as the background. | | `type: "image"` | `{ type: "image"; src: string; fit?: "cover" \| "contain" }` | — | Image rendered via Remotion's (CORS-safe for MP4 export). fit defaults to "cover". | ## Use when - You need a scene background — wrap every composition in `Backdrop` rather than hardcoding background colors on individual components. - You want the Screen Studio floating-card look: colored surround with a padded, rounded, shadowed inner frame. - The background itself should animate (pass a shader backdrop like `ShaderMeshGradient` as the `fill`). ## Don't use when - You need an infinitely looping ambient background as a standalone track — use a shader backdrop directly and let the composition handle framing. - You want a raw full-bleed color with no frame treatment — set `padding={0}` and `radius={0}`, or just set `backgroundColor` in the Remotion composition root. - You're inside a transition presentation — transitions like `whip-pan` manage their own full-frame layout; nesting Backdrop inside them creates double-framing. --- # Chat to Preview Layout URL: https://remocn.dev/docs/layout/chat-to-preview-layout A two-column split where the chat column shrinks and the preview column expands, for showing an agent building something - Install: `npx shadcn@latest add @remocn/chat-to-preview-layout` - Vibe: tech - Natural length: 120f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/chat-to-preview-layout ``` ## Usage Both columns are slots — pass whatever you want rendered. The layout animates the split from `startChatRatio` to `endChatRatio`, so the chat side gives up width as the preview grows. ```tsx // src/Root.tsx import { Composition } from "remotion"; import { ChatToPreviewLayout } from "@/components/remocn/chat-to-preview-layout"; const AgentScene = () => ( } preview={} startChatRatio={0.5} endChatRatio={0.25} /> ); export const RemotionRoot = () => ( ); ``` Leaving `chat` or `preview` unset renders a built-in placeholder, which is useful while you are blocking out the timing before the real content exists. > **Columns have minimum widths** > > The chat column will not squeeze below 520px of inner width and the preview will not go below > 720px, so extreme ratios clamp rather than collapse. Keep `endChatRatio` at or above roughly > `0.2` on the standard `1280×720` canvas to stay clear of the clamp. ## Props | Prop | Type | Default | Description | |---|---|---|---| | `chat` | `ReactNode` | — | Content of the left column. Falls back to a built-in placeholder conversation. | | `preview` | `ReactNode` | — | Content of the right column. Falls back to a built-in placeholder preview. | | `startChatRatio` | `number` | `0.5` | Share of the width the chat column holds at the start, from 0 to 1. | | `endChatRatio` | `number` | `0.25` | Share of the width the chat column holds once the squeeze completes. | | `speed` | `number` | `1` | Time multiplier applied as frame × speed. Above 1 the columns resize sooner. | | `className` | `string` | — | Optional className passed to the root element. | ## Use when - Showing an AI agent at work — the conversation starts as the subject, then yields the frame to what it produced - You need a two-column split whose ratio animates, without writing the width interpolation yourself - A demo has to hand attention from input to output inside a single continuous shot, with no cut ## Don't use when - Both columns should stay the same size — this component exists for the ratio change; use a plain flex row - The transition between the two states is a cut rather than a squeeze — use a transition from `TransitionSeries` instead - You need more than two columns, or a vertical split — the layout is horizontal and two-up by construction --- # Drift URL: https://remocn.dev/docs/layout/drift Wrap any scene in a slow camera push-in so no frame is ever static - Install: `npx shadcn@latest add @remocn/drift` - Vibe: clean - Natural length: 90f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/drift ``` ## Usage `Drift` wraps scene content in a constant-speed camera push-in, scaling it from `1` to `1 + grow` over the wrapping sequence's duration. The movement is linear on purpose — a constant creep that adds life to a scene without drawing attention to itself. `durationInFrames` comes from `useVideoConfig()`, which is Sequence-scoped. Inside a `TransitionSeries.Sequence`, the drift stretches exactly across that scene's own duration and peaks right at the cut. Put `Drift` inside the scene, under the transition, not around the whole series. A `grow` of `0.03` to `0.05` is the working range — beyond that it starts to read as a deliberate zoom rather than ambient motion. A negative `grow` turns it into a slow pull-back instead of a push-in. ```tsx import { Drift } from "@/components/remocn/drift"; export const MyScene = () => ( ); ``` Inside a `TransitionSeries.Sequence`: ```tsx import { TransitionSeries, linearTiming } from "@remotion/transitions"; import { Drift } from "@/components/remocn/drift"; import { zoomBlur } from "@/components/remocn/zoom-blur"; export const MyVideo = () => ( ); ``` ## Text under drift A slow push-in keeps every glyph in sub-pixel motion, and a glyph raster can only sit on a whole device pixel — so type inside a plain `Drift` trembles while borders right next to it glide. Give text blocks their own compositor layer, and the zoom moves a cached texture instead of re-rasterizing the glyphs every frame: ```tsx

Quarterly Report

Revenue grew across every region this quarter.

 ``` One layer per text container — never per word or character, and never on `Drift` itself. Keep borders and other hairline geometry outside the promoted layer: as part of a resampled texture, a 1px line pulses between sharp and blurry as the scale creeps, while fresh rasterization every frame lets it glide. ## Props | Prop | Type | Default | Description | |---|---|---|---| | `grow` | `number` | `0.035` | Scale gain reached at the end of the scene. 0.035 means the scene ends 3.5 percent larger. Negative values pull back instead. | ## Use when - Any static scene should feel alive — hero cards, feature panels, dashboards sitting between transitions. - You want the default anti-static wrapper of the catalog — reach for it whenever a scene would otherwise hold a frozen frame. ## Don't use when - The content is already animated with strong motion — layering drift on top of it doubles the movement and muddies the read. - You need a noticeable, dramatic zoom — this is a creep, not a statement; use a real scale animation or `zoom-blur` for punch. --- # Layout URL: https://remocn.dev/docs/layout Scene framing and fill components for Remotion compositions Layout primitives that handle full-frame fills, content framing, and padding — the structural layer every Remotion composition needs before adding animation. - [Backdrop](https://remocn.dev/docs/layout/backdrop) — Full-frame fill (color, gradient, image, or live animated React element) with an optional rounded, shadowed content frame inset by padding - [Drift](https://remocn.dev/docs/layout/drift) — A restrained linear camera creep that keeps a static scene alive without becoming the subject - [Chat to Preview Layout](https://remocn.dev/docs/layout/chat-to-preview-layout) — A two-column handoff where an agent conversation yields the frame to the product it created - [Stage](https://remocn.dev/docs/layout/stage) — A perspective studio plane with an integrated operator camera that can travel across long screenshots and live scenes --- # Stage URL: https://remocn.dev/docs/layout/stage Put a screenshot, recording, or long page on a perspective studio plane and direct the camera across it with timeline keyframes - Install: `npx shadcn@latest add @remocn/stage` - Vibe: premium - Natural length: sustained ## Installation ```bash npx shadcn@latest add @remocn/stage ``` ## Usage `Stage` is both the set and the operator camera. It places one child surface in a perspective studio, then keeps a normalized point on that surface at the center of the shot as `moves` change over time. ```tsx import { Img, staticFile } from "remotion"; import { Stage } from "@/components/remocn/stage"; export const WebsiteTour = () => ( ); ``` The child can be an image, video, live React component, or whole Remotion scene. Descendants keep animating, but they share one 3D plane. The plane settles into the studio over the first 24 frames; the camera path can continue for as long as the Sequence does. ## Long surfaces and camera targets `contentSize` declares the surface's intrinsic aspect ratio. Stage fits its width to the composition and allows the resulting height to extend far beyond the frame. It does not fake webpage scrolling: the long surface stays intact while the camera flies above it. `x` and `y` are normalized target points on that surface: - `x: 0`, `y: 0` targets the top-left corner. - `x: 0.5`, `y: 0.5` targets the center. - `x: 1`, `y: 1` targets the bottom-right corner. Stage clamps `x` and `y` to `0–1`. Because the current target is held at composition center, the coordinates stay stable when zoom and perspective change. An empty `moves` array leaves the surface centered and static. > **Give the surface real dimensions** > > Stage cannot infer the intended height of an absolutely positioned child. Pass `contentSize` for screenshots and long layouts, and make the child fill the resulting plane. ## Segment easing and holds Each destination key can choose the easing used to arrive at it. The default is the project `EXPO` easing. Repeat an identical pose at a later frame to create a hold. ```tsx import { Easing } from "remotion"; ``` Before the first key, Stage holds the first pose; after the last key, it holds the final pose. Keys are sorted by `at`, and when keys share a frame, the last supplied key wins. Missing pose fields use neutral values (`x: 0.5`, `y: 0.5`, `zoom: 1`, `rotate: 0`) instead of inheriting from the previous key. ## Direct the studio The studio props remain independent from the camera path: ```tsx ``` Lower `perspective` values exaggerate depth. `reflection`, `shadow`, and `light` clamp to `0–1`. `radius` is a percentage of the composition width, so the corner treatment scales across render sizes. The customizer deliberately exposes experimental ranges: both rotations reach `-180–180°`, perspective reaches down to `50px`, and scale reaches `0.1–3`. Rotations beyond 90 degrees reveal the browser's naturally mirrored back face instead of making the surface disappear. Very low perspective and high scale can clip most of the surface; that is intentional for extreme close-ups and abstract depth treatments. ## Deterministic handheld movement `shake` adds low-frequency operator movement and smoothly interpolated seeded noise. The same `seed`, frame, and strength always produce the same render. ```tsx ``` Use `0.08–0.2` for a restrained human operator. `shake` clamps to `0–1`. ## Text and source bleed Fractional zoom continuously resamples glyphs. If small live text trembles, put `willChange: "transform"` on each text container, not every word. Keep 1px borders outside those promoted layers so borders stay sharp. The outer frame clips the surface. Targets near an edge, zoom below `1`, and strong perspective can reveal the backdrop around it. Leave breathing room in the source or keep edge targets slightly inset, such as `y: 0.04` and `y: 0.96`. For an optical finish, wrap Stage in [`CameraLens`](/docs/filters/components/camera-lens). Stage supplies the physical set and operator path; CameraLens supplies bloom, softness, chromatic aberration, and vignette. ## Props | Prop | Type | Default | Description | |---|---|---|---| | `children` | `ReactNode` | — | The image, video, component, or scene rendered as one studio plane. | | `contentSize` | `{ width: number; height: number }` | `composition size` | Intrinsic surface dimensions used to preserve its aspect ratio, including long pages. | | `moves` | `StageKey[]` | `[]` | Normalized camera targets keyed by Sequence-local frame. | | `shake` | `number` | `0` | Deterministic handheld strength, clamped from 0 to 1. | | `seed` | `string` | `"remocn-stage"` | Seed used by the handheld noise field. | | `backdrop` | `string` | `"linear-gradient(145deg, #17181d 0%, #09090b 72%)"` | CSS background used for the full-frame studio. | | `rotateX` | `number` | `14` | X-axis tilt of the surface in degrees. | | `rotateY` | `number` | `-20` | Y-axis tilt of the surface in degrees. | | `perspective` | `number` | `900` | CSS perspective distance in pixels. Lower values exaggerate depth. | | `scale` | `number` | `0.86` | Base scale of the studio plane before keyframe zoom. | | `radius` | `number` | `1.4` | Surface corner radius as a percentage of composition width. | | `reflection` | `number` | `0.24` | Floor reflection strength from 0 to 1. | | `shadow` | `number` | `0.7` | Contact-shadow strength from 0 to 1. | | `light` | `number` | `0.55` | Directional studio-light strength from 0 to 1. | | `className` | `string` | `undefined` | Additional class names applied to the full-frame wrapper. | ### StageKey | Prop | Type | Default | Description | |---|---|---|---| | `at` | `number` | — | Required frame from the start of the current Sequence. | | `x` | `number` | `0.5` | Horizontal target on the surface from left (0) to right (1). | | `y` | `number` | `0.5` | Vertical target on the surface from top (0) to bottom (1). | | `zoom` | `number` | `1` | Zoom multiplier around the current target. | | `rotate` | `number` | `0` | Camera roll in degrees; the surface rotates in the opposite direction. | | `easing` | `EasingFunction` | `EXPO` | Easing used by the segment arriving at this key. | ## Use when - A product screen, website, image, or live React scene should read as a photographed object rather than a flat full-frame capture. - The camera needs to travel across one continuous surface, including a page much taller than the composition. - You want studio perspective, lighting, camera keyframes, holds, easing, and deterministic handheld motion in one wrapper. ## Don't use when - You only need a full-frame fill or rounded inset with no 3D presentation — use `backdrop`. - You are moving between two scenes — use a transition such as `whip-pan` or `focus-pull`. - Elements inside the subject need independent depth or parallax — Stage treats all children as one flat plane. --- # GitHub Sponsors URL: https://remocn.dev/docs/social/github-sponsors Animated GitHub Sponsors lockup — a self-drawing heart that docks to a header, every sponsor avatar blur-staggering into a grid, then a thank-you headline and a CTA - Install: `npx shadcn@latest add @remocn/github-sponsors` - Vibe: social - Natural length: 270f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/github-sponsors ``` ## Usage Standalone in a Remotion `` — renders immediately from built-in sample sponsors so the video works right after install. ```tsx // src/Root.tsx import { Composition } from "remotion"; import { GitHubSponsors } from "@/components/remocn/github-sponsors"; const GitHubSponsorsScene = () => ( ); export const RemotionRoot = () => ( ); ``` ### With live data Pass a `sponsors` array of `{ login, avatarUrl }` to replace the built-in sample. Every sponsor in the array is shown — the grid sizes itself to the count, and the "Powered by N sponsors" line uses the array length. ```tsx // src/Root.tsx import { Composition } from "remotion"; import { GitHubSponsors } from "@/components/remocn/github-sponsors"; const sponsors = [ { login: "octocat", avatarUrl: "https://avatars.githubusercontent.com/u/583231", }, // … ]; const GitHubSponsorsScene = () => ( ); export const RemotionRoot = () => ( ); ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `account` | `string` | `"remotion-dev"` | GitHub account shown in the lockup (github.com/sponsors/account) | | `sponsors` | `Sponsor[]` | `SAMPLE_SPONSORS` | Every entry is shown — avatars blur-stagger into a grid that sizes to the array. Falls back to built-in sample data when omitted. | | `accentColor` | `string` | `"#db61a2"` | Accent for the heart and the CTA pill (GitHub Sponsors pink) | | `speed` | `number` | `1` | Animation speed multiplier (minimum 1; the headline and CTA must land before the final frame) | | `theme` | `"light" \| "dark"` | `"light"` | Color theme for background and text | ### Sponsor shape | Prop | Type | Default | Description | |---|---|---|---| | `login` | `string` | — | GitHub username (used for the avatar fallback initial) | | `avatarUrl` | `string` | — | Full URL to the avatar image (must be CORS-accessible for MP4 export) | ## Use when - A thank-you beat for funders — the heart draws itself, docks upward, and every sponsor avatar blur-staggers into a grid beneath it. - An OSS funding ask needs to end on the "Become a sponsor" pill and the github.com/sponsors/ line. - You want the card to size itself to a live sponsor list, since the grid columns and the "Powered by N sponsors" line both derive from the array length. ## Don't use when - The milestone is a star count rather than funding — use `github-stars`, whose odometer counts up to a total. - The subject is one person's profile instead of a group of supporters — use `x-follow-card`. - You need a neutral partner or integration lineup without the Sponsors heart and pink CTA — use `logo-enter`. --- # GitHub Stars URL: https://remocn.dev/docs/social/github-stars Stargazer list fly-through with a synced odometer counter — renders standalone from sample data or accepts live stargazer props - Install: `npx shadcn@latest add @remocn/github-stars` - Vibe: data - Natural length: 120f @ 30fps > **Live generator** > > Want to see it with your own repo before installing? Head to [/stars](/stars), paste any GitHub repo URL, preview the animation, and download an MP4 — it's the live demo of this component. ## Installation ```bash npx shadcn@latest add @remocn/github-stars ``` ## Usage Standalone in a Remotion `` — uses the built-in sample stargazers so the video renders immediately after install: ```tsx // src/Root.tsx import { Composition } from "remotion"; import { GitHubStars } from "@/components/remocn/github-stars"; const GitHubStarsScene = () => ( ); export const RemotionRoot = () => ( ); ``` ### With live data Pass fetched stargazers to replace the built-in sample data. Each entry in `stargazers` drives one row in the fly-through: ```tsx // src/Root.tsx import { Composition } from "remotion"; import { GitHubStars } from "@/components/remocn/github-stars"; // Shape returned by your fetch (e.g. from /api/stargazers) const stargazers = [ { login: "octocat", avatarUrl: "https://avatars.githubusercontent.com/u/583231", starredAt: "2021-03-15T10:00:00Z", }, // … more entries ]; const GitHubStarsScene = () => ( ); export const RemotionRoot = () => ( ); ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `repo` | `string` | `"remotion-dev/remotion"` | Repository shown in the heading (owner/name format) | | `totalStars` | `number` | `24813` | Total star count the odometer counts up to | | `stargazers` | `Stargazer[]` | `SAMPLE_STARGAZERS` | Array of stargazer objects that populate the fly-through list. Falls back to built-in sample data when omitted. | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout orientation — horizontal is 1280x720 (16:9), vertical is 720x1280 (9:16) | | `accentColor` | `string` | `"#f5a623"` | Accent color used for the star icon and counter highlight | | `speed` | `number` | `1` | Multiplier for the overall animation speed — higher values compress the fly-through | | `theme` | `"light" \| "dark"` | `"light"` | Color theme for the composition background and text | ### Stargazer shape Each item in the `stargazers` array must conform to this shape: | Prop | Type | Default | Description | |---|---|---|---| | `login` | `string` | — | GitHub username displayed in the list row | | `avatarUrl` | `string` | — | Full URL to the user's GitHub avatar (must be CORS-accessible for MP4 export) | | `starredAt` | `string` | — | ISO 8601 timestamp of when the user starred the repo (e.g. "2021-03-15T10:00:00Z") | ## Use when - Celebrating an OSS milestone — the count-up odometer landing on a star total is the payoff beat. - A repo-showcase or social-proof scene needs real stargazer faces flying past. - You want one self-contained card that pairs the avatar fly-through with the synced counter. ## Don't use when - You only need the number to roll up without the stargazer fly-through — use `number-wheel` or `rolling-number`. - The metric isn't GitHub stars — use a generic counter (`rolling-number`) or `animated-bar-chart` for compared values. - You're depicting follower growth on X — use `x-followers-overview`. --- # Social URL: https://remocn.dev/docs/social Remotion compositions for sharing milestones and social proof Ready-to-install compositions that turn GitHub stats, product launches, and community milestones into shareable video moments. - [GitHubStars](https://remocn.dev/docs/social/github-stars) — Stargazer fly-through with an odometer counter — paste a repo, preview the animation, download MP4 - [XFollowCard](https://remocn.dev/docs/social/x-follow-card) — Animated X profile follow card with cursor-driven Follow transition - [XFollowersOverview](https://remocn.dev/docs/social/x-followers-overview) — X follow notifications flip through in 3D, then the total follower count blurs in - [LogoEnter](https://remocn.dev/docs/social/logo-enter) — A stacked group of round brand chips that spring in one-by-one, then hold — swap in any logos --- # Logo Enter URL: https://remocn.dev/docs/social/logo-enter A stacked group of round brand chips that spring in one-by-one, then hold - Install: `npx shadcn@latest add @remocn/logo-enter` - Vibe: social - Natural length: 90f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/logo-enter ``` ## Usage Standalone in a Remotion `` — ships with a sample set of AI-tool marks so the video renders immediately after install: ```tsx // src/Root.tsx import { Composition } from "remotion"; import { LogoEnter } from "@/components/remocn/logo-enter"; const LogoEnterScene = () => ( ); export const RemotionRoot = () => ( ); ``` Each chip is a round, ring-bordered circle that springs in with a scale-up and a small slide, staggered one after another, then holds. The exit is left to your timeline — drop it in a `TransitionSeries.Sequence` and pair it with any transition. ### Swap the logos The `logos` prop defaults to the exported `SAMPLE_LOGOS`. Each entry is `{ mark, bg }` — `mark` is any React node (an inline SVG works best), `bg` is the chip's fill. Edit the copied file to feature your own marks: ```tsx import { LogoEnter, type Logo } from "@/components/remocn/logo-enter"; const MY_LOGOS: Logo[] = [ { mark: , bg: "#ffffff" }, { mark: , bg: "#0A0A0A" }, ]; ``` ### With Backdrop Renders transparent — supply the background via `Backdrop`: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; import { LogoEnter } from "@/components/remocn/logo-enter"; ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `logos` | `Logo[]` | `SAMPLE_LOGOS` | Chips to stack — each is { mark: ReactNode; bg?: string }. Defaults to a sample set of AI-tool marks; swap for your own | | `diameter` | `number` | `118` | Chip diameter in px — the mark is sized to 52% of it | | `overlap` | `number` | `38` | How many px each chip tucks under the previous one | | `ringColor` | `string` | `"#0B0B0C"` | Color of the 5px ring around each chip | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Stacking axis — row (overlap left, rise in) or column (overlap up, slide in) | | `stagger` | `number` | `7` | Frames between each chip springing in | | `speed` | `number` | `1` | Animation speed multiplier | ## Notes - **Own your marks:** the four sample marks (Claude, Codex, Cursor, Grok) are inline SVGs in the copied file — edit, reorder, or replace them directly. Each fills its chip via `width="100%"` so it scales with `diameter`. - **Transparent:** the component paints no background or scrim — wrap it in `Backdrop` to set the scene. - **Enter-only:** chips spring in and hold; compose the exit with a `TransitionSeries` transition. ## Use when - Showing a cluster of brand/partner/integration logos arriving together ("works with…", an AI-tool lineup, an icon cloud). - A positioning or proof beat needs several marks to land as a stacked, overlapping group. - You want logo chips that spring in and hold, with the exit owned by your `TransitionSeries` transition. ## Don't use when - You need a single product wordmark lockup — this is a multi-chip cluster, not one mark; build a lightweight lockup or resolve kinetic text (`kinetic-center-build`, `per-character-rise`) into the name. - You're depicting one specific brand's product UI — use the matching card (`chat-gpt`, `claude-code`, `v0`, `opencode`). - The logos must orbit or scatter in 3D rather than stack — compose your own layout; this one stacks on a single axis. --- # X Follow Card URL: https://remocn.dev/docs/social/x-follow-card Animated X profile follow card with spring bounce-in, staggered blur-in, and cursor-driven Follow transition - Install: `npx shadcn@latest add @remocn/x-follow-card` - Vibe: social - Natural length: 165f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/x-follow-card ``` > **Note** > > Installing `x-follow-card` automatically pulls the `cursor` primitive as a dependency via `registryDependencies`. No additional install needed. ## Usage Standalone in a Remotion `` — uses sample profile data so the video renders immediately after install: ```tsx // src/Root.tsx import { Composition } from "remotion"; import { XFollowCard } from "@/components/remocn/x-follow-card"; const XFollowCardScene = () => ( ); export const RemotionRoot = () => ( ); ``` Timeline: card bounces in (0–25), layers blur in staggered (20–70), cursor travels to the Follow button (75–110), clicks and transitions to "Following" (110), then holds (130–165). ### With Backdrop Renders transparent and single-theme — supply the background via `Backdrop`; edit the copied file to re-theme: ```tsx import { Backdrop } from "@/components/remocn/backdrop"; import { XFollowCard } from "@/components/remocn/x-follow-card"; ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `name` | `string` | `"Dmitri K"` | Display name shown above the handle | | `handle` | `string` | `"kapishdima"` | X username (without the @) | | `bio` | `string` | `"Building video tools with Remotion"` | Multi-line profile description | | `location` | `string` | `"Earth"` | Location shown in meta row (optional) | | `website` | `string` | `"remocn.dev"` | Website URL shown in meta row (optional) | | `joined` | `string` | `"Joined January 2023"` | Account creation date shown in meta row | | `avatarUrl` | `string` | `""` | Profile picture URL — defaults to gradient fallback if empty | | `coverUrl` | `string` | `""` | Header image URL — defaults to accent-color gradient if empty | | `verified` | `boolean` | `true` | Whether to show X verification badge next to name | | `accentColor` | `string` | `"#1d9bf0"` | X brand blue — used for button fill, badge, and cursor ripple | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout orientation — horizontal is 1280×720 (16:9), vertical is 720×1280 (9:16) letterboxed | | `speed` | `number` | `1` | Animation speed multiplier — minimum 1 (prevents click frame loss) | ## Notes - **Offline rendering:** avatarUrl and coverUrl default to empty strings, which render gradient fallbacks. No network requests are made, so the preview works offline and MP4 export requires no CORS setup. - **Sample post:** The hardcoded post at the bottom shows a representative engagement example. In v1, post content is not customizable. - **Button state:** The Follow button transitions from solid accent-color to "Following" (white bg, gray border, black text) when the cursor clicks at frame ~110. ## Use when - Showcasing a single X profile with the recognizable click-to-Follow payoff as the action beat. - A social-proof or creator-intro scene needs one branded profile card with the cursor interaction. - You want an offline-safe card (gradient avatar fallback) without wiring real image URLs. ## Don't use when - You're aggregating follower growth or notifications rather than one profile — use `x-followers-overview`. - The brand is GitHub, not X — use `github-stars`. - You need a generic testimonial/quote card, not an X profile — compose a plain card. --- # X Followers Overview URL: https://remocn.dev/docs/social/x-followers-overview X follow notifications flip through in 3D, then the total follower count blurs in - Install: `npx shadcn@latest add @remocn/x-followers-overview` - Vibe: data - Natural length: 360f @ 30fps ## Installation ```bash npx shadcn@latest add @remocn/x-followers-overview ``` > **Note** > > Installing `x-followers-overview` automatically pulls the `confetti` effect as a dependency via `registryDependencies`. No additional install needed. ## Usage Standalone in a Remotion `` — uses a sample notification list so the video renders immediately after install: ```tsx // src/Root.tsx import { Composition } from "remotion"; import { XFollowersOverview } from "@/components/remocn/x-followers-overview"; const XFollowersOverviewScene = () => ( ); export const RemotionRoot = () => ( ); ``` Each follow notification — ` followed you ·