Introduction

Kinesis is a 14 KB library for interactive motion. Cards tilt toward the pointer, buttons lean in, lists appear on scroll, panels drag and throw. You declare the behavior in CSS, and Kinesis does the measuring, animating, and cleanup.

.card {
  --k-tilt: 12deg;
  --k-motion: soft;
}

.tilt-scene {
  display: grid;
  place-items: center;
  height: 100%;
}

.tilt-card {
  --k-tilt: 14deg;
  --k-motion: soft;
  width: min(300px, 80%);
  padding: 28px;
  border-radius: 22px;
  background: linear-gradient(140deg, #2f6bff, #7c5cff);
  color: #fff;
  box-shadow: 0 40px 60px -30px rgb(47 107 255 / 0.7);
}

.tilt-card__badge {
  --k-depth: 70px;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  color: #2f6bff;
  font-size: 12px;
  font-weight: 700;
}

.tilt-card h3 {
  --k-depth: 45px;
  margin: 16px 0 6px;
  font-size: 26px;
  line-height: 1.1;
}

.tilt-card p {
  --k-depth: 25px;
  margin: 0;
  font-size: 15px;
  color: rgb(255 255 255 / 0.85);
}

<div class="tilt-scene" data-kinesis>
  <article class="tilt-card">
    <span class="tilt-card__badge">New</span>
    <h3>Depth, not decoration</h3>
    <p>Each layer sits at its own height above the card.</p>
  </article>
</div>

The idea

Kinesis properties are CSS variables with registered types. The browser computes their values, so media queries, :hover, calc(), em, and design tokens work in them.

Values move on springs. A spring keeps its speed when its target changes, so motion that follows the pointer never jumps. --k-motion sets how it feels.

Setup

1. Add data-kinesis to a container. Kinesis looks for animated elements inside it and measures the pointer against it.
2. Give elements a Kinesis property, such as --k-tilt or --k-when.
3. Call initKinesis() once. Elements added later are picked up.

<section class="hero" data-kinesis>
  <img class="hero__art" src="art.png" alt="">
</section>

<style>
  .hero__art { --k-parallax: 24px; }
</style>

<script type="module">
  import { initKinesis } from "@amineyarman/kinesis"
  initKinesis()
</script>

What it does

Pointer effects move an element based on where the pointer is: parallax, tilt, magnetic, repel, follow, look, point, and spin.

Reactions animate between two states on a trigger: the pointer coming near, hover, press, scrolling into view, or scroll position. --k-when sets the trigger. Outputs like --k-scale set what changes.

Drag makes an element draggable, with bounds and throwing. See Drag.

All three combine on one element, in CSS or in JavaScript.

• Magnetic buttonLeans toward the pointer and squishes when pressed. The label moves less than the button.
• DockIcons grow and rise under the pointer. A near reaction with --k-scale and --k-y.
• Spotlight cardsA glow follows the pointer. Kinesis writes its position, a CSS gradient draws the light.
• Reveal on scrollItems fade in and rise, one after another, as they enter the viewport.
• Eyes that followPupils follow the pointer anywhere on the page, at most 22px from center.
• Drag, throw, snap backOne card springs home. The other can be thrown and stops inside its box.

What it doesn't do

Timelines and keyframe sequences. CSS animations, the Web Animations API, and GSAP handle those, and they run alongside Kinesis on the same elements.

Next: Getting started.