About Kinetic

A motion template built to a performance budget, by people who kept deleting effects that dropped frames.

The brief

Motion you can defend in a code review

“Every effect had to survive three questions: does it drop frames on a mid-range phone, does it touch layout, and what does it do for someone with vestibular sensitivity.”

Kinetic came out of a frustration with animated templates that demo beautifully and fall apart in production. Most ship a hundred kilobytes of animation library, animate properties that force layout, and treat prefers-reduced-motion as an afterthought — usually by shortening durations rather than switching effects off.

So we set a budget first and designed within it. No animation libraries at all. Transform and opacity only. IntersectionObserver rather than scroll handlers. Roughly a third of the effects we prototyped were cut because they could not hold sixty frames on a four-year-old Android handset.

The three rules

Applied to every pattern that made it into the template.

Composite, never lay out

Transform and opacity are handled on the GPU. Animating width, top or box-shadow forces a layout recalculation on every frame, which is where dropped frames come from.

Observe, do not poll

IntersectionObserver fires when something crosses a threshold and then unobserves itself. Only the scroll-progress rail uses a scroll listener, and it is passive.