# Hologram Card

> A 3D-tilting card with iridescent foil and a moving glare.

Category: Effects. Docs: https://neonkit.heyaadi.com/components/hologram-card

## Installation

```bash
npx shadcn@latest add https://neonkit.heyaadi.com/r/hologram-card.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/hologram-card`.

npm dependencies: `motion`. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { HologramCard } from "@/components/ui/hologram-card"

<HologramCard className="aspect-[5/7] w-64 p-5">
  <h3>Kowloon Nights</h3>
</HologramCard>
```

## Examples

### Trading card

Move the pointer across it. The card tilts toward you, a rainbow sweeps through the foil, a glare follows the light and the edge catches it. Let go and it springs back flat.

```tsx
import { HologramCard } from "@/components/ui/hologram-card";

const stats = [
  { label: "Tubes", value: "412" },
  { label: "Volts", value: "9 kV" },
  { label: "Lit", value: "32 yrs" },
];

function Skyline() {
  return (
    <svg viewBox="0 0 240 150" className="block h-full w-full" aria-hidden>
      <defs>
        <linearGradient id="kowloon-sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#0b0a1e" />
          <stop offset="0.75" style={{ stopColor: "rgb(var(--neon) / 0.45)" }} />
          <stop offset="1" style={{ stopColor: "rgb(var(--neon) / 0.7)" }} />
        </linearGradient>
        <linearGradient id="kowloon-street" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" style={{ stopColor: "rgb(var(--neon) / 0.35)" }} />
          <stop offset="1" stopColor="#05060a" />
        </linearGradient>
      </defs>
      <rect width="240" height="150" fill="url(#kowloon-sky)" />
      <circle cx="168" cy="38" r="15" fill="#fff" opacity="0.14" />
      <circle cx="168" cy="38" r="9" fill="#fff" opacity="0.5" />
      {/* Far blocks */}
      <path d="M0 96V58h22V44h18v52zM196 96V50h16V36h28v60z" fill="#1a1830" />
      {/* Near blocks with lit windows */}
      <path d="M0 150V70h46v80zM188 150V62h52v88z" fill="#0b0b14" />
      <g fill="#fff" opacity="0.35">
        <rect x="8" y="80" width="4" height="3" />
        <rect x="20" y="80" width="4" height="3" />
        <rect x="32" y="92" width="4" height="3" />
        <rect x="8" y="104" width="4" height="3" />
        <rect x="198" y="74" width="4" height="3" />
        <rect x="222" y="86" width="4" height="3" />
        <rect x="210" y="98" width="4" height="3" />
        <rect x="198" y="110" width="4" height="3" />
      </g>
      {/* Signs hung on brackets over the street */}
      <g fill="none" strokeLinecap="round" strokeLinejoin="round">
        <g style={{ stroke: "rgb(var(--neon))" }} strokeWidth="3.2" opacity="0.55">
          <rect x="54" y="30" width="20" height="58" rx="3" />
          <rect x="150" y="66" width="30" height="20" rx="3" />
          <path d="M84 52h46M84 60h46" />
        </g>
        <g stroke="#fff" strokeWidth="1.1">
          <rect x="54" y="30" width="20" height="58" rx="3" />
          <rect x="150" y="66" width="30" height="20" rx="3" />
          <path d="M84 52h46M84 60h46" />
        </g>
        <path d="M46 40h8M46 80h8M180 70h8" stroke="#2a2a3a" strokeWidth="2" />
      </g>
      <rect y="118" width="240" height="32" fill="url(#kowloon-street)" />
    </svg>
  );
}

