"use client"; import React, { useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform, HTMLMotionProps } from "framer-motion"; import { Sparkles } from "lucide-react"; // --- TYPES --- type HoloVariant = "foil" | "ghost" | "sunset"; export interface HolographicRefractionButtonProps extends Omit, "onMouseMove" | "onMouseLeave" | "ref" | "children"> { label?: string; variant?: HoloVariant; href?: string; target?: string; disabled?: boolean; children?: React.ReactNode; /** React 19 native ref support */ ref?: React.Ref; } /** * Holographic Refraction Pro (v2.1 Ultra - Bimodal Fixed) * Premium interactive button with light refraction logic for both Light and Dark modes. */ export const HolographicRefractionButton = ({ label = "Holographic Foil", variant = "foil", href, target, disabled = false, className, onClick, ref: externalRef, ...props }: HolographicRefractionButtonProps) => { const internalRef = useRef(null); const activeRef = (externalRef as React.RefObject) || internalRef; const x = useMotionValue(0); const y = useMotionValue(0); const springConfig = { damping: 30, stiffness: 200, mass: 1 }; const mouseX = useSpring(x, springConfig); const mouseY = useSpring(y, springConfig); const bgPosX = useTransform(mouseX, [-0.5, 0.5], ["0%", "100%"]); const bgPosY = useTransform(mouseY, [-0.5, 0.5], ["0%", "100%"]); const rotateX = useTransform(mouseY, [-0.5, 0.5], [12, -12]); const rotateY = useTransform(mouseX, [-0.5, 0.5], [-12, 12]); const handleMouseMove = (e: React.MouseEvent) => { if (disabled || !activeRef.current) return; const rect = activeRef.current.getBoundingClientRect(); x.set((e.clientX - rect.left) / rect.width - 0.5); y.set((e.clientY - rect.top) / rect.height - 0.5); }; const handleMouseLeave = () => { x.set(0); y.set(0); }; const Component = href ? motion.a : motion.button; // Variant Configuration - Colors adjusted for Bimodal visibility const configs: Record = { foil: "linear-gradient(115deg, transparent 15%, rgba(255, 0, 0, 0.3) 30%, rgba(0, 255, 0, 0.3) 45%, rgba(0, 0, 255, 0.3) 60%, rgba(255, 255, 0, 0.3) 75%, transparent 90%)", ghost: "linear-gradient(115deg, transparent 25%, rgba(100, 100, 255, 0.2) 40%, rgba(180, 180, 180, 0.4) 50%, rgba(100, 100, 255, 0.2) 60%, transparent 75%)", sunset: "linear-gradient(115deg, transparent 20%, rgba(249, 115, 22, 0.3) 35%, rgba(236, 72, 153, 0.3) 50%, rgba(249, 115, 22, 0.3) 65%, transparent 80%)" }; return (

{/* --- HOLOGRAPHIC LAYER (The Core Fix) --- */} {!disabled && ( )} {/* --- DYNAMIC SHIMMER --- */} {!disabled && ( )} {/* --- CONTENT --- */}

{label}

{/* Subtle bezel for better definition in Light Mode */}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================= export default function HolographicRefractionButtonDemo() { return (

); }