If you saw this product video on x.com, this is the breakdown of how I made it.

I built it to showcase 8StarLabs UI as a rhythmic product experience instead of a static demo, using Remotion and Claude to turn React components into a fully timed video sequence with transitions, sound effects, and scene choreography.

Remotion was the rendering engine, but Claude was the co-director that made the process fast, structured, and surprisingly smooth.

What I Wanted to Achieve

Most UI promo videos are clean but forgettable. My goal was to make this one feel alive:

• Fast, intentional pacing
• Beat-aligned transitions
• Clear component presentation
• A distinct visual identity across scenes

The final flow highlights components like Flip Clock, Heatmap, Partition Bar, installation flow, and CTA, all stitched together as one cohesive story.

Why Remotion Was the Right Fit

Remotion gave me a workflow I love: build video like UI.

Instead of keyframing in a traditional editor, I could:

• Drive motion with React logic
• Reuse design tokens and component code
• Centralize timing in shared constants
• Iterate quickly with code-level precision

For a component-first team, this is a huge advantage. Our motion system stays programmable and maintainable.

Why Claude Made This Smooth

The biggest speedup was not just writing code faster. It was reducing decision fatigue across the entire edit pipeline.

I used Claude to:

• Convert rough ideas into a clean scene-by-scene sequence
• Turn BPM and bar counts into practical timing blocks I could implement directly
• Suggest transition patterns that matched the energy of each scene
• Draft and refine SFX cue maps with concrete offset suggestions
• Help debug visual consistency issues without breaking pacing

Instead of context-switching between planning docs, notes, and code, I could keep one continuous loop: decide, implement, preview, adjust.

Timing Architecture: One Source of Truth

A major decision was to centralize rhythm and sequencing into shared timing constants:

• FPS
• BPM
• Beat and bar duration
• Scene lengths
• Transition lengths
• SFX cue offsets and trims

Once these were unified, retiming the entire video for a new track became much easier.
When the soundtrack shifted to 97 BPM, I updated core timing and the whole composition stayed coherent.

Making the Intro Actually Interesting

The intro went through multiple iterations.

I reduced dead time, tightened transitions, and introduced a loading-style progression before component reveals. The result feels more like a product story and less like a static title card.

I also tuned text movement and opacity ranges so the opening remains readable while still feeling dynamic.

Component Scenes: Clarity First, Style Second

In each showcase scene, I standardized a clearer pattern:

• Component in focus
• Plain component name below
• Direct install command visible from the start

That single structural choice made the video easier to understand, especially for developers seeing the library for the first time.

Deterministic Rendering: Heatmap Randomness

One of the most useful lessons came from rendering behavior.

The heatmap originally used runtime randomness to generate values. In rendered output, this can introduce unstable visual behavior or run-to-run inconsistencies.

I fixed it by switching to deterministic, seeded random generation per date key.
That preserved the organic look while keeping frames stable and repeatable across renders.

This is one of those small engineering details that makes a big perceived quality difference.

Before (runtime randomness, non-repeatable)

Copyfunction generateData(endDate: Date): HeatmapData {
  const data: HeatmapData = [];
  const curr = new Date(endDate);
  curr.setFullYear(curr.getFullYear() - 1);
 
  while (curr <= endDate) {
    const dateKey = `${curr.getFullYear()}-${String(curr.getMonth() + 1).padStart(2, "0")}-${String(curr.getDate()).padStart(2, "0")}`;
    const d = curr.getDay();
    const isWeekday = d > 0 && d < 6;
 
    // Non-deterministic: every run can produce different values
    const val = isWeekday
      ? Math.random() < 0.65
        ? Math.floor(Math.random() * 8) + 1
        : 0
      : Math.random() < 0.2
        ? Math.floor(Math.random() * 3) + 1
        : 0;
 
    if (val > 0) {
      data.push({ date: dateKey, value: val });
    }
 
    curr.setDate(curr.getDate() + 1);
  }
 
  return data;
}

After (seeded randomness per date key, repeatable)

Copyimport { random } from "remotion";
 
function generateData(endDate: Date): HeatmapData {
  const data: HeatmapData = [];
  const curr = new Date(endDate);
  curr.setFullYear(curr.getFullYear() - 1);
 
  while (curr <= endDate) {
    const dateKey = `${curr.getFullYear()}-${String(curr.getMonth() + 1).padStart(2, "0")}-${String(curr.getDate()).padStart(2, "0")}`;
    const d = curr.getDay();
    const isWeekday = d > 0 && d < 6;
 
    // Deterministic: same seed -> same value every render
    const val = isWeekday
      ? random(`${dateKey}-weekday-active`) < 0.65
        ? Math.floor(random(`${dateKey}-weekday-value`) * 8) + 1
        : 0
      : random(`${dateKey}-weekend-active`) < 0.2
        ? Math.floor(random(`${dateKey}-weekend-value`) * 3) + 1
        : 0;
 
    if (val > 0) {
      data.push({ date: dateKey, value: val });
    }
 
    curr.setDate(curr.getDate() + 1);
  }
 
  return data;
}

Audio and SFX: Small Tweaks, Big Impact

For music, I used the YouTube Audio Library.
Then Claude became the audio planner: I provided the exact BPM and scene order, and it helped map SFX placement so cues and transitions stayed beat-synced.

I layered in swipe, pop, and typing SFX to support scene changes and interaction cues.
Then I tuned:

• Trigger offsets
• Asset trims
• Per-scene volume
• Cue timing relative to transition motion

Micro-adjustments of just a few frames made transitions feel dramatically tighter, and Claude helped surface many of those timing tweaks faster than manual trial-and-error.

This can be improved further by integrating ElevenLabs for voiceover and a more unified audio pipeline.

Visual Polish Decisions

To avoid generic template motion graphics, I leaned into a specific style language:

• High-contrast cards
• Animated rainbow shimmer outlines
• Distinct palette cycles per scene
• Soft 3D depth and shadow stacks
• Minimal typography treatment inspired by product-launch aesthetics

The key was balancing energy with readability so style never hid the message.

What I Learned

Building promo video in code is not just possible, it is often better for product teams, especially when AI is part of the workflow:

1. Motion becomes versionable and repeatable
2. Timing can be retuned globally in minutes
3. Claude reduces planning overhead and iteration friction
4. Visual and engineering systems stay aligned
5. Render output quality improves when randomness is controlled

If your product already lives in React, combining Remotion with Claude is a powerful way to ship marketing visuals without breaking your development workflow.

Try It Yourself

If you are building a component library or product UI and want a video showcase that feels custom, not canned, this workflow is worth exploring.

Start with a small sequence:

• One intro
• Two component scenes
• One CTA

Then centralize timing, add audio cues, and iterate by feel.

That is where the magic happens.