Built for Tailwind v4

v1.0.7

Kinesis - Motion tokens designed around how things feel.

Stop guessing how math feels. This is a definitive reference for modern UI animation, transforming abstract cubic beziers and CSS linear() physics into a functional design strategy. From standard Tailwind CSS transitions to spatial depth, haptic micro-interactions, and fluid scrollytelling, every easing token is documented with its exact behavioral intent and prescriptive use case.

Hover to preview. Click to copy utility class.

Tap to preview. Long-press to copy utility class.

Easing Duration

Semantic Intent Tokens

Entrance animate-ease-entrance

Exit animate-ease-exit

Emphasis animate-ease-emphasis

Hover animate-ease-hover

State Change animate-ease-state-change

Expand animate-ease-expand

Collapse animate-ease-collapse

UI Component Defaults

Side Navigation Drawer animate-ease-ui-drawer

Bottom Sheet animate-ease-ui-sheet

Modal Dialog animate-ease-ui-modal

Modal Backdrop animate-ease-ui-overlay

Toast Notification animate-ease-ui-toast

Popover & Tooltip animate-ease-ui-popover

Haptic & Tactile

Haptic Click animate-ease-haptic-click

Haptic Snap animate-ease-haptic-snap

Haptic Confirm animate-ease-haptic-confirm

Haptic Reject (Shake) animate-ease-haptic-reject

Haptic Error (Thud) animate-ease-haptic-error

Haptic Anticipation animate-ease-haptic-anticipation

Haptic Slingshot animate-ease-haptic-slingshot

Haptic Long Press animate-ease-haptic-long-press

Haptic Swipe animate-ease-haptic-swipe

Physical Dynamics

Spring (Gentle) animate-ease-spring-gentle

Spring (Bouncy) animate-ease-spring-bouncy

Spring (Stiff) animate-ease-spring-stiff

Rubber Band animate-ease-rubber-band

Elastic Out animate-ease-elastic-out

Elastic In animate-ease-elastic-in

Elastic In-Out animate-ease-elastic-in-out

Bounce Out animate-ease-bounce-out

Bounce In animate-ease-bounce-in

Bounce In-Out animate-ease-bounce-in-out

Pendulum animate-ease-pendulum

Platform Signatures

Apple Fluid (macOS) animate-ease-apple-fluid

iOS System Spring animate-ease-ios-spring

Material 3 Emphasized animate-ease-m3-emphasized

Material 3 Standard animate-ease-m3-standard

Microsoft Fluent Expressive animate-ease-fluent-expressive

Vercel Spark animate-ease-vercel-spark

Linear App animate-ease-linear-app

Framer Motion Pop animate-ease-framer-pop

Stripe Gloss animate-ease-stripe-gloss

Organic & Ambient

Breath animate-ease-breath

Pulse animate-ease-pulse

Flutter animate-ease-flutter

Wave animate-ease-wave

Tide animate-ease-tide

Shimmer animate-ease-shimmer

Viscous animate-ease-viscous

Surface Tension animate-ease-surface-tension

Cinematic & Editorial

Sigmoid (S-Curve) animate-ease-sigmoid

Soft Land animate-ease-soft-land

Hyper Deceleration animate-ease-hyper-decel

Time Jump animate-ease-time-jump

Slow Burn animate-ease-slow-burn

Dramatic Reveal animate-ease-dramatic-reveal

Jitter animate-ease-jitter

Glitch animate-ease-glitch

Depth (Z-Axis) animate-ease-depth

Mechanical & Industrial

Hydraulic animate-ease-hydraulic

Piston Stroke animate-ease-piston

Ratchet animate-ease-ratchet

Gear Lock animate-ease-gear-lock

Impact animate-ease-impact

Whiplash animate-ease-whiplash

Magnetic Snap animate-ease-magnetic-snap

Spatial Computing & Z-Axis

Z-Pull (Into Background) animate-ease-z-pull

Z-Push (To Foreground) animate-ease-z-push

Z-Float (Elevation Lift) animate-ease-z-float

Z-Sink (Elevation Drop) animate-ease-z-sink

Parallax animate-ease-parallax

Scroll-Driven Dynamics

Scrub Smooth animate-ease-scrub-smooth

Scrub Sticky animate-ease-scrub-sticky

Scroll Snap animate-ease-scroll-snap

Foundational Curves

Sine In animate-ease-sine-in

Sine Out animate-ease-sine-out

Sine In-Out animate-ease-sine-in-out

Quadratic In animate-ease-quad-in

Quadratic Out animate-ease-quad-out

Quadratic In-Out animate-ease-quad-in-out

Cubic In animate-ease-cubic-in

Cubic Out animate-ease-cubic-out

Cubic In-Out animate-ease-cubic-in-out

Quartic In animate-ease-quart-in

Quartic Out animate-ease-quart-out

Quartic In-Out animate-ease-quart-in-out

Quintic In animate-ease-quint-in

Quintic Out animate-ease-quint-out

Quintic In-Out animate-ease-quint-in-out

Exponential In animate-ease-expo-in

Exponential Out animate-ease-expo-out

Exponential In-Out animate-ease-expo-in-out

