252 effects · 30 primitives · one attribute
Animate anything with one HTML attribute.
data-kui="fade-blur-up 800ms"
Live — that name is cycling with word-cycler, one of the 252
It compiles to real @keyframes and native scroll-driven timelines. No animation loop, no per-effect scroll listener, and no runtime at all for roughly 70% of the catalog.
Standalone · MIT · zero JS runtime dependency for CSS-rendered effects
Made by Leon A.
Now showing: Museum of Ancient Art · data-kui="flip-card" — a transition rather than a keyframe, so the card stays on the face you turned it to.
Try it
Click the attribute. Watch it change.
One element, one attribute. Each chip writes a different value onto the same frame and the browser recompiles it — no rebuild, no re-render, nothing else on the page touched.
The line above the picture is not a caption. It is the attribute that is on the element right now, and it is the whole of what you would have to write.
The channel model
Effects compose. Until they collide.
Every effect declares the CSS properties it owns — its channels. Tick any set whose channels don't overlap and they compile into one animation. Tick two that want the same property and the library says so, instead of letting one quietly win.
The channels beside each name are read from the registry this page is running, not typed into it — so they cannot drift from what the library actually does.
data-kui="fade-up 900ms"
Composes — no two of these claim the same channel.
Disjoint channels compose without a conflict.
The catalog
A slice of every category
252 named effects from 30 primitives, in 15 categories. Every tile below is running the effect it names, on the same assets as the page it opens. Two categories have no tile: page transitions needs a navigation to happen to, and gestures needs a finger. The number on each tile is how many names that category ships.
Entrance & exit 48
bounce-in
Drag me
Gestures & physics 13
elastic-pull
Scroll mechanics 12
scroll-snap-x
DECLARATIVE
Text & typography 26
scramble, blur-in
SVG & icons 17
draw-stroke
0
named effects
Numbers & data 13
count-up to:252, zoom-in
Media & images 18
slat-assemble
Measure, invert, play — the browser animates a layout change it already did.
Layout & FLIP 9
accordion-height
Hover & pointer 22
tilt-3d — point at it
Ambient 15
aurora
Saved
Feedback & status 17
spinner-ring + badge-pop
Navigation 8
dropdown-open
Scroll-driven
View Timeline Animation
Same entrance names as everywhere else on this page. The only difference is
timeline:view, which hands the clock to the browser's own
animation-timeline: view(). Scroll back up and both play in reverse — the
one thing no on: trigger can do.
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
<script src="./kuinetic.all.js"></script>
<link rel="stylesheet" href="./kuinetic.css">
<script src="./kuinetic.js"></script>
<script>
kuinetic.kuinetic({ observe: true }).start()
</script>