CSS Animations · Data & Hover

Numbers and hover.

Scroll the matrix Read the catalog docs →

0 data-kui="count-up" · card: "lift" — hover or Tab

0 data-kui="count-currency" · card: "shine-sweep" — hover or Tab

0 data-kui="count-compact" · card: "icon-wiggle" — hover or Tab

0 data-kui="count-percent"

Numbers & data viz

Counters — 6

Scroll each card into view to trigger its count.

data-kui="count-up 1800ms to:2450"

data-kui="count-down 1800ms from:500 to:0"

data-kui="count-currency 1800ms to:4820 decimals:0"

data-kui="count-percent 1800ms to:0.94"

data-kui="count-compact 1800ms to:128400"

data-kui="odometer-roll 2000ms to:4820"

Rings, gauges & sweeps — 4

data-kui="progress-ring"

data-kui="gauge-sweep"

data-kui="donut-sweep"

data-kui="sparkline-draw"

Bars, segments & ratings — 3

data-kui="progress-bar"

data-kui="progress-segments" (staggered)

data-kui="star-rating-fill" — 70%

Hover & pointer

Buttons — 5

data-kui="lift" — hover or Tab

data-kui="lift-shadow"

data-kui="magnetic" — move close

data-kui="shine-sweep"

data-kui="split-flap"

Borders — 3

data-kui="border-draw"

data-kui="border-glow"

data-kui="beam-border"

Composition — 1

data-kui="lift, border-glow color:#4f46e5" — two presets, one eased merge

Links — 2

underline-slide

data-kui="underline-slide"

underline-center

data-kui="underline-center"

Icons — 3

data-kui="icon-wiggle"

data-kui="icon-spin"

data-kui="icon-bounce"

Card tilt — 2

Move the pointer over each card, or Tab to it.

Matte black Azzaro cologne bottle with a diamond-quilted band, wisps of smoke curling beside sprigs of juniper — data-kui="tilt-3d"

Black leather brogues, belt, sunglasses, bow tie, cufflinks, and wristwatch arranged as a flat lay on a light textured sheet — data-kui="tilt-parallax"

Cursor — 5

Each zone spawns its own follower — move the pointer across, or Tab in.

cursor-follow

cursor-lag

cursor-label

cursor-spotlight

cursor-invert