diff --git a/components/sections/CloudRevealSection.tsx b/components/sections/CloudRevealSection.tsx
index 1b1914a..9c47325 100644
--- a/components/sections/CloudRevealSection.tsx
+++ b/components/sections/CloudRevealSection.tsx
@@ -26,7 +26,6 @@ export default function CloudRevealSection() {
   const sectionRef = useRef<HTMLDivElement>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const framesRef = useRef<(HTMLImageElement | null)[]>([])
-  const scrollProgressRef = useRef(0)
   const [loaded, setLoaded] = useState(false)
   const [loadProgress, setLoadProgress] = useState(0)
   const [activeUnit, setActiveUnit] = useState<{ id: string; label: string; sub: string } | null>(null)
@@ -72,25 +71,24 @@ export default function CloudRevealSection() {
     return () => window.removeEventListener('resize', resize)
   }, [])
 
-  // scrollYProgress → ref (RAF loop için)
-  useEffect(() => {
-    return scrollYProgress.on('change', (v) => { scrollProgressRef.current = v })
-  }, [scrollYProgress])
-
-  // RAF loop: scroll progress + yüklü frame → canvas
+  // RAF loop: DOM scroll → frame index → canvas (Framer Motion bağımsız)
   useEffect(() => {
     const canvas = canvasRef.current
-    if (!canvas) return
+    const section = sectionRef.current
+    if (!canvas || !section) return
     const ctx = canvas.getContext('2d')
     if (!ctx) return
+
     let rafId: number
     const loop = () => {
-      const progress = scrollProgressRef.current
+      const totalHeight = section.offsetHeight - window.innerHeight
+      const scrolled = window.scrollY - section.offsetTop
+      const progress = Math.max(0, Math.min(1, scrolled / totalHeight))
+
       const targetIdx = Math.min(
         Math.floor(progress * (TOTAL_FRAMES - 1)),
         TOTAL_FRAMES - 1
       )
-      // En yakın yüklü frame'i bul
       for (let i = targetIdx; i >= 0; i--) {
         const img = framesRef.current[i]
         if (img && canvas.width > 0) {