Skip to content
Kinesis
2.0
Docs
Demos
Examples
Playground
Reference
Search
Ctrl K
Esc
Try “tilt”, “reveal”, “drag”, or “reduced motion”.
Playground
Edit the code. It runs on the real library.
Start from an example
Tilt card with depth
Magnetic button
Dock
Spotlight cards
Parallax layers
Eyes that follow
Heads that turn
Arrows that point
Gear train
Repel field
Pressable buttons
Reveal on scroll
Scroll-linked motion
Along a path
Drag, throw, snap back
Custom cursor
Text reveal
Audio-reactive speaker
Speed as a signal
The page is a field.
They notice you.
Type that listens.
It comes to you.
A universe you can turn.
You are the sun.
Pick it up.
Sound becomes scale.
The rider rolls.
A skeleton that dances.
A stack that fans out.
Ants march as you scroll.
Scrolling turns the solar system.
Letters lean toward you.
Motion in
CSS
JavaScript
Reset
Share
CSS
HTML
JS
.tilt-scene { display: grid; place-items: center; height: 100%; } .tilt-card { --k-tilt: 14deg; --k-motion: soft; width: min(300px, 80%); padding: 28px; border-radius: 22px; background: linear-gradient(140deg, #2f6bff, #7c5cff); color: #fff; box-shadow: 0 40px 60px -30px rgb(47 107 255 / 0.7); } .tilt-card__badge { --k-depth: 70px; display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fff; color: #2f6bff; font-size: 12px; font-weight: 700; } .tilt-card h3 { --k-depth: 45px; margin: 16px 0 6px; font-size: 26px; line-height: 1.1; } .tilt-card p { --k-depth: 25px; margin: 0; font-size: 15px; color: rgb(255 255 255 / 0.85); }