Circular In animate-ease-circ-in

Circular Out animate-ease-circ-out

Circular In-Out animate-ease-circ-in-out

Back In animate-ease-back-in

Back Out animate-ease-back-out

Back In-Out animate-ease-back-in-out

Accessibility

Safe Entrance animate-ease-safe-entrance

Safe Exit animate-ease-safe-exit

Steps & Discrete

2 Steps animate-ease-steps-2

4 Steps animate-ease-steps-4

8 Steps animate-ease-steps-8

12 Steps animate-ease-steps-12

Retro

Super Mario Jump Arc animate-ease-mario-jump

Pac-Man Chomp animate-ease-pac-man

Sonic Spin Dash animate-ease-sonic-dash

Pinball Plunger animate-ease-pinball

The Moonwalk (Michael Jackson) animate-ease-moonwalk

VHS Tracking Adjustment animate-ease-vhs

Dial-Up Modem Handshake animate-ease-dialup

Leeroy Jenkins animate-ease-leeroy

Never Gonna Give You Up (Rickroll) animate-ease-rickroll

The Harlem Shake animate-ease-harlem-shake

Turn Down for What animate-ease-turn-down

Installation

Install

bun add @timwickstrom/kinesis

npm install @timwickstrom/kinesis

pnpm add @timwickstrom/kinesis

yarn add @timwickstrom/kinesis

Import

@import "tailwindcss";
@import "@timwickstrom/kinesis/tailwind";

Utility classes wire up automatically — ease-*, animate-ease-*

@import "@timwickstrom/kinesis";

Exposes 115 easing tokens as CSS custom properties on :root

import { easings } from "@timwickstrom/kinesis/js";

Full TypeScript + JSDoc. Works with React, NextJS, Vue, Framer Motion, WAAPI, and more.

Pairing tip (optional)

Pair with tailwind-animations

Kinesis handles the easing. tailwind-animations adds the keyframes. Together they're unstoppable.

How to use

<!-- Spring entrance animation -->
<div class="animate-fade-in-up ease-spring-gentle duration-500">
  Hello world
</div>

<!-- Haptic press feedback -->
<button class="transition ease-haptic-click active:scale-95 duration-150">
  Tap
</button>

<!-- Physics-aware slide-in -->
<nav class="animate-slide-in-right ease-spring-bouncy duration-700">
  ...
</nav>

Use Tailwind utility classes directly in your markup. Combine any animate-* keyframe with an ease-* token.

import { easings } from "@timwickstrom/kinesis/js";
import { useRef, useEffect } from "react";

export function AnimatedCard() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    ref.current?.animate(
      [
        { opacity: 0, transform: "translateY(8px)" },
        { opacity: 1, transform: "translateY(0)" },
      ],
      { duration: 500, easing: easings.springGentle, fill: "forwards" }
    );
  }, []);

  return (
    <div ref={ref}>
      {/* Tailwind classes work too */}
      <button className="transition ease-haptic-click active:scale-95 duration-150">
        Tap
      </button>
    </div>
  );
}

Use className with Tailwind classes for declarative transitions, or the JS export for programmatic WAAPI animations.

"use client";

import { motion } from "motion/react";
import { easings } from "@timwickstrom/kinesis/js";

export function Hero() {
  return (
    <motion.section
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, ease: easings.entrance }}
    >
      Hello world
    </motion.section>
  );
}

Add "use client" for motion components. Tailwind ease-* classes work in Server Components without any client boundary.

<script setup lang="ts">
import { ref } from "vue";
import { easings } from "@timwickstrom/kinesis/js";

const show = ref(true);
</script>

<template>
  <Transition
    enter-active-class="transition-all duration-300"
    :style="{ transitionTimingFunction: easings.entrance }"
  >
    <div v-if="show">Hello world</div>
  </Transition>
</template>

Use the JS export to pass easing values directly to Vue transitions, or use ease-* Tailwind classes on any element.

import { motion } from "framer-motion"; // or "motion/react"
import { easings } from "@timwickstrom/kinesis/js";

export function Component() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{
        duration: 0.5,
        ease: easings.springBouncy,
      }}
    >
      Hello world
    </motion.div>
  );
}

Pass any easing value directly to Framer Motion's ease property. Full TypeScript completion included.

import { easings } from "@timwickstrom/kinesis/js";

// Type-safe easing via the JS export
element.animate(
  [
    { opacity: 0, transform: "translateY(8px)" },
    { opacity: 1, transform: "translateY(0)" },
  ],
  {
    duration: 500,
    easing: easings.springGentle,
    fill: "forwards",
  }
);

// Or reference CSS variables directly
element.animate(
  [{ transform: "scale(1)" }, { transform: "scale(1.05)" }],
  { duration: 200, easing: "var(--ease-haptic-click)" }
);

Use the JS export for type-safe easing values with full JSDoc, or reference CSS variables directly via var(--ease-*).

Examples

Border Trace

A gradient border that draws itself around a card on hover using conic-gradient and @property.

Spring (Gentle)ease-spring-gentle

ease-spring-gentle

Loading...

✦

Hover me

Watch the border trace

Duration