"use client" import { useEffect, useRef, useState } from "react" import gsap from "gsap" import { ArrowRight } from "lucide-react" const items = [ { id: 1, text: "Inglorious Bastards" }, { id: 2, text: "Pulp Fiction " }, { id: 3, text: "Django Unchained" }, { id: 4, text: "Kill Bill: Vol. 1 " }, { id: 5, text: "Once Upon a Time in Hollywood" }, ] // Color mapping for hover states - all light shades const colorMap: Record = { 1: "#1f2937", // slate-800 (dark gray-blue) 2: "#111827", // gray-900 (near black) 3: "#374151", // gray-700 (medium-dark gray) 4: "#0f172a", // blue-950 (deep navy) 5: "#1e293b", // slate-900 (cool dark slate) } export default function TextHoverBgChange() { const containerRef = useRef(null) const [activeItem, setActiveItem] = useState(null) const itemRefs = useRef<(HTMLDivElement | null)[]>([]) useEffect(() => { // Initial animation for the title and items const tl = gsap.timeline() tl.from(".hero-title", { y: 30, opacity: 0, duration: 1, ease: "power3.out", }) tl.from( ".hero-item", { y: 40, opacity: 0, stagger: 0.2, duration: 0.8, ease: "power3.out", }, "-=0.5", ) return () => { tl.kill() } }, []) useEffect(() => { if (!containerRef.current) return if (activeItem) { // Animate background color change gsap.to(containerRef.current, { backgroundColor: colorMap[activeItem], duration: 0.4, ease: "power2.out", }) } else { // Reset to white background gsap.to(containerRef.current, { backgroundColor: "#000000", duration: 0.4, ease: "power2.out", }) } }, [activeItem]) const handleMouseEnter = (itemId: number) => { setActiveItem(itemId) const itemElement = itemRefs.current[itemId - 1] if (itemElement) { // Get the arrow element const arrowElement = itemElement.querySelector(".arrow-icon") const textElement = itemElement.querySelector(".text-content") if (arrowElement && textElement) { // Animate the arrow to appear gsap.fromTo( arrowElement, { opacity: 0, x: -10, }, { opacity: 1, x: 0, duration: 0.3, ease: "power2.out", }, ) // Animate the text to move right gsap.to(textElement, { x: 10, duration: 0.3, ease: "power2.out", }) } } } const handleMouseLeave = (itemId: number) => { setActiveItem(null) const itemElement = itemRefs.current[itemId - 1] if (itemElement) { // Get the arrow element const arrowElement = itemElement.querySelector(".arrow-icon") const textElement = itemElement.querySelector(".text-content") if (arrowElement && textElement) { // Animate the arrow to disappear gsap.to(arrowElement, { opacity: 0, x: -10, duration: 0.3, ease: "power2.out", }) // Animate the text back to original position gsap.to(textElement, { x: 0, duration: 0.3, ease: "power2.out", }) } } } return (

Kachoww..

{items.map((item, index) => (

{ itemRefs.current[index] = el; }} className="hero-item text-5xl font-bold cursor-pointer relative flex items-center " onMouseEnter={() => handleMouseEnter(item.id)} onMouseLeave={() => handleMouseLeave(item.id)} > {item.text}

))}

) }

Text Effects

Hover Text Animation

Kachoww..

Hover Background Change