RemotionUI

https://remotionui.com/docs
Admin
RemotionUI is a component registry and CLI for Remotion that provides production-ready captions,...
Tokens:216,831
Snippets:2,255
Trust Score:3.6
Update:1 month ago
Show doc for...
Tokens:
Raw
### 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 <term> --json`. 3. Install with `npx remotion-ui@latest add <name>` 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/<name>.json. 6. Edit the copied source files directly when I want design changes.  Rules: - Drive all motion with useCurrentFrame(), interpolate(), spring(), and <Sequence />. - 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: <describe your video here>
```

--------------------------------

### 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";  <SquashStretch mode="bounce" periodInFrames={36}>   <Ball /> </SquashStretch>
```

--------------------------------

### 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";  <SubtitleTranslate   cues={[     {       text: "The transcript is the edit.",       translation: "La transcripción es el montaje.",       startMs: 0,       endMs: 1450,     },   ]}   languageLabels={["EN", "ES"]} />
```

--------------------------------

### 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";

<CreatorReel
  hookHeadline="Make the first second count"
  hookSubtitle="Hook viewers before they scroll"
  mediaSrc="data:image/svg+xml,..."
  ctaLabel="Browse components"
  comment="Can you break down how you built that transition?"
/>
```

### Usage Example with Media and Captions
```tsx
import { CreatorReel } from "@/compositions/creator-reel";

<CreatorReel
  mediaSrc={staticFile("speaker.mp4")}
  audioSrc={staticFile("voice.wav")}
  captions={captions}
/>
```

### 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";

<GanttTimeline
  tasks={[
    { label: "Registry build", start: 1, end: 4, progress: 0.8 },
    { label: "Launch", start: 7.6, end: 7.6, milestone: true },
  ]}
  columns={["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"]}
  markerAt={5.5}
  markerLabel="Today"
/>
```

--------------------------------

### 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";

<ZoomPanFrame src={staticFile("screenshot.png")} to={{ x: 0.38, y: 0.4, scale: 1.2 }} />
```

### 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
```
<AbsoluteFill>
  <ParticleField count={70} angle={8} />
  <YourScene />
</AbsoluteFill>
```

### 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
```
<WaveText
  text="Ride the sine"
  amplitude={0.2}
  wavelength={5}
  periodInFrames={44}
/>
```

### 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
<ArrowAnnotate
  from={{ x: 0.08, y: 0.16 }}
  to={{ x: 0.82, y: 0.74 }}
  bow={0.28}
  label="this one"
  durationInFrames={70}
  exitAtInFrames={92}
/>
```

### 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";  <PathDraw d={["M 20 180 L 100 20 L 180 180", "M 60 120 L 140 120"]} durationInFrames={60} />
```

--------------------------------

### 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";

<VoiceNoteBubble durationInFrames={120} sender="Sam" avatar="S" />
```

--------------------------------

### 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";  <CandlestickChart   candles={[{ open: 101, high: 106, low: 99, close: 104, label: "W1" }]}   movingAverage={6}   staggerInFrames={3.4} />
```

--------------------------------

### 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";  <AbsoluteFill>   <LightRays originX={28} originY={-14} angle={20} spread={56} />   <YourScene /> </AbsoluteFill>
```

--------------------------------

### 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";  <RadarChart   axes={["Speed", "Polish", "Reuse", "Docs", "Types", "Motion"]}   series={[     { label: "Before", values: [42, 38, 24, 30, 46, 34] },     { label: "After", values: [88, 92, 84, 78, 90, 86] },   ]}   maxValue={100} />
```

--------------------------------

### 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";  <BubbleChartPack   bubbles={[     { label: "Atoms", value: 42 },     { label: "Blocks", value: 31 },     { label: "Signals", value: 26 },   ]}   staggerInFrames={12} />
```

--------------------------------

### 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";  <VariableFontMorph text="Weight in motion" weight={[200, 900]} oscillate />
```

--------------------------------

### 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";  <ScatterPlotPop   points={[{ x: 4, y: 24, weight: 0.8 }, { x: 11, y: 39 }]}   xLabel="Scenes per project"   staggerInFrames={3} />
```

--------------------------------

### 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
```
Tokens:
Raw