"use client"; import { useRef, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; interface QuantumFocusProps { children: string; // The text content blurAmount?: number; repulsion?: number; className?: string; manualMode?: boolean; // If true, requires click/focus instead of hover } export function QuantumFocus({ children = "Quantum Focus Effect", blurAmount = 4, repulsion = 20, className = "", manualMode = false }: QuantumFocusProps) { const [hoveredIndex, setHoveredIndex] = useState(null); const words = children.split(" "); return (

{words.map((word, i) => { const isHovered = hoveredIndex === i; const distFromHovered = hoveredIndex !== null ? Math.abs(hoveredIndex - i) : 0; // Calculate repulsion (push away from focused word) const x = hoveredIndex !== null ? (i > hoveredIndex ? repulsion / (distFromHovered || 1) : -repulsion / (distFromHovered || 1)) : 0; // Calculate blur and scale based on distance const blur = hoveredIndex !== null && !isHovered ? Math.min(blurAmount + distFromHovered * 2, 8) : 0; const scale = isHovered ? 1.2 : hoveredIndex !== null ? 0.9 : 1; const opacity = hoveredIndex !== null && !isHovered ? 0.4 : 1; return ( setHoveredIndex(i)} onMouseLeave={() => setHoveredIndex(null)} animate={{ x: hoveredIndex !== null && !isHovered ? x : 0, scale, filter: `blur(${blur}px)`, opacity }} transition={{ type: "spring", stiffness: 400, damping: 25 }} > {/* Chromatic Aberration / RGB Split Effect on Focus */} {isHovered && ( <> )} {/* Main Text */} {word} {/* Spotlight Glow Behind */} {isHovered && ( )} ); })}

); }