Most product demo videos are made in screen recorders or tools like Remotion
that render frames to MP4. I wanted something different: drop a CSS class on
any HTML element and get cinematic motion that's ready for a product video,
entirely in the browser. AliveUI Video Blocks is a set of CSS utility classes for common video UI
primitives: animated metric cards, toast notifications, typewriter text,
kinetic typography, lower thirds, scene backgrounds (aurora, starfield, bokeh),
device frames, 3D effects, and particle FX.
The interesting technical bit: there's no render pipeline. Animations run as
native CSS keyframes. A small runtime (~2KB) handles declarative scene
sequencing via data attributes, restarts animations on scene activation via
an offsetHeight reflow trick, and drives CSS transition classes between scenes.
The tradeoff vs Remotion: you can't do frame-perfect programmatic video or
export a standalone MP4 without a headless browser. What you get instead is
instant playback, zero build step, and blocks you can embed directly in a
web page.
Built on top of AliveUI, a PostCSS plugin CSS framework. The video blocks
are a separate layer that ships with it.
https://aliveui.dev/video-blocks