ayrisdev/vesta
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: hotspots with animated line+arrow+card, always visible on last frame

Browse Source
This commit is contained in:
ayrisdev
2026-07-30 13:20:40 +03:00
parent 5aabd1eedc
commit bc234b4400
1 changed files with 66 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/sections/CloudRevealSection.tsx
+66 -70
View File
@@ -242,36 +242,18 @@ export default function CloudRevealSection() {
// ─── Hotspot bileşeni ────────────────────────────────────────────────────────
const HOTSPOTS = [
{
id: 'blok-a',
label: '2+1 Daire',
sub: 'Blok A · 89 m²',
// Ekranın yüzde konumu (sol-üst köşeden)
x: 34,
y: 22,
},
{
id: 'blok-b',
label: '2+1 Daire',
sub: 'Blok B · 84 m²',
x: 70,
y: 19,
},
{
id: 'blok-c',
label: '1+1 Daire',
sub: 'Blok C · 60 m²',
x: 50,
y: 55,
},
{
id: 'blok-d',
label: '1+1 Daire',
sub: 'Blok D · 47 m²',
x: 20,
y: 65,
},
const HOTSPOTS: {
id: string
label: string
sub: string
x: number // dot pozisyonu — ekranın % yatay
y: number // dot pozisyonu — ekranın % dikey
dir: 'left' | 'right' // kartın hangi tarafa uzayacağı
}[] = [
{ id: 'blok-a', label: '2+1 Daire', sub: 'Blok A · 89 m²', x: 34, y: 22, dir: 'left' },
{ id: 'blok-b', label: '2+1 Daire', sub: 'Blok B · 84 m²', x: 70, y: 19, dir: 'right' },
{ id: 'blok-c', label: '1+1 Daire', sub: 'Blok C · 60 m²', x: 50, y: 55, dir: 'right' },
{ id: 'blok-d', label: '1+1 Daire', sub: 'Blok D · 47 m²', x: 20, y: 65, dir: 'left' },
]
function UnitHotspots({
@@ -279,58 +261,72 @@ function UnitHotspots({
}: {
scrollYProgress: ReturnType<typeof useScroll>['scrollYProgress']
}) {
const opacity = useTransform(scrollYProgress, [0.92, 0.98], [0, 1])
const containerOpacity = useTransform(scrollYProgress, [0.92, 0.98], [0, 1])
return (
<motion.div
style={{ opacity }}
style={{ opacity: containerOpacity }}
className="absolute inset-0 z-20 pointer-events-none"
>
{HOTSPOTS.map((spot, i) => (
<motion.button
<div
key={spot.id}
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ delay: i * 0.15, duration: 0.4, ease: 'easeOut' }}
className="absolute pointer-events-auto group"
className="absolute"
style={{ left: `${spot.x}%`, top: `${spot.y}%` }}
onClick={() => {
// İleride: daire içi frame animasyonunu tetikle
console.log('clicked:', spot.id)
}}
>
{/* Pulsing dot */}
<span className="relative flex h-4 w-4 -translate-x-1/2 -translate-y-1/2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-60" />
<span className="relative inline-flex rounded-full h-4 w-4 bg-white shadow-lg" />
</span>
{/* Dot + çizgi + kart — yatay flex */}
<div className={`flex items-center gap-0 ${spot.dir === 'left' ? 'flex-row-reverse' : 'flex-row'}`}>
{/* Label kartı — hover'da görünür, mobilde her zaman */}
<div className="absolute left-5 -top-8 min-w-max bg-black/70 backdrop-blur-sm border border-white/20 rounded-xl px-3 py-2 text-left opacity-0 group-hover:opacity-100 transition-opacity duration-200 md:opacity-0 max-md:opacity-100 pointer-events-none">
{/* Animated ok çizgisi */}
<svg
className="absolute -left-5 top-1/2 -translate-y-1/2"
width="20" height="2"
viewBox="0 0 20 2"
{/* Pulsing dot */}
<span className="relative flex h-3 w-3 shrink-0">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-70" />
<span className="relative inline-flex rounded-full h-3 w-3 bg-white" />
</span>
{/* Animated çizgi */}
<motion.div
className="h-px bg-white/60 shrink-0"
initial={{ width: 0 }}
animate={{ width: 48 }}
transition={{ delay: i * 0.2 + 0.1, duration: 0.4, ease: 'easeOut' }}
/>
{/* Ok ucu */}
<motion.div
initial={{ opacity: 0, x: spot.dir === 'right' ? -4 : 4 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: i * 0.2 + 0.4, duration: 0.2 }}
className="shrink-0 text-white/60"
>
<motion.line
x1="0" y1="1" x2="20" y2="1"
stroke="white" strokeWidth="1" strokeOpacity="0.6"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ delay: i * 0.15 + 0.3, duration: 0.4 }}
/>
</svg>
<p className="text-white text-xs font-medium tracking-wide">{spot.label}</p>
<p className="text-white/50 text-[10px] mt-0.5">{spot.sub}</p>
<div className="mt-1.5 flex items-center gap-1 text-white/60 text-[10px] tracking-widest uppercase">
<span>Detaylar</span>
<svg width="8" height="8" viewBox="0 0 8 8" fill="none">
<path d="M1 4h6M4 1l3 3-3 3" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
</svg>
</div>
{spot.dir === 'right'
? <svg width="6" height="8" viewBox="0 0 6 8" fill="none"><path d="M1 1l4 3-4 3" stroke="white" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
: <svg width="6" height="8" viewBox="0 0 6 8" fill="none"><path d="M5 1L1 4l4 3" stroke="white" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
}
</motion.div>
{/* Kart */}
<motion.button
initial={{ opacity: 0, x: spot.dir === 'right' ? -8 : 8 }}
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)
}}
>
<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>
<div className="mt-1.5 flex items-center gap-1 text-white/40 text-[10px] tracking-widest uppercase">
<span>İncele</span>
<svg width="8" height="8" viewBox="0 0 8 8" fill="none">
<path d="M1 4h6M4 1l3 3-3 3" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
</svg>
</div>
</motion.button>
</div>
</motion.button>
</div>
))}
</motion.div>
)