10 videos you can ship today with the Claude Remotion skill

The prompt

Use the remotion-best-practices skill to write a TitleCard component for a 1920x1080 / 30fps composition. The headline 'Q3 in 90 seconds' should fade from opacity 0 to 1 over frames 0-20 and translate up 40px to 0 over the same range. Use useCurrentFrame() and interpolate() with extrapolateRight: 'clamp'. No CSS transitions — those don't render. Center it with AbsoluteFill. Write to src/TitleCard.tsx.

What slides.md looks like

import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';

export const TitleCard = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const y = interpolate(frame, [0, 20], [40, 0], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{justifyContent: 'center', alignItems: 'center'}}
    >
      <h1 style={{opacity, translate: `0 ${y}px`, fontSize: 96}}>
        Q3 in 90 seconds
      </h1>
    </AbsoluteFill>
  );
};

Pairs with

The prompt

Use the remotion-best-practices skill to build a BarChart component that takes a `data: {label: string; value: number}[]` prop. Animate each bar's width from 0 to its proportional value over frames 0-30 with interpolate (extrapolateRight: 'clamp'), staggering each bar's start by 4 frames. Use useVideoConfig for width. Drive the composition from defaultProps in Root.tsx so the same component renders any dataset. Write src/BarChart.tsx and the <Composition> entry.

What slides.md looks like

import {interpolate, useCurrentFrame, useVideoConfig} from 'remotion';

