Holographic Card

1"use client";
2 
3import {
4  motion,
5  useMotionValue,
6  useReducedMotion,
7  useSpring,
8  useTransform,
9} from "framer-motion";
10import * as React from "react";
11 
12export type HolographicVariant = "rainbow" | "aurora" | "galaxy" | "gold";
13 
14export type HolographicCardProps = React.HTMLAttributes<HTMLDivElement> & {
15  /** Foil colorway. */
16  variant?: HolographicVariant;
17  /** Maximum tilt in degrees toward the pointer. */
18  maxTilt?: number;
19  /** Render a specular glare that tracks the pointer. */
20  glare?: boolean;
21  /** Overlay a fine glitter mask for a holo-flake finish. */
22  sparkle?: boolean;
23  /** Drive the tilt from the device gyroscope on touch devices. */
24  gyroscope?: boolean;
25};
26 
27// SPRING.bouncy — lively follow-through for pointer-tracked motion.
28const SPRING = { stiffness: 170, damping: 12, mass: 0.1 } as const;
29 
30const ROOT_BASE =
31  "relative isolate overflow-hidden rounded-2xl border border-white/10 text-white shadow-2xl [will-change:transform]";
32 
33// A dark, saturated base so the color-dodge foil reads as vivid iridescence
34// rather than blowing out to white over a light surface.
35const BASE: Record<HolographicVariant, string> = {
36  rainbow:
37    "[background:radial-gradient(120%_120%_at_30%_15%,#312e81_0%,#0b1020_55%,#020617_100%)]",
38  aurora:
39    "[background:radial-gradient(120%_120%_at_30%_15%,#0e7490_0%,#052e2b_55%,#020617_100%)]",
40  galaxy:
41    "[background:radial-gradient(120%_120%_at_30%_15%,#4c1d95_0%,#0a0a14_55%,#020617_100%)]",
42  gold: "[background:radial-gradient(120%_120%_at_30%_15%,#78350f_0%,#1c1206_55%,#020617_100%)]",
43};
44 
45// The iridescent foil per colorway. Hardcoded hues are intrinsic to the effect
46// (like aurora-text / light-rays), not theme surfaces — the blend mode fuses
47// them with the dark base.
48const FOIL: Record<HolographicVariant, string> = {
49  rainbow:
50    "[background-image:linear-gradient(115deg,#ff2d95,#ffd84d,#4dff9e,#4dd2ff,#a24dff,#ff2d95)]",
51  aurora:
52    "[background-image:linear-gradient(115deg,#22d3ee,#34d399,#a3e635,#38bdf8,#22d3ee)]",
53  galaxy:
54    "[background-image:linear-gradient(115deg,#a855f7,#ec4899,#3b82f6,#c026d3,#a855f7)]",
55  gold: "[background-image:linear-gradient(115deg,#b45309,#fbbf24,#fffbeb,#fbbf24,#b45309)]",
56};
57 
58// Foil concentrates where the "light" (pointer) hits, so it catches highlights
59// like real holo film instead of flooding the whole card.
60const FOIL_LAYER =
61// … truncated