Examples — sprungdesign

Cascade menu

The panel springs open and the rows fly in on a wave.

Click to open — the panel scales up and the items cascade one after another. Toggle fast and it reverses mid-flight without a hitch.

menu.tsx

import { spring } from "sprungdesign";

// The panel scales/fades on its own spring…
const panel = spring({ stiffness: 360, damping: 24, onUpdate: scalePanel });

// …and every row owns one too.
const rows = items.map((_, i) =>
  spring({ stiffness: 420, damping: 26, onUpdate: (v) => placeRow(i, v) }),
);

function open() {
  panel.set(1);
  // Fire each row a beat after the last → a cascade.
  rows.forEach((s, i) => setTimeout(() => s.set(1), i * 45));
}

// Toggle mid-flight: every spring retargets velocity-
// continuously, so the wave reverses without a jump.
function close() { panel.set(0); rows.forEach((s) => s.set(0)); }