export default function HologramCardDemo() {
  return (
    <HologramCard className="aspect-[5/7] w-64 p-2.5">
      <div className="flex h-full flex-col rounded-[11px] border border-white/10 bg-[linear-gradient(180deg,#0d0e17,#07080d)] p-2.5">
        <div className="flex items-baseline justify-between gap-2 px-0.5">
          <h3
            className="text-[17px] leading-none text-white/95"
            style={{ fontFamily: "var(--font-tilt-neon)" }}
          >
            Kowloon Nights
          </h3>
          <span className="text-[10px] font-medium text-[rgb(var(--neon))]">Holo</span>
        </div>

        <div className="mt-2 aspect-[8/5] overflow-hidden rounded-md border border-white/10">
          <Skyline />
        </div>

        <p className="mt-2 flex justify-between px-0.5 text-[10px] font-medium text-white/55">
          <span>Signage, 1987</span>
          <span>Nathan Road</span>
        </p>

        <p className="mt-2 px-0.5 text-[11.5px] leading-[1.45] text-white/70">
          Eleven thousand tubes along one road, bent by hand and lit at dusk. Most went dark in 2019.
        </p>

        <dl className="mt-auto grid grid-cols-3 divide-x divide-white/10 rounded-md border border-white/10 bg-white/[0.03] py-1.5 text-center">
          {stats.map((stat) => (
            <div key={stat.label}>
              <dt className="text-[10px] text-white/55">{stat.label}</dt>
              <dd className="mt-0.5 text-[13px] font-semibold tabular-nums text-white/90">{stat.value}</dd>
            </div>
          ))}
        </dl>

        <p className="mt-2 flex justify-between px-0.5 text-[9.5px] tabular-nums text-white/50">
          <span>Neon Archive, series 1</span>
          <span>07/24</span>
        </p>
      </div>
    </HologramCard>
  );
}
```

### Foils

The texture the sheen catches on: fine lines, a dot screen or glitter. Smooth drops the texture.

```tsx
import { HologramCard, type HologramFoil } from "@/components/ui/hologram-card";

const gases: { symbol: string; name: string; number: number; glow: string; color: string; foil: HologramFoil }[] = [
  { symbol: "Ne", name: "Neon", number: 10, glow: "Red-orange", color: "#ff5a36", foil: "lines" },
  { symbol: "Ar", name: "Argon", number: 18, glow: "Lavender", color: "violet", foil: "dots" },
  { symbol: "Kr", name: "Krypton", number: 36, glow: "Silver white", color: "white", foil: "glitter" },
];

export default function HologramCardFoils() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 justify-items-center gap-6 sm:grid-cols-3">
      {gases.map((gas) => (
        <HologramCard key={gas.symbol} color={gas.color} foil={gas.foil} className="aspect-[5/7] w-44 p-4">
          <div className="flex h-full flex-col">
            <div className="flex items-start justify-between text-xs text-white/55">
              <span className="tabular-nums">{gas.number}</span>
              <span className="capitalize">{gas.foil} foil</span>
            </div>
            <p className="mt-auto text-6xl font-light leading-none tracking-tight [color:color-mix(in_srgb,rgb(var(--neon))_35%,white)] [text-shadow:0_0_6px_rgb(var(--neon)),0_0_22px_rgb(var(--neon)/0.6)]">
              {gas.symbol}
            </p>
            <p className="mt-3 text-sm text-white/90">{gas.name}</p>
            <p className="mt-0.5 text-xs text-white/55">Glows {gas.glow.toLowerCase()}</p>
          </div>
        </HologramCard>
      ))}
    </div>
  );
}
```

### Member pass

A gentler maxTilt suits wide cards.

```tsx
import { HologramCard } from "@/components/ui/hologram-card";

export default function HologramCardMemberPass() {
  return (
    <HologramCard foil="glitter" maxTilt={9} className="aspect-[86/54] w-full max-w-[22rem] p-5">
      <div aria-hidden className="absolute inset-0 overflow-hidden rounded-[inherit]">
        <div className="absolute -right-16 -top-20 size-56 rounded-full bg-[radial-gradient(closest-side,rgb(var(--neon)/0.22),transparent)]" />
      </div>
      <div className="relative flex h-full flex-col">
        <div className="flex items-center justify-between">
          <span className="text-[13px] font-semibold tracking-[0.02em] text-white/75">NeonKit</span>
          <span className="rounded-full border border-[rgb(var(--neon)/0.4)] px-2 py-0.5 text-[11px] font-medium text-[rgb(var(--neon))]">
            Founding
          </span>
        </div>

        {/* Contact chip */}
        <div
          aria-hidden
          className="mt-5 grid h-8 w-11 grid-cols-3 gap-px overflow-hidden rounded-md border border-[#b8a46a]/50 bg-[linear-gradient(135deg,#e7d28f,#9c8545)] p-px"
        >
          {Array.from({ length: 6 }, (_, i) => (
            <span key={i} className="bg-[linear-gradient(135deg,#f0e0a8,#a88f4e)]" />
          ))}
        </div>

        <p className="mt-auto font-mono text-[15px] tracking-[0.18em] text-white/90 tabular-nums">0042 · 2026</p>
        <div className="mt-2 flex items-end justify-between">
          <div>
            <p className="text-[11px] text-white/55">Supporter</p>
            <p className="text-sm text-white/90">Mara Okafor</p>
          </div>
          <div className="text-right">
            <p className="text-[11px] text-white/55">Since</p>
            <p className="font-mono text-sm text-white/90">10/26</p>
          </div>
        </div>
      </div>
    </HologramCard>
  );
}
```

### As a link

Put a link inside. Tabbing to it tilts the card to a still pose and lights the foil.

```tsx
import { ArrowUpRight } from "@/components/ui/icons";
import { HologramCard } from "@/components/ui/hologram-card";

