Animierter 3D-Heldenbereich mit scrollgesteuertem Video

import { useEffect, useRef } from 'react'; import { motion, useScroll, useTransform } from 'motion/react'; import Lenis from 'lenis'; // --- LiquidVideoCanvas Component --- function LiquidVideoCanvas() { const videoRef = useRef<HTMLVideoElement>(null); const containerRef = useRef<HTMLDivElement>(null); const isSeeking = useRef(false); const nextSeekTime = useRef(0); const targetTime = useRef(0); useEffect(() => { const video = videoRef.current; if (!video) return; // Entrance animation let entranceTimeout: number; const animateEntrance = () => { if (video.readyState >= 3) { video.style.transition = 'transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.4s ease-out'; video.style.transform = 'scale(1)'; video.style.opacity = '1'; window.clearTimeout(entranceTimeout); } }; entranceTimeout = window.setTimeout(animateEntrance, 3500); video.addEventListener('loadeddata', animateEntrance); // Scroll seeking with LERP let rafId: number; let currentTime = 0; const lerp = (a: number, b: number, t: number) => a + (b - a) * t; const onScroll = () => { const scrollProgress = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight); targetTime.current = scrollProgress * (video.duration || 10); }; const seekLoop = () => { currentTime = lerp(currentTime, targetTime.current, 0.12); const clampedTime = Math.min(Math.max(currentTime, 0), video.duration || 0); if (!isSeeking.current && !video.seeking) { isSeeking.current = true; video.currentTime = clampedTime; } else { nextSeekTime.current = clampedTime; } rafId = requestAnimationFrame(seekLoop); }; const onSeeked = () => { isSeeking.current = false; if (nextSeekTime.current > 0) { video.currentTime = nextSeekTime.current; nextSeekTime.current = 0; } }; video.addEventListener('seeking', () => { isSeeking.current = true; }); video.addEventListener('seeked', onSeeked); window.addEventListener('scroll', onScroll); rafId = requestAnimationFrame(seekLoop); return () => { window.clearTimeout(entranceTimeout); window.removeEventListener('scroll', onScroll); video.removeEventListener('loadeddata', animateEntrance); video.removeEventListener('seeked', onSeeked); cancelAnimationFrame(rafId); }; }, []); return ( <div ref={containerRef} className="fixed inset-0 z-[1] bg-black"> <video ref={videoRef} className="w-full h-full object-cover" style={{ transform: 'scale(1.12)', opacity: 0 }} loop muted playsInline preload="auto" src="https://t.co/cvkGVS5C0E" /> </div> ); } // --- Main App Component --- export default function App() { const mainRef = useRef<HTMLDivElement>(null); const blurRef = useRef<HTMLDivElement>(null); // Lenis smooth scroll (desktop only) useEffect(() => { const isDesktop = window.matchMedia('(min-width: 768px)').matches; if (!isDesktop) return; const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), smoothWheel: true, }); const raf = (time: number) => { lenis.raf(time); requestAnimationFrame(raf); }; requestAnimationFrame(raf); return () => lenis.destroy(); }, []); // Progressive blur based on scroll useEffect(() => { const handleScroll = () => { const scrollY = window.scrollY; const maxScroll = document.documentElement.scrollHeight - window.innerHeight; const progress = scrollY / maxScroll; // Subtle base blur (0-5px) in first half, aggressive (5-55px) in second half let blur = 0; if (progress < 0.5) { blur = (progress / 0.5) * 5; } else { blur = 5 + ((progress - 0.5) / 0.5) * 50; } if (blurRef.current) { blurRef.current.style.backdropFilter = `blur(${blur}px)`; } }; window.addEventListener('scroll', handleScroll); handleScroll(); return () => window.removeEventListener('scroll', handleScroll); }, []); // Scroll-driven content animations const { scrollYProgress } = useScroll(); const contentOpacity = useTransform(scrollYProgress, [0, 0.3], [1, 0]); const contentScale = useTransform(scrollYProgress, [0, 0.3], [1, 0.95]); return ( <div className="relative overflow-x-hidden bg-black min-h-screen"> {/* Video Background */} <LiquidVideoCanvas /> {/* Progressive Blur Layer */} <div ref={blurRef} className="fixed bottom-0 z-30 w-full h-full pointer-events-none" /> {/* Header */} <header className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-6 py-4 md:px-12 md:py-6"> <div className="text-white font-bold text-lg tracking-widest">SYNAPSE<span className="text-purple-400">X</span></div> <nav className="hidden md:flex items-center gap-8 text-sm text-white/80"> <a href="#features" className="hover:text-white transition-colors">Features</a> <a href="#pricing" className="hover:text-white transition-colors">Pricing</a> <a href="#contact" className="hover:text-white transition-colors">Contact</a> </nav> <div className="flex items-center gap-4"> <i className="bi bi-apple text-white text-xl"></i> <button className="bg-white text-black px-4 py-2 rounded-full text-sm font-bold hover:bg-purple-400 hover:text-white transition-colors"> Get Started </button> </div> </header> {/* Main Content */} <motion.main ref={mainRef} style={{ opacity: contentOpacity, scale: contentScale }} className="relative z-10 flex flex-col items-center justify-center min-h-screen text-center px-4" > <motion.div initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 0.5, ease: 'easeOut' }} > <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-6 tracking-tight"> SYNAPSE<span className="text-purple-400">X</span> </h1> <p className="text-lg md:text-xl text-white/80 max-w-2xl mx-auto mb-8"> The next generation of neural computing. Seamless, intelligent, and infinitely scalable. </p> <div className="flex flex-col md:flex-row gap-4 justify-center"> <button className="bg-purple-600 hover:bg-purple-500 text-white px-8 py-4 rounded-full font-bold text-lg transition-all transform hover:scale-105"> Launch Now </button> <button className="border-2 border-white/30 hover:border-white text-white px-8 py-4 rounded-full font-bold text-lg transition-all hover:bg-white/10"> Watch Demo </button> </div> </motion.div> {/* Scroll indicator */} <motion.div className="absolute bottom-8 left-1/2 transform -translate-x-1/2" animate={{ y: [0, 10, 0] }} transition={{ duration: 1.5, repeat: Infinity }} > <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center pt-2"> <div className="w-1 h-2 bg-white/50 rounded-full" /> </div> </motion.div> </motion.main> </div> ); } ``` ```css /* index.css */ @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap'); @import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css'); @import "tailwindcss"; @theme { --font-sans: "Space Mono", monospace; --font-serif: "Space Mono", monospace; --font-inter: "Space Mono", monospace; --font-mono: "Space Mono", monospace; } html, body { font-family: var(--font-sans); background: black; color: white; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; } /* Lenis compatibility */ .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; }