Demos
Each scene shows its code and opens in the playground.
The classics
From the first Kinesis site, rebuilt. Most use no JavaScript.
parallax · spin
The rider rolls.
The rider follows the pointer. The wheels turn once per 320px, their circumference, so they roll.
spin · transform-origin
A skeleton that dances.
Each body part is an SVG group with its own transform-origin. --k-spin turns it around that joint.
spin · area: self · transform-origin
A stack that fans out.
Hover the top photo and move sideways. The photos behind it turn around a pivot below the pile.
scroll · progress · offset-path
Ants march as you scroll.
One scroll value moves every ant along a CSS offset-path, each a step behind the last.
scroll · rotate
Scrolling turns the solar system.
Each orbit rotates with scroll progress. The moon's orbit sits inside Earth's.
I hope you enjoy Kinesis, bringing life into your UI.
magnetic · near · text splitting
Letters lean toward you.
From the first Kinesis homepage. Each character is magnetic.
Scenes
From the home page.
repel · magnetic · near
The page is a field.
320 elements, one stylesheet. Dots part and light up, words lean in.
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.
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.
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.