Animation Lab

spring default

{ type: "spring" }

Top rail: stiffness, left to right. Right rail: damping, up for more bounce, down for a softer landing.

1 target

LoopAlternate Export

Timeline0 / 1410 ms

Target 1

A single target moving to the transform below.

Take the motion with you.

One import, one animation call. The curve and timing match your preview. Download a self-contained demo to try it offline.

Install once in your project Read the API guide →

pnpm dlx shadcn@latest add @latheui/animate

Lathe animate

import { animate } from "@/lib/animate"

const motion = animate(".target", {
  to: { x: 220, rotate: 180 },
  curve: { type: "spring" },
  repeat: true,
  repeatDelay: 450,
})