tweenly: The motion layer for shadcn/ui

01

Animation lab

Pick a preset, shape its timing and stagger, and get the same animation in three libraries.

preset

easing

duration0.6s

delay0.1s

repeat

target

boxes6

stagger0.06s

import { motion } from "motion/react"

export function Boxes() {
  return (
    <div className="flex flex-wrap gap-3">
      {Array.from({ length: 6 }, (_, i) => (
        <motion.div
          key={i}
          className="size-12 rounded-xl bg-[#ff4d12]"
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{
            duration: 0.6,
            delay: 0.1 + i * 0.06,
            ease: [0.22, 1, 0.36, 1],
          }}
        />
      ))}
    </div>
  )
}

02

Easing editor

Drag the control points of a cubic-bezier and feel the difference against linear.

curve

linear

cubic-bezier(0.22, 1, 0.36, 1)

Drag the orange handles, or focus one and use the arrow keys. The orange dot on the curve traces progress over time.

presets

duration1s

x1

0.22

y1

1

x2

0.36

y2

1

Nearest GSAP ease: power4.out (off by up to 1.1%)

.box {
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* or */
.box {
  animation: slide 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

03

Spring explorer

Stiffness, damping and mass, simulated in your browser. Fling the ball to feel it.

settles in 0.34s·ζ 0.8 (underdamped, will overshoot)

drag me

presets

stiffness450

damping34

mass1

import { motion } from "motion/react"

const spring = {
  type: "spring",
  stiffness: 450,
  damping: 34,
  mass: 1,
} as const

// settles in about 0.34s
<motion.div animate={{ x: 240 }} transition={spring} />

04

Stagger

Ripple a grid from the center, the edges, a corner or a seeded random order.

from

effect

grid7 × 7

each0.06s

import { motion } from "motion/react"

const cols = 7
const rows = 7
const steps = (x: number, y: number) => Math.hypot(x - (cols - 1) / 2, y - (rows - 1) / 2)

export function Grid() {
  return (
    <div className="grid gap-2" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
      {Array.from({ length: cols * rows }, (_, i) => (
        <motion.div
          key={i}
          className="aspect-square rounded-md bg-[#ff4d12]"
          initial={{ opacity: 0, scale: 0 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{
            duration: 0.5,
            delay: steps(i % cols, Math.floor(i / cols)) * 0.06,
            ease: [0.22, 1, 0.36, 1],
          }}
        />
      ))}
    </div>
  )
}