Entrance
animate-ease-entrance Kinesis - Motion tokens designed around how interfaces feel.
Stop guessing how math feels. Kinesis turns cubic-beziers and CSS linear() physics into a functional design strategy for modern UI animation, from 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.
ms
Semantic Intent Tokens
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
01
Install
bun add @timwickstrom/kinesisbun add @timwickstrom/kinesis tailwind-animationsnpm install @timwickstrom/kinesisnpm install @timwickstrom/kinesis tailwind-animationspnpm add @timwickstrom/kinesispnpm add @timwickstrom/kinesis tailwind-animationsyarn add @timwickstrom/kinesisyarn add @timwickstrom/kinesis tailwind-animations 02
Import
@import "tailwindcss";
@import "@timwickstrom/kinesis/tailwind";@import "tailwindcss";
@import "@timwickstrom/kinesis/tailwind";
@import "tailwind-animations";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.
03
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 animate-ease-spring-bouncy animate-duration-700">
...
</nav>Use Tailwind utility classes directly in your markup. Combine any animate-* keyframe with an animate-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.
ease-spring-gentle
Loading...✦
Hover me
Watch the border trace
Duration
ms