Declarative web animation

CSS animations using HTML attributes.

data-kui compiles into real @keyframes and native scroll-driven timelines — no animation loop, no runtime once it's compiled. JavaScript is reserved for the handful of effects that genuinely can't be done any other way: dragging, text splitting, reading scroll position.

See it on real content Read the proof →

Standalone · MIT · zero JS runtime dependency for CSS-rendered effects

Close portrait in monochrome yellow, autumn leaves resting over closed eyes

Portrait in a green jumpsuit against a matching green backdrop, one leg raised

One attribute. One compiled animation.

Author the effect name, timing, and parameters directly on the element. The parser resolves it once against a channel model that keeps unrelated effects from fighting over the same CSS property, then hands the rest to the browser's own compositor.

<h2 data-kui="fade-up 800ms">
  Disjoint channels compose
  without a conflict.
</h2>

Disjoint channels compose without a conflict.

Three things it actually does

tilt-3d

CSS-native

Entrances, 3D tilt, and reveals run as real @keyframes on the compositor thread. They keep running if a script is slow, blocked, or never loads at all.

beam-border

JavaScript only where necessary

Drag, gesture, text-splitting, and scroll-position effects are JS-prepared — every other primitive in the catalog needs none of it.

border-glow

Scroll-driven, not scroll-listened

Pins, parallax, and scrollytelling prefer native animation-timeline: view(), falling back to one shared scheduler rather than a listener per effect.

Animated on real content, not just typography

Three photographs, three live effects — a scroll-linked parallax drift, a slow ken-burns zoom, and a diagonal wipe reveal. All compiled CSS, all playing on their own — nothing here waits for a hover.

Red Sony over-ear headphones floating against a red-to-blue gradient backdrop

parallax-y

Frosted pump-bottle product shot resting on a driftwood branch

ken-burns

Red running shoe suspended against a near-black backdrop

wipe-diagonal

~237 named effects

from 29 primitives across 15 catalog categories — entrance, scroll mechanics, 3D, text, forms, navigation, gestures, and more.

fade-up slide-left zoom-in bounce-in-up blur-in parallax-y reveal-once pin-section horizontal-scroll split-chars text-reveal-mask typewriter scramble draw-stroke icon-morph count-up 0 progress-ring

ken-burns wipe-circle

duotone-hover magnetic tilt-3d beam-border shine-sweep card-flip-x drag-inertia elastic-pull

Ship it in two lines.

Standalone, MIT-licensed, framework-agnostic. No product or CMS coupling — drop the two files in and start authoring data-kui attributes.

npm install kuinetic

<link rel="stylesheet" href="./kuinetic.css">
<script src="./kuinetic.js"></script>
<script>
  kuinetic.kuinetic({ observe: true }).start()
</script>