Skip to main content
Asterismbeta

creating-remotion-videos

Published by @askskills

Generate Remotion code for programmatic video creation - animated explainers, social content, and data visualizations

Third-Party Content

This skill is created by a third-party developer, not Asterism. While security-scanned, we cannot guarantee safety. By using any skill, you accept our Terms of Service and assume all risk.

Terms of ServiceSecurity InfoReport a Concern
Installation
aster install creating-remotion-videos

Universal installation

CLI ReferenceMCP Setup GuideGet API Key

By installing, you accept the Terms of Service. Skills are third-party content; Asterism is not liable for their use.

Use in an agentTry in PlaygroundShareFork
README

# Creating Remotion Videos

Generate programmatic videos using Remotion - React for video creation.

## What This Skill Does

This skill creates production-ready Remotion code for:
- Animated explainer videos
- Social media content (TikTok, Instagram Reels, YouTube Shorts)
- Data visualization animations
- Product demos and announcements
- Automated video templates

## Remotion Fundamentals

### Project Structure

```
my-video/
├── src/
│   ├── Root.tsx           # Composition registration
│   ├── Video.tsx          # Main composition
│   ├── components/
│   │   ├── Intro.tsx      # Intro sequence
│   │   ├── Content.tsx    # Main content
│   │   └── Outro.tsx      # Outro sequence
│   ├── lib/
│   │   └── utils.ts       # Helper functions
│   └── styles/
│       └── global.css     # Global styles
├── public/
│   ├── fonts/
│   └── images/
└── remotion.config.ts
```

### Basic Composition

```tsx
import { Composition } from 'remotion';
import { MyVideo } from './Video';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="MyVideo"
        component={MyVideo}
        durationInFrames={150}  // 5 seconds at 30fps
        fps={30}
        width={1920}
        height={1080}
        defaultProps={{
          title: "Hello World",
        }}
      />
    </>
  );
};
```

## Video Templates

### Animated Text Reveal

```tsx
import { useCurrentFrame, useVideoConfig, interpolate, spring } from 'remotion';

export const TextReveal: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const words = text.split(' ');

  return (
    <div style={{
      display: 'flex',
      flexWrap: 'wrap',
      gap: '12px',
      justifyContent: 'center',
    }}>
      {words.map((word, i) => {
        const delay = i * 5;
        const springValue = spring({
          frame: frame - delay,
          fps,
          config: {
            damping: 200,
            stiffness: 100,
            mass: 0.5,
          },
        });

        const opacity = interpolate(springValue, [0, 1], [0, 1]);
        const translateY = interpolate(springValue, [0, 1], [20, 0]);

        return (
          <span
            key={i}
            style={{
              fontSize: 64,
              fontWeight: 'bold',
              color: 'white',
              opacity,
              transform: `translateY(${translateY}px)`,
            }}
          >
            {word}
          </span>
        );
      })}
    </div>
  );
};
```

### Logo Animation

```tsx
import { useCurrentFrame, spring, interpolate, Img, staticFile } from 'remotion';

export const LogoAnimation: React.FC = () => {
  const frame = useCurrentFrame();

  // Scale animation
  const scale = spring({
    frame,
    fps: 30,
    config: { damping: 12, stiffness: 100 },
  });

  // Rotation animation
  const rotation = interpolate(
    frame,
    [0, 30],
    [0, 360],
    { extrapolateRight: 'clamp' }
  );

  // Opacity fade in
  const opacity = interpolate(frame, [0, 15], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '100%',
    }}>
      <Img
        src={staticFile('logo.svg')}
        style={{
          width: 200,
          height: 200,
          transform: `scale(${scale}) rotate(${rotation}deg)`,
          opacity,
        }}
      />
    </div>
  );
};
```

### Feature Showcase Cards

