Motion · Kinesis

Every Kinesis value moves on a spring. A spring keeps its speed when the target changes mid-way, so motion stays continuous when the pointer turns back or a hover ends early. An animation with a fixed duration has to restart instead.

Presets

--k-motion picks a preset. It inherits, so one value on a scope covers everything inside.

Preset	Character
`smooth` (default)	settles quickly, no overshoot
`soft`	slower and floaty, for large layers
`snappy`	quick and precise, for controls
`bouncy`	overshoots and wobbles
`heavy`	slow to start and to stop
`instant`	no spring, jumps to the target

Compare them on the card at the top of the home page.

.hero { --k-motion: soft; }
.hero .cta { --k-motion: bouncy; }

Custom springs

Two or three numbers instead of a name: stiffness, damping, and optional mass.

.card {
  --k-motion: 260 18;       /* stiffness, damping */
  --k-motion: 120 20 1.5;   /* stiffness, damping, mass */
}

Higher stiffness is faster. Higher damping bounces less. A spring never overshoots when damping is at least twice the square root of stiffness times mass.

In JavaScript, pass motion: "bouncy", motion: [260, 18], or motion: { stiffness: 260, damping: 18 }.

Intensity

--k-intensity multiplies every pointer effect. It inherits, which makes it an easy way to tone motion down on small screens:

@media (max-width: 640px) {
  [data-kinesis] { --k-intensity: 0.5; }
}

Frame rate

Springs are solved exactly instead of stepped. They look the same at 60 Hz, at 120 Hz, and when frames drop. Hidden tabs pause, and motion resumes where it stopped.