feat: scroll progress bar + tagline text on hero

components/sections/CloudRevealSection.tsx

@@ -2,6 +2,13 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { useTranslations } from 'next-intl'
+import {
+  motion,
+  useScroll,
+  useTransform,
+  useMotionValueEvent,
+  useReducedMotion,
+} from 'framer-motion'
 
 const TOTAL_FRAMES = 298
 const FRAME_PATH = (n: number) =>
@@ -9,36 +16,52 @@ const FRAME_PATH = (n: number) =>
 
 export default function CloudRevealSection() {
   const t = useTranslations('hero')
+  const prefersReducedMotion = useReducedMotion()
   const sectionRef = useRef<HTMLDivElement>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
-  const textRef = useRef<HTMLDivElement>(null)
   const framesRef = useRef<HTMLImageElement[]>([])
   const currentFrameRef = useRef(0)
-  const rafRef = useRef<number | null>(null)
   const [loaded, setLoaded] = useState(false)
   const [loadProgress, setLoadProgress] = useState(0)
 
-  // Frame'leri sıralı preload et
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    offset: ['start start', 'end end'],
+  })
+
+  // Tagline: ilk %15'te solar, aşağı kayar
+  const taglineOpacity = useTransform(scrollYProgress, [0, 0.15], [1, 0])
+  const taglineY = useTransform(scrollYProgress, [0, 0.15], [0, 40])
+
+  // Progress bar: scroll'a göre genişler (0 → 100%)
+  const progressScaleX = useTransform(scrollYProgress, [0, 1], [0, 1])
+
+  // Frame preload
   useEffect(() => {
+    if (prefersReducedMotion) return
+
     const images: HTMLImageElement[] = new Array(TOTAL_FRAMES)
     let loadedCount = 0
+    let cancelled = false
 
     for (let i = 0; i < TOTAL_FRAMES; i++) {
       const img = new Image()
       img.src = FRAME_PATH(i + 1)
       img.onload = () => {
+        if (cancelled) return
         loadedCount++
         setLoadProgress(Math.round((loadedCount / TOTAL_FRAMES) * 100))
         if (loadedCount === TOTAL_FRAMES) {
           framesRef.current = images
           setLoaded(true)
-          // İlk frame'i hemen çiz
           drawFrame(0, images)
         }
       }
       images[i] = img
     }
-  }, [])
+
+    return () => { cancelled = true }
+  }, [prefersReducedMotion])
 
   function drawFrame(index: number, images?: HTMLImageElement[]) {
     const canvas = canvasRef.current
@@ -51,61 +74,24 @@ export default function CloudRevealSection() {
     ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
   }
 
-  // Scroll handler
-  useEffect(() => {
+  useMotionValueEvent(scrollYProgress, 'change', (progress) => {
     if (!loaded) return
-
-    const section = sectionRef.current
-    const text = textRef.current
-    if (!section || !text) return
-
-    const handleScroll = () => {
-      const rect = section.getBoundingClientRect()
-      const sectionHeight = section.offsetHeight
-      const windowH = window.innerHeight
-
-      const scrolled = -rect.top
-      const total = sectionHeight - windowH
-      const progress = Math.min(Math.max(scrolled / total, 0), 1)
-
-      // Hangi frame'i göstereceğimizi hesapla
-      const frameIndex = Math.min(
-        Math.floor(progress * (TOTAL_FRAMES - 1)),
-        TOTAL_FRAMES - 1
-      )
-
-      // Sadece frame değiştiyse çiz (RAF ile)
-      if (frameIndex !== currentFrameRef.current) {
-        currentFrameRef.current = frameIndex
-        if (rafRef.current) cancelAnimationFrame(rafRef.current)
-        rafRef.current = requestAnimationFrame(() => drawFrame(frameIndex))
-      }
-
-      // Tagline: ilk %15'te görünür, sonra solar
-      if (progress < 0.15) {
-        const opacity = 1 - progress / 0.15
-        text.style.opacity = String(opacity)
-        text.style.transform = `translateY(${progress * 40}px)`
-      } else {
-        text.style.opacity = '0'
-      }
+    const frameIndex = Math.min(
+      Math.floor(progress * (TOTAL_FRAMES - 1)),
+      TOTAL_FRAMES - 1
+    )
+    if (frameIndex !== currentFrameRef.current) {
+      currentFrameRef.current = frameIndex
+      drawFrame(frameIndex)
     }
+  })
 
-    window.addEventListener('scroll', handleScroll, { passive: true })
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-      if (rafRef.current) cancelAnimationFrame(rafRef.current)
-    }
-  }, [loaded])
-
-  // Canvas boyutunu ekrana sığdır
   useEffect(() => {
     const canvas = canvasRef.current
     if (!canvas) return
     const resize = () => {
       canvas.width = window.innerWidth
       canvas.height = window.innerHeight
-      // Resize sonrası mevcut frame'i yeniden çiz
       drawFrame(currentFrameRef.current)
     }
     resize()
@@ -113,18 +99,39 @@ export default function CloudRevealSection() {
     return () => window.removeEventListener('resize', resize)
   }, [loaded])
 
+  if (prefersReducedMotion) {
+    return (
+      <div className="relative min-h-[100dvh] w-full overflow-hidden bg-black flex items-end">
+        <div className="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-transparent" />
+        <div className="relative z-10 w-full px-10 pb-24">
+          <p className="text-white/50 text-xs tracking-[0.4em] uppercase mb-4">
+            Vesta Muğla
+          </p>
+          <h1 className="text-white text-5xl md:text-7xl font-serif font-light leading-tight">
+            {t('tagline')}
+          </h1>
+          <p className="text-white/50 mt-4 text-base md:text-lg font-light max-w-md">
+            {t('subtitle')}
+          </p>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div ref={sectionRef} style={{ height: '500vh' }}>
-      <div className="sticky top-0 h-screen w-full overflow-hidden bg-black">
+      <div className="sticky top-0 min-h-[100dvh] w-full overflow-hidden bg-black">
 
-        {/* Canvas — frame'ler buraya çizilir */}
+        {/* Canvas */}
         <canvas
           ref={canvasRef}
           className="absolute inset-0 w-full h-full"
-          style={{ objectFit: 'cover' }}
         />
 
-        {/* Loading ekranı */}
+        {/* Gradient — alt kısım okunabilir olsun */}
+        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent pointer-events-none" />
+
+        {/* Loading */}
         {!loaded && (
           <div className="absolute inset-0 flex flex-col items-center justify-center bg-black z-20">
             <div className="w-48 h-px bg-white/10 mb-3">
@@ -139,32 +146,42 @@ export default function CloudRevealSection() {
           </div>
         )}
 
-        {/* Tagline */}
-        <div
-          ref={textRef}
-          className="absolute bottom-16 left-0 right-0 z-10 text-center px-6"
-          style={{ willChange: 'opacity, transform', transition: 'none' }}
+        {/* Sol alt — tagline metni */}
+        <motion.div
+          style={{ opacity: taglineOpacity, y: taglineY }}
+          className="absolute bottom-20 left-0 z-10 px-10 max-w-xl"
         >
-          <p className="text-white/60 text-xs tracking-[0.4em] uppercase mb-3">
+          <p className="text-white/50 text-xs tracking-[0.4em] uppercase mb-4">
             Vesta Muğla
           </p>
           <h1 className="text-white text-4xl md:text-6xl font-serif font-light leading-tight drop-shadow-2xl">
             {t('tagline')}
           </h1>
-          <p className="text-white/50 mt-4 text-base md:text-lg font-light">
+          <p className="text-white/50 mt-3 text-sm md:text-base font-light">
             {t('subtitle')}
           </p>
-        </div>
+        </motion.div>
 
-        {/* Scroll indicator */}
+        {/* Sağ alt — scroll göstergesi */}
         {loaded && (
-          <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2">
-            <span className="text-white/30 text-xs tracking-widest uppercase">
+          <motion.div
+            style={{ opacity: taglineOpacity }}
+            className="absolute bottom-20 right-10 z-10 flex flex-col items-center gap-2"
+          >
+            <span className="text-white/30 text-[10px] tracking-widest uppercase rotate-90 mb-2">
               {t('scroll')}
             </span>
-            <div className="w-px h-10 bg-white/20 animate-pulse" />
-          </div>
+          </motion.div>
         )}
+
+        {/* Alt progress bar */}
+        <div className="absolute bottom-0 left-0 right-0 z-10 h-[2px] bg-white/10">
+          <motion.div
+            className="h-full bg-white/60 origin-left"
+            style={{ scaleX: progressScaleX }}
+          />
+        </div>
+
       </div>
     </div>
   )