Spaces:
Sleeping
Sleeping
File size: 2,853 Bytes
12e881d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
'use client';
import { motion, useScroll, useTransform } from 'framer-motion';
import { useRef } from 'react';
export default function Hero() {
const containerRef = useRef(null);
const { scrollYProgress } = useScroll({
target: containerRef,
offset: ['start start', 'end start'],
});
const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
const scale = useTransform(scrollYProgress, [0, 0.5], [1, 0.8]);
const y = useTransform(scrollYProgress, [0, 1], [0, 200]);
return (
<section ref={containerRef} className="relative h-screen flex flex-col justify-center items-center overflow-hidden px-4">
<motion.div
style={{ opacity, scale, y }}
className="text-center z-10 max-w-5xl mx-auto"
>
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1, delay: 0.2 }}
className="font-mono text-xs md:text-sm uppercase tracking-[0.3em] text-faint mb-6"
>
Artificial Intelligence Researcher
</motion.div>
<motion.h1
className="font-serif text-5xl md:text-8xl lg:text-9xl leading-[0.9] mb-8 glitch"
data-text="ARCHITECTING"
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1, delay: 0.4 }}
>
ARCHITECTING
</motion.h1>
<motion.h2
className="font-serif text-4xl md:text-6xl lg:text-7xl leading-none text-gray-400 italic mb-12"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 0.6 }}
>
The Cognitive Future
</motion.h2>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 0.8 }}
className="flex flex-col md:flex-row gap-6 justify-center items-center"
>
<div className="w-px h-16 bg-white/20 hidden md:block"></div>
<p className="font-mono text-sm md:text-base max-w-md text-gray-300 leading-relaxed">
Pioneering neural architectures and generative systems.
Bridging the gap between theoretical research and production-grade scalability.
</p>
</motion.div>
</motion.div>
{/* Scroll Indicator */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 1.5, duration: 1.5 }}
className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2"
>
<span className="font-mono text-[10px] uppercase tracking-widest text-faint">Scroll to Explore</span>
<div className="w-[1px] h-12 bg-gradient-to-b from-white to-transparent"></div>
</motion.div>
</section>
);
} |