diff --git a/components/sections/CloudRevealSection.tsx b/components/sections/CloudRevealSection.tsx
index 4d5f501..acc8670 100644
--- a/components/sections/CloudRevealSection.tsx
+++ b/components/sections/CloudRevealSection.tsx
@@ -9,6 +9,7 @@ import {
   useMotionValueEvent,
   useReducedMotion,
 } from 'framer-motion'
+import UnitRevealOverlay from './UnitRevealOverlay'
 
 const TOTAL_FRAMES = 298
 const FRAME_PATH = (n: number) =>
@@ -39,6 +40,7 @@ export default function CloudRevealSection() {
   const [loaded, setLoaded] = useState(false)
   const [loadProgress, setLoadProgress] = useState(0)
   const hasSnapped = useRef(false)
+  const [activeUnit, setActiveUnit] = useState<{ id: string; label: string; sub: string } | null>(null)
 
   const { scrollYProgress } = useScroll({
     target: sectionRef,
@@ -228,7 +230,10 @@ export default function CloudRevealSection() {
         </motion.div>
 
         {/* HOTSPOTS — son frame'de görünür */}
-        <UnitHotspots scrollYProgress={scrollYProgress} />
+        <UnitHotspots
+          scrollYProgress={scrollYProgress}
+          onSelect={(unit) => setActiveUnit(unit)}
+        />
 
         {/* Progress bar */}
         <div className="absolute bottom-8 left-10 right-10 z-10 h-[2px] bg-white/10">
@@ -237,6 +242,14 @@ export default function CloudRevealSection() {
 
       </div>
     </div>
+
+    {/* Unit reveal overlay */}
+    <UnitRevealOverlay
+      unitId={activeUnit?.id ?? null}
+      unitLabel={activeUnit?.label ?? ''}
+      unitSub={activeUnit?.sub ?? ''}
+      onClose={() => setActiveUnit(null)}
+    />
   )
 }
 
@@ -258,8 +271,10 @@ const HOTSPOTS: {
 
 function UnitHotspots({
   scrollYProgress,
+  onSelect,
 }: {
   scrollYProgress: ReturnType<typeof useScroll>['scrollYProgress']
+  onSelect: (unit: { id: string; label: string; sub: string }) => void
 }) {
   const containerOpacity = useTransform(scrollYProgress, [0.92, 0.98], [0, 1])
 
@@ -310,10 +325,7 @@ function UnitHotspots({
               animate={{ opacity: 1, x: 0 }}
               transition={{ delay: i * 0.2 + 0.45, duration: 0.3, ease: 'easeOut' }}
               className="pointer-events-auto bg-black/60 backdrop-blur-md border border-white/20 rounded-lg px-3 py-2 text-left hover:bg-black/80 hover:border-white/40 transition-all duration-200 active:scale-95 cursor-pointer"
-              onClick={() => {
-                // İleride: daire içi frame sekansını başlat
-                console.log('unit clicked:', spot.id)
-              }}
+              onClick={() => onSelect({ id: spot.id, label: spot.label, sub: spot.sub })}
             >
               <p className="text-white text-xs font-medium tracking-wide whitespace-nowrap">{spot.label}</p>
               <p className="text-white/50 text-[10px] mt-0.5 whitespace-nowrap">{spot.sub}</p>
diff --git a/components/sections/UnitRevealOverlay.tsx b/components/sections/UnitRevealOverlay.tsx
new file mode 100644
index 0000000..5c8bc43
--- /dev/null
+++ b/components/sections/UnitRevealOverlay.tsx
@@ -0,0 +1,183 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { X } from 'lucide-react'
+
+const UNIT_FRAMES = 40
+
+interface UnitRevealOverlayProps {
+  unitId: string | null
+  unitLabel: string
+  unitSub: string
+  onClose: () => void
+}
+
+export default function UnitRevealOverlay({
+  unitId,
+  unitLabel,
+  unitSub,
+  onClose,
+}: UnitRevealOverlayProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const framesRef = useRef<HTMLImageElement[]>([])
+  const rafRef = useRef<number | null>(null)
+  const [loadProgress, setLoadProgress] = useState(0)
+  const [loaded, setLoaded] = useState(false)
+  const [finished, setFinished] = useState(false)
+
+  // Frame'leri preload et
+  useEffect(() => {
+    if (!unitId) return
+
+    setLoaded(false)
+    setFinished(false)
+    setLoadProgress(0)
+    framesRef.current = []
+
+    const images: HTMLImageElement[] = new Array(UNIT_FRAMES)
+    let loadedCount = 0
+    let cancelled = false
+
+    for (let i = 0; i < UNIT_FRAMES; i++) {
+      const img = new Image()
+      img.src = `/unit-frames/${unitId}/ezgif-frame-${String(i + 1).padStart(3, '0')}.jpg`
+      img.onload = () => {
+        if (cancelled) return
+        loadedCount++
+        setLoadProgress(Math.round((loadedCount / UNIT_FRAMES) * 100))
+        if (loadedCount === UNIT_FRAMES) {
+          framesRef.current = images
+          setLoaded(true)
+        }
+      }
+      images[i] = img
+    }
+
+    return () => { cancelled = true }
+  }, [unitId])
+
+  // Canvas boyutu
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const resize = () => {
+      canvas.width = window.innerWidth
+      canvas.height = window.innerHeight
+    }
+    resize()
+    window.addEventListener('resize', resize)
+    return () => window.removeEventListener('resize', resize)
+  }, [])
+
+  // Yüklenince otomatik oynat
+  useEffect(() => {
+    if (!loaded) return
+
+    const canvas = canvasRef.current
+    const ctx = canvas?.getContext('2d')
+    if (!canvas || !ctx) return
+
+    let frame = 0
+    const fps = 24
+    const interval = 1000 / fps
+    let last = 0
+
+    const draw = (imgs: HTMLImageElement[], index: number) => {
+      const img = imgs[index]
+      if (img?.complete && img.naturalWidth > 0) {
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+      }
+    }
+
+    const animate = (ts: number) => {
+      if (ts - last >= interval) {
+        draw(framesRef.current, frame)
+        last = ts
+        if (frame < UNIT_FRAMES - 1) {
+          frame++
+        } else {
+          setFinished(true)
+          return // son frame'de dur
+        }
+      }
+      rafRef.current = requestAnimationFrame(animate)
+    }
+
+    rafRef.current = requestAnimationFrame(animate)
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current)
+    }
+  }, [loaded])
+
+  // ESC ile kapat
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return (
+    <AnimatePresence>
+      {unitId && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.4 }}
+          className="fixed inset-0 z-50 bg-black"
+        >
+          {/* Canvas */}
+          <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />
+
+          {/* Loading */}
+          {!loaded && (
+            <div className="absolute inset-0 flex flex-col items-center justify-center bg-black z-10">
+              <div className="w-48 h-px bg-white/10 mb-3">
+                <div
+                  className="h-full bg-white/60 transition-all duration-150"
+                  style={{ width: `${loadProgress}%` }}
+                />
+              </div>
+              <p className="text-white/30 text-xs tracking-widest uppercase">{loadProgress}%</p>
+            </div>
+          )}
+
+          {/* Kapat */}
+          <button
+            onClick={onClose}
+            className="absolute top-6 right-6 z-20 flex items-center gap-2 bg-black/40 backdrop-blur-sm border border-white/20 text-white/70 hover:text-white hover:bg-black/60 transition-all rounded-full px-4 py-2 text-sm"
+          >
+            <X className="w-4 h-4" />
+            Geri
+          </button>
+
+          {/* Bitiş bilgisi — son frame'de */}
+          <AnimatePresence>
+            {finished && (
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+                className="absolute bottom-16 left-10 z-20"
+              >
+                <p className="text-white/50 text-[10px] tracking-[0.4em] uppercase mb-2">Vesta Muğla</p>
+                <h2 className="text-white text-3xl md:text-4xl font-serif font-light">{unitLabel}</h2>
+                <p className="text-white/50 mt-1 text-sm">{unitSub}</p>
+                <button
+                  onClick={onClose}
+                  className="mt-5 flex items-center gap-2 text-white/60 hover:text-white text-xs tracking-widest uppercase transition-colors"
+                >
+                  <span>← Projeye Dön</span>
+                </button>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}
diff --git a/public/unit-frames/blok-a/ezgif-frame-001.jpg b/public/unit-frames/blok-a/ezgif-frame-001.jpg
new file mode 100644
index 0000000..80a621c
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-001.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-002.jpg b/public/unit-frames/blok-a/ezgif-frame-002.jpg
new file mode 100644
index 0000000..170dd85
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-002.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-003.jpg b/public/unit-frames/blok-a/ezgif-frame-003.jpg
new file mode 100644
index 0000000..3362f93
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-003.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-004.jpg b/public/unit-frames/blok-a/ezgif-frame-004.jpg
new file mode 100644
index 0000000..a735cdd
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-004.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-005.jpg b/public/unit-frames/blok-a/ezgif-frame-005.jpg
new file mode 100644
index 0000000..fc3b940
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-005.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-006.jpg b/public/unit-frames/blok-a/ezgif-frame-006.jpg
new file mode 100644
index 0000000..785dfed
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-006.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-007.jpg b/public/unit-frames/blok-a/ezgif-frame-007.jpg
new file mode 100644
index 0000000..db75022
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-007.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-008.jpg b/public/unit-frames/blok-a/ezgif-frame-008.jpg
new file mode 100644
index 0000000..31883c2
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-008.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-009.jpg b/public/unit-frames/blok-a/ezgif-frame-009.jpg
new file mode 100644
index 0000000..6cf6333
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-009.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-010.jpg b/public/unit-frames/blok-a/ezgif-frame-010.jpg
new file mode 100644
index 0000000..9587de8
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-010.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-011.jpg b/public/unit-frames/blok-a/ezgif-frame-011.jpg
new file mode 100644
index 0000000..cbbd26b
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-011.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-012.jpg b/public/unit-frames/blok-a/ezgif-frame-012.jpg
new file mode 100644
index 0000000..909adff
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-012.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-013.jpg b/public/unit-frames/blok-a/ezgif-frame-013.jpg
new file mode 100644
index 0000000..08cea4f
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-013.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-014.jpg b/public/unit-frames/blok-a/ezgif-frame-014.jpg
new file mode 100644
index 0000000..31c299f
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-014.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-015.jpg b/public/unit-frames/blok-a/ezgif-frame-015.jpg
new file mode 100644
index 0000000..888d37e
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-015.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-016.jpg b/public/unit-frames/blok-a/ezgif-frame-016.jpg
new file mode 100644
index 0000000..c807f8f
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-016.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-017.jpg b/public/unit-frames/blok-a/ezgif-frame-017.jpg
new file mode 100644
index 0000000..6317e5f
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-017.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-018.jpg b/public/unit-frames/blok-a/ezgif-frame-018.jpg
new file mode 100644
index 0000000..89aca50
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-018.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-019.jpg b/public/unit-frames/blok-a/ezgif-frame-019.jpg
new file mode 100644
index 0000000..8198465
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-019.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-020.jpg b/public/unit-frames/blok-a/ezgif-frame-020.jpg
new file mode 100644
index 0000000..d974db1
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-020.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-021.jpg b/public/unit-frames/blok-a/ezgif-frame-021.jpg
new file mode 100644
index 0000000..0c3ddb7
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-021.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-022.jpg b/public/unit-frames/blok-a/ezgif-frame-022.jpg
new file mode 100644
index 0000000..e3b2c1b
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-022.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-023.jpg b/public/unit-frames/blok-a/ezgif-frame-023.jpg
new file mode 100644
index 0000000..6840328
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-023.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-024.jpg b/public/unit-frames/blok-a/ezgif-frame-024.jpg
new file mode 100644
index 0000000..f2849b4
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-024.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-025.jpg b/public/unit-frames/blok-a/ezgif-frame-025.jpg
new file mode 100644
index 0000000..8f7c3b7
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-025.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-026.jpg b/public/unit-frames/blok-a/ezgif-frame-026.jpg
new file mode 100644
index 0000000..b43ccb2
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-026.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-027.jpg b/public/unit-frames/blok-a/ezgif-frame-027.jpg
new file mode 100644
index 0000000..88c9046
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-027.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-028.jpg b/public/unit-frames/blok-a/ezgif-frame-028.jpg
new file mode 100644
index 0000000..411ebc7
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-028.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-029.jpg b/public/unit-frames/blok-a/ezgif-frame-029.jpg
new file mode 100644
index 0000000..716bbc6
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-029.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-030.jpg b/public/unit-frames/blok-a/ezgif-frame-030.jpg
new file mode 100644
index 0000000..cc0632b
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-030.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-031.jpg b/public/unit-frames/blok-a/ezgif-frame-031.jpg
new file mode 100644
index 0000000..67d9eae
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-031.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-032.jpg b/public/unit-frames/blok-a/ezgif-frame-032.jpg
new file mode 100644
index 0000000..fc7c625
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-032.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-033.jpg b/public/unit-frames/blok-a/ezgif-frame-033.jpg
new file mode 100644
index 0000000..397831f
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-033.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-034.jpg b/public/unit-frames/blok-a/ezgif-frame-034.jpg
new file mode 100644
index 0000000..370b226
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-034.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-035.jpg b/public/unit-frames/blok-a/ezgif-frame-035.jpg
new file mode 100644
index 0000000..f14bc0b
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-035.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-036.jpg b/public/unit-frames/blok-a/ezgif-frame-036.jpg
new file mode 100644
index 0000000..252abe1
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-036.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-037.jpg b/public/unit-frames/blok-a/ezgif-frame-037.jpg
new file mode 100644
index 0000000..6216c2b
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-037.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-038.jpg b/public/unit-frames/blok-a/ezgif-frame-038.jpg
new file mode 100644
index 0000000..682cf86
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-038.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-039.jpg b/public/unit-frames/blok-a/ezgif-frame-039.jpg
new file mode 100644
index 0000000..a3c3d00
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-039.jpg differ
diff --git a/public/unit-frames/blok-a/ezgif-frame-040.jpg b/public/unit-frames/blok-a/ezgif-frame-040.jpg
new file mode 100644
index 0000000..79e1391
Binary files /dev/null and b/public/unit-frames/blok-a/ezgif-frame-040.jpg differ