Programmatic Branded Animation & Live Display (Remotion)

Overview

A programmatic motion-graphics project built with Remotion, generating a branded spiral-loop animation and reels, plus a separate real-time interactive display app. An internal build in code-driven video and live event visuals.

Why It Exists

To produce on-brand animated loops and social reels programmatically (rendered to MP4 from React/Remotion compositions) rather than by hand, and to drive a live audience-facing display screen for an event/community hub.

What We Built

Two surfaces in one repo. The Remotion side renders compositions (AmbasadaLoop, ReelComposition) from reusable animated React components, SpiralBreathing, SpiralParticles, SpiralGhosts, SpiralDrawOn, RadialWaves, BackgroundGlow, NoiseOverlay, AlertPulse, with an audioAnalyser for audio-reactive motion, theme/path helpers, and phase-transition timing, output via the Remotion CLI (render, render:reel). The display/ side is a Vite + React real-time app (text reveals, profile avatars, hand-raise rings, interstitials, message feed) for a live screen, configured by input.json (topic, profile pictures, theme) with QR-code generation.

Technologies & Approach

TypeScript, Remotion 4 (CLI, player, layout-utils, paths, google-fonts), React 18, Vite for the live display, and Zod for typed inputs. Code-as-video plus a lightweight real-time front end.

Outcome / Impact

Delivered reusable, parameterized branded animation loops and reels plus an interactive event display, proving a programmatic pipeline for marketing motion graphics and live visuals.

Capabilities Demonstrated

• Programmatic, parameterized video/reel generation with Remotion
• Audio-reactive and path-driven motion graphics
• Real-time interactive event display screens