### Install @remotion/transitions package Source: https://remotionui.com/docs/guides/transitions Install the Remotion transitions package. ```bash $ npx remotion add @remotion/transitions ``` -------------------------------- ### Install transition-fade helper Source: https://remotionui.com/docs/guides/transitions Install the fade helper using the RemotionUI CLI. ```bash $ npx remotion-ui@latest add transition-fade ``` -------------------------------- ### Starter prompt for coding agents Source: https://remotionui.com/docs/ai Paste this prompt into Claude, ChatGPT, Cursor, or any coding agent to start building a video with Remotion and RemotionUI. It instructs the agent to read the documentation, run the CLI init command, search and install components, import from local paths, and follow animation rules. ```text You are building a video with Remotion and RemotionUI. RemotionUI is a copy-paste component registry for Remotion. The npm package is the CLI only — components are installed as source files into my project. Read these first: - https://remotionui.com/llms.txt — short entry point - https://remotionui.com/llms-full.txt — full usage guide - https://remotionui.com/ai/components.json — every component, with install command, import path, and tasks Workflow: 1. Run `npx remotion-ui@latest init --existing` if there is no remotion-ui.json (or `init my-video` for a new project). 2. Find components with `npx remotion-ui@latest search -q --json`. 3. Install with `npx remotion-ui@latest add ` before importing anything. This also installs dependencies and registers compositions in Root.tsx. 4. Import from local paths — @/remotion/primitives/..., @/remotion/scenes/..., @/compositions/... — never from the remotion-ui package. 5. Read props from https://remotionui.com/ai/components/.json. 6. Edit the copied source files directly when I want design changes. Rules: - Drive all motion with useCurrentFrame(), interpolate(), spring(), and . - Never use CSS transitions, CSS keyframes, or Tailwind animation classes — they do not render in video. - Every command accepts --json and returns { ok: false, error: { code, message } } on failure. Now help me build: ``` -------------------------------- ### Install pricing-card with npx remotion-ui@latest add Source: https://remotionui.com/docs/components/pricing-card Run this command to install the pricing-card component into your project. After installation, import the copied source component locally. ```bash npx remotion-ui@latest add pricing-card ``` -------------------------------- ### Install media-sequence with npx remotion-ui Source: https://remotionui.com/docs/components/media-sequence Install the media-sequence component into your project. ```bash npx remotion-ui@latest add media-sequence ``` -------------------------------- ### Installation Source: https://remotionui.com/docs/components/caption-bumper Command to install the Caption Bumper component. ```APIDOC ## Installation ```bash npx remotion-ui@latest add caption-bumper ``` ``` -------------------------------- ### Install Gantt Timeline Source: https://remotionui.com/docs/components/gantt-timeline Install the component with the Remotion UI CLI. ```bash npx remotion-ui@latest add gantt-timeline ``` -------------------------------- ### Install with npx remotion-ui Source: https://remotionui.com/docs/components/multi-device-lineup Installs the component via CLI. ```bash $ npx remotion-ui@latest add multi-device-lineup ``` -------------------------------- ### Install the Creator Reel component Source: https://remotionui.com/docs/components/creator-reel Run this command to add the Creator Reel template to your project. The command installs the component locally; remember to install it before importing the copied source component. ```bash npx remotion-ui@latest add creator-reel ``` -------------------------------- ### Install Intro component Source: https://remotionui.com/docs/components/intro Use the CLI to add the intro component to your project. ```bash $ npx remotion-ui@latest add intro ``` -------------------------------- ### SquashStretch usage example Source: https://remotionui.com/docs/components/squash-stretch Usage example shown in the Usage section, identical to the install example but formatted inline. Demonstrates the same bounce mode with a 36-frame period. ```tsx import { SquashStretch } from "@/remotion/primitives/squash-stretch"; ``` -------------------------------- ### Example usage of SubtitleTranslate Source: https://remotionui.com/docs/components/subtitle-translate Example usage of the SubtitleTranslate component. Install first, then import the copied source component locally. Do not import this component from the `remotion-ui` npm package; it is copied into your project. ```jsx import { SubtitleTranslate } from "@/remotion/primitives/subtitle-translate"; ``` -------------------------------- ### Install Tutorial Clip with npx Source: https://remotionui.com/docs/components/tutorial-clip Install the Tutorial Clip component using the Remotion UI CLI. Run this command in your project directory. ```bash $ npx remotion-ui@latest add tutorial-clip ``` -------------------------------- ### CreatorReel Component Source: https://remotionui.com/docs/components/creator-reel Documentation for the CreatorReel component, a vertical creator media composition template. It includes installation, import, props, and usage examples. ```APIDOC ## CreatorReel Component ### Description A vertical creator media composition template that combines hook, talking-head, comment, b-roll, captions, and end-card scenes into a complete 9:16 reel. This component is copied into your project and imported locally. ### Import ```tsx import { CreatorReel } from "@/compositions/creator-reel"; ``` ### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | hookHeadline | string | - | Opening hook headline (auto-fit in portrait). | | hookSubtitle | string | - | Supporting line under the hook. | | mediaSrc | string | - | Speaker image or video source. | | mediaFit | "cover" \| "contain" | "cover" | Speaker media object-fit behavior. | | audioSrc | string | - | Optional audio source for waveform visuals. | | captions | Caption[] | - | Synced captions layered over the talking-head scene. | | talkingHeadEyebrow | string | - | Eyebrow label above the talking-head title. | | talkingHeadTitle | string | - | Short title in the talking-head layout. | | comment | string | - | Comment callout body text. | | author | string | - | Comment author display name. | | handle | string | - | Comment author handle. | | bRollItems | BRollItem[] | - | Media cards for the proof/b-roll section. | | bRollTitle | string | - | Headline beside the b-roll stack. | | bRollKicker | string | "Proof beats" | Eyebrow above the b-roll headline. | | accentColor | string | - | Accent used across hook, captions, and end card. | | ctaTitle | string | - | End card headline (separate from hook). | | ctaLabel | string | - | End card CTA pill label. | ### Usage Example ```tsx import { CreatorReel } from "@/compositions/creator-reel"; ``` ### Usage Example with Media and Captions ```tsx import { CreatorReel } from "@/compositions/creator-reel"; ``` ### Installation ```bash npx remotion-ui@latest add creator-reel ``` ### Notes - Use when: complete video templates that can be customized as source. - Customize: hookHeadline, hookSubtitle, mediaSrc, mediaFit, plus copied source for timing, layout, colors, and typography. - Rule: do not import this component from the `remotion-ui` npm package; it is copied into your project. ``` -------------------------------- ### Install device-mockup-zoom with npx remotion-ui Source: https://remotionui.com/docs/components/device-mockup-zoom Install the device-mockup-zoom scene into your project. Run this command before importing the component locally. ```bash $ npx remotion-ui@latest add device-mockup-zoom ``` -------------------------------- ### GanttTimeline usage example Source: https://remotionui.com/docs/components/gantt-timeline Renders a Gantt timeline with tasks, columns, and a marker. Tasks use column units for start and end positions. ```tsx import { GanttTimeline } from "@/remotion/primitives/gantt-timeline"; ``` -------------------------------- ### Install transition-circle-reveal with npx remotion-ui Source: https://remotionui.com/docs/components/transition-circle-reveal Install the component with the Remotion UI CLI. Run this before importing the copied source component locally. ```bash npx remotion-ui@latest add transition-circle-reveal ``` -------------------------------- ### ZoomPanFrame Component Source: https://remotionui.com/docs/components/zoom-pan-frame Documentation for the ZoomPanFrame component, a camera move on a still driven by focal points. Includes installation, import, props, and usage example. ```APIDOC ## ZoomPanFrame Component ### Description A camera move on a still, driven by focal points rather than pixel offsets. The move spans the composition minus a short settle by default, which keeps it reading as camera work rather than a jump cut. ### Import `import { ZoomPanFrame } from "@/remotion/scenes/zoom-pan-frame";` ### Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `src*` | `string` | - | Image or video source. | | `from` | `FocalPoint` | - | Where the move starts: `{ x, y, scale }` with x/y in 0–1. | | `to` | `FocalPoint` | - | Where the move lands. Defaults to a centred 1.24 push. | | `moveInFrames` | `number` | - | Length of the move. Defaults to the composition minus a short settle. | | `label` | `string` | - | Chip that rises once the move lands. | | `vignette` | `number` | `0.34` | Corner darkening; 0 turns it off. | | `fit` | `"cover" | "contain"` | `"cover"` | Media object-fit behaviour. | | `theme` | `"dark" | "light"` | `"dark"` | Surface palette. | ### Usage Example ```tsx import { ZoomPanFrame } from "@/remotion/scenes/zoom-pan-frame"; ``` ### Notes - Install first, then import the copied source component locally. - Use when: full-frame scenes, overlays, cards, and reusable video sections. - Customize: `src`, `from`, `to`, `moveInFrames`, plus copied source for timing, layout, colors, and typography. - Rule: do not import this component from the `remotion-ui` npm package; it is copied into your project. ``` -------------------------------- ### Install chat-to-preview with npx remotion-ui Source: https://remotionui.com/docs/components/chat-to-preview Install the chat-to-preview component into your project. Run this command before importing the component locally. ```bash $ npx remotion-ui@latest add chat-to-preview ``` -------------------------------- ### ParticleField Source: https://remotionui.com/docs/components/particle-field Documentation for the ParticleField component, a full-frame layer of drifting particles with depth. It includes installation, import, usage example, and a full props table. ```APIDOC ## ParticleField ### Description A full-frame layer of drifting particles with depth. Each particle's depth drives its size, speed, brightness, and focus together, creating a volumetric field. It is continuous, unlike `confetti-burst`, and can sit under a whole scene without resolving. ### Import ``` import { ParticleField } from "@/remotion/primitives/particle-field"; ``` ### Usage Example ``` ``` ### Props | Prop | Type | Default | Description | |------|------|---------|-------------| | backgroundColor | string | "#05070f" | Plate behind the field. `transparent` layers it over footage. | | color | string | "#e8b86d" | Particle colour. | | count | number | 70 | How many particles. | | angle | number | 8 | Direction of travel in degrees. 0 drifts straight up. | | speed | number | 1 | Traverse speed. 1 crosses the frame in about eight seconds. | | size | number | 14 | Diameter of the nearest particle, in px. | | minSize | number | 2 | Diameter of the furthest particle, in px. | | depthBlur | number | 3 | Defocus on the furthest particles. 0 flattens the field. | | drift | number | 4 | Sideways wander, in percent of the frame. | | intensity | number | 1 | Overall brightness. | | glow | number | 1.6 | Halo per particle, as a multiple of its size. 0 draws hard dots. | | seed | number | 1 | Changes the layout without changing any other prop. | ### Notes - Install with `npx remotion-ui@latest add particle-field`. - Do not import this component from the `remotion-ui` npm package; it is copied into your project. - Customize via props and copied source for timing, layout, colors, and typography. ``` -------------------------------- ### Install transition-slide component Source: https://remotionui.com/docs/components/transition-slide Run this command to add the transition-slide component to your project. ```bash $ npx remotion-ui@latest add transition-slide ``` -------------------------------- ### WaveText Source: https://remotionui.com/docs/components/wave-text Documentation for the WaveText component, a Remotion primitive that runs a sine wave along a line of text. Includes installation, import, props, and usage example. ```APIDOC ## WaveText ### Description Runs a sine wave along a line of text, one character at a time. The wave is a function of the frame, so it never settles. The entrance is handled by `split-text-chars` underneath, and the amplitude is scaled by each character's arrival progress. ### Import ``` import { WaveText } from "@/remotion/primitives/wave-text"; ``` ### Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `text` | string | - | The line the wave runs along. | | `amplitude` | number | 0.16 | Peak displacement, in em of the font size. | | `wavelength` | number | 6 | Characters per full wave. Higher spreads the crest wider. | | `periodInFrames` | number | 48 | Frames for one full cycle. | | `direction` | "forward" \| "backward" | "forward" | Travel direction along the line. | | `scale` | number | 0.06 | Extra scale on the crest, so it reads as depth rather than jitter. | | `shade` | number | 0.25 | How far the trough fades. 0 keeps every character at full opacity. | | `staggerInFrames` | number | 2 | Frames between one character arriving and the next. | | `durationInFrames` | number | 20 | Length of one character's entrance. | | `delayInFrames` | number | 0 | Frames before the first character arrives. | | `exitAtInFrames` | number | - | Frame the line starts leaving on. The wave lowers with it. | ### Example ``` ``` ### Notes - Phase follows document order, not the stagger rank. - The wave is a function of the frame and never settles. - Install with `npx remotion-ui@latest add wave-text`. - Do not import from the `remotion-ui` npm package; it is copied into your project. ``` -------------------------------- ### ArrowAnnotate Component Source: https://remotionui.com/docs/components/arrow-annotate Documentation for the ArrowAnnotate component, a hand-drawn arrow that draws itself with the head landing on the curve's tangent. Includes installation, import, usage example, and full prop reference. ```APIDOC ## ArrowAnnotate Component ### Description A hand-drawn arrow that draws itself, with the head landing on the curve's own tangent. The shaft grows from its start and the head lands over the last quarter of the stroke, angled to the curve's tangent rather than to the straight line between the ends. The hand-drawn quality is two passes over the same curve at a sub-pixel offset; set `sketch={false}` for a single clean stroke. ### Import `import { ArrowAnnotate } from "@/remotion/primitives/arrow-annotate";` ### Usage Example ```tsx ``` ### Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `from` | `{ x: number; y: number }` | `{ x: 0.08, y: 0.16 }` | Start of the shaft, as a fraction of the box. | | `to` | `{ x: number; y: number }` | `{ x: 0.82, y: 0.74 }` | The point the head lands on, as a fraction of the box. | | `bow` | `number` | `0.28` | How far the shaft bows off the straight line, as a fraction of the distance. Negative bows the other way. | | `label` | `string` | `-` | Text set beside the start of the shaft. | | `labelSize` | `number` | `16` | Label type size in box units. | | `width` | `number` | `320` | Box width in pixels. | | `height` | `number` | `220` | Box height in pixels. | | `stroke` | `string` | `"#E8B86D"` | Colour of the shaft, head and label. | | `strokeWidth` | `number` | `3` | Shaft weight. The second sketch pass runs at 60% of it. | | `headSize` | `number` | `18` | Length of the head's barbs, in box units. | | `sketch` | `boolean` | `true` | Draws the shaft twice at a sub-pixel offset. False for a single clean stroke. | | `delayInFrames` | `number` | `0` | Frames to wait before the shaft starts drawing. | | `durationInFrames` | `number` | `40` | Frames the shaft takes. The head lands over the last quarter. | | `exitAtInFrames` | `number` | `-` | Frame the arrow starts leaving. Omit to leave it on screen. | | `exitInFrames` | `number` | `14` | Frames the exit takes. | ### Notes - Endpoints are fractions of the box, so the same arrow works at any size. - `bow` pushes the midpoint along the line's own normal; negative values bow the other way. - The stroke draws on an editorial curve rather than an ease-out. - The head is angled to the curve's own tangent, not to the straight line between the ends. - The hand-drawn quality is two passes at a sub-pixel offset — not a path whose points move per frame. - Install with `npx remotion-ui@latest add arrow-annotate`. - Import the copied source component locally; do not import from the `remotion-ui` npm package. ``` -------------------------------- ### Install Remotion UI compositions with npx remotion-ui add Source: https://remotionui.com/docs/components Install individual Remotion UI compositions from the registry. Each command adds a specific component (podcast-clip, pricing-focus, showcase, social-clip, tool-menu-slide, tutorial-clip) as source code you own. ```bash npx remotion-ui@latest add podcast-clip ``` ```bash npx remotion-ui@latest add pricing-focus ``` ```bash npx remotion-ui@latest add showcase ``` ```bash npx remotion-ui@latest add social-clip ``` ```bash npx remotion-ui@latest add tool-menu-slide ``` ```bash npx remotion-ui@latest add tutorial-clip ``` -------------------------------- ### Start the Remotion Studio dev server Source: https://remotionui.com/docs/installation Start the Remotion Studio dev server for the newly created project. Open the URL from the terminal to add your first component. ```bash $ cd my-video && npm run dev ``` -------------------------------- ### Import and render PathDraw with multiple paths Source: https://remotionui.com/docs/components/path-draw Import and render the PathDraw component. Pass an array of path strings to d to draw them in sequence; each path starts staggerInFrames after the previous one. The example draws two paths over 60 frames. ```tsx import { PathDraw } from "@/remotion/primitives/path-draw"; ``` -------------------------------- ### Render VoiceNoteBubble with durationInFrames, sender, and avatar Source: https://remotionui.com/docs/components/voice-note-bubble Install the component with npx remotion-ui@latest add voice-note-bubble, then import it from the local copied source. The example renders a voice note bubble with a duration of 120 frames, sender name "Sam", and avatar "S". ```tsx import { VoiceNoteBubble } from "@/remotion/primitives/voice-note-bubble"; ``` -------------------------------- ### Initialize RemotionUI in an existing project Source: https://remotionui.com/docs/installation Bootstrap RemotionUI in an existing Remotion project. Writes remotion-ui.json, checks path aliases, and installs the agent skill by default. ```bash $ npx remotion-ui@latest init --existing ``` -------------------------------- ### Usage example Source: https://remotionui.com/docs/components/candlestick-chart Example usage of the CandlestickChart component with the same props as the import example. ```tsx import { CandlestickChart } from "@/remotion/primitives/candlestick-chart"; ``` -------------------------------- ### Install Callout Spotlight with npx Source: https://remotionui.com/docs/components/callout-spotlight Install the component using the RemotionUI CLI. Run this command in your project directory. ```bash $ npx remotion-ui@latest add callout-spotlight ``` -------------------------------- ### Install comparison-table Source: https://remotionui.com/docs/components/browse Install the comparison-table component from the Remotion UI registry. Run this command in your project to add the component source. ```bash npx remotion-ui@latest add comparison-table ``` -------------------------------- ### LightRays usage example Source: https://remotionui.com/docs/components/light-rays Usage example from the Usage section. Same component and props as the main example, shown inline. ```tsx import { LightRays } from "@/remotion/primitives/light-rays"; ``` -------------------------------- ### Install RemotionUI components Source: https://remotionui.com/docs/ai Install the caption-highlight and lower-third components into the project. This also installs dependencies and registers compositions in Root.tsx. ```bash $ npx remotion-ui@latest add caption-highlight lower-third ``` -------------------------------- ### Install transition-whip-pan with npx remotion-ui Source: https://remotionui.com/docs/components/transition-whip-pan Install the transition-whip-pan component into your project. Run this command before importing the component locally. ```shell $ npx remotion-ui@latest add transition-whip-pan ``` -------------------------------- ### RadarChart usage example Source: https://remotionui.com/docs/components/radar-chart Usage example shown in the Usage section. It is the same component usage as the main example, but presented as a single-line snippet. ```tsx import { RadarChart } from "@/remotion/primitives/radar-chart"; ``` -------------------------------- ### Install SearchResultsPopulate with npx Source: https://remotionui.com/docs/components/search-results-populate Install the component using the remotion-ui CLI. Run this command in your project directory. ```bash $ npx remotion-ui@latest add search-results-populate ``` -------------------------------- ### Usage example for BubbleChartPack Source: https://remotionui.com/docs/components/bubble-chart-pack Usage example shown in the component documentation. It is the same component and props as the main example, presented as a compact single-line snippet. ```jsx import { BubbleChartPack } from "@/remotion/primitives/bubble-chart-pack"; ``` -------------------------------- ### Install transition-light-leak with npx remotion-ui Source: https://remotionui.com/docs/components/transition-light-leak Install the transition-light-leak component. Requires @remotion/light-leaks; run npx remotion add @remotion/light-leaks if not already installed. ```bash npx remotion-ui@latest add transition-light-leak ``` -------------------------------- ### Initialize Remotion UI in new project Source: https://remotionui.com/docs/cli Create a new Remotion project with Remotion UI and add the social-clip component. New projects skip the agent skill unless you pass --agent-skill. ```bash npx remotion-ui@latest init my-video cd my-video && npm run dev npx remotion-ui@latest add social-clip ``` -------------------------------- ### init [name] Source: https://remotionui.com/docs/cli Scaffold a new Remotion project with optional flags. ```APIDOC ## init [name] ### Description Scaffold a new Remotion project. ### Method CLI ### Endpoint `init [name]` ### Parameters #### Positional Arguments - **name** (string) - Optional - Project name #### Flags - `-y, --yes` - Optional - Skip prompts - `--existing` - Optional - Bootstrap `remotion-ui.json` in an existing Remotion project - `--agent-skill` - Optional - Enable agent skill - `--no-agent-skill` - Optional - Disable agent skill - `--json` - Optional - Output as JSON ### Request Example ```bash npx remotion-ui@latest init my-project ``` ### Response #### Success Response - Outputs scaffolded project files. #### Response Example ``` Project scaffolded successfully. ``` ``` -------------------------------- ### Install dynamic-grid Source: https://remotionui.com/docs/components/dynamic-grid Installs the dynamic-grid component into your project. ```bash $ npx remotion-ui@latest add dynamic-grid ``` -------------------------------- ### Usage example from docs Source: https://remotionui.com/docs/components/variable-font-morph A compact example showing the import and a basic usage with weight and oscillate props. ```tsx import { VariableFontMorph } from "@/remotion/primitives/variable-font-morph"; ``` -------------------------------- ### Install transition-morph-shape Source: https://remotionui.com/docs/components/transition-morph-shape Install the component via the Remotion UI CLI. Run this in your project root. ```bash npx remotion-ui@latest add transition-morph-shape ``` -------------------------------- ### Usage example for ScatterPlotPop Source: https://remotionui.com/docs/components/scatter-plot-pop Usage example showing the import and component usage in a single line. This is the same example as the formatted one, but presented in a compact form. ```jsx import { ScatterPlotPop } from "@/remotion/primitives/scatter-plot-pop"; ``` -------------------------------- ### Install map-canvas with npx remotion-ui add Source: https://remotionui.com/docs/components/map-canvas Install the map-canvas component using npx remotion-ui@latest add map-canvas. This installs map-canvas and its dependencies. ```bash $ npx remotion-ui@latest add map-canvas ``` -------------------------------- ### Install Showcase composition Source: https://remotionui.com/docs/components/showcase Command to install the Showcase composition into your project. Adds a Showcase composition to Root.tsx. ```bash $ npx remotion-ui@latest add showcase ```