A frame-accurate recreation of the Magnific launch/hype film, rebuilt entirely in code with Remotion, React and TypeScript — open-sourced by Naveen Annam at Creativly.ai.
This repo is part of a series where Naveen Annam — founder of Creativly.ai — takes a well-known AI brand's launch video and recreates it programmatically — no timeline editor, no After Effects. Every scene, transition, and type slam is written as React components and rendered deterministically with Remotion. It doubles as a real-world reference for anyone who wants to build AI brand videos in Remotion.
- 35-second brand film (1050 frames @ 30fps, 1920×1080) recreated scene-for-scene.
- 100% code-driven motion — springs, easings, and beats live in a single
src/tokens.tssource of truth. - AI-generated assets (portraits, cards, cloud/mountain plates) shipped pre-rendered in
public/aigen— only the finished assets the video needs are included.
| # | Beat | What happens |
|---|---|---|
| 01 | Cascade | Vertical card stack flips into a ring |
| 02 | Expand | "EXPAND YOUR REACH" oxblood lockup → collage scatter wiped to "pro workflows" |
| 03 | Menu → Polygon | Slot-machine tool menu scales down into a hot-magenta polygon |
| 04 | Rewrite / Dream | Polygon opens as a window into "REWRITE THE RULES", zoom-cut to "DREAM BIGGER" |
| 05 | Much / Today | "MUCH BIGGER" cloud-jump, optical zoom-through |
| 06 | Transforms | Neon V-beams converge, flash to a white M |
| 07 | Magnific Lockup | The M slides left, the Magnific wordmark reveals and holds |
pnpm install # or npm install / yarn
pnpm dev # open Remotion Studio to preview + scrub
pnpm render # render to out/magnific-meticulous.mp4Other scripts:
pnpm still # export a single still frame
pnpm compositions # list compositions
pnpm check # typecheck (tsc --noEmit)src/
Root.tsx # registers the <Composition>
MagnificMeticulous.tsx # top-level sequence: stitches all 7 beats
tokens.ts # palette, fonts, motion, beat timings
helpers.ts # font loading + shared animation helpers
scenes/ # one file per beat (Scene01…Scene07)
public/
aigen/ # AI-generated scene assets
picsum/ # lightweight fallback images
- Remotion
4.0.x— React-based programmatic video - React 19 + TypeScript
@remotion/google-fonts,@remotion/transitions
Built and open-sourced by Naveen Annam, founder of Creativly.ai.
Creativly is an AI creative studio — one workspace to generate, edit, and ship images, video, audio, and text without switching tools. It brings the leading models (OpenAI GPT Image 2, Google Gemini, Veo 3, Nano Banana 2 & Omni Flash, Kling 3, Runway, FLUX 2, Seedance 2, Seedream 4.5, and more) onto a single canvas, with a visual workflow builder (Flow), a chat-driven Agent, a timeline Video Editor, and production-ready templates for ads, UGC, product shots, and campaigns — run on Creativly credits or bring your own API keys.
This repo is one of those recreations — proof that polished brand videos can be built entirely in Remotion. Fork it and remix it for your own launch.
If this helped you, a ⭐ is appreciated.
MIT © 2026 Naveen Annam (Creativly.ai). Recreation for educational/showcase purposes; "Magnific" and related marks belong to their respective owners.