setOn(v => !v)} /> ) } ``` Row pattern: ```html

Notifications

``` CSS tokens: ```css :root { --alive-switch-on: #0a0a0a; --alive-switch-thumb: #ffffff; } ``` ### Avatar ```html JD JD JD JD JD JD JD

A B +5

``` ### Skeleton Loading placeholder with shimmer animation. No JS needed. ```html

``` Card loading state pattern: ```html

``` ### Progress ```html

``` CSS tokens: ```css :root { --alive-progress-track: rgba(0,0,0,0.08); --alive-progress-bar: #0a0a0a; } ``` ### Alert ```html

Just so you know

This action will update your settings.

Deploy successful

v1.4.2 is live.

Approaching limit

90% of quota used.

Build failed

TypeScript error on line 42.

Note

This is important.

``` ### Chip Interactive tag — for filters, selections, dismissible labels. Use chip (interactive) instead of badge (read-only) when the user can remove or toggle it. ```html

React

TypeScript

``` React dismissible list: ```jsx function TagList() { const [tags, setTags] = useState(['React', 'TypeScript', 'CSS']) const remove = (tag: string) => setTags(t => t.filter(x => x !== tag)) return (

{tags.map(tag => (

{tag} remove(tag)}>

))}

) } ``` ### Separator ```html

or continue with

Terms Privacy

``` ### Stack Flex layout primitive. ```html

Item 1

Item 2

Label

Section title

``` ### Entrance Apply class to element — it animates once on render. No JS. | Class | Effect | Duration | Easing | Use for | |-------------------|----------------------------|----------|-------------|----------------------------------| | alive-enter | Fade + slide up 8px | 320ms | emphasized | Cards, sections, primary content | | alive-enter-down | Fade + slide down 8px | 320ms | emphasized | Dropdowns, expanding content | | alive-enter-right | Fade + slide in from left | 320ms | emphasized | Sidebars, drawers from left | | alive-enter-left | Fade + slide in from right | 320ms | emphasized | Panels, drawers from right | | alive-enter-fade | Opacity only | 200ms | standard | Overlays, tooltips | | alive-enter-scale | Scale 0.96→1 + fade | 200ms | emphasized | Modals, popovers | ```html

Slides up and fades in

Fades in only

Scales in — use for modals

``` Retrigger by changing React key: ```jsx const [animKey, setAnimKey] = useState(0)

Replays

``` Trigger on scroll with IntersectionObserver: ```jsx function RevealCard() { const ref = useRef(null) const [visible, setVisible] = useState(false) useEffect(() => { const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true) }, { threshold: 0.2 }) if (ref.current) obs.observe(ref.current) return () => obs.disconnect() }, []) return (

Content

) } ``` ### Stagger Sequenced entrance for lists and grids via CSS custom properties. ```html

First — 0ms
Second — 60ms
Third — 120ms

First

Second

Third

...