export default function HologramCardReleaseLink() {
  return (
    <HologramCard foil="dots" intensity={0.8} className="w-full max-w-xs">
      <a
        href="#changelog"
        className="block rounded-[inherit] p-5 outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#05060a]"
      >
        <div className="flex items-center justify-between">
          <span className="text-[13px] font-medium text-[rgb(var(--neon))]">Release 1.2</span>
          <ArrowUpRight className="size-4 text-white/55" />
        </div>
        <h3 className="mt-5 text-lg font-medium tracking-tight text-white/90">Signature neon</h3>
        <p className="mt-1.5 text-sm leading-relaxed text-white/55">
          Signs, meters, a CRT and a split-flap board. Components that read as real objects made of light.
        </p>
        <p className="mt-6 text-xs text-white/50">Shipped 11 Oct 2026</p>
      </a>
    </HologramCard>
  );
}
```

## API reference

### HologramCard

Also accepts div attributes, and the ref points at the card. className and style go to the card face, so size, padding, radius and background all work as usual.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `maxTilt` | `number` | `12` | Largest tilt in degrees, reached at the card's edges. |
| `foil` | `"lines" \| "dots" \| "glitter" \| "smooth"` | `"lines"` | Texture the rainbow sheen catches on. |
| `intensity` | `number` | `1` | Strength of the sheen and glare, 0 to 1. |
| `glare` | `boolean` | `true` | A soft spot of light that follows the pointer. |
| `color` | `NeonColor` | `inherited` | Tints the foil, the edge light and the glow around the card. |

## Accessibility

- Every light layer is aria-hidden and ignores the pointer, so links, buttons and text inside behave normally.
- Keyboard focus inside the card (focus-visible only) tilts it a few degrees to a fixed pose; it settles when focus leaves.
- Mouse, pen and touch all tilt it. On touch the page can still scroll, and the card settles when the finger lifts.
- With reduced motion the card never tilts or tracks the pointer; the foil keeps a still sheen.
- Tilt, glare and sheen move with transforms driven by springs, without re-rendering React while the pointer moves.
- Don't put overflow-hidden on the card itself: it clips the light the card throws around it. The foil layers already clip to the rounded corners.

## Source

`components/ui/hologram-card.tsx`

```tsx
"use client";

import * as React from "react";
import {
  motion,
  useMotionValueEvent,
  useReducedMotion,
  useSpring,
  useTransform,
} from "motion/react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