```tsx
import { useCurrentFrame, interpolate, Sequence, spring } from 'remotion';

interface Feature {
  title: string;
  description: string;
  icon: string;
}

export const FeatureShowcase: React.FC<{ features: Feature[] }> = ({ features }) => {
  const frame = useCurrentFrame();

  return (
    <div style={{
      display: 'flex',
      gap: 40,
      padding: 60,
    }}>
      {features.map((feature, index) => (
        <Sequence key={index} from={index * 20} durationInFrames={90}>
          <FeatureCard feature={feature} />
        </Sequence>
      ))}
    </div>
  );
};

const FeatureCard: React.FC<{ feature: Feature }> = ({ feature }) => {
  const frame = useCurrentFrame();

  const scale = spring({
    frame,
    fps: 30,
    config: { damping: 15, stiffness: 80 },
  });

  const opacity = interpolate(frame, [0, 15], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{
      background: 'white',
      borderRadius: 16,
      padding: 32,
      width: 300,
      transform: `scale(${scale})`,
      opacity,
      boxShadow: '0 10px 40px rgba(0,0,0,0.1)',
    }}>
      <div style={{ fontSize: 48, marginBottom: 16 }}>{feature.icon}</div>
      <h3 style={{ fontSize: 24, marginBottom: 8, color: '#1a1a1a' }}>
        {feature.title}
      </h3>
      <p style={{ fontSize: 16, color: '#666', lineHeight: 1.5 }}>
        {feature.description}
      </p>
    </div>
  );
};
```

### Counter Animation

```tsx
import { useCurrentFrame, interpolate } from 'remotion';

export const Counter: React.FC<{
  from: number;
  to: number;
  prefix?: string;
  suffix?: string;
}> = ({ from, to, prefix = '', suffix = '' }) => {
  const frame = useCurrentFrame();

  const value = interpolate(
    frame,
    [0, 60],
    [from, to],
    { extrapolateRight: 'clamp' }
  );

  return (
    <div style={{
      fontSize: 120,
      fontWeight: 'bold',
      fontFamily: 'Inter, sans-serif',
      color: '#3B82F6',
    }}>
      {prefix}{Math.round(value).toLocaleString()}{suffix}
    </div>
  );
};
```

### Progress Bar

```tsx
import { useCurrentFrame, interpolate } from 'remotion';

export const ProgressBar: React.FC<{
  progress: number;
  color?: string;
}> = ({ progress, color = '#3B82F6' }) => {
  const frame = useCurrentFrame();

  const width = interpolate(
    frame,
    [0, 45],
    [0, progress],
    { extrapolateRight: 'clamp' }
  );

  return (
    <div style={{
      width: '100%',
      height: 20,
      background: '#E5E7EB',
      borderRadius: 10,
      overflow: 'hidden',
    }}>
      <div style={{
        width: `${width}%`,
        height: '100%',
        background: color,
        borderRadius: 10,
        transition: 'width 0.1s ease-out',
      }} />
    </div>
  );
};
```

## Social Media Templates

### TikTok/Reels Template (9:16)

```tsx
import { Composition, Sequence } from 'remotion';

export const TikTokVideo: React.FC<{
  hook: string;
  points: string[];
  cta: string;
}> = ({ hook, points, cta }) => {
  return (
    <div style={{
      width: 1080,
      height: 1920,
      background: 'linear-gradient(135deg, #667EEA 0%, #764BA2 100%)',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: 60,
    }}>
      {/* Hook - First 3 seconds */}
      <Sequence from={0} durationInFrames={90}>
        <TextReveal text={hook} />
      </Sequence>

      {/* Points - 2 seconds each */}
      {points.map((point, i) => (
        <Sequence key={i} from={90 + i * 60} durationInFrames={60}>
          <PointCard text={point} index={i + 1} />
        </Sequence>
      ))}

      {/* CTA - Last 3 seconds */}
      <Sequence from={90 + points.length * 60} durationInFrames={90}>
        <CallToAction text={cta} />
      </Sequence>
    </div>
  );
};

// Composition registration
export const RemotionRoot = () => (
  <Composition
    id="TikTokVideo"
    component={TikTokVideo}
    durationInFrames={330}  // ~11 seconds
    fps={30}
    width={1080}
    height={1920}
    defaultProps={{
      hook: "3 things you're doing wrong",
      points: ["Point 1", "Point 2", "Point 3"],
      cta: "Follow for more tips!",
    }}
  />
);
```

### YouTube Thumbnail Generator

