Stepshots pitches looping HTML and CSS clips as a replacement for homepage demo videos

A Stepshots post about replacing homepage demo media with looping HTML and CSS reached the front page of Hacker News on 5 November. The technique, which Stepshots calls CSS feature clips, trades recorded product videos for short animations built entirely from markup and stylesheets: no video files, no GIFs, no JavaScript.

What a feature clip is

According to the post, a clip is a roughly ten-second loop of simplified UI written in plain HTML and CSS. Being markup rather than pixels, it renders sharply at any dimension, tracks the site's light and dark theme, starts before any script executes, and is edited as code rather than re-shot as footage. The approach is framework-neutral, and Stepshots says a single 3.3 KB gzipped stylesheet covers all three sample clips on its page, with no JavaScript involved. The post also shows a command-line workflow for capturing real product flows, but the clips themselves are static.

The recipe

The core of the post is a prompt meant to be handed to a coding agent. Its guidance, paraphrased:

• Show only what the product really does. Read the actual interface first and copy its labels exactly; simplify freely but never invent features, buttons or results, and use a fictional company for sample data.
• Structure the loop as three or four beats on a ten-second, 0–100% timeline, reserving about 3% at the start and 4% at the end for a fade that hides the reset.
• Treat base styles as the final frame. Without keyframes every element should already look finished, so anything that exits mid-loop starts at opacity zero.
• Size everything in em. A container-query stage, with container-type set to inline-size, a font-size of 2.2cqw and a fixed aspect ratio, makes the mock scale like a video; pixels are avoided inside the clip.
• Pull colours from the project's theme tokens so the clip follows light and dark mode, hard-coding only elements that have one real-world colour, such as a terminal.
• Share timing through reusable classes — a single class that makes any element appear at the 30% mark, say — instead of a bespoke keyframe per element. Typing effects come from stepping a clip-path inset with steps() matched to the character count.
• When a value changes, stack both versions in one grid cell and swap instantly with step-end, since crossfading two labels mid-transition smears.
• Give the cursor its own keyframes, positioned with top and left percentages plus a brief scale-down press on each click; its tip sits at the top-left corner, so aim near a target rather than over its label.
• Respect prefers-reduced-motion by cancelling all animation and hiding the cursor, which also matters because a paused loop would otherwise rest on its reset state.
• Add role="img" and an aria-label describing what the clip shows.

Verifying the result

The prompt closes with a QA pass: pause every animation through document.getAnimations(), jump each animation's currentTime to one frame per beat, and screenshot. The checks include the cursor landing on its target, nothing overflowing at 390px wide, both themes reading correctly, and the reduced-motion frame making sense on its own.

A minimal example

Stepshots includes a smallest working clip in which a status label flips from Draft to Published. Both labels occupy the same grid cell, keyframes toggle their visibility at the loop's midpoint, and a wrapper fades the whole body in and out. There is no build step and no library, and because it is plain markup the post says it ports to React, Vue, Svelte, Astro, Rails or Dioxus with only the template syntax changing.

Clip or interactive demo

Stepshots draws its own boundary: a clip is a simplified mock, so it explains rather than proves. Clips suit one idea in ten seconds, feature rows on a landing page, and motion that needs no clicking. Real screens explored click by click, buyer-paced flows and drop-off analytics belong to interactive demos — which, notably, is what Stepshots sells, recording a live product into embeddable, trackable demos.

Why it matters

Homepage demo videos are a familiar burden: heavy files, fixed resolutions, no theme awareness and often no reduced-motion alternative. Clips replace that with a few kilobytes of text that scales, follows both themes, renders before JavaScript, carries ARIA semantics and diffs like any other code change. The trade-off is fidelity — a mock proves less than a recording — but for the narrow job of showing what a feature does at a glance, the technique argues that CSS keyframes can handle work usually handed to video.