Open-Source Remotion Brand Videos · Magnific and Higgsfield

Quick Summary

• Naveen Annam has open-sourced two complete Remotion recreations of the Magnific and Higgsfield launch films. Both repositories include React and TypeScript source, scene components, shared motion and design tokens, generated assets, Remotion Studio scripts, render commands, and an MIT license.
• The Magnific project is a 35-second, 1920 by 1080 composition at 30 fps. Seven 150-frame beats create a card cascade, typography slams, a menu-to-polygon transition, optical zooms, neon beams, and the final Magnific lockup.
• The Higgsfield project is approximately 53 seconds at the same resolution and frame rate. Eleven scene components use durations from 59 to 182 frames, with one shared beat table controlling the complete 1,591-frame composition.
• Both projects follow the same reusable architecture: Root.tsx registers the composition, tokens.ts defines format, palette, motion, and timing, one top-level composition maps beats to scene components, and public/aigen stores the supplied visual assets.
• The repository code is MIT-licensed, but that does not automatically grant rights to Magnific or Higgsfield trademarks, third-party media, fonts, or every use of Remotion. Replace brand-specific material, preserve the MIT notice, audit asset rights, and check Remotion's current license for your team and use case.

What Naveen Annam has open-sourced

The announcement is short, but the release is substantial. Naveen Annam has published two complete Remotion projects that recreate launch films for Magnific and Higgsfield using React, TypeScript, and code-driven animation.

The exact repositories are creativly.ai-magnific-video-remotion and creativly.ai-higgsfield-video-remotion under Naveen's GitHub account. Both are public, use the main branch, include their working assets and render setup, and carry an MIT license dated 2026.

These are not isolated animation snippets. Each repository has a registered Remotion composition, centralized design and timing tokens, a scene directory, generated visual assets, TypeScript configuration, development and render scripts, and a README that documents the intended workflow.

Naveen presents the projects as starting points for creators who want to study or build polished brand videos without a traditional timeline editor or After Effects. The more precise claim is that the motion and assembly live in code. Creative direction, reference analysis, asset preparation, review, sound, and iteration still require production judgment.

The shared architecture behind both projects

The two codebases share a deliberately similar shape. src/Root.tsx registers one Composition and imports its duration, frame rate, width, and height from src/tokens.ts. Remotion uses the composition ID when previewing or rendering the video.

The top-level video component imports an ordered array of scene components. It maps the BEATS table into Sequence components, assigning each scene a start frame and duration. Remotion's Sequence component time-shifts its children, so each scene can calculate animation from a local frame that starts at zero.

Both projects premount every scene by 20 frames. That gives scene assets and components a short preparation window before their visible range, which can reduce abrupt loading when the next segment begins.

The architecture separates global decisions from scene implementation. Format, palette, type roles, springs, easing curves, beat durations, and cumulative starts live in tokens.ts. Individual scene files focus on composition and animation. That separation is the main pattern worth carrying into a new brand film.

Inside the Magnific Remotion recreation

The Magnific composition is named MagnificMeticulous. It renders at 1920 by 1080, 30 fps, and 1,050 frames, which produces a 35-second film. Seven scenes receive exactly 150 frames each.

The beats cover a vertical card cascade, the EXPAND YOUR REACH typography and collage, a slot-machine menu that contracts into a magenta polygon, a REWRITE THE RULES and DREAM BIGGER sequence, an optical zoom through cloud imagery, converging neon beams, and the final Magnific wordmark reveal.

Its visual system uses black and deep oxblood backgrounds, a hot-magenta accent, off-white for the final card, and Inter-based typography. The motion tokens include smooth, hero, and snappy spring configurations plus reusable cubic-bezier values for slots, push-throughs, and logo reveals.

The project also records which sampled source frames informed each beat. That is useful production metadata. When a recreation diverges, the developer can return to the relevant reference range instead of searching through the entire film.

Inside the Higgsfield Remotion recreation

The Higgsfield composition uses the ID HiggsfieldClaude. It also renders at 1920 by 1080 and 30 fps, but its complete duration is 1,591 frames, approximately 53 seconds.

Eleven scene components are stitched together by VideoComposition.tsx. Their durations vary between 59 and 182 frames, so the edit has short transitions, medium product beats, and longer hero holds instead of the Magnific project's seven equal sections.

The shared tokens include the same core motion vocabulary: smooth, hero, and snappy springs plus slot, exponential-in, and exponential-out easing. The source-frame ranges are recorded with segment and frame identifiers, which connects every scene back to the recreation analysis.

This is the better repository to study when your brand video needs more scenes and uneven pacing. Magnific is easier to understand as a compact seven-beat system, while Higgsfield shows how the same architecture holds up across a denser eleven-segment edit.

What to study first in the code

Begin with package.json. Both projects pin Remotion, the CLI, Google Fonts, and transitions to version 4.0.415, use React 19.2 and TypeScript 5.9, and expose scripts for Studio, rendering, stills, composition listing, and type checking.

Next read Root.tsx and tokens.ts together. Root shows the output contract, while tokens shows the creative system. Check the composition ID, total duration, width, height, fps, palette, font roles, spring configurations, beat durations, and cumulative start calculation.

Then read the top-level composition. The ordered SCENE_COMPONENTS array must stay aligned with BEATS. Each mapped Sequence receives the correct start, duration, label, and component. A mismatch between those arrays can attach the wrong duration or reference notes to a scene.

