Glass Card

"use client";

/**
 * Glass Card — a frosted panel that tilts toward the cursor.
 *
 * Self-contained: framer-motion. Put anything inside as children.
 *
 *   <GlassCard accent="#f5cb73" tilt={12}>…</GlassCard>
 */
import { motion, useMotionTemplate, useMotionValue, useSpring } from "framer-motion";
import type { PointerEvent, ReactNode } from "react";

export type GlassCardProps = {
  accent?: string;
  /** Maximum tilt in degrees. */
  tilt?: number;
  children?: ReactNode;
  className?: string;
};

export function GlassCard({ accent = "#f5cb73", tilt = 12, children, className = "" }: GlassCardProps) {
  const px = useMotionValue(0.5);
  const py = useMotionValue(0.5);
  const rx = useSpring(useMotionValue(0), { stiffness: 160, damping: 18 });
  const ry = useSpring(useMotionValue(0), { stiffness: 160, damping: 18 });
  const glareX = useSpring(px, { stiffness: 120, damping: 20 });
  const glareY = useSpring(py, { stiffness: 120, damping: 20 });

  const glare = useMotionTemplate`radial-gradient(420px circle at calc(${glareX} * 100%) calc(${glareY} * 100%), ${accent}2e, transparent 60%)`;

  function move(event: PointerEvent<HTMLDivElement>) {
    const rect = event.currentTarget.getBoundingClientRect();
    const x = (event.clientX - rect.left) / rect.width;
    const y = (event.clientY - rect.top) / rect.height;
    px.set(x);
    py.set(y);
    ry.set((x - 0.5) * tilt * 2);
    rx.set((0.5 - y) * tilt * 2);
  }

  function leave() {
    px.set(0.5);
    py.set(0.5);
    rx.set(0);
    ry.set(0);
  }

  return (
    <div className={className} style={{ perspective: 1200, width: "100%" }}>
      <motion.div
        onPointerMove={move}
        onPointerLeave={leave}
        style={{
          rotateX: rx,
          rotateY: ry,
          transformStyle: "preserve-3d",
          position: "relative",
          borderRadius: 18,
          padding: 28,
          minHeight: 220,
          color: "#f7efe3",
          background: "linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03))",
          border: "1px solid rgba(255,255,255,0.16)",
          boxShadow: "0 30px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.2)",
          backdropFilter: "blur(18px)",
          WebkitBackdropFilter: "blur(18px)",
          overflow: "hidden",
        }}
      >
        <motion.div aria-hidden style={{ position: "absolute", inset: 0, background: glare, pointerEvents: "none" }} />
        <div style={{ position: "relative", transform: "translateZ(30px)" }}>
          {children ?? (
            <>
              <p style={{ margin: 0, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: accent }}>
                Glass card
              </p>
              <p style={{ margin: "14px 0 0", fontSize: 28, lineHeight: 1.1, letterSpacing: "-0.03em", fontWeight: 600 }}>
                Frosted, tilting,
                <br />
                catching the light.
              </p>
              <p style={{ margin: "14px 0 0", fontSize: 14, lineHeight: 1.6, color: "rgba(247,239,227,0.7)" }}>
                Move the cursor. Put your own content here.
              </p>
            </>
          )}
        </div>
      </motion.div>
    </div>
  );
}

export default GlassCard;