KL-03 · CASCADE/BENCH

Cascade Bench

Choreography under a 600ms budget.

CONTROL RAIL

Items24cascade() tightens the interval as the count grows.

Interval

Origin

Enter

READING

interval: 26ms
last starts: 190ms
total ≈: 640ms
verdict: INSIDE BUDGET

KL-03 · CHOREOGRAPHY

DELAY GANTT · BAR = START + GLIDE SETTLE

LIVE CODE · MIRRORS THE STAGE

import { motion } from "motion/react";
import { cascade, springs } from "@/registry/lib/motion";

{items.map((item, i) => (
  <motion.div
    key={item.id}
    initial={{ opacity: 0, y: 12 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{
      ...springs.glide,
      delay: cascade(24) * i, // 26ms steps
    }}
  />
))}

// 24 items · last starts 190ms · settled ~640ms
// 600ms budget — INSIDE BUDGET