CSS properties · Kinesis

Every Kinesis property with its values, syntax, initial value, and JavaScript name.

Every property is registered with @property, so values are checked and resolved by the browser like any typed CSS property. The JavaScript name is the same word in camelCase; see JavaScript.

Context

Inherited, so you can set them once on a scope.

--k-motion

motion

How values travel: a spring preset, or custom stiffness and damping.

Values: instant, smooth (default), soft, snappy, bouncy, heavy, or <stiffness> <damping> [<mass>]
Syntax: <custom-ident> | <number>+
Initial: smooth
Inherited: yes

--k-motion: bouncy;Guide →

--k-intensity

intensity

Multiplies every pointer effect. Handy in media queries.

Values: a number; 1 by default
Syntax: <number>
Initial: 1
Inherited: yes

--k-intensity: 0.5;Guide →

--k-perspective

perspective

Camera distance given to the parent of a tilted element.

Values: a length; 1000px by default
Syntax: <length>
Initial: 1000px
Inherited: yes

--k-perspective: 700px;Guide →

Pointer effects

--k-parallax

parallax

Drifts against the pointer. Negative values drift with it.

Values: one length (both axes) or two (x y)
Syntax: <length>+
Initial: 0px
Inherited: no

--k-parallax: 30px 12px;Guide →

--k-tilt

tilt

Turns toward the pointer in 3D.

Values: one angle (both axes) or two (x y)
Syntax: <angle>+
Initial: 0deg
Inherited: no

--k-tilt: 10deg;Guide →

--k-depth

depth

Lifts an element toward the viewer, above a tilted ancestor.

Values: a length
Syntax: <length>
Initial: 0px
Inherited: no

--k-depth: 40px;Guide →

--k-magnetic

magnetic

Leans toward the pointer when it comes within `--k-radius`.

Values: a number: the share of the distance to travel, e.g. 0.3
Syntax: <number>
Initial: 0
Inherited: no

--k-magnetic: 0.3;Guide →

--k-repel

repel

Moves away from the pointer when it comes within `--k-radius`.

Values: a length: the largest distance to move
Syntax: <length>
Initial: 0px
Inherited: no

--k-repel: 24px;Guide →

--k-follow

follow

Chases the pointer while it is in the area.

Values: a number: 1 reaches the pointer, 0.5 goes halfway
Syntax: <number>
Initial: 0
Inherited: no

--k-follow: 1;Guide →

--k-look

look

Turns in 3D to face the pointer, reaching the full angle at `--k-radius`.

Values: an angle
Syntax: <angle>
Initial: 0deg
Inherited: no

--k-look: 25deg;Guide →

--k-point

point

Rotates flat to point at the pointer.

Values: the direction your artwork faces, like gradient angles: 0deg up, 90deg right
Syntax: none | <angle>
Initial: none
Inherited: no

--k-point: 0deg;Guide →

--k-spin

spin

Rotates flat as the pointer moves across the area, like turning a dial.

Values: an angle: the rotation at the edge of the area (--k-axis: y follows vertical movement)
Syntax: <angle>
Initial: 0deg
Inherited: no

--k-spin: 180deg;Guide →

Reactions

--k-when

when

What the element reacts to. Its outputs move from their first value to their second.

Values: near, hover, press, view, view once, scroll, or page
Syntax: none | <custom-ident>+
Initial: none
Inherited: no

--k-when: view once;Guide →

--k-delay

delay

Waits before a hover, press, or view reaction starts.

Values: a time
Syntax: <time>
Initial: 0s
Inherited: no

--k-delay: 120ms;Guide →

--k-stagger

stagger

Adds this much delay per sibling, so a list reacts in order.

Values: a time
Syntax: <time>
Initial: 0s
Inherited: no

--k-stagger: 60ms;Guide →

--k-index

index

Overrides the position used by `--k-stagger`. Text splitting sets it for you.

Values: an integer
Syntax: <integer>
Initial: -1
Inherited: no

--k-index: 3;Guide →

Reaction outputs

Each takes one value (from rest to this) or two (from, to).

--k-x

x

Horizontal offset during a reaction.

Values: to (from 0) or from to
Syntax: <length>+
Initial: 0px
Inherited: no

--k-x: -20px 0;Guide →

--k-y

y

Vertical offset during a reaction.

Values: to (from 0) or from to
Syntax: <length>+
Initial: 0px
Inherited: no

--k-y: 24px 0;Guide →

--k-rotate

rotate

Rotation during a reaction.

Values: to (from 0deg) or from to
Syntax: <angle>+
Initial: 0deg
Inherited: no

--k-rotate: -8deg 8deg;Guide →

--k-scale

scale

Scale during a reaction. Respects your `transform-origin`.

Values: to (from 1) or from to
Syntax: none | <number>+
Initial: none
Inherited: no

--k-scale: 1.1;Guide →

--k-opacity

opacity

Opacity during a reaction. Keeps working with reduced motion.

Values: to (from 1) or from to
Syntax: none | <number>+
Initial: none
Inherited: no

--k-opacity: 0 1;Guide →

--k-blur

blur

Blur during a reaction, added after any filter you set.

Values: to (from 0) or from to
Syntax: <length>+
Initial: 0px
Inherited: no

--k-blur: 8px 0;Guide →

--k-color

color

Text color during a reaction, mixed in Oklab by the browser.

Values: any CSS color: to (from the current color) or from to
Syntax: none | <color>+
Initial: none
Inherited: no

--k-color: tomato;Guide →

--k-background

background

Background color during a reaction.

Values: any CSS color: to (from the current background) or from to
Syntax: none | <color>+
Initial: none
Inherited: no

--k-background: #2f6bff;Guide →

Drag

--k-drag

drag

Lets the element be dragged.

Values: both, x, or y
Syntax: none | x | y | both
Initial: none
Inherited: no

--k-drag: both;Guide →

--k-bounds

bounds

Keeps a dragged element inside a box, with an elastic edge.

Values: none (default), parent, scope, or viewport
Syntax: none | parent | scope | viewport
Initial: none
Inherited: no

--k-bounds: parent;Guide →

--k-release

release

What happens when a drag ends.

Values: throw (default, glides with momentum), stay, or return (springs home)
Syntax: throw | stay | return
Initial: throw
Inherited: no

--k-release: return;Guide →

Modifiers

--k-area

area

Where the pointer is measured for parallax, tilt, follow, and spin.

Values: scope (default: the nearest [data-kinesis]), self, or viewport
Syntax: scope | self | viewport
Initial: scope
Inherited: no