Show HN: CSS primitives for product videos, no render pipeline(aliveui.dev)

1 pointsby pratikshadake4 ay önce0 comments

Show HN: CSS primitives for product videos, no render pipeline

https://www.aliveui.dev/video-blocks

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

0 comments

—