Get started

CSS Animations · Ambient & Feedback

Ambient backgrounds & feedback states.

Scroll the effects Read the catalog docs →
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 effects, plus beam-border, all on:load.

Gradient & color fields — 2

data-kui="gradient-mesh"
data-kui="aurora"

Border treatments — 4

Matte white wireless earbuds case lit by red and blue neon gel lighting on a reflective dark desk
data-kui="gradient-rotate-border"
Futuristic white smart glasses with dark reflective lenses, twin cameras on the temples, and a HUD readout visible in the lens
data-kui="beam-border-auto duration:12s" — hover/border family
Aesop shampoo and conditioner bottles resting in a round leather tray, lit by warm directional sunlight with strong shadow
data-kui="gradient-border from:purple to:yellow"
White kUInetic-branded spray bottle mockup resting on a dark driftwood branch against a grey backdrop
data-kui="beam-border-auto color:gold duration:12s"

Texture & scanlines — 1

data-kui="scanline"

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"
data-kui="glow-pulse"

Light & atmosphere — 3

data-kui="starfield"
data-kui="spotlight-follow"
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"
data-kui="skeleton-to-content"
data-kui="spinner"
data-kui="spinner-dots"
data-kui="spinner-ring"
data-kui="progress-indeterminate"

Toast — 2

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

Error & attention — 2

data-kui="shake-error"
data-kui="wobble" — click me

Click reactions — 6

data-kui="ripple"
data-kui="badge-pop"
data-kui="count-bump"
data-kui="heart-burst" — click me
data-kui="confetti-burst" — click me
data-kui="copy-confirm"

Gesture-simulated — 1

data-kui="pull-to-refresh"