// The foil: diagonal streaks of diffracted light (the linear gradient) whose
// hue comes from a conic rainbow underneath. Each hue leans toward the neon
// color so the card stays in key with the accent around it.
const css = `
.nk-hologram-card-sheen {
  --nk-hologram-card-a: color-mix(in srgb, rgb(var(--neon)) 28%, #ff4fd8);
  --nk-hologram-card-b: color-mix(in srgb, rgb(var(--neon)) 28%, #ffd54f);
  --nk-hologram-card-c: color-mix(in srgb, rgb(var(--neon)) 28%, #4fffb0);
  --nk-hologram-card-d: color-mix(in srgb, rgb(var(--neon)) 28%, #4fb6ff);
  --nk-hologram-card-e: color-mix(in srgb, rgb(var(--neon)) 28%, #a64fff);
  background:
    repeating-linear-gradient(118deg, #000 0%, #000 3%, #444 6.5%, #fff 10%, #444 13.5%, #000 17%, #000 20%),
    repeating-conic-gradient(from 0deg at 50% 50%, var(--nk-hologram-card-a) 0deg, var(--nk-hologram-card-b) 24deg, var(--nk-hologram-card-c) 48deg, var(--nk-hologram-card-d) 72deg, var(--nk-hologram-card-e) 96deg, var(--nk-hologram-card-a) 120deg);
  background-blend-mode: multiply;
}
.nk-hologram-card-foil[data-foil="lines"] {
  -webkit-mask-image: repeating-linear-gradient(-62deg, #000 0 1px, rgb(0 0 0 / 0.28) 1px 3px);
  mask-image: repeating-linear-gradient(-62deg, #000 0 1px, rgb(0 0 0 / 0.28) 1px 3px);
}
.nk-hologram-card-foil[data-foil="dots"] {
  -webkit-mask-image: radial-gradient(circle, #000 0 0.9px, rgb(0 0 0 / 0.28) 1.5px);
  mask-image: radial-gradient(circle, #000 0 0.9px, rgb(0 0 0 / 0.28) 1.5px);
  -webkit-mask-size: 4px 4px;
  mask-size: 4px 4px;
}
.nk-hologram-card-foil[data-foil="glitter"] {
  --nk-hologram-card-fleck: #000 0 0.8px, transparent 1.6px;
  -webkit-mask-image: radial-gradient(circle at 20% 30%, var(--nk-hologram-card-fleck)), radial-gradient(circle at 70% 60%, var(--nk-hologram-card-fleck)), radial-gradient(circle at 40% 85%, var(--nk-hologram-card-fleck)), radial-gradient(circle at 85% 15%, var(--nk-hologram-card-fleck)), linear-gradient(rgb(0 0 0 / 0.3) 0 0);
  mask-image: radial-gradient(circle at 20% 30%, var(--nk-hologram-card-fleck)), radial-gradient(circle at 70% 60%, var(--nk-hologram-card-fleck)), radial-gradient(circle at 40% 85%, var(--nk-hologram-card-fleck)), radial-gradient(circle at 85% 15%, var(--nk-hologram-card-fleck)), linear-gradient(rgb(0 0 0 / 0.3) 0 0);
  -webkit-mask-size: 13px 17px, 23px 19px, 29px 31px, 37px 41px, 100% 100%;
  mask-size: 13px 17px, 23px 19px, 29px 31px, 37px 41px, 100% 100%;
}
`;

// Slightly under-damped: the card overshoots a hair when it springs back flat.
const spring = { stiffness: 190, damping: 19, mass: 0.9 };
const perspective = 800;

export type HologramFoil = "lines" | "dots" | "glitter" | "smooth";

export interface HologramCardProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  /** Largest tilt in degrees, reached at the card's edges. */
  maxTilt?: number;
  /** Texture the rainbow sheen catches on. */
  foil?: HologramFoil;
  /** Strength of the sheen and glare, 0 to 1. */
  intensity?: number;
  /** A soft spot of light that follows the pointer. */
  glare?: boolean;
}

const clamp = (value: number) => Math.min(1, Math.max(0, value));

