When Greg Ceccarelli needed a hero video for SpecStory, he bypassed traditional editing suites entirely. Instead, he leveraged Remotion—a React-based framework for programmatic video creation—and Claude Code's AI assistance to build it in just two hours through 191 conversational feedback loops. This experiment showcases how the convergence of declarative UIs and AI collaboration is revolutionizing content creation.

Article illustration 1

Remotion Studio interface showing video editing with React DevTools (Source: Greg Ceccarelli)

The Stack That Made It Possible

  • Remotion.dev: React-based framework treating video frames as components
  • Claude Code (Opus 4): AI co-pilot handling code generation and iterations
  • Midjourney: Generated character assets like the medieval scribe and developer
  • Google Veo 3: Created the time-tunnel transition when code solutions proved complex
  • CapCut: Added final audio polish with Paganini's Violin Concerto

Programmatic Video: React for Moving Pixels

Remotion transforms video creation into component development. Each scene becomes a React component with programmatic timing:

// Defining video parameters
<Composition
  id="HeroVideo"
  component={HeroAnimation}
  durationInFrames={1170} // 39 seconds at 30fps
  fps={30}
  width={1920}
  height={1080}
/>

// Dynamic opacity based on frame count
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1]);

This paradigm shift enables:
- Parametric videos: Generate variations via props
- Deterministic rendering: Frame 420 always identical
- Hot reload: Instant visual feedback
- Full React ecosystem: Leverage npm packages and CSS-in-JS

The 191-Iteration Workflow

Ceccarelli's process revealed fascinating patterns in AI-human collaboration:

Article illustration 2

Midjourney iterations for medieval scribe character (Source: Greg Ceccarelli)

  1. Visual Hierarchy Battles: "Make it bigger" appeared 23 times across iterations
  2. Psychological Nuance: Changing a counter from 10% to 90% start made stats feel authentic
  3. The Power of "A Little": Over 8 instances of micro-adjustments enabled precision
  4. Animation Refinement: Bezier curves replaced choppy motions after feedback
// Final bezier-curve zoom implementation
transform: `translate(-50%, -50%) scale(${interpolate(
  frame,
  [110, 170],
  [1, 1.8],
  {
    easing: Easing.bezier(0.25, 0.1, 0.25, 1)
  }
)})`

Emergent Development Patterns

Through iteration, reusable animation patterns crystallized:

Pattern Use Case Key Technique
Fade Foundation Scene transitions Frame-based opacity interpolation
Spring Physics Natural-feeling entrances Physical simulation configs
Bezier Zoom Professional focus effects Custom easing curves
Text Streaming Character-by-character reveals Frame-based substring slicing
Phase Management Complex scene choreography Frame-constant boundaries
Article illustration 4

Google Veo-generated time tunnel transition (Source: Greg Ceccarelli)

Why This Changes Content Creation

  1. Iterative Discovery: Visual design emerges through conversation rather than pre-planning
  2. Precision Control: Programmatic adjustments beat timeline dragging for technical demos
  3. Hybrid Approach: Combine AI-generated assets (Veo/Midjourney) with code precision
  4. Versionable Art: Video components live in Git history alongside application code

The SpecStory video—crafted through 191 micro-iterations—demonstrates how conversational development creates unexpected efficiencies. As Ceccarelli notes: "Those three attempts to get the logo size right weren't failures—they were the process working as intended."

The New Workflow Frontier

While traditional video editing remains ideal for cinematic storytelling, programmatic approaches excel for:
- Product demos requiring precise UI synchronization
- Data-driven videos (personalized content, analytics visuals)
- Rapid iteration scenarios with tight feedback loops

As Remotion matures and AI coding assistants improve, we're witnessing the emergence of a new creative medium—one where developers can "talk" visuals into existence through iterative refinement. The 2-hour video sprint proves that sometimes, the most efficient path to polish isn't fewer iterations, but faster ones.

Source: Greg Ceccarelli