HN Showcase
Back to browse
AliveUI – CSS framework with motion and depth as first-class primitives

AliveUI – CSS framework with motion and depth as first-class primitives

by pratikshadake·Feb 27, 2026·1 point·0 comments
Visit ProjectView on HN

AI Analysis

●●SolidEye CandySlick

Motion as CSS primitive, not JS—but Tailwind plugins and Framer Motion already solve this deeply.

Strengths
  • •Depth system (d1–d3) auto-coordinates shadow, border, background, and hover lift with single class—composable elevation semantics.
  • •Zero runtime overhead—all motion is static CSS keyframes, not JS-driven animations, reducing bundle size.
  • •Stagger automation via --alive-index reduces boilerplate for sequential animations in lists and grids.
Weaknesses
  • •Tailwind already has animate-* and transition utilities; Framer Motion dominates when interactivity gets complex.
  • •Data-attribute approach (data-alive-modal, data-alive-accordion) is lighter than JS frameworks but less flexible than component libraries.
Category
Design
Target Audience

Frontend developers and designers using Tailwind or Vite who want motion without Framer Motion overhead

Similar To

Tailwind CSS · Framer Motion · shadcn/ui

Post Description

I built AliveUI because adding meaningful motion to UIs with Tailwind is a second-class citizen. You reach for Framer Motion, write 40 lines of keyframes, or pile on JS runtime for something that should just be a class.

AliveUI treats depth and motion the way Tailwind treats spacing — as a primitive you compose, not a library you configure.

A few things that make it different:

Depth layers (d1–d3): One class gives an element physically correct elevation — shadow, border, background, and hover lift all update together.

Motion tokens: alive-enter, alive-enter-down, alive-enter-right, alive-enter-left, alive-enter-fade, alive-enter-scale are generated CSS keyframe utilities. Stagger is automatic via --alive-index. Zero JS runtime, works with any HTML.

Data-attribute interactivity: Accordion, modal, drawer, tabs, dropdown — driven by data-alive-* attributes and an optional 2KB runtime.

Arbitrary values: w-[340px], bg-[#ff6b6b] — same bracket syntax as Tailwind for escape hatches.

Setup is a PostCSS plugin, Vite plugin, or standalone CLI. Scans your source files, generates only what you use.

npm install @alivecss/aliveui

Site + live demos: https://aliveui.dev GitHub: https://github.com/pratikshadake/aliveui

Curious what people think : is motion as a CSS primitive the right abstraction, or does it belong in JS?

Similar Projects