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.

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 makes a flat gradient read as light hitting foil instead of a color painted over the card.

The mask-image does the rest: 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, with the same normalized pointer and the 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, on top of the 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 travels with the tilt, 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 shift together as it tilts.

The holo effect borrows the spring, adds a CSS variable, and masks a gradient to it.