Lyrics Overlay

Lyrics Overlay Skill

Add beautiful animated lyrics/captions to videos using Remotion with multiple template styles.

Style Selection Guide (For Agent)

Choose style based on song mood, genre, and visual aesthetic:

Style Details

1. Karaoke (Default)

• Position: Bottom
• Animation: Spring bounce word-by-word, current word glows
• Colors: White text, gold/orange highlight
• Use when: Standard music videos, pop songs, singalong content

2. Minimal

• Position: Bottom
• Animation: Full line shows, current word scales up slightly
• Colors: Subtle white/gray
• Use when: Clean look needed, don't distract from visuals

3. Fade

• Position: Bottom
• Animation: Words fade in smoothly as spoken
• Colors: Pure white
• Use when: Speeches, narration, gentle songs

4. Neon (Cyberpunk)

• Position: Bottom or center
• Animation: Chromatic aberration, glitch on entrance, flicker
• Colors: Magenta glow (#FF00FF), cyan split (#00FFFF)
• Effects: Scanlines, RGB split, multi-layer glow
• Use when: Electronic music, synthwave, futuristic aesthetic

5. Cinematic (Movie Trailer)

• Position: CENTER (large, dramatic)
• Animation: Words scale from big to normal with blur, uppercase
• Colors: Gold accent (#FFD700) on white
• Effects: Vignette, letterbox bars, dramatic glow
• Use when: Epic songs, trailers, powerful moments, orchestral

6. Bounce (Playful)

• Position: Center
• Animation: Words bounce in from random positions, rotation
• Colors: Rainbow palette, each word different color
• Effects: Continuous subtle bounce on active word
• Use when: Fun/upbeat songs, kids content, party vibes

7. Typewriter (Retro)

• Position: Center
• Animation: Character-by-character reveal with cursor
• Themes: classic (white), terminal (green), vintage (sepia)
• Effects: Blinking cursor, themed backgrounds
• Use when: Storytelling, indie, nostalgic feel, artistic

Quick Start

1. Prepare Lyrics Data

cd skills/transcribe/scripts
npx tsx transcribe.ts -i <audio.mp3> -o <project>/subtitles --json

2. Create Composition

// Pick the right component for your style:
import { LyricsOverlay } from './LyricsOverlay';           // karaoke, minimal, fade
import { LyricsOverlayNeon } from './LyricsOverlayNeon';   // neon
import { LyricsOverlayCinematic } from './LyricsOverlayCinematic'; // cinematic
import { LyricsOverlayBounce } from './LyricsOverlayBounce';       // bounce
import { LyricsOverlayTypewriter } from './LyricsOverlayTypewriter'; // typewriter

import { parseElevenLabsTranscript } from './LyricsOverlay';
import { staticFile } from 'remotion';

const transcript = require('../../public/lyrics/subtitles.json');

export const MyVideo: React.FC = () => {
  const lyrics = parseElevenLabsTranscript(transcript, {
    maxWordsPerLine: 6,
    lineGapThreshold: 0.8,
  });

  // Example: Cinematic style
  return (
    <LyricsOverlayCinematic
      videoSrc={staticFile('videos/input.mp4')}
      lyrics={lyrics}
      fontSize={90}
      accentColor="#FFD700"
      isRTL={true}
      useOffthreadVideo={true}
    />
  );
};

3. Render

cd ~/remotion-assistant
npx remotion render MyVideo out/final.mp4

Props Reference

Common Props (All Styles)

LyricsOverlay (karaoke/minimal/fade)

LyricsOverlayNeon

LyricsOverlayCinematic

LyricsOverlayBounce

LyricsOverlayTypewriter

Color Presets

By Style

By Song Genre

Integration with music-video

This skill is called in Step 7 of the music-video pipeline.

The agent should select style based on:

1. Song genre (electronic → neon, epic → cinematic)
2. Energy level (high → bounce/neon, low → minimal/fade)
3. Visual aesthetic (modern → neon, retro → typewriter, dramatic → cinematic)

Text Decay Behavior

All styles have slower decay - words linger ~1.5 seconds after their timing ends for better readability. The fade starts AFTER the line ends, not before.

Remotion Templates (Included)

All Remotion components are included in this skill:

.claude/skills/lyrics-overlay/remotion-templates/
├── compositions/
│   ├── LyricsOverlay.tsx          # karaoke, minimal, fade
│   ├── LyricsOverlayNeon.tsx      # neon/cyberpunk
│   ├── LyricsOverlayCinematic.tsx # cinematic/epic
│   ├── LyricsOverlayBounce.tsx    # bounce/playful
│   └── LyricsOverlayTypewriter.tsx # typewriter/retro
└── utils/
    └── lyricsParser.ts            # ElevenLabs JSON parser

Setup Remotion Project

Copy templates to your Remotion project:

# One-time setup
cp -r .claude/skills/lyrics-overlay/remotion-templates/* ~/remotion-assistant/src/

Dependencies

• Remotion project (use templates above)
• transcribe skill - For word-level timing (included in project)