Higher perspectives.
Move your pointer. Every layer is one line of CSS.
Kinesis 2.0
Interactive motion, written in CSS.
Add --k-tilt: 16deg to a card and it tilts toward the pointer. Kinesis turns CSS variables into pointer, scroll, and touch interaction, animated with springs. The same properties work in JavaScript.
- 14 KB gzipped
- No dependencies
- CSS or JavaScript
- MIT
--k-motion
.hero-scene { --k-motion: soft; }
.postcard { --k-tilt: 16deg; }
.postcard__sun { --k-parallax: -14px; }
.postcard__peak--far { --k-parallax: 10px 4px; }
.postcard__peak--near { --k-parallax: 38px 12px; }
.postcard__title { --k-depth: 60px; }
.postcard__chip { --k-depth: 90px; }tiltnearmagneticspinfollowlookdragpressviewdepthrepelpointhoverscrolltiltnearmagneticspinfollow
repel · magnetic · near
The page is a field.
320 elements, one stylesheet. Dots part and light up, words lean in.
One property, one behavior.
Each tile is one declaration. Move, hover, and drag.
look · follow · near
They notice you.
The portraits turn to face you, their eyes follow you, and they blush up close.
Motion, declared.
near · text splitting
Type that listens.
Each letter is its own element. One rule lifts the letters near the pointer.
One mechanism for docks, buttons, and reveals.
--k-when sets the trigger. Outputs like --k-scale set what changes.
--k-when: near; --k-scale: 1.6;--k-when: press; --k-scale: 0.9;--k-when: view; --k-opacity: 0 1;Hover
--k-when: hover; --k-track: pointer;signals · bind · computed
It comes to you.
Kinesis reports the pointer's position from the shoulder. The law of cosines turns it into two joint angles.
tilt · parallax · CSS animation
A universe you can turn.
CSS animations spin the rings. Kinesis tilts the gyroscope and drifts the stars.
look · follow · signals
You are the sun.
The flowers turn toward you. Sweep fast and the grass bends behind you.
The same words in CSS, JavaScript, and Vue.
Kinesis properties are CSS variables, so media queries, :hover, calc(), and tokens work in them. When motion depends on state, pass the same props to kinesis() or v-kinesis.
.card {
--k-tilt: 8deg;
--k-area: self;
--k-when: hover;
--k-scale: 1.03;
}import { kinesis } from "@amineyarman/kinesis"
kinesis(".card", {
tilt: 8,
area: "self",
when: "hover",
scale: 1.03,
})<template>
<article
v-kinesis="{
tilt: 8,
area: 'self',
when: 'hover',
scale: 1.03,
}"
/>
</template>drag · press · tilt · progress
Pick it up.
Press to lift, drag to move, release to throw. The shadow follows --k-progress.
audio · bind · custom properties
Sound becomes scale.
48 bars, each bound to a frequency band. The center pulses with the bass.
From the first Kinesis
The classics, rebuilt in CSS.
The demos from Kinesis 1, rebuilt with a few properties each.
parallax · spin
The rider rolls.
The rider follows the pointer. The wheels turn once per 320px, their circumference, so they roll.
Built for real sites.
Your styles stay yours
Kinesis writes translate, rotate, and scale, never transform. Your centering and hover transforms keep working.
What Kinesis writes →Real CSS, resolved
Tokens, calc(), em and vw units, media queries, :hover, and any color syntax. The browser resolves them first.
Working with CSS →Accessible by default
Respects reduced motion. Hover answers keyboard focus, press answers Enter and Space. Split text stays readable.
Accessibility →14 KB, no idle cost
One animation loop for the page, stopped when nothing moves. Offscreen elements are skipped. A 1,600-element page scans in about 2 ms.
How it works →