CSS Animations · Data & Hover
Numbers and hover.
Catalog section F counts up, sweeps SVG geometry, and fills bars and ratings — all
scroll-triggered. Section I answers a pointer or a keyboard focus:
lift, tilt-3d, five different cursor followers, each with a
:focus-visible equivalent.
Scroll for the counters, then hover or Tab through the cards below.
Numbers & data viz
All 13 names in catalog section F — count
formats, SVG progress geometry, and bar/segment/rating fills. Counters expose their
final value to assistive tech and never spam aria-live mid-animation.
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
Author-supplied SVG geometry: stroke-dasharray and
--kui-path-length match the shape's own circumference or arc length, the
same convention scroll-progress-ring uses.
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
All 20 names in catalog section I, grouped
exactly as the catalog groups them — button, border, link, icon, card, and cursor.
Every hover effect below ships a :focus-visible equivalent, so Tab works
as well as a 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"
Links — 2
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.
tilt-parallax
layers move at different depths
Cursor — 5
Each zone spawns its own follower — move the pointer across, or Tab in.