Interface craft / 05 OCT 2026

Make the frame testify.

Code-driven video removes the editing timeline. It does not remove the need to inspect what the first, middle, and final frames actually say.

A scene graph is not a finished film

Gitframes turns React scenes into video through a WebGPU renderer. Its repository describes deterministic frame evaluation, an editor, effects, audio, and MP4 output. That is a useful shape for agent-built demos because the work can live in source control instead of a hidden project file.

The launch copy reaches for Photoshop, After Effects, and Blender. The Hacker News thread pushed back on that comparison. The useful question is smaller: can a team define a scene in code, reproduce a chosen frame, and inspect the exported result without hand-driving a timeline?

The code is the recipe. The frame is the witness. The MP4 is the handoff.

Git already records snapshots and can show how a path changed over time. A code-driven video adds another sequence on top. Now one commit can change the scene graph, timing, fonts, shaders, and export behavior. Review the visual boundaries, not only the TypeScript diff.

Interactive replacement for a blind export button

Frame proof rig

Frame 0 loaded

TITLE
LOCKED

OPENING HOLD000 / 090

Frame selector0

0 START45 TURN90 END

Review interlocks

Pin source revisionLoad and verify fontsInspect frames 0, 45, and 90Add export replay fields

Template structure0 / 4

0 sections selected

FRAME REVIEW TEMPLATE
FRAME=0 / 90
STATE=OPENING HOLD
REVISION=[REQUIRED]
FONT RECEIPT=[REQUIRED]
BOUNDARY CAPTURES=[REQUIRED]
EXPORT COMMAND=[REQUIRED]
RESULT=STRUCTURE OPEN

What to put under review

Start with three frames. Inspect frame zero before motion starts, one frame at the main transition, and the final settled frame. Then add frames around any cut, text swap, shader change, or audio cue. The point is not exhaustive screenshot approval. It is to catch timing errors where they are cheap to explain.

Pin the Git revision, exact package version, fonts, assets, frame rate, dimensions, and export command. Record the GPU and browser or runtime used for the render. MDN still marks WebGPU as limited availability and requires a secure context in the browser. A successful render on one machine is evidence for that machine, not every target.

COPY THIS REVIEW ORDER

Source revision → dependencies and fonts → boundary frames → transition frames → audio alignment → export command → decoded MP4 spot check.

Use the tool without buying the mythology

The npm package installed cleanly in an isolated directory with lifecycle scripts disabled. Version 2.0.2 exposes modules for effects, audio, signals, rendering, fonts, and preview. That proves a package artifact exists and can be inspected. It does not prove the repository's performance numbers or broad editor comparisons.

The right trial is one short job. Rebuild a thirty-second product demo that already has an approved reference. Compare frame timing, text fidelity, audio alignment, render time, source readability, and the effort needed to change one beat. Keep the old tool until the new route wins that test.

Sources read

The lift ticket

Gitframes repositoryArchitecture, package structure, rendering claims, license, and install path.Hacker News discussionCriticism of the product comparisons and a sharper request for a focused video scaffold.MDN WebGPU APIBrowser support status, secure-context requirement, and the render-pipeline model.npm registry metadataPublished version, license, tarball integrity, and package dependencies.Git log manualPath history, patch output, revisions, and the limits of reading change history.