import React, { useState, useEffect } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { Lightbulb } from 'lucide-react' const AnimatedFuseText = () => { const [isHit, setIsHit] = useState(false) const [isSwingComplete, setIsSwingComplete] = useState(false) const [isFlickering, setIsFlickering] = useState(false) const supportStyle = { width: '20px', height: '10px', background: '#374151', position: 'absolute' as const, top: '-10px', left: '50%', transform: 'translateX(-50%)', borderRadius: '3px 3px 0 0', boxShadow: '0 1px 2px rgba(0,0,0,0.2)', } const threadStyle = { width: '2px', height: '20px', background: '#4B5563', position: 'absolute' as const, top: '0', left: '50%', transformOrigin: 'top', } const bulbContainerStyle = { position: 'absolute' as const, top: '40px', left: '50%', transform: 'translate(-50%, -50%) rotate(180deg)', transformOrigin: 'center', } const pendulumAnimation = { rotate: [0, -45, 45, -30, 30, -15, 15, -5, 5, 0], transition: { duration: 4, ease: "easeInOut", times: [0, 0.1, 0.3, 0.5, 0.6, 0.7, 0.8, 0.9, 0.95, 1], } } useEffect(() => { if (isHit && !isSwingComplete) { setIsFlickering(true) setTimeout(() => setIsFlickering(false), 4000) } }, [isHit]) const flickerAnimation = { opacity: isFlickering ? [1, 0.4, 1, 0.3, 1, 0.5, 1] : 1, color: isFlickering ? ["#4B5563", "#FFD700", "#4B5563", "#FFD700", "#4B5563", "#FFD700"] : (isSwingComplete ? "#FFD700" : "#4B5563"), filter: isFlickering ? ["brightness(1)", "brightness(1.5)", "brightness(1)", "brightness(1.5)"] : (isSwingComplete ? "brightness(1.5)" : "brightness(1)") } return (

{!isHit && ( setIsHit(true)} className="absolute top-1/3" >

)}

setIsSwingComplete(true)} >

{(isFlickering || isSwingComplete) && ( )}

Mishra Hub

) } export default AnimatedFuseText