Finally, select one simple scene and one complex scene. Trace how they use useCurrentFrame, spring, interpolate, transforms, opacity, clipping, SVG, and assets. Recreate one small motion in isolation before trying to redesign the complete film.

How to clone, preview, check, and render the projects

Install a current supported Node.js version and pnpm, npm, or Yarn. Clone the repository you want, enter its directory, and install the locked dependencies. The READMEs use pnpm, but explicitly allow npm or Yarn.

Run pnpm dev to open Remotion Studio. Scrub the full timeline, inspect scene boundaries, and confirm that fonts and assets load. Run pnpm compositions to verify the composition ID, pnpm still for a representative still image, and pnpm check for the TypeScript validation.

For Magnific, pnpm render writes out/magnific-meticulous.mp4. For Higgsfield, the same script writes out/final.mp4. The underlying Remotion CLI accepts an entry point, composition ID, and output location, and supports flags for codec, frame range, scale, concurrency, and other delivery controls.

Do not change package versions before the first successful preview and render. Establish that the repository works as released, then create a branch and upgrade dependencies separately. This keeps creative adaptation failures distinct from toolchain migration problems.

How to adapt the projects to your own brand

Do not begin by replacing only the logo and colors. First write a new message hierarchy: audience, problem, promise, proof, product moments, emotional peak, and final call to action. Map that story to the existing number of beats or deliberately change the beat table.

Create a fresh token system for your brand. Replace palette values, type roles, spacing rules, corner radii, easing character, spring behavior, and image treatment. A real adaptation should feel like your brand's motion language, not a recolored Magnific or Higgsfield film.

Replace every brand-specific asset in public/aigen and any other public folders. Search the code for old names, wordmarks, campaign lines, URLs, colors, and alt descriptions. Keep a rights ledger for logos, fonts, photography, generated images, music, sound effects, and source references.

Change one scene at a time and render short frame ranges for review. Approve the message, composition, motion, and transition before moving forward. The codebase makes iteration deterministic, but it does not make a complete redesign safe as one unreviewed agent request.

How to use Claude Code or Codex with these repositories

Naveen says the recreations were built through Claude Code and or Codex with his video recreation kit. The released projects are valuable agent context because they expose working patterns, names, timings, components, and render commands instead of asking a model to invent an architecture from memory.

Start with an inspection request. Ask the agent to summarize the composition, beat table, scene map, assets, motion tokens, render scripts, and validation commands without editing. Then request a written adaptation plan that identifies exact files and acceptance criteria.

Keep the first implementation narrow, such as changing one end card, one typography beat, or one image grid. Ask the agent to preserve the composition dimensions, fps, scene ordering, and type checks unless your brief explicitly changes them.

Require visual verification. A passing TypeScript check only proves that the program is structurally valid. Render stills around entrances, peaks, exits, and scene boundaries, then review the complete video for pacing, clipping, font loading, asset quality, flashes, dead frames, and sound synchronization.

MIT code does not mean every visible element is unrestricted

Both repositories contain an MIT license from Naveen Annam and Creativly.ai. It permits use, copying, modification, distribution, sublicensing, and sale of the software, provided the copyright and permission notice remain in copies or substantial portions.

The READMEs separately state that Magnific, Higgsfield, and their related marks belong to their respective owners. A code license does not grant trademark rights or permission to publish a confusingly similar campaign. Replace logos, wordmarks, brand copy, and distinctive campaign assets before releasing your version.

Audit the supplied assets and fonts for your intended use. The repository can legally license Naveen's code while a third-party image, font, logo, audio track, or reference film remains governed by another license or by brand rights.

Remotion also has its own license. Its current official page describes a free license for individuals and companies of up to three people, with different company terms when a team grows. Check the current official terms for your organization and rendering model instead of assuming the repository's MIT license covers the Remotion framework.

Where Creativly.ai fits

Creativly.ai is Naveen's creative workspace for generating and editing images, video, audio, and text. Its public site currently presents Flow, Agent, Video Editor, asset management, templates, platform credits, and bring-your-own-key access to several model providers.

The two repositories are not required to use Creativly.ai. They are standalone Remotion projects with local package scripts. Creativly provides the creator and product context, while the released code can be cloned and studied directly from GitHub.

For a broader explanation of Naveen's recreation method, the earlier Remotion masterclass covers reference segmentation, contact sheets, five-second reconstruction passes, AI evaluation, and reusable learning files. These two releases turn that method into concrete source code.

A practical production playbook

First, clone both repositories and render them unchanged. Record the tool versions, composition IDs, durations, assets, output paths, render times, and any environment-specific issues.

Second, choose the closer structural reference. Use Magnific for a compact seven-beat film with equal sections and bold typography. Use Higgsfield for a longer eleven-scene edit with varied timing.

Third, write a new brand narrative and rebuild tokens before scenes. Replace the global visual and motion system, then create a scene-by-scene asset and rights map.

Fourth, adapt one scene at a time with still and frame-range renders. Review boundaries and complete playback after every group of changes. Keep the TypeScript check and a clean full render as release gates.

Finally, remove the reference brand's protected material, retain Naveen's MIT notice where required, verify the current Remotion license, export the intended codecs and dimensions, and watch the final file on the actual delivery platform.