KL-06 · LAYOUT/BENCH

Layout Bench

FLIP: expensive layout, impersonated by cheap transforms.

CONTROL RAIL

Layout

Spring

X-ray · show FLIP boxes

Animate layout

READING

last transition: —
cards moved: 0/8
spring: glide

TRANSFORMS ONLY · WIDTH NEVER ANIMATES

KL-06 · FLIP RIG

LIVE CODE · MIRRORS THE STAGE

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

<motion.div layout transition={springs.glide} />

// FLIP: measure → invert → play. The card's width is set
// by CSS; the motion is scale/translate impersonating it.