HTML attributes → CSS3 Animations

Made by Leon A.

The Psychology of Premium Websites — Sam Crawford

Every UI/UX Concept Explained in Under 10 Minutes — Kole Jain

CSS Animation Library. Made for Designers

See what it can do Install in two lines →

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

fade-up · slide-left · zoom-in · flip-in-x · bounce-in-up · blur-in · roll-in · back-in-down · pop-in · swing-in · rotate-in · fade-blur-up · zoom-in-up · fade-right · slide-up · zoom-out · flip-in-y · bounce-in · back-in-up ·

Click the attribute. Watch it change.

data-kui="wipe-circle 1500ms"

tilt-3d · magnetic · cursor-spotlight · glow-pulse · float · bob · orbit · beam-border · gradient-rotate-border · noise-overlay · aurora · scanline · dot-grid-drift · spotlight-follow · wave-blob · starfield · gradient-mesh · floating-shapes ·

Scroll pulls the reel.

data-kui="horizontal-scroll distance:300vh target:.track"

The ONLY 6 Web Design Styles that Matter (2026) — Self-Made Web Designer — Self-Made Web Designer — 6 design styles

Why My AI Designs Always Look Next Level — Tae Online HD — Tae Online HD — AI design

Turn Claude into a Design Genius... Just Watch — Jack Roberts — Jack Roberts — Claude design

How to Build $10K Websites in Minutes (Claude AI) — Metics Media — Metics Media — Claude AI sites

The Seismic Shifts Happening In Web Design — Self-Made Web Designer — Self-Made Web Designer — web design

How I Build & Sell Beautiful $5,000 Animated Websites with AI (AntiGravity) — Viktor Oddy — Viktor Oddy — AI-built sites

Claude Design = Easy Websites for Beginners — Kyle Skelly — Kyle Skelly — Claude for beginners

Every Web Design Concept Explained in Under 13 Minutes — Sam Crawford — Sam Crawford — web design concepts

text-reveal-mask · scramble · typewriter · var-weight · odometer-roll · count-up · draw-signature · ken-burns · slat-assemble · masonry-reflow · flip-shuffle · confetti-burst · heart-burst · wipe-diagonal · parallax-rotate ·

A slice of every category

Studio portrait in a cropped vest, tie, and voluminous wide-leg trousers with tan lace-up boots

Entrance & exit 48 bounce-in Drag me Gestures & physics 13 elastic-pull

The Cars Sell Center configurator — a gold Mercedes-AMG C 63 S Coupe with feature callouts and spec cards

The Njey technology homepage — a glossy black humanoid robot picked out in yellow accent light

A Logitech Z150 speaker product page in near-black — the speaker lit from the left on a dark stage

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:255, zoom-in Black-and-white profile portrait in a wide-brim red hat and red cloak

Media & images 18 slat-assemble Measure, invert, play — the browser animates a layout change it already did. Layout & FLIP 9 accordion-height

Abstract beauty portrait of a face rendered in liquid gold silk, fabric swirled around the head

Hover & pointer 22 tilt-3d — point at it Ambient 15 aurora Saved Feedback & status 17 spinner-ring + badge-pop Navigation 8 dropdown-open

Open the effect pages Read the catalog docs →

pin-section · pin-until · pin-spacer · stacking-cards · horizontal-scroll · sequence-scrub · video-scrub · scroll-progress-bar · scroll-progress-ring · parallax-y · parallax-x · parallax-scale · scroll-fade · scroll-desaturate · scrollytelling-step · scroll-spy · scroll-snap-x ·

View Timeline Animation

data-kui="fade-up timeline:view"

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>