X-Ray Card

A cursor lens reveals a hidden layer underneath the card surface.

"use client";

import { useState } from "react";

export default function XRayCard() {
  const [pos, setPos] = useState(null);
  const config = {
    surfaceTitle: "Surface",
    surfaceText: "Hover card",
    hiddenTitle: "Hidden layer",
    hiddenText: "Revealed",
    surfaceColor: "#0a0d14",
    hiddenColor: "#172554",
    textColor: "#f8fafc",
    accentColor: "#f7c76b",
    lensRadius: 72,
    radius: 22
  };

return (
    <div
      onPointerMove={(event) => {
        const rect = event.currentTarget.getBoundingClientRect();
        setPos({ x: event.clientX - rect.left, y: event.clientY - rect.top });
      }}
      onPointerLeave={() => setPos(null)}
      style={{
        position: "relative",
        minHeight: 260,
        overflow: "hidden",
        borderRadius: config.radius,
        background: config.surfaceColor,
        color: config.textColor,
        cursor: "none"
      }}
    >
      <div style={{ position: "absolute", inset: 0, zIndex: 1, display: "grid", placeItems: "center", padding: 24, background: config.hiddenColor }}>
        <div style={{ textAlign: "center" }}>
          <p style={{ color: config.accentColor, fontSize: 12, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase" }}>{config.hiddenTitle}</p>
          <h3 style={{ marginTop: 12, fontSize: 34, fontWeight: 700 }}>{config.hiddenText}</h3>
        </div>
      </div>
      <div
        style={{
          position: "relative",
          zIndex: 2,
          display: "grid",
          minHeight: 260,
          placeItems: "center",
          padding: 24,
          background: config.surfaceColor,
          maskImage: pos
            ? `radial-gradient(circle ${config.lensRadius}px at ${pos.x}px ${pos.y}px, transparent 0%, transparent ${config.lensRadius * 0.82}px, black ${config.lensRadius}px)`
            : undefined,
          WebkitMaskImage: pos
            ? `radial-gradient(circle ${config.lensRadius}px at ${pos.x}px ${pos.y}px, transparent 0%, transparent ${config.lensRadius * 0.82}px, black ${config.lensRadius}px)`
            : undefined
        }}
      >
        <div style={{ textAlign: "center" }}>
          <p style={{ color: config.accentColor, fontSize: 12, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase" }}>{config.surfaceTitle}</p>
          <h3 style={{ marginTop: 12, fontSize: 34, fontWeight: 700 }}>{config.surfaceText}</h3>
        </div>
      </div>
    </div>
  );
}