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 | Component | Best For | Mood/Vibe | |-------|-----------|----------|-----------| | **karaoke** | `LyricsOverlay` | Pop, dance, singalong | Energetic, fun, accessible | | **minimal** | `LyricsOverlay` | Ballads, acoustic | Clean, elegant, subtle | | **fade** | `LyricsOverlay` | Narration, spoken word | Gentle, smooth, understated | | **neon** | `LyricsOverlayNeon` | Electronic, synthwave, EDM | Cyberpunk, futuristic, high-energy | | **cinematic** | `LyricsOverlayCinematic` | Epic, orchestral, trailers | Dramatic, powerful, movie-like | | **bounce** | `LyricsOverlayBounce` | Kids, fun, upbeat | Playful, colorful, joyful | | **typewriter** | `LyricsOverlayTypewriter` | Storytelling, retro, indie | Nostalgic, intimate, artistic | ### 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 ```bash cd skills/transcribe/scripts npx tsx transcribe.ts -i <audio.mp3> -o <project>/subtitles --json ``` ### 2. Create Composition ```typescript // 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 ```bash cd ~/remotion-assistant npx remotion render MyVideo out/final.mp4 ``` ## Props Reference ### Common Props (All Styles) | Prop | Type | Default | Description | |------|------|---------|-------------| | `videoSrc` | string | required | Video file path | | `lyrics` | LyricsData | required | Parsed lyrics data | | `fontSize` | number | varies | Base font size | | `isRTL` | boolean | auto | Right-to-left mode | | `useOffthreadVideo` | boolean | false | Use OffthreadVideo for better memory | ### LyricsOverlay (karaoke/minimal/fade) | Prop | Type | Default | |------|------|---------| | `style` | 'karaoke' \| 'minimal' \| 'fade' | 'karaoke' | | `position` | 'bottom' \| 'center' \| 'top' | 'bottom' | | `primaryColor` | string | '#FFFFFF' | | `highlightColor` | string | '#FF6B35' | ### LyricsOverlayNeon | Prop | Type | Default | |------|------|---------| | `glowColor` | string | '#FF00FF' | | `secondaryGlow` | string | '#00FFFF' | | `glitchIntensity` | number | 0.5 | ### LyricsOverlayCinematic | Prop | Type | Default | |------|------|---------| | `accentColor` | string | '#FFD700' | | `letterSpacing` | number | 0.15 | | **Position** | - | **CENTER (fixed)** | ### LyricsOverlayBounce | Prop | Type | Default | |------|------|---------| | `highlightColor` | string | '#FFFFFF' | | `bounceIntensity` | number | 0.7 | | `position` | 'bottom' \| 'center' \| 'top' | 'center' | ### LyricsOverlayTypewriter | Prop | Type | Default | |------|------|---------| | `theme` | 'classic' \| 'terminal' \| 'vintage' | 'classic' | | `showCursor` | boolean | true | | `typeSpeed` | number | 20 | | `position` | 'bottom' \| 'center' \| 'top' | 'center' | ## Color Presets ### By Style | Style | Recommended Colors | |-------|-------------------| | karaoke | Gold `#FFD700`, Orange `#FF6B35` | | neon | Magenta `#FF00FF` + Cyan `#00FFFF` | | cinematic | Gold `#FFD700`, Silver `#C0C0C0` | | bounce | Rainbow (automatic) | | typewriter | Theme-based (green/sepia/white) | ### By Song Genre | Genre | Style | Colors | |-------|-------|--------| | Pop | karaoke | `#FF6B35` highlight | | Electronic | neon | `#FF00FF` / `#00FFFF` | | Rock/Metal | cinematic | `#FF0000` accent | | Ballad | minimal | `#FFFFFF` highlight | | Kids | bounce | Rainbow | | Indie | typewriter vintage | Sepia | ## 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: ```bash # 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)