``` React: ```jsx {items.map((item, i) => (

{item.label}

))} ``` --- ## Utilities ### Colors ``` bg-{color}-{shade} text-{color}-{shade} border-{color}-{shade} ring-{color}-{shade} fill-{color}-{shade} stroke-{color}-{shade} ``` Colors: slate gray zinc neutral stone red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose Shades: 50 100 200 300 400 500 600 700 800 900 950 Arbitrary color values: ``` bg-[#ff0000] text-[rgb(0,0,255)] border-[hsl(200,50%,50%)] bg-[url(/img.jpg)] fill-[currentColor] stroke-[#ff0000] ``` Opacity modifier — append /opacity (0–100) after the closing bracket: ``` bg-[#2A2A2A]/10 text-[#2A2A2A]/50 border-[#f54a00]/20 ring-[#6366f1]/40 fill-[#0ea5e9]/80 ``` Hex colors convert to rgba(); other formats use color-mix(in srgb, …, transparent). text-[*] infers property from value: lengths (px, em, rem, %, vw, vh…) → font-size; colors → color. ``` text-[10px] text-[#333] text-[#333]/50 ``` ### Spacing ``` p-{n} px-{n} py-{n} pt-{n} pr-{n} pb-{n} pl-{n} m-{n} mx-{n} my-{n} mt-{n} mr-{n} mb-{n} ml-{n} gap-{n} gap-x-{n} gap-y-{n} space-x-{n} space-y-{n} top-{n} right-{n} bottom-{n} left-{n} inset-{n} ``` Scale: 0 px 0.5 1 1.5 2 2.5 3 4 5 6 8 10 12 16 20 24 32 40 48 64 96 `space-x/y` add margin between direct children via `> * + *`. Negative spacing: ``` -m-{n} -mx-{n} -my-{n} -mt-{n} -mr-{n} -mb-{n} -ml-{n} -inset-{n} -inset-x-{n} -inset-y-{n} -top-{n} -right-{n} -bottom-{n} -left-{n} ``` Arbitrary spacing: ``` w-[100px] h-[200px] p-[10px] m-[1rem] gap-[1.5rem] top-[10px] ``` ### Typography ``` text-{xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl} font-{thin|extralight|light|normal|medium|semibold|bold|extrabold|black} font-{sans|serif|mono} leading-{tight|snug|normal|relaxed|loose} tracking-{tighter|tight|normal|wide|wider|widest} text-{left|center|right|justify} uppercase lowercase capitalize underline line-through no-underline italic truncate whitespace-nowrap ``` ### Layout ``` flex inline-flex grid block hidden contents flex-row flex-col flex-wrap flex-nowrap flex-1 flex-auto flex-none flex-grow flex-shrink flex-grow-0 flex-shrink-0 grow grow-0 shrink shrink-0 basis-{n} basis-auto basis-full basis-1/2 basis-1/3 basis-1/4 items-{start|center|end|stretch|baseline} justify-{start|center|end|between|around|evenly} grid-cols-{1-12} grid-rows-{1-6} col-span-{n} row-span-{n} relative absolute fixed sticky ``` Background utilities: ``` bg-cover bg-contain bg-auto bg-center bg-top bg-bottom bg-left bg-right bg-no-repeat bg-repeat bg-repeat-x bg-repeat-y bg-fixed bg-local bg-scroll bg-origin-border bg-origin-padding bg-origin-content bg-clip-text bg-clip-border bg-clip-padding ``` ### Sizing ``` w-{n} w-full w-screen w-auto w-min w-max w-fit w-1/2 w-1/3 w-2/3 w-1/4 w-3/4 h-{n} h-full h-screen h-auto min-w-{n} max-w-{n|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl} min-h-{n} max-h-{n} ``` ### Animate ``` animate-none animate-spin animate-ping animate-pulse animate-bounce animate-shimmer ``` Transition timing: ``` ease-linear ease-in ease-out ease-in-out ``` ### Effects ``` opacity-{0|5|10|20|25|30|40|50|60|70|75|80|90|95|100} shadow-{sm|DEFAULT|md|lg|xl|2xl|none} rounded-{none|sm|DEFAULT|md|lg|xl|2xl|3xl|full} border border-{0|2|4|8} border-{t|r|b|l} border-{solid|dashed|none} ring ring-{1|2|4} ring-offset-{1|2} blur-{sm|DEFAULT|md|lg|xl} backdrop-blur-{sm|DEFAULT|md|lg|xl} scale-{0|50|75|90|95|100|105|110|125|150} rotate-{45|90|180} z-{0|10|20|30|40|50|auto} overflow-{hidden|auto|scroll|visible} cursor-{pointer|default|not-allowed|wait|text|grab} select-{none|text|all} ``` Arbitrary effects: ``` opacity-[0.35] z-[100] rounded-[10px] border-[3px] blur-[12px] scale-[1.2] rotate-[45deg] translate-x-[50px] translate-y-[20px] shadow-[0_4px_8px_rgba(0,0,0,0.2)] ``` ### Variants ``` hover: focus: focus-visible: active: disabled: dark: sm: md: lg: xl: 2xl: first: last: odd: even: placeholder: group-hover: (requires class="group" on parent) file: (targets ::file-selector-button inside ) ``` Variants work with arbitrary values and opacity modifiers: ``` hover:bg-[#ff0000] hover:bg-[#ff0000]/80 md:w-[500px] focus:ring-[#f54a00]/40 ``` --- ## JS Runtime Import from `@alivecss/aliveui/runtime`: ```ts import { init, destroy, openModal, closeModal, openDrawer, closeDrawer, toggleDropdown } from '@alivecss/aliveui/runtime' // Wire all data-alive-* elements in document init() // Destroy listeners (e.g. before route change) destroy() ``` Calling `init()` wires: accordion, modal, drawer, dropdown, tabs, scroll reveal, auto-stagger, tilt, magnetic. ### Scroll Reveal Add `data-alive-scroll` to any element — it starts hidden (opacity 0, translateY 8px) and animates in when scrolled into view. Fires once per element. ```html

Reveals on scroll

Fades in

Scales in

``` Combine with stagger by also using `data-alive-stagger` on the container: ```html

Item 1
Item 2

``` Reduced motion: elements immediately become visible (no animation). ### Auto-Stagger Add `data-alive-stagger` to a container — the runtime sets `--alive-index: N` on each direct child. Children with `alive-enter` (or any alive-enter-* class) automatically stagger their delay via `calc(var(--alive-stagger-gap, 60ms) * var(--alive-index, 0))`. ```html

First — 0ms
Second — 60ms
Third — 120ms

...

``` ### 3D Tilt Add `data-alive-tilt` to any element. On hover, the element tilts in 3D toward the cursor (max 8 degrees). On leave, it springs back smoothly. ```html

Feels physical on hover

``` ### Magnetic Follow Add `data-alive-magnetic` to buttons or icons. The element follows the cursor at 35% strength when the mouse is over it, and snaps back on leave. ```html ``` ### Accordion ```html

Content here

Confirm action

``` Clicking backdrop or `[data-alive-close]` removes `is-open`. Programmatic: `openModal('my-modal')` / `closeModal('my-modal')` ### Drawer ```html

Drawer content

``` Programmatic: `openDrawer('my-drawer')` / `closeDrawer('my-drawer')` ### Dropdown ```html

Item 1 Item 2

``` Click-outside closes automatically. Programmatic: `toggleDropdown(el)` ### Tabs ```html

General settings...

Security settings...

``` --- ## Composition Patterns ### Dashboard metric card ```html

Monthly revenue

$48,200

+12% from last month

``` ### Staggered card grid ```html

Card 1

Card 2

Card 3

``` ### Modal ```html

Confirm action

This cannot be undone.

``` ### Settings row ```html

Email notifications

Receive updates via email

Dark mode

Use system preference

``` ### Form ```html

Sign in

Password

``` ### Notification / alert inline ```html

Payment failed

Your card was declined. Please update your payment method.

``` ### User profile row ```html

Jane Doe

jane@example.com

Active

``` ### Media card ```html

Tutorial

Getting started with AliveUI

Learn how to add motion to every surface in under two minutes.

JD Jane Doe · 5 min read

``` --- ## Rules - Do NOT add transition-*, duration-*, or ease-* inside d1/d2/d3. Motion is inherited automatically. - Do NOT use infinite animations. No parallax, no scroll-triggered chaos. - Do NOT nest depth contexts (d2 inside d2). Each context is independent. - Use d1 for static content regions, d2 for interactive cards/buttons, d3 for floating layers (modals, drawers, tooltips). - Use alive-enter for primary content, alive-enter-scale for modals/popovers, alive-enter-fade for overlays. - Use alive-stagger (or --alive-index) for lists and grids, not arbitrary animation-delay values. - Use motion-fast (120ms) for press states, motion-normal (200ms) for hover, motion-slow (320ms) for entrances. - Chip = interactive/dismissible. Badge = read-only status. Do not confuse them. - Arbitrary values (bracket syntax) bypass the design system scale — use sparingly. --- ## Making Videos with AliveUI AliveUI CSS classes animate the moment an element renders — no JavaScript trigger needed. A video is a sequence of fixed-size HTML scenes, each filled with alive-* blocks. Open in a browser, screen-record, export MP4. ### Minimal scene template ```html

SHIP IT

Motion-first CSS framework

AliveUI

v1.0 · MIT License

``` ### Multi-scene structure Show one scene at a time. Clone + re-insert to restart CSS animations on scene entry. ```html

``` Key rule: clone + re-insert the scene element to restart all alive-* animations from frame 0. ### Common scene patterns Hero / brand intro: ```html

PRODUCT NAME

``` Feature highlight: ```html

One click export

Export complete

video.mp4 · 1080p

``` Outro / CTA: ```html

Ship faster.

Get started free

MIT License · No signup

``` ### Resolution reference | Format | Size | Use case | |--------|------|----------| | 16:9 HD | 1280×720 | Twitter, YouTube, LinkedIn | | 16:9 FHD | 1920×1080 | YouTube, presentations | | 1:1 | 1080×1080 | Instagram, Twitter | | 9:16 | 1080×1920 | Instagram Reels, TikTok, Shorts | | Dev preview | 960×540 | Prototyping (scale up with CSS) | ### Recording to MP4 - **OBS Studio (free)**: Add Window Capture source → crop to scene frame → record to MP4 - **ScreenFlow / Loom (macOS)**: Record browser window region → export MP4 - **Playwright (headless)**: ```ts const context = await browser.newContext({ viewport: { width: 960, height: 540 }, recordVideo: { dir: './out/', size: { width: 960, height: 540 } }, }) const page = await context.newPage() await page.goto(`file://${__dirname}/video.html`) await page.waitForTimeout(20_000) await context.close() // saves WebM → convert with ffmpeg ``` --- ## Video Blocks CSS-only animated building blocks for product video frames. All animations trigger on render — no JavaScript required. Designed for 1920×1080 scenes. ### Typewriter ```html Text appears character by character. Slower variant. ``` ### Toast Variants: alive-toast-success | alive-toast-info | alive-toast-warning | alive-toast-error ```html

Payment received

$49 · Pro plan

``` ### Metric card ```html

Revenue

$48K

+12%

``` alive-metric-card-up = green indicator. alive-metric-card-down = red indicator. ### Badge pulse Variants: alive-badge-live | alive-badge-online | alive-badge-recording | alive-badge-beta ```html

Live

``` ### Word reveal ```html

Build. Ship. Repeat.

``` alive-delay-* goes from 1–12 (each step = ~100ms). ### Code block ```html

index.ts ts

import '@alivecss/aliveui'

``` Token classes: alive-token-keyword, alive-token-string, alive-token-comment, alive-token-var, alive-token-fn, alive-token-punct. ### Spotlight ```html

Focused element

``` ### Testimonial ```html

★★★★★

Best framework I've used.

Sarah Chen

Engineer, Vercel

``` ### Grid + beam ```html

Content

``` ### Marquee ```html

Vercel

Stripe

``` ### Glitch ```html

GLITCH

``` data-text must match element text content exactly. --- ## Scene Transitions Each transition has -out (exiting scene) and -in (entering scene) variants. Render both scenes simultaneously during the 500ms overlap. Prefixes: alive-transition-fade | alive-transition-wipe-left | alive-transition-wipe-right | alive-transition-wipe-up | alive-transition-wipe-down | alive-transition-slide-left | alive-transition-slide-right | alive-transition-slide-up | alive-transition-slide-down | alive-transition-zoom-in | alive-transition-zoom-out | alive-transition-blur | alive-transition-flip ```html

Scene A

Scene B

``` --- ## Kinetic Typography Apply to any heading or span. Triggers once on render. | Class | Effect | |---|---| | alive-kinetic-slam | Heavy slam-in (bold hero) | | alive-kinetic-pop | Elastic pop-in (playful) | | alive-kinetic-roll | 3D roll-up (narrative) | | alive-kinetic-stretch | Horizontal stretch-in (confident) | | alive-kinetic-neon | Neon flicker glow (tech/dark) | | alive-kinetic-wave | Per-character wave (wrap each char in ) | | alive-kinetic-gradient | Animated gradient text | ```html

SHIP

ALIVE

``` --- ## Scene Backgrounds Apply to a position:absolute;inset:0 div inside position:relative;overflow:hidden scene. | Class | Description | |---|---| | alive-aurora | Shifting indigo/sky/emerald gradient | | alive-aurora-dark | Deep dark aurora (stack with alive-starfield) | | alive-bokeh | Soft blurred light orbs | | alive-rays | Conic light beam sweep | | alive-starfield | Moving star particle field | | alive-gradient-mesh | Animated mesh gradient | | alive-grid | Subtle scrolling grid lines | | alive-film-grain | Cinematic film grain overlay | Grid variants: alive-grid-dark, alive-grid-light, alive-grid-sm, alive-grid-lg, alive-grid-vignette. ```html

``` --- ## Lower Thirds ```html

Sarah Chen

Engineer, Vercel

Section

Headline

Breaking news |

``` --- ## Device Frames ```html

https://yourproduct.com

``` --- ## Callouts ```html

This feature saves 2 hours/week

The fastest way.

``` --- ## Particles & FX ```html

``` --- ## Charts ```html

``` --- ## Cursor Effects ```html

Edit text

```