CSS Animations · Ambient & Feedback

Ambient backgrounds & feedback states.

Catalog sections J and K — 14 continuous ambient effects and 17 loading/reaction effects. Every ambient effect below loops forever and disables entirely under prefers-reduced-motion rather than shortening to a meaningless 1ms.

Scroll the effects Read the catalog docs →

Trigger buttons below are demo glue, not part of the library — every effect itself is one attribute.

Close-up of a futuristic helmet visor with a glowing cyan holographic HUD display, dark background with warm bokeh lights

J — Ambient backgrounds

14 continuous, decorative effects, on:load by default — plus beam-border, a related hover/border primitive worth knowing even though it's catalogued separately from these 14. Loops run at full speed here; nothing waits for scroll or a click. Several are layered directly over real photography rather than a flat panel, since effects like scanline and spotlight-follow read best over something with texture underneath.

Gradient & color fields — 2

data-kui="gradient-mesh"

data-kui="aurora"

Border treatments — 2

Matte white wireless earbuds case lit by red and blue neon gel lighting on a reflective dark desk — data-kui="gradient-rotate-border"

Modern wireless game controller displayed on a stand, lit by cool blue studio lighting against a dark background — data-kui="beam-border" — hover/border family, not one of J's 14

Texture & scanlines — 2

Person wearing a black VR headset, kneeling in a minimalist dark room lit by white LED strip lighting — data-kui="noise-overlay" — layered over photo

Grid drift — 2

data-kui="dot-grid-drift"

data-kui="line-grid-drift"

Floating & orbiting shapes — 4

data-kui="floating-shapes"

data-kui="float"

data-kui="bob"

Light & atmosphere — 3

data-kui="starfield"

data-kui="spotlight-follow" — layered over photo

data-kui="wave-blob"

K — Feedback & status

17 loading indicators and event-driven reactions. Trigger buttons are demo glue, not part of the library.

Loading indicators — 6

data-kui="skeleton-shimmer"

Loaded. This paragraph replaced the skeleton.

data-kui="skeleton-to-content"

data-kui="spinner"

data-kui="spinner-dots"

data-kui="spinner-ring"

data-kui="progress-indeterminate"

Toast — 2

Saved successfully.

data-kui="toast-slide-in" / "toast-slide-out"

Error & attention — 2

data-kui="shake-error"

data-kui="wobble" — click me

Click reactions — 6

click for ripple

data-kui="ripple"

data-kui="badge-pop"

128

data-kui="count-bump"

♥

data-kui="heart-burst" — click me

data-kui="confetti-burst" — click me

Copied!

data-kui="copy-confirm"

Gesture-simulated — 1

pull down

data-kui="pull-to-refresh"