export const BarChart = ({data}: {data: {label: string; value: number}[]}) => {
  const frame = useCurrentFrame();
  const {width} = useVideoConfig();
  const max = Math.max(...data.map((d) => d.value));

  return (
    <div style={{padding: 80}}>
      {data.map((d, i) => {
        const w = interpolate(
          frame,
          [i * 4, i * 4 + 30],
          [0, (d.value / max) * (width - 160)],
          {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'},
        );
        return (
          <div key={d.label} style={{height: 60, width: w, background: '#0d9488'}} />
        );
      })}
    </div>
  );
};

Pairs with

The prompt

Use the remotion-best-practices skill to build a Captions component over an OffthreadVideo. Take a `captions: {text: string; startMs: number; endMs: number}[]` prop (the @remotion/captions shape). Convert ms to frames with fps from useVideoConfig, show each caption only while the current frame is within its range, and bold the active word. Reference the recording via staticFile('talk.mp4'). Write src/Captions.tsx.

What slides.md looks like

import {OffthreadVideo, staticFile, useCurrentFrame, useVideoConfig, AbsoluteFill} from 'remotion';

export const Captions = ({captions}: {captions: {text: string; startMs: number; endMs: number}[]}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const ms = (frame / fps) * 1000;
  const active = captions.find((c) => ms >= c.startMs && ms < c.endMs);

  return (
    <AbsoluteFill>
      <OffthreadVideo src={staticFile('talk.mp4')} />
      <AbsoluteFill style={{justifyContent: 'flex-end', alignItems: 'center', paddingBottom: 120}}>
        {active && (
          <span style={{fontSize: 64, fontWeight: 800, color: 'white'}}>
            {active.text}
          </span>
        )}
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

Pairs with

The prompt

Use the remotion-best-practices skill to build a LyricVideo. Play staticFile('song.mp3') via Audio from @remotion/media. Take a `lines: {text: string; atFrame: number}[]` prop. For each line, drive a scale from spring({frame: frame - line.atFrame, fps, config: {damping: 12}}) so it pops in on its frame. Only render lines whose atFrame has passed. Use this case for spring — the skill says prefer interpolate elsewhere. Write src/LyricVideo.tsx.

What slides.md looks like

import {AbsoluteFill, staticFile, spring, useCurrentFrame, useVideoConfig} from 'remotion';
import {Audio} from '@remotion/media';

export const LyricVideo = ({lines}: {lines: {text: string; atFrame: number}[]}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
      <Audio src={staticFile('song.mp3')} />
      {lines.filter((l) => frame >= l.atFrame).map((l) => {
        const scale = spring({
          frame: frame - l.atFrame,
          fps,
          config: {damping: 12},
        });
        return (
          <h2 key={l.text} style={{scale: String(scale), fontSize: 72}}>
            {l.text}
          </h2>
        );
      })}
    </AbsoluteFill>
  );
};

Pairs with

The prompt

Use the remotion-best-practices skill to build a Slideshow that maps a `slides: {image: string; caption: string}[]` prop into a <Series>, giving each Series.Sequence durationInFrames={90}. Each slide shows an <Img src={staticFile(slide.image)} /> filling the frame plus the caption pinned to the bottom. Images live in public/. Write src/Slideshow.tsx and set the composition duration to slides.length * 90 via calculateMetadata.

What slides.md looks like

import {Series, Img, staticFile, AbsoluteFill} from 'remotion';

export const Slideshow = ({slides}: {slides: {image: string; caption: string}[]}) => {
  return (
    <Series>
      {slides.map((s) => (
        <Series.Sequence key={s.image} durationInFrames={90}>
          <AbsoluteFill>
            <Img src={staticFile(s.image)} style={{objectFit: 'cover'}} />
            <AbsoluteFill style={{justifyContent: 'flex-end', padding: 60}}>
              <p style={{fontSize: 48, color: 'white'}}>{s.caption}</p>
            </AbsoluteFill>
          </AbsoluteFill>
        </Series.Sequence>
      ))}
    </Series>
  );
};

Pairs with

The prompt

Use the remotion-best-practices skill to write a LogoEntrance. Drive scale with spring({frame, fps, config: {mass: 0.8, damping: 9, stiffness: 120}}) so it overshoots slightly then settles. Keep the interpolation inline in the style transform via the individual `scale` property, not a composed transform string — the skill wants Studio-editable values. Render the logo with <Img src={staticFile('logo.png')} />. Write src/LogoEntrance.tsx.

What slides.md looks like

import {AbsoluteFill, Img, staticFile, spring, useCurrentFrame, useVideoConfig} from 'remotion';

export const LogoEntrance = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const scale = spring({
    frame,
    fps,
    config: {mass: 0.8, damping: 9, stiffness: 120},
  });

  return (
    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
      <Img
        src={staticFile('logo.png')}
        style={{width: 320, scale: String(scale)}}
      />
    </AbsoluteFill>
  );
};

Pairs with

The prompt

Use the remotion-best-practices skill to compose three scenes on a timeline with <Sequence>: Intro at from={0} for durationInFrames={60}, Body at from={60} for 180, Outro at from={240} for 60. Wrap a non-visual title overlay in <Sequence from={20} durationInFrames={40} layout='none'> so it doesn't get its own AbsoluteFill. Write src/Timeline.tsx.

What slides.md looks like

import {Sequence, AbsoluteFill} from 'remotion';
import {Intro} from './Intro';
import {Body} from './Body';
import {Outro} from './Outro';

export const Timeline = () => {
  return (
    <AbsoluteFill>
      <Sequence durationInFrames={60}>
        <Intro />
      </Sequence>
      <Sequence from={60} durationInFrames={180}>
        <Body />
      </Sequence>
      <Sequence from={240} durationInFrames={60}>
        <Outro />
      </Sequence>
    </AbsoluteFill>
  );
};

Pairs with

The prompt

Use the remotion-best-practices skill to render the 'BarChart' composition to out/q3.mp4 at 30fps, passing the dataset as --props. Then show me the @remotion/lambda equivalent for rendering the same composition serverlessly with renderMediaOnLambda so I can fan out one render per dataset. Explain which command to use locally vs in CI.

What slides.md looks like

# Local render: composition id, output path, props as JSON
npx remotion render BarChart out/q3.mp4 \
  --props='{"data":[{"label":"Jan","value":12}]}'

# Validate a single frame first (fast, no encode)
npx remotion still BarChart out/frame.png --frame=15

# Serverless fan-out with @remotion/lambda
import {renderMediaOnLambda} from '@remotion/lambda/client';

await renderMediaOnLambda({
  region: 'us-east-1',
  functionName,
  serveUrl,
  composition: 'BarChart',
  codec: 'h264',
  inputProps: {data},
});

Pairs with

The prompt

Use the remotion-best-practices skill to build a Thumbnail composition (1200x630) that takes title and author props and lays them over a gradient with <Img> avatar. Then give me the `remotion still` command to export frame 0 as a PNG for a given title/author. The component should not animate — it's a single still. Write src/Thumbnail.tsx and the export command.

What slides.md looks like

import {AbsoluteFill, Img, staticFile} from 'remotion';

export const Thumbnail = ({title, author, avatar}: {title: string; author: string; avatar: string}) => {
  return (
    <AbsoluteFill style={{background: 'linear-gradient(135deg,#0f172a,#0d9488)', padding: 80}}>
      <h1 style={{fontSize: 72, color: 'white'}}>{title}</h1>
      <div style={{display: 'flex', alignItems: 'center', gap: 16, marginTop: 'auto'}}>
        <Img src={staticFile(avatar)} style={{width: 64, height: 64, borderRadius: 32}} />
        <span style={{fontSize: 32, color: '#cbd5e1'}}>{author}</span>
      </div>
    </AbsoluteFill>
  );
};
// npx remotion still Thumbnail out/og.png --props='{"title":"...","author":"...","avatar":"a.png"}'

Pairs with

The prompt

Use the remotion-best-practices skill to compose two scenes with a fade between them using TransitionSeries from @remotion/transitions. Scene A and Scene B each get a TransitionSeries.Sequence with durationInFrames={120}, and a TransitionSeries.Transition with presentation={fade()} and timing={linearTiming({durationInFrames: 30})}. Import fade from @remotion/transitions/fade. Write src/Transitions.tsx.

What slides.md looks like

import {TransitionSeries, linearTiming} from '@remotion/transitions';
import {fade} from '@remotion/transitions/fade';
import {SceneA} from './SceneA';
import {SceneB} from './SceneB';

export const Transitions = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={120}>
        <SceneA />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={fade()}
        timing={linearTiming({durationInFrames: 30})}
      />
      <TransitionSeries.Sequence durationInFrames={120}>
        <SceneB />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

Pairs with