Text Animation Copier

Text Animation Copier for Remotion

Analyze and recreate text animations from video examples as Remotion React components with precise timing, styling, and effects.

Quick Start

Prerequisites

Before using this skill, ensure you have:

1. ffmpeg installed - Required for video frame extraction
2. Remotion project set up - Working remotion-animations repository
3. Video URL or file path - Direct link or local path to the video containing the animation

Basic Workflow

When the user provides a video with a text animation to copy:

1. Download and extract frames from the video (use claude-skills/video-viewing)
2. Analyze the animation by examining key frames
3. Identify animation properties (timing, effects, positioning, styling)
4. Generate Remotion component that recreates the animation
5. Test and refine the animation in Remotion Studio

Detailed Process

Step 1: Download Video and Extract Frames

Use the video-viewing skill to download the video and extract frames:

python scripts/download_video.py "VIDEO_URL" -f

This downloads the video to /mnt/user-data/outputs/ and extracts frames for analysis.

Alternative: If the user provides a local video file path, use ffmpeg directly:

# Extract frames at 1 frame per second
ffmpeg -i path/to/video.mp4 -vf fps=1 /tmp/frames/frame-%04d.png

# Extract frames at specific time interval (e.g., 00:07 to 00:13)
ffmpeg -i path/to/video.mp4 -ss 00:07 -to 00:13 -vf fps=2 /tmp/frames/frame-%04d.png

Step 2: Analyze Animation by Examining Frames

The user will typically specify a time range (e.g., "00:07 - 00:13"). Extract and analyze frames from that range:

1. Identify start and end frames of the animation
2. Examine key transition points (when animation changes behavior)
3. Ignore background video - focus ONLY on text elements
4. Document observations about:
   • Text content and positioning
   • Font family, size, weight, color
   • Animation type (fade, slide, scale, rotate, flip, etc.)
   • Timing and easing curves
   • Multi-stage animations (e.g., bar fill, then text appear)
   • Special effects (3D transforms, shadows, glows, particles)

Step 3: Identify Animation Properties

Based on frame analysis, document these key properties:

Timing Configuration

• Duration: Total animation length in seconds/frames
• FPS: Video frame rate (typically 30fps for web videos)
• Key moments: Frame numbers for important transitions
• Easing: Type of easing curve (linear, ease-in-out, cubic, bezier)

Example timing structure:

const TIMING = {
  PHASE_1_START: 0,
  PHASE_1_END: 45,
  PHASE_2_START: 48,
  PHASE_2_END: 90,
  HOLD_END: 180,
};

Text Styling

• Font family: Arial, Helvetica, custom fonts
• Font size: In pixels
• Font weight: normal, bold, 300-900
• Color: Hex or rgba values
• Letter spacing: Additional spacing between characters
• Text alignment: left, center, right

Positioning

• Alignment: center, top-left, bottom-left, etc.
• Offset values: Distance from edges in pixels
• Responsive positioning: Use viewport width/height for centering

Animation Effects

Common text animation patterns:

1. Fade In/Out

const opacity = interpolate(
  frame,
  [START_FRAME, END_FRAME],
  [0, 1],
  {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  }
);

2. Slide In/Out

const translateX = interpolate(
  frame,
  [START_FRAME, END_FRAME],
  [-500, 0], // from left to center
  {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
    easing: Easing.out(Easing.cubic),
  }
);

3. Scale Animation

const scale = interpolate(
  frame,
  [START_FRAME, END_FRAME],
  [0, 1],
  {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
    easing: Easing.elastic(1),
  }
);

4. 3D Rotation/Flip

const rotateY = interpolate(
  frame,
  [START_FRAME, END_FRAME],
  [0, 360],
  {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
    easing: Easing.inOut(Easing.ease),
  }
);

// Apply with CSS transform
transform: `rotateY(${rotateY}deg)`,
transformStyle: "preserve-3d",
perspective: "1000px"

5. Bar Fill Animation

const barProgress = interpolate(
  frame,
  [BAR_START, BAR_END],
  [0, 1],
  {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
    easing: Easing.bezier(0.25, 0.1, 0.25, 1),
  }
);

// Apply to width
width: `${barProgress * 100}%`

6. Staggered Animation (for multiple letters/words)

// Each letter starts with a delay
const letterStart = BASE_START + index * STAGGER_DELAY;
const letterEnd = letterStart + ANIMATION_DURATION;

