Playing with HVE Spielberg — v0.0.2: New Engine & Tutorial Mode

Same command, new everything underneath

A few weeks ago I introduced HVE Spielberg — an open-source Claude Code skill that turns one command into a cinematic, branded product video.

When I shipped it, it rendered with Remotion. As of this release, it doesn’t — and I think it makes better videos for it.

This is the biggest update since launch: a new rendering engine, a third content mode, and real motion footage as a first-class citizen. The command you type didn’t change. Almost everything behind it did.

Here’s the new 60-second promo — and, as before, it was produced entirely by the tool itself:

Why I swapped the engine: Remotion → HyperFrames

Remotion is excellent — it’s genuinely “React for video,” and v0.0.1 was built on it. But for this particular pipeline it carried weight I didn’t need: a React runtime, a bundler step, and a server-side render path between “I edited a scene” and “I can see the scene.”

The whole pipeline now renders with HyperFrames — plain HTML + GSAP, captured by headless Chromium. Concretely, that means:

• No React, no bundler. A composition is HTML you can open and hand-edit. Scenes are sub-compositions wired with data-composition-id; their GSAP timelines register on window.__timelines and the runtime seeks them deterministically, frame by frame.
• Deterministic rendering. Every frame is a precise seek into a timeline, so a render is reproducible rather than a real-time recording you hope lands the same way twice.
• A tighter authoring loop. npx hyperframes preview gives a scrubbable timeline; lint, inspect, and validate catch problems before you spend a render on them.

Migrating an entire six-phase pipeline is the kind of change that surfaces every quiet assumption in your code. A few of the sharper lessons, in case you ever wire GSAP timelines for deterministic capture:

• tl.from() with a stagger is a trap. GSAP records the end-state at registration. If an element rests at opacity: 0 in CSS, the recorded “end” is opacity: 0, so the tween goes nowhere — and under a stagger, later instances re-hide what earlier ones revealed. The fix is always an explicit tl.fromTo(...).
• Reach for autoAlpha, not bare opacity, when elements rest at visibility: hidden — otherwise they stay invisible no matter how you fade them.
• Crossfades need the scenes to overlap, with only the incoming scene fading in. Fade both at once and the white page background flashes through the seam at the midpoint.

All of that is now documented in the skill so the next person (or the next Claude session) doesn’t rediscover it the hard way.

A third mode: Tutorial

v0.0.1 shipped two modes — Promo and Showcase. This release adds a third: Tutorial.

Tutorial mode is built for teaching. It cold-opens on the payoff (show the finished result first, so viewers know what they’re working toward), then walks task-ordered chapters labelled “Step N of M”, with required captions, an automatic legibility zoom on UI text smaller than 24px, and a recap beat to break up any run longer than ~90 seconds.

Real video, captured — not faked

In v0.0.1, capture meant screenshots. Now it means real motion footage, as a first-class, source-agnostic artifact the pipeline can compose deterministically:

• Web — Chrome DevTools screencast records your live app (experimental and feature-detected; it falls back to screenshots, never hard-fails).
• CLI — a dependency-free terminal path renders a real, animated terminal scene from the actual command output (with an optional asciinema route when you want true recorded footage).

Clips are device-framed, color-graded, and brand-treated so they read premium instead of raw — “no mockups, no fake UIs” now extends to “no fake motion either.”

10 brand design systems, ready to wear

Not everyone has a brand spec lying around. So the skill now ships 10 curated design systems — Stripe, Linear, Apple, Notion, Vercel, Airbnb, GitHub, Cal, Arc, and Bento — each as original, MIT-licensed prose covering palette, typography, depth, and, crucially, motion DNA. Pick one and the video moves like that brand, instead of moving like a template. (You can still derive a look from your own screenshots, or use a HyperFrames named style.)

Hardened, and still dogfooded

Beyond the headline features, this release went through three rounds of automated review plus a maximum-effort pass: real fixes to the voiceover assembly (non-zero exit on a failed TTS section, word-level timestamps for overlap detection, a tempfile leak closed), and the demo MP4 moved out of git so the repository ships no binaries.

And the proof point from launch still holds — the 60-second video above was made by the new HVE Spielberg, about the new HVE Spielberg. The update, announcing itself.

How to update

Already installed? One line, then restart Claude Code so the updated skill reloads:

1

npx skills update hve-spielberg

New here? Same install as always:

1

npx skills add nebrass/hve-spielberg

Everything is open source and MIT licensed. If you tried v0.0.1, this is the version worth coming back for — and if you haven’t, the next great video is still one command away. 🎬

🔗 Repository: github.com/nebrass/hve-spielberg · Changelog: v0.0.1 → v0.0.2