There is no 3D geometry here. The depth is three stacked <span>s: a blurred shadow on the surface, a colored edge that fakes the side wall, and the front face you read. Lift the face a few pixels above the edge and your eye fills in a solid object.

Each layer is absolutely positioned in the same box, so they overlap perfectly at rest. Only their vertical offsets differ.

Depth is static; push is motion. The face sits at -4px, lifts to -6px on hover, and dips to -2px on press, while the shadow deepens underneath. The timing does most of the work: a slow, springy settle at rest, a snappy overshoot on hover, and a near-instant 34ms dip on press.

The overshoot lives in the bezier cubic-bezier(0.3, 0.7, 0.4, 1.5). Its final 1.5 control point pushes past the target and springs back.

Every offset animates translate, never top/margin or an animated box-shadow. Transforms are composited: the browser moves an already-painted layer on the GPU without re-running layout or paint. Animating top would re-flow the page every frame; animating box-shadow would re-paint it. This is the house rule across GodUI's motion, enforced in CI.

"[will-change:translate] [transition:translate_600ms_cubic-bezier(0.3,0.7,0.4,1)]"

The optional rainbow is one gradient twice as wide as the button, slid sideways forever. No video, no canvas. background-size: 200% 100% gives the slack; a keyframe animates background-position across it.

motion-reduce:animate-none freezes the sweep for anyone who's asked the OS to cut motion.

An infinite background-position keyframe is main-thread paint. It is cheap but not free, and wasted when the button is off screen. An IntersectionObserver pauses the animation's animationPlayState whenever the button scrolls out of view, and resumes it on the way back in.

const io = new IntersectionObserver(
  ([entry]) => {
    for (const layer of root.querySelectorAll(".animate-magic-rainbow"))
      layer.style.animationPlayState = entry.isIntersecting ? "" : "paused";
  },
  { rootMargin: "128px" },
);

The 128px margin resumes it just before it re-enters, so you never catch it mid-restart.

Every piece assembled in the real component. Hover it, tab to it, press and hold. Each motion comes from one of the mechanisms above: three flat layers, one springy curve, and a gradient on a timer.