Get started

CSS Animations · Nav & Forms

Chrome that moves with intent.

Catalog sections M (navigation, 8 names) and O (forms & inputs, 12 names), built on daisyUI + Tailwind components. Both respect the same boundary: this library animates the chrome you already control — it never owns aria-expanded, focus trapping, or keyboard handling.

See the primitives Read the catalog docs →

Every control below still needs you to click, hover, or type — kUInetic only owns the motion that follows.

Docs Catalog JS

Forms & inputs

All 12 O names — floating labels, validation, selection controls, and submission feedback — inside daisyUI's input, fieldset, and label components. Where a primitive needs its own sibling markup (the toggle's track, the radio's dot, the checkbox's drawn check), that markup stays exactly as kUInetic's CSS expects it — daisyUI only dresses the row around it.

Text fields — 4

data-kui="label-float" — click into the field
data-kui="input-underline-grow" — click into the field
data-kui="focus-ring-grow 350ms" — click into the field
data-kui="validate-shake 400ms on:click" — click the field

Inline feedback — 2

Click to draw the check
data-kui="validate-check 500ms on:click"

Type a password to fill the meter

data-kui="strength-meter" — type a password

Selection controls — 3

data-kui="toggle-morph" — click the switch
data-kui="checkbox-draw" — click the checkbox
data-kui="radio-fill" — pick one

Progress & submission — 3

data-kui="range-fill" — drag the slider
data-kui="step-progress steps:4" — click the bar to advance
data-kui="submit-to-spinner-to-check load:900ms hold:1200ms" — click to submit