```tsx
export const YouTubeThumbnail: React.FC<{
  title: string;
  subtitle?: string;
  emoji?: string;
  bgColor?: string;
}> = ({ title, subtitle, emoji = '🚀', bgColor = '#FF0050' }) => {
  return (
    <div style={{
      width: 1280,
      height: 720,
      background: bgColor,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: 60,
      position: 'relative',
    }}>
      {/* Large emoji */}
      <div style={{
        position: 'absolute',
        right: 60,
        fontSize: 200,
        opacity: 0.9,
      }}>
        {emoji}
      </div>

      {/* Text content */}
      <div style={{
        maxWidth: '70%',
        zIndex: 1,
      }}>
        <h1 style={{
          fontSize: 72,
          fontWeight: 900,
          color: 'white',
          textTransform: 'uppercase',
          lineHeight: 1.1,
          textShadow: '4px 4px 0 rgba(0,0,0,0.3)',
        }}>
          {title}
        </h1>
        {subtitle && (
          <p style={{
            fontSize: 36,
            color: 'rgba(255,255,255,0.9)',
            marginTop: 20,
          }}>
            {subtitle}
          </p>
        )}
      </div>
    </div>
  );
};
```

## Animation Utilities

### Easing Functions

```tsx
import { Easing } from 'remotion';

// Common easing presets
const easings = {
  smooth: Easing.bezier(0.25, 0.1, 0.25, 1),
  bouncy: Easing.bounce,
  elastic: Easing.elastic(1),
  snappy: Easing.bezier(0.68, -0.55, 0.265, 1.55),
};

// Usage
const value = interpolate(
  frame,
  [0, 30],
  [0, 100],
  { easing: easings.smooth }
);
```

### Sequence Helper

```tsx
// Helper for creating staggered sequences
export const staggeredSequence = (
  items: React.ReactNode[],
  staggerFrames: number,
  durationPerItem: number
) => {
  return items.map((item, index) => (
    <Sequence
      key={index}
      from={index * staggerFrames}
      durationInFrames={durationPerItem}
    >
      {item}
    </Sequence>
  ));
};
```

### Typewriter Effect

```tsx
export const Typewriter: React.FC<{ text: string; speed?: number }> = ({
  text,
  speed = 2,
}) => {
  const frame = useCurrentFrame();
  const charsToShow = Math.floor(frame / speed);
  const displayText = text.slice(0, charsToShow);

  return (
    <span style={{
      fontFamily: 'monospace',
      fontSize: 32,
    }}>
      {displayText}
      <span style={{
        opacity: frame % 30 < 15 ? 1 : 0,
      }}>|</span>
    </span>
  );
};
```

## Data-Driven Videos

### Chart Animation

```tsx
import { useCurrentFrame, interpolate } from 'remotion';

interface DataPoint {
  label: string;
  value: number;
  color: string;
}

export const AnimatedBarChart: React.FC<{
  data: DataPoint[];
  maxValue: number;
}> = ({ data, maxValue }) => {
  const frame = useCurrentFrame();

  return (
    <div style={{ display: 'flex', gap: 20, alignItems: 'flex-end', height: 400 }}>
      {data.map((item, index) => {
        const delay = index * 10;
        const height = interpolate(
          frame - delay,
          [0, 30],
          [0, (item.value / maxValue) * 300],
          { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
        );

        return (
          <div key={index} style={{ textAlign: 'center' }}>
            <div style={{
              width: 60,
              height,
              background: item.color,
              borderRadius: '8px 8px 0 0',
            }} />
            <span style={{ fontSize: 14, marginTop: 8 }}>{item.label}</span>
          </div>
        );
      })}
    </div>
  );
};
```

## Rendering & Export

```bash
# Preview
npx remotion studio

# Render to MP4
npx remotion render src/index.ts MyVideo out/video.mp4

# Render with custom settings
npx remotion render src/index.ts MyVideo out/video.mp4 \
  --codec h264 \
  --crf 18 \
  --pixel-format yuv420p

# Render GIF
npx remotion render src/index.ts MyVideo out/video.gif \
  --codec gif

# Render for specific platform
npx remotion render src/index.ts TikTokVideo out/tiktok.mp4 \
  --height 1920 --width 1080
```

## Output Format

When generating Remotion videos, provide:

1. **Complete composition code** - Ready to copy/paste
2. **Component breakdown** - Reusable pieces
3. **Timing specification** - Frame-by-frame breakdown
4. **Asset requirements** - Fonts, images, audio
5. **Render command** - Platform-specific export
Comments

Sign in to leave a comment