const HologramCard = React.forwardRef<HTMLDivElement, HologramCardProps>(
  (
    {
      className,
      style,
      color,
      maxTilt = 12,
      foil = "lines",
      intensity = 1,
      glare = true,
      children,
      onPointerEnter,
      onPointerMove,
      onPointerLeave,
      onPointerCancel,
      onPointerUp,
      onFocus,
      onBlur,
      ...props
    },
    forwardedRef,
  ) => {
    const ref = React.useRef<HTMLDivElement>(null);
    React.useImperativeHandle(forwardedRef, () => ref.current as HTMLDivElement);

    const reduceMotion = useReducedMotion();
    const tilt = React.useRef(maxTilt);
    tilt.current = maxTilt;
    const strength = clamp(intensity);

    // Where the light hits, 0..1 across the card, and how lit the card is.
    const pointerX = useSpring(0.5, spring);
    const pointerY = useSpring(0.5, spring);
    const active = useSpring(0, spring);

    // The untransformed box, measured on entry. Reading the tilted box on
    // every move would feed the tilt back into the pointer position.
    const box = React.useRef<{ left: number; top: number; width: number; height: number } | null>(null);
    const hovering = React.useRef(false);
    const focused = React.useRef(false);

    const transform = useTransform([pointerX, pointerY, active], ([x, y, a]: number[]) => {
      const max = tilt.current;
      return `perspective(${perspective}px) rotateX(${((y - 0.5) * 2 * max).toFixed(3)}deg) rotateY(${((0.5 - x) * 2 * max).toFixed(3)}deg) scale(${(1 + a * 0.02).toFixed(4)})`;
    });
    useMotionValueEvent(transform, "change", (value) => {
      if (ref.current && !reduceMotion) ref.current.style.transform = value;
    });

    // The rainbow slides against the tilt and turns a little, so colors sweep
    // across the foil the way a real hologram shifts in the hand.
    const sheenTransform = useTransform([pointerX, pointerY], ([x, y]: number[]) => {
      return `translate3d(${((0.5 - x) * 20).toFixed(3)}%, ${((0.5 - y) * 20).toFixed(3)}%, 0) rotate(${((x - 0.5) * 14 + (y - 0.5) * 8).toFixed(3)}deg)`;
    });
    const sheenOpacity = useTransform(active, (a) => (0.2 + 0.8 * a) * strength);
    const washOpacity = useTransform(active, (a) => (0.05 + 0.3 * a) * strength);
    const glareX = useTransform(pointerX, (x) => `${x * 50}%`);
    const glareY = useTransform(pointerY, (y) => `${y * 50}%`);
    const glareOpacity = useTransform(active, (a) => a * strength);
    const edgeOpacity = useTransform(active, (a) => 0.25 + 0.75 * a);
    const spillOpacity = useTransform(active, (a) => a);

    const scrolled = React.useCallback(() => {
      box.current = null;
    }, []);

    const measure = () => {
      const node = ref.current;
      if (!node) return null;
      const rect = node.getBoundingClientRect();
      const width = node.offsetWidth || rect.width;
      const height = node.offsetHeight || rect.height;
      box.current = {
        left: rect.left + rect.width / 2 - width / 2,
        top: rect.top + rect.height / 2 - height / 2,
        width,
        height,
      };
      return box.current;
    };

    const aim = (clientX: number, clientY: number) => {
      const rect = box.current ?? measure();
      if (!rect || !rect.width || !rect.height) return;
      pointerX.set(clamp((clientX - rect.left) / rect.width));
      pointerY.set(clamp((clientY - rect.top) / rect.height));
      active.set(1);
    };

    // Keyboard focus gets a gentle, fixed pose instead of following anything.
    const settle = () => {
      if (reduceMotion) return;
      if (focused.current) {
        pointerX.set(0.64);
        pointerY.set(0.36);
        active.set(0.75);
      } else {
        pointerX.set(0.5);
        pointerY.set(0.5);
        active.set(0);
      }
    };

    const release = () => {
      hovering.current = false;
      box.current = null;
      window.removeEventListener("scroll", scrolled, true);
      settle();
    };

    React.useEffect(() => () => window.removeEventListener("scroll", scrolled, true), [scrolled]);

    // Reduced motion: no tilt, a still sheen caught at a flattering angle.
    React.useEffect(() => {
      if (!reduceMotion) return;
      if (ref.current) ref.current.style.transform = "";
      pointerX.jump(0.3);
      pointerY.jump(0.22);
      active.jump(0.55);
    }, [reduceMotion, pointerX, pointerY, active]);

    return (
      <div
        ref={ref}
        style={neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "relative isolate rounded-2xl border border-white/10 bg-[#0a0b11] text-white/90 outline-none",
          "shadow-[0_28px_56px_-28px_rgb(0_0_0/0.9),inset_0_1px_0_rgb(255_255_255/0.06)]",
          "focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#05060a]",
          className,
        )}
        onPointerEnter={(event) => {
          onPointerEnter?.(event);
          if (reduceMotion) return;
          hovering.current = true;
          measure();
          window.addEventListener("scroll", scrolled, { capture: true, passive: true });
          aim(event.clientX, event.clientY);
        }}
        onPointerMove={(event) => {
          onPointerMove?.(event);
          if (reduceMotion) return;
          if (!hovering.current) {
            hovering.current = true;
            window.addEventListener("scroll", scrolled, { capture: true, passive: true });
          }
          aim(event.clientX, event.clientY);
        }}
        onPointerLeave={(event) => {
          onPointerLeave?.(event);
          release();
        }}
        onPointerCancel={(event) => {
          onPointerCancel?.(event);
          release();
        }}
        onPointerUp={(event) => {
          onPointerUp?.(event);
          // A finger has no hover: let go and the card settles.
          if (event.pointerType === "touch") release();
        }}
        onFocus={(event) => {
          onFocus?.(event);
          if (reduceMotion) return;
          let visible = true;
          try {
            visible = event.target.matches(":focus-visible");
          } catch {
            // Older engines without :focus-visible: treat every focus as visible.
          }
          if (!visible) return;
          focused.current = true;
          if (!hovering.current) settle();
        }}
        onBlur={(event) => {
          onBlur?.(event);
          if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;
          focused.current = false;
          if (!hovering.current) settle();
        }}
        {...props}
      >
        <style>{css}</style>
        {/* Light the card throws on the surface around it */}
        <motion.div
          aria-hidden
          style={{ opacity: spillOpacity }}
          className="pointer-events-none absolute -inset-px -z-10 rounded-[inherit] shadow-[0_0_32px_-8px_rgb(var(--neon)/CALC(0.45*var(--neon-glow,1))),0_20px_80px_-28px_rgb(var(--neon)/CALC(0.4*var(--neon-glow,1)))]"
        />
        {children}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]"
        >
          {/* Foil: burns bright where it crosses artwork and type */}
          <motion.div
            data-foil={foil}
            style={{ opacity: sheenOpacity }}
            className="nk-hologram-card-foil absolute inset-0 mix-blend-color-dodge"
          >
            <motion.div
              style={{ transform: sheenTransform }}
              className="nk-hologram-card-sheen absolute -inset-1/2"
            />
          </motion.div>
          {/* Foil: a faint wash so the rainbow also reads on dark ink */}
          <motion.div
            data-foil={foil}
            style={{ opacity: washOpacity }}
            className="nk-hologram-card-foil absolute inset-0 mix-blend-screen"
          >
            <motion.div
              style={{ transform: sheenTransform }}
              className="nk-hologram-card-sheen absolute -inset-1/2"
            />
          </motion.div>
          {glare && (
            <motion.div
              style={{ x: glareX, y: glareY, opacity: glareOpacity }}
              className="absolute -left-full -top-full h-[200%] w-[200%] mix-blend-soft-light [background:radial-gradient(circle_at_50%_50%,rgb(255_255_255/0.95),rgb(255_255_255/0.35)_14%,transparent_38%)]"
            />
          )}
          {glare && (
            <motion.div
              style={{ x: glareX, y: glareY, opacity: glareOpacity }}
              className="absolute -left-full -top-full h-[200%] w-[200%] mix-blend-screen [background:radial-gradient(circle_at_50%_50%,rgb(255_255_255/0.16),transparent_22%)]"
            />
          )}
        </div>
        {/* The edge catches light nearest the pointer */}
        <motion.div
          aria-hidden
          style={{ opacity: edgeOpacity }}
          className="pointer-events-none absolute -inset-px overflow-hidden rounded-[inherit] p-px [mask:linear-gradient(#000_0_0)_content-box_exclude,linear-gradient(#000_0_0)]"
        >
          <motion.div
            style={{ x: glareX, y: glareY }}
            className="absolute -left-full -top-full h-[200%] w-[200%] [background:radial-gradient(circle_at_50%_50%,color-mix(in_srgb,rgb(var(--neon)/var(--neon-glow,1))_40%,white),rgb(var(--neon)/CALC(0.6*var(--neon-glow,1)))_12%,transparent_32%)]"
          />
        </motion.div>
      </div>
    );
  },
);
HologramCard.displayName = "HologramCard";

export { HologramCard };
```