Video to CSS

Turn a reference video into an editable HTML/CSS animation. A skill for coding agents (Claude Code, Codex, Cursor, Copilot, Gemini) that rebuilds a clip as semantic DOM parts and CSS keyframes matched to the clip's real timestamps, with runtime controls. A browser harness then reports what matches and what does not.

Wind Farm Ridge (examples/wind-farm/) rebuilds a 10 s painted wind-farm loop (1280×720, 24 fps): five turbines, a cumulus bank, a moving cloud shadow, wind in the grass, nodding flowers and paper grain. The output is one index.html and one scene.css:

• 1,276 elements and 1,727 CSS animations.
• No images, video, canvas, SVG or JavaScript, and it plays with JavaScript disabled.
• 19 custom-property controls.

The scene is generated from seven part modules (build/parts/*.mjs). Each part was measured from the decoded frames, and every number is labelled measured, estimated, chosen or fitted.

One scene, different control values	Rotor at matched times (reference / CSS / difference)
Measured values; sunset palette; wind ×2 with taller grass and larger flowers; paper grain ×3 with recoloured turbines. All are custom properties on the root element.	The rotors are an affine matrix() plane solved from three measured blade tips, plus an inner rotate(). That reproduces the turbine's perspective tilt.

Cumulus at matched times	Full frame at matched times
657 elements: lit lobes, shade patches packed on the measured shade mask, rims. Each cloud drifts on its measured path, about 6–10 px per loop.	Hills are clip-path polygons from column scans. The shadow band's edge is interpolated keyframes fitted to the clip.

How close is it?

There is no single "% similarity": appearance and timing are different questions, so they are reported separately. Full numbers are in docs/EVIDENCE.md.

	measure	result
Appearance	median / p95 colour difference per cell (ΔE, 16×9 grid, averaged over all 240 frames)	2.48 / 8.08 (gates 4 / 10): pass
	cells within ΔE 10	96.5 %
	edge-layout correlation	0.90
	SSIM (reported, not gated)	0.66, held down by the painterly texture
Timing	turbine phase error / speed error	≤ 0.008 s / ≤ 0.5 %
	flowers, cloud-shadow edge	phase error 0.017 s
	motion energy	fails: the clip's thin grass strokes shimmer 1–2 px every frame; the broader CSS blades produce 0.38× as much frame-to-frame change
Structure	strict audit (DOM, CSSOM, computed styles, network, no-JS playback, reduced motion)	pass
Editability	19 controls, each changing the render; several instances and other scenes on one page	pass

Brush texture is approximated by gradient grain, not reproduced. Live playback in headless Chromium runs at about 30 fps; it has not been measured on a real display.

The reference is a Blender render of a still anime painting, made in the author's Video2Nodes project. It is not AI-generated footage and not an independent benchmark. The clip is included (fixtures/external/wind-farm/, 3.5 MB), so npm run check:wind reruns the comparison above.

Why

Asked to "make this clip in CSS", an agent works blind. It cannot see the browser, and a CSS file that loads can still be wrong in ways nobody notices:

• timing taken from frame / fps, which drifts on variable-frame-rate clips;
• a rotated phone video built sideways, or a non-square-pixel video stretched;
• motion that looks right in one screenshot but runs late, fast or with the wrong easing;
• a check that captures the scene while it is still animating, or with animations disabled;
• the video or its frames hidden inside the "CSS" scene;
• a "% similarity" that hides a failing timing check behind a good colour match.

This toolkit closes those gaps:

• Any input. v2css init reads anything ffmpeg can decode (mp4, mov, webm, gif; any size, aspect, rotation or frame rate). It works at the size a player shows, finds the real timestamp of every frame, and guesses loop or one-shot from the seam. Pick a window of a longer clip with --start/--duration.
• Deterministic seeking. Scene time t means every CSS animation paused at currentTime = t. Screenshots are pixel-identical across runs and orders, and seeking matches hand-computed CSS timing to within 0.26 px in Chromium and WebKit.
• Separate reports. Appearance (per-cell colour, edge layout), timing (per-part trajectories, phase, rate and easing shape from noise-aware lag analysis, region brightness, motion energy, loop seam), structure (a strict audit) and editability (controls, embedding). They are never merged into one score.
• Checks that are checked. Six deliberately broken copies of every scene (frozen, shuffled, 0.4 s late, 1.25× fast, a misplaced layer, linear easing) must each fail the check aimed at them. Each animation is also shifted 0.1 s, one at a time, to show which motions the probes actually observe.
• A strict output profile. No <img> <video> <canvas> <svg> <script>, no url(). Selectors, keyframes and custom properties are namespaced, so scenes can share a page. There is a reduced-motion pose.

Install

Claude Code (plugin marketplace):

claude plugin marketplace add gokayfem/video-to-css

claude plugin install video-to-css@video-to-css

Or copy the skill: cp -R skills/video-to-css ~/.claude/skills/.

Codex, Cursor, Gemini CLI, Copilot and other agents (via skills):

npx skills add gokayfem/video-to-css

Or install by hand:

This is the beginning of the README. Read the rest at the original. Read the full README ↗