Playground

Name: beUI
Author: Saurabh

Learn motion by playing. Tweak a property, watch it run, read what the code is doing line by line, then copy it.

Spring

Physics-based motion. Stiffness pulls toward the target, damping resists, mass adds weight. Lower damping overshoots.

Preview

start

target

import { motion } from "motion/react";

export function Demo() {
  return (
    <motion.div
      animate={{ x: 120 }}
      transition={{
        type: "spring",
        stiffness: 500,
        damping: 30,
        mass: 0.6,
      }}
    />
  );
}

Try

Stiffness500

Pull toward the target. Higher = faster, snappier.

Damping30

Resistance / friction. Lower = more bounce and overshoot.

Mass0.6

Weight of the object. Heavier = slower, more sluggish.

How it works

type: "spring"
No duration here. Instead of taking a fixed time, the box is pulled to the target like it's on a real spring. The three numbers below decide how that feels.
stiffness: 500
How hard the spring pulls. 500 is strong, so it snaps fast. Higher = faster, more urgent.
damping: 30
Friction that slows the spring down. 30 gives a little overshoot, then settles.
mass: 0.6
The box's weight. 0.6 is medium weight. Heavier = slower, more inertia.