HN Showcase
Back to browse
CSS primitives for product videos, no render pipeline

CSS primitives for product videos, no render pipeline

by pratikshadake·Mar 23, 2026·1 point·0 comments
Visit ProjectView on HN

AI Analysis

●●SolidSlickBig Brain

CSS-only video primitives with no render pipeline beats Remotion for browser-native workflows.

Strengths
  • •offsetHeight reflow trick restarts CSS animations without JavaScript intervention
  • •2KB runtime handles scene sequencing via data attributes instead of heavy bundling
  • •Honest tradeoff documentation about MP4 export requiring headless browser
Weaknesses
  • •Can't export standalone MP4 without spinning up a headless browser
  • •Niche audience limits adoption compared to general animation libraries
Target Audience

Frontend developers creating product demo videos

Similar To

Remotion · Framer Motion · GSAP

Post Description

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

Similar Projects

Developer Tools●●Solid

Fullbleed – Rust HTML/CSS-to-PDF with Deterministic Output+Python CLI

It skips headless Chromium entirely and implements an HTML/CSS-to-PDF pipeline in Rust, exposing a Python wheel and CLI that releases the GIL and uses Rayon for parallel batch renders. The deterministic bits — fixed-point base unit, --repro-record/--repro-check, SHA256 outputs and vendored assets — are a clear, practical play for audited VDP/transactional workflows; what's still unknown is CSS spec coverage and whether subtle print-layout quirks will require hand-holding.

WizardryNiche Gem
krflol
203mo ago