Holographic Card reuses Tilt Card's entire pointer-to-spring pipeline — same normalized coordinates, same spring constants — and spends its own complexity on one thing: making the tilt also drive a foil that looks like it's catching real light. Here's the layer stack and the blend mode that sells it.

The card is a dark base with three absolute inset-0 layers stacked on top: a diagonal foil gradient, a glitter dot mask, and a soft radial glare — foil and glitter both use mix-blend-color-dodge, which lightens the dark base wherever the layer above it is bright and leaves it untouched where the layer is dark. That's what makes a flat gradient read as light hitting foil instead of a color painted over the card.

The mask-image is the other half of the trick: the foil is masked to a radial gradient centered on the same pointer position, so the iridescence concentrates where the "light" is hitting rather than flooding the whole card evenly.

The tilt is borrowed wholesale. rotateX/rotateY come from the identical spring pipeline as Tilt Card — same normalized pointer, same { stiffness: 170, damping: 12, mass: 0.1 } spring:

const rotateX = useTransform(sy, [-0.5, 0.5], [maxTilt, -maxTilt]);
const rotateY = useTransform(sx, [-0.5, 0.5], [-maxTilt, maxTilt]);

What's new is that the same sx/sy pair also feeds a CSS variable instead of just a rotation:

const holoX = useTransform(sx, [-0.5, 0.5], ["0%", "100%"]);
const holoY = useTransform(sy, [-0.5, 0.5], ["0%", "100%"]);
// …
style={{ rotateX, rotateY, "--holo-x": holoX, "--holo-y": holoY }}

--holo-x/--holo-y land on background-position for the foil, the sparkle mask, and the glare's radial-gradient center all at once. One pointer value moves the card and slides the foil across it in the same gesture — turn the card and the color visibly travels with the tilt, exactly like a real trading-card holo catching the light at an angle.

Each variant swaps the gradient stops but keeps the mechanism identical.

Optional: the gyroscope. On a touch device there's no pointer to move, so gyroscope opts into reading deviceorientation instead — gamma/beta map onto the same px/py motion values the pointer would have set. iOS gates the sensor behind a permission prompt that must fire from a user gesture, so the listener requests it lazily on the first tap rather than on mount:

const requestOnTap = () => {
  orientationEvent.requestPermission?.().then((state) => {
    if (state === "granted") attach();
  });
};
if (typeof orientationEvent.requestPermission === "function") {
  window.addEventListener("pointerdown", requestOnTap);
} else {
  attach();
}

Because it writes into the same px/py values as the pointer handler, the spring, the tilt, and the foil don't need to know which input drove them.

Move your pointer across each card — the foil, the glitter, and the glare all shift together as it tilts.

Borrow the spring, add a CSS variable, mask a gradient to it — that's the whole holo effect.