const letterOpacity = interpolate(
  frame,
  [letterStart, letterEnd],
  [0, 1],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);

7. Spring Physics

const scale = spring({
  frame: frame - START_FRAME,
  fps: 30,
  config: {
    damping: 10,
    stiffness: 100,
    mass: 0.5,
  },
});

Step 4: Generate Remotion Component

Create a new React component in src/animations/text-animation-N/ following these patterns:

Component Structure Template

import React from "react";
import {
  AbsoluteFill,
  useCurrentFrame,
  useVideoConfig,
  interpolate,
  Easing,
  spring,
} from "remotion";

// Animation timing configuration (in frames, at 30fps)
// Reference video time range: HH:MM:SS - HH:MM:SS
const TIMING = {
  ANIMATION_START: 0,
  ANIMATION_END: 60,
  // Add more timing points as needed
};

// Configuration constants
const TEXT = "YOUR TEXT HERE";
const FONT_SIZE = 48;
const FONT_FAMILY = "Arial, sans-serif";
const TEXT_COLOR = "#FFFFFF";

export const TextAnimationN: React.FC = () => {
  const frame = useCurrentFrame();
  const { width, height } = useVideoConfig();

  // Calculate animation values based on current frame
  const opacity = interpolate(
    frame,
    [TIMING.ANIMATION_START, TIMING.ANIMATION_END],
    [0, 1],
    {
      extrapolateLeft: "clamp",
      extrapolateRight: "clamp",
      easing: Easing.inOut(Easing.ease),
    }
  );

  return (
    <AbsoluteFill
      style={{
        backgroundColor: "transparent", // Always transparent for overlays
      }}
    >
      {/* Your animation elements here */}
      <div
        style={{
          fontFamily: FONT_FAMILY,
          fontSize: `${FONT_SIZE}px`,
          color: TEXT_COLOR,
          opacity: opacity,
          // Add positioning, transforms, etc.
        }}
      >
        {TEXT}
      </div>
    </AbsoluteFill>
  );
};

Important Requirements

1. Resolution: Always use 1920x1080 (configured in Root.tsx)
2. Transparent background: backgroundColor: "transparent"
3. Center positioning: Use width/2 and height/2 for centering
4. Timing precision: Match the original video timing as closely as possible
5. Clean code: Add comments explaining each animation phase

Step 5: Register the Composition

Add the new animation to src/Root.tsx:

import { TextAnimationN } from "./animations/text-animation-N/TextAnimationN";

<Composition
  id="TextAnimationN"
  component={TextAnimationN}
  durationInFrames={180} // Adjust based on animation length
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{}}
/>

Step 6: Test in Remotion Studio

npm start

This opens Remotion Studio at http://localhost:3000 where you can:

• Preview the animation in real-time
• Scrub through frames to verify timing
• Compare with the original video
• Adjust values and see immediate results

Step 7: Render the Animation

Once satisfied with the animation:

# Render as WebM with transparency (recommended)
npm run render:text-animation-N

# Or add custom render script to package.json:
npx remotion render src/index.ts TextAnimationN out/text-animation-N.webm --codec vp9 --pixel-format yuva420p

Advanced Techniques

Per-Letter Animation

For animations where each letter animates independently:

const Letter: React.FC<{
  char: string;
  index: number;
  totalLetters: number;
}> = ({ char, index, totalLetters }) => {
  const frame = useCurrentFrame();

  // Stagger each letter's animation
  const letterDelay = index * 3; // 3 frames delay per letter
  const letterStart = TIMING.ANIMATION_START + letterDelay;

  const opacity = interpolate(
    frame,
    [letterStart, letterStart + 15],
    [0, 1],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
  );

  return (
    <span style={{ opacity }}>
      {char}
    </span>
  );
};

// In main component:
const letters = TEXT.split("").map((char, i) => (
  <Letter key={i} char={char} index={i} totalLetters={TEXT.length} />
));

Multi-Stage Animations

For complex animations with multiple sequential phases:

// Phase 1: Slide in
const slideProgress = interpolate(
  frame,
  [TIMING.SLIDE_START, TIMING.SLIDE_END],
  [0, 1],
  {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
    easing: Easing.out(Easing.cubic),
  }
);

// Phase 2: Scale pulse (starts after slide completes)
const scaleProgress = interpolate(
  frame,
  [TIMING.SCALE_START, TIMING.SCALE_END],
  [1, 1.2],
  {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
    easing: Easing.inOut(Easing.ease),
  }
);

// Phase 3: Fade out
const fadeOutProgress = interpolate(
  frame,
  [TIMING.FADEOUT_START, TIMING.FADEOUT_END],
  [1, 0],
  {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  }
);

// Combine all phases
const translateX = slideProgress * width;
const scale = frame >= TIMING.SCALE_START ? scaleProgress : 1;
const opacity = frame >= TIMING.FADEOUT_START ? fadeOutProgress : 1;

Background Effects

For text with animated backgrounds (like TextAnimation2):

// Background appears behind text with 3D rotation
<div
  style={{
    position: "absolute",
    width: charWidth + 20,
    height: fontSize + 20,
    backgroundColor: BACKGROUND_COLOR,
    transform: `rotateY(${bgRotateY}deg) scaleX(${bgScaleX})`,
    transformStyle: "preserve-3d",
    opacity: bgOpacity,
    zIndex: -1, // Behind text
  }}
/>

Custom Easing Functions

For precise timing matches:

// Built-in easing options:
Easing.linear           // Constant speed
Easing.ease             // Gentle start and end
Easing.in(Easing.quad)  // Accelerate
Easing.out(Easing.quad) // Decelerate
Easing.inOut(Easing.cubic) // Smooth S-curve
Easing.bezier(0.25, 0.1, 0.25, 1) // Custom cubic bezier

// Available easing functions:
// quad, cubic, poly, sin, exp, circle, back, bounce, elastic

Technology Reference

Core Remotion Hooks

• useCurrentFrame(): Returns current frame number
• useVideoConfig(): Returns { fps, width, height, durationInFrames }
• interpolate(value, inputRange, outputRange, options): Map values smoothly
• spring(options): Physics-based animations
• Sequence: Layer multiple animations with offsets

Essential Remotion Components

• <AbsoluteFill>: Full-screen positioned container
• <Sequence from={frame} durationInFrames={frames}>: Time-shifted animations
• <Audio>: Background music/sound effects
• <Video>: Embed video backgrounds
• <Img>: Static or animated images

CSS Transform Properties

For 3D effects, use these transform properties:

perspective: 1000px;              /* Enable 3D space */
transformStyle: preserve-3d;      /* Maintain 3D in children */
backfaceVisibility: hidden;       /* Hide back of element */

/* Transform functions: */
transform: translateX(px) translateY(px) translateZ(px)
          rotateX(deg) rotateY(deg) rotateZ(deg)
          scale(factor) scaleX() scaleY()
          skewX(deg) skewY(deg);

Common Animation Patterns

1. Text Lower Third (like TextAnimation1)

• Colored bars that fill from left to right
• Text appears after bars complete
• Positioned in corner (typically bottom-left)

2. Flying Text with 3D Flip (like TextAnimation2)

• Text flies in from off-screen
• Each letter flips in 3D while moving
• Background boxes rotate into place behind letters
• Staggered timing for visual interest

3. Typewriter Effect

const visibleChars = Math.floor(
  interpolate(
    frame,
    [START, END],
    [0, TEXT.length],
    { extrapolateRight: "clamp" }
  )
);

return <div>{TEXT.substring(0, visibleChars)}</div>;

4. Bounce In

const bounceScale = spring({
  frame: frame - START_FRAME,
  fps: 30,
  config: {
    damping: 12,
    stiffness: 200,
    mass: 0.5,
  },
});

5. Glitch Effect

const glitchOffset = Math.random() * 10 - 5;
const glitchActive = frame % 10 === 0; // Every 10 frames

return (
  <div style={{
    transform: glitchActive
      ? `translate(${glitchOffset}px, ${glitchOffset}px)`
      : 'none',
  }}>
    {TEXT}
  </div>
);

Best Practices

1. Timing Precision

• Convert time to frames: For 30fps, 1 second = 30 frames
• Match original timing: Use video time codes to set TIMING constants
• Account for delays: Stagger animations for visual flow

2. Performance

• Avoid complex calculations per frame: Pre-calculate when possible
• Use interpolate over manual math: It's optimized and handles edge cases
• Minimize re-renders: Keep component logic simple

3. Code Organization

• Constants at top: TIMING, COLORS, SIZES in one place
• Comments for phases: Document what each animation phase does
• Reusable components: Extract repeated patterns (like Letter component)

4. Visual Fidelity

• Match fonts closely: Use web-safe fonts or load custom fonts
• Color accuracy: Use color picker on video frames
• Positioning precision: Measure distances in video frames

5. Testing Workflow

• Test in Remotion Studio: Immediate visual feedback
• Compare side-by-side: Play original video alongside your animation
• Check all frames: Scrub through to verify smooth transitions
• Render and review: Final render may look different from preview

Troubleshooting

Animation doesn't match timing

• Verify FPS matches original video (usually 30fps)
• Check TIMING constants are accurate
• Use console.log(frame) to debug frame values

Text positioning is off

• Double-check width and height from useVideoConfig()
• Verify centering calculations: width/2 - textWidth/2
• Test different viewport sizes in Remotion Studio

Animation is choppy

• Increase durationInFrames in composition
• Check easing function is smooth (not linear)
• Verify frame rate is consistent (30fps)

3D transforms not working

• Add perspective: "1000px" to parent
• Include transformStyle: "preserve-3d"
• Check browser supports 3D transforms

Text doesn't appear

• Verify opacity is not 0
• Check zIndex stacking
• Ensure color contrasts with background
• Confirm frame range includes text appearance

Example Workflows

Example 1: Simple Fade In Text

User provides: Video with text fading in from 00:03 to 00:05

1. Download video and extract frames
2. Analyze frames: Text "HELLO" fades from 0% to 100% opacity
3. Calculate frames: 3s to 5s = frame 90 to 150 (at 30fps)
4. Create component with fade interpolation
5. Test and render

Example 2: Multi-Line Text with Stagger

User provides: Video with 3 lines of text appearing sequentially from 00:10 to 00:15

1. Extract frames from 10-15 seconds
2. Identify: Line 1 appears at 10s, Line 2 at 12s, Line 3 at 14s
3. Calculate timing for each line (30fps)
4. Create component with 3 text elements, each with offset timing
5. Test stagger delays match original
6. Render

Example 3: Complex Multi-Stage Animation

User provides: Video with text that slides in, rotates, then slides out from 00:20 to 00:30

1. Extract frames every 0.5 seconds
2. Identify phases:
   • Phase 1 (20-23s): Slide in from left
   • Phase 2 (23-26s): Rotate 360 degrees
   • Phase 3 (26-30s): Slide out to right
3. Create TIMING constants for each phase
4. Implement 3 separate interpolations
5. Combine transforms in style object
6. Test smooth transitions between phases
7. Render and compare

Integration with Other Skills

This skill works best when combined with:

• claude-skills/video-viewing: For downloading videos and extracting frames
• remotion-best-practices: For advanced Remotion techniques
• Video editing knowledge: Understanding of timing, easing, keyframes

Output Checklist

When delivering a text animation recreation, ensure:

• Component created in src/animations/text-animation-N/
• Registered in src/Root.tsx
• Resolution is 1920x1080
• Background is transparent
• Text is centered (if specified)
• Timing matches original video
• TIMING constants documented with comments
• Code is clean and well-commented
• Tested in Remotion Studio
• Render script added to package.json (optional)
• Original video time range noted in comments

Quick Reference Commands

# Download video with frame extraction
python scripts/download_video.py "VIDEO_URL" -f

# Start Remotion Studio for testing
npm start

# Type check the code
npm run typecheck

# Render animation
npx remotion render src/index.ts TextAnimationN out/output.webm --codec vp9 --pixel-format yuva420p

# Extract specific time range from video
ffmpeg -i input.mp4 -ss 00:07 -to 00:13 -vf fps=2 output-%04d.png

Useful Resources

• Remotion Documentation: https://www.remotion.dev/docs
• Remotion Easing Visualizer: https://www.remotion.dev/docs/easing
• Cubic Bezier Generator: https://cubic-bezier.com/
• CSS Transform Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Summary

This skill enables you to systematically analyze text animations in videos and recreate them as reusable Remotion components. The key is careful observation, precise timing conversion, and leveraging Remotion's powerful interpolation and animation capabilities.

Always prioritize matching the original animation's timing and visual feel over pixel-perfect reproduction. Small variations in easing or timing can make animations feel more natural while still capturing the essence of the original.