[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { MarqueeAnimation } from "@/components/marquee-animation" export default function Home() { return (

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "marquee-animation", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "react": "^18", "react-dom": "^18", "next": "14.2.4", "framer-motion": "^11.0.0" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "eslint": "^8", "eslint-config-next": "14.2.4" } } [V0_FILE]jpg:file="public/images/neural-network.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/luke-jones-tBvF46kmwBw-unsplash.jpg-yoFAB22f6UlrAklOEdTZxSMVaAq0kN.jpeg" isMerged="true" [V0_FILE]jpg:file="public/images/abstract-flow.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/vackground-com-agUC-v_D1iI-unsplash.jpg-BuPYqTaSzAb3H258GTZk2bZmXaerUM.jpeg" isMerged="true" [V0_FILE]jpg:file="public/images/robot-arm.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/zhenyu-luo-kE0JmtbvXxM-unsplash.jpg-HtcsQhhSReFUjNHDqSlhU4crt13dW2.jpeg" isMerged="true" [V0_FILE]jpg:file="public/images/ai-human.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cash-macanaya-X9Cemmq4YjM-unsplash.jpg-U9I0fHlSjvy50a34dPkKD9mh2M6dpU.jpeg" isMerged="true" [V0_FILE]jpg:file="public/images/ai-question.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/nahrizul-kadri-OAsF0QMRWlA-unsplash.jpg-kREZmRaC0uz6PjhtI17erdP5RXu3Ch.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/marquee-animation.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { motion, useSpring, useMotionValue, AnimatePresence } from "framer-motion" interface HoverImage { src: string alt: string } const textPhrases = [ "Artificial Intelligence Revolution", "Machine Learning Algorithms", "Deep Neural Networks", "Computer Vision Systems", "Natural Language Processing", "Robotics & Automation", "Data Science Analytics", "Blockchain Technology", "Virtual Reality Worlds", "Augmented Reality Experience", "Internet of Things", "Cloud Computing Infrastructure", "Cybersecurity Protocols", "Quantum Cryptography", "Edge Computing Networks", ] const randomPhrases = [ "Digital Transformation", "Innovation Ecosystem", "Smart City Solutions", "Sustainable Technology", "Future of Work", "Creative Coding", "Tech Disruption", "Digital Renaissance", "Connected Universe", "Infinite Possibilities", "Next Generation", "Revolutionary Ideas", "Breakthrough Moments", "Visionary Concepts", "Tomorrow's Reality", ] const uploadedImages: HoverImage[] = [ { src: "/images/neural-network.jpg", alt: "Neural Network" }, { src: "/images/abstract-flow.jpg", alt: "Abstract Flow" }, { src: "/images/robot-arm.jpg", alt: "Robot Arm" }, { src: "/images/ai-human.jpg", alt: "AI Human" }, { src: "/images/ai-question.jpg", alt: "AI Question" }, { src: "/placeholder-logo.png", alt: "Logo" }, { src: "/placeholder-user.jpg", alt: "User" }, { src: "/placeholder.jpg", alt: "Placeholder" }, ] const phraseImages: { [key: string]: HoverImage } = {} textPhrases.forEach((phrase, index) => { phraseImages[phrase] = uploadedImages[index % uploadedImages.length] }) randomPhrases.forEach((phrase, index) => { phraseImages[phrase] = uploadedImages[index % uploadedImages.length] }) export function MarqueeAnimation() { const [scrollY, setScrollY] = useState(0) const [hoveredPhrase, setHoveredPhrase] = useState(null) const mouseX = useMotionValue(0) const mouseY = useMotionValue(0) const tilt = useSpring(0, { stiffness: 400, damping: 30 }) const imageX = useSpring(0, { stiffness: 400, damping: 30 }) const imageY = useSpring(0, { stiffness: 400, damping: 30 }) const lastMouseX = useRef(0) const hoverTimeoutRef = useRef(null) const [firstMarqueePhrases, setFirstMarqueePhrases] = useState([]) const [secondMarqueePhrases, setSecondMarqueePhrases] = useState([]) useEffect(() => { const handleScroll = () => setScrollY(window.scrollY) const handleMouseMove = (e: MouseEvent) => { const deltaX = e.clientX - lastMouseX.current lastMouseX.current = e.clientX const imageSize = 256 // 64 * 4 = 256px (w-64 h-64) const padding = 20 const viewportWidth = window.innerWidth const viewportHeight = window.innerHeight // Calculate bounded positions to keep image fully visible const boundedX = Math.max(imageSize / 2 + padding, Math.min(viewportWidth - imageSize / 2 - padding, e.clientX)) const boundedY = Math.max(imageSize / 2 + padding, Math.min(viewportHeight - imageSize / 2 - padding, e.clientY)) mouseX.set(e.clientX) mouseY.set(e.clientY) imageX.set(boundedX) imageY.set(boundedY) // Calculate tilt based on mouse movement direction const tiltValue = Math.max(-8, Math.min(8, deltaX * 0.5)) tilt.set(tiltValue) } window.addEventListener("scroll", handleScroll) window.addEventListener("mousemove", handleMouseMove) return () => { window.removeEventListener("scroll", handleScroll) window.removeEventListener("mousemove", handleMouseMove) } }, [mouseX, mouseY, imageX, imageY, tilt]) useEffect(() => { const shuffleArray = (array: string[]) => [...array].sort(() => Math.random() - 0.5) setFirstMarqueePhrases(shuffleArray(textPhrases).slice(0, 10)) setSecondMarqueePhrases(shuffleArray(randomPhrases).slice(0, 10)) const interval = setInterval(() => { setFirstMarqueePhrases(shuffleArray(textPhrases).slice(0, 10)) setSecondMarqueePhrases(shuffleArray(randomPhrases).slice(0, 10)) }, 15000) return () => clearInterval(interval) }, []) const handlePhraseHover = (phrase: string) => { console.log("[v0] Hovering over phrase:", phrase) if (hoverTimeoutRef.current) { clearTimeout(hoverTimeoutRef.current) hoverTimeoutRef.current = null } setHoveredPhrase(phrase) } const handlePhraseLeave = () => { console.log("[v0] Left phrase hover") hoverTimeoutRef.current = setTimeout(() => { setHoveredPhrase(null) tilt.set(0) }, 100) } const getCurrentImage = () => { if (hoveredPhrase && phraseImages[hoveredPhrase]) { return phraseImages[hoveredPhrase] } return null } const currentImage = getCurrentImage() const createVariedText = (phrases: string[], count = 8) => { const repeatedPhrases = [] for (let i = 0; i < count; i++) { phrases.forEach((phrase, index) => { repeatedPhrases.push( handlePhraseHover(phrase)} onMouseLeave={handlePhraseLeave} > {phrase} • , ) }) } return repeatedPhrases } return (

{createVariedText(firstMarqueePhrases, 12)}

{createVariedText(secondMarqueePhrases, 12)}

{currentImage && hoveredPhrase && ( {currentImage.alt}

console.log("[v0] Image loaded:", currentImage.alt)} draggable={false} style={{ userSelect: "none" }} /> )}

) }

About

Tags

Share

About

Tags

Share

More from pohthedragonwarrior

More Templates Like This

About

Tags

Share

About

Tags

Share

More from pohthedragonwarrior

More Templates Like This