feat(remotion): Polish compositions for Cleo Abram-style visuals#592
Closed
codercatdev wants to merge 1 commit intodevfrom
Closed
feat(remotion): Polish compositions for Cleo Abram-style visuals#592codercatdev wants to merge 1 commit intodevfrom
codercatdev wants to merge 1 commit intodevfrom
Conversation
Scene.tsx (150→326 lines): - Word-by-word kinetic text reveal with staggered timing - Scene progress bar with gradient fill - Scene number indicator (top-right) - Ken Burns zoom effect on B-roll video - Gradient overlay (darker at bottom for text readability) - Animated accent line before text appears - Improved text container with glow border HookScene.tsx (180→526 lines): - Dramatic staggered text reveal (2-3 lines, alternating directions) - Animated dot grid background with sinusoidal pulse - Glow sweep lines crossing screen before text - Brand name typing effect with blinking cursor - Animated underline after hook text - 18 floating particles with drift and wobble - Dynamic gradient rotation over scene duration CTAScene.tsx (202→491 lines): - Floating geometric shapes (hexagons, triangles, diamonds) - Gradient subscribe button with pulsing glow - Animated arrows pointing to subscribe button - Social links as colored cards (YouTube red, Twitter blue, etc.) - Confetti celebration burst (20 particles) - 'Don't miss out!' urgency text Compositions (MainVideo + ShortVideo): - Cross-fade transitions between scenes (0.5s overlap) - Clean timeline math replacing IIFE pattern - Proper fade-out on all scenes for smooth transitions Also: - Fix registerRoot() call in remotion/index.ts (required for bundling) - Add FFmpeg post-render compression utility (392 lines) - Two-pass or CRF encoding modes - Graceful degradation if FFmpeg unavailable - getVideoMetadata() helper via ffprobe
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
codercatdev
pushed a commit
that referenced
this pull request
Mar 3, 2026
- Use useVideoConfig() instead of hardcoded dimensions in HookScene
- Reduce DotGrid to ~48 dots for Lambda performance
- Add word chunking for narrations >60 words
- Add missing extrapolateLeft: "clamp" for consistency
- Remove unused imports (FPS in Scene, fps in GlowSweeps)
- Extract shared VideoComposition component
- Replace execSync("rm -rf") with fs.rmSync()
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Phase 1b Polish — Remotion Composition Improvements
Summary
Major visual upgrade to all Remotion video compositions — Cleo Abram / Vox-style. Also includes registerRoot() fix and FFmpeg compression utility.
Changes (7 files, +1483 / -215 lines)
Scene.tsx (150→326 lines) — Word-by-word kinetic text, progress bar, Ken Burns B-roll, scene numbers, glow text container
HookScene.tsx (180→526 lines) — Staggered text reveal, dot grid background, glow sweeps, typing brand intro, floating particles, dynamic gradient
CTAScene.tsx (202→491 lines) — Floating geometric shapes, gradient subscribe button with glow, animated arrows, social link cards, confetti burst
MainVideo.tsx + ShortVideo.tsx — Cross-fade transitions (0.5s overlap), clean timeline math
remotion/index.ts — registerRoot() fix (required for Remotion bundling)
lib/services/ffmpeg-compress.ts (new, 392 lines) — Post-render compression with two-pass/CRF modes, graceful degradation
Verification