0{activeIdx + 1} {Array.from({ length: count }).map((_, i) => (

))} 06

); /* ─── Main section ─── */ const HelixSection = () => { const trackRef = useRef(null); const sceneRef = useRef(null); const cardRefs = useRef([]); const progressRef = useRef(0); const [activeIdx, setActiveIdx] = useState(0); const RADIUS = 460; const Y_RANGE = 220; const ROT_RANGE = 300; // 5 * 60deg useEffect(() => { let rafId = null; const apply = () => { rafId = null; const p = progressRef.current; if (sceneRef.current) { // No CSS transition on this transform — rotation tracks scroll 1:1 sceneRef.current.style.transform = `translateY(${(-p * Y_RANGE).toFixed(2)}px) rotateY(${(-p * ROT_RANGE).toFixed(2)}deg)`; } // Per-card opacity based on continuous distance from active const refs = cardRefs.current; for (let i = 0; i < refs.length; i++) { const el = refs[i]; if (!el) continue; const tCard = i / 5; const dist = Math.abs(p - tCard); const op = Math.max(0.08, 1 - dist * 4.5); el.style.opacity = op.toFixed(3); } const newActive = Math.min(5, Math.max(0, Math.round(p * 5))); setActiveIdx((prev) => (prev !== newActive ? newActive : prev)); }; const onScroll = () => { if (!trackRef.current) return; const rect = trackRef.current.getBoundingClientRect(); const progress = Math.max(0, Math.min(1, -rect.top / (trackRef.current.offsetHeight - window.innerHeight))); progressRef.current = progress; // Only schedule one rAF per frame; latest progress is read inside the callback if (rafId === null) { rafId = requestAnimationFrame(apply); } }; onScroll(); apply(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { if (rafId !== null) cancelAnimationFrame(rafId); window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, []); /* Spiral dashes — two strands (DNA feel) */ const strands = useMemo(() => { const N = 44; const A = [], B = []; for (let i = 0; i < N; i++) { const t = (i - 14) / (N - 28); // extend beyond card range so spiral fades at edges const y = t * Y_RANGE; const angle = t * ROT_RANGE; const fade = Math.max(0, 1 - Math.pow(Math.abs(t - 0.5) * 1.7, 2)); A.push({ y, angle, fade, i }); B.push({ y, angle: angle + 180, fade, i }); } return { A, B }; }, []); /* Floating particles — capped at 6 to avoid frame drops */ const particles = useMemo(() => { const arr = []; for (let i = 0; i < 6; i++) { arr.push({ x: 12 + Math.random() * 76, y: 10 + Math.random() * 80, size: 1.5 + Math.random() * 2, opacity: 0.12 + Math.random() * 0.28, delay: -Math.random() * 12, duration: 10 + Math.random() * 8, drift: (Math.random() - 0.5) * 30, }); } return arr; }, []); return (

{/* Vignette / center glow */}

{/* Vertical band lines */}

{/* Top / bottom fades into surrounding sections */}

{/* Particles */}

{particles.map((p, i) => (

))}

{/* Ghost text (active title, very faint) */}

{BENEFITS.map((b, i) => (

{b.title}

))}

{/* Section labels */}

[02·H] Šesť dôvodov — Helix view

Scroll-driven · 60fps

{/* Title intro (top-left, fades after start) */}

0 ? 1 : 0), transition: "opacity 600ms", }}>

Šesť dôvodov,
prečo si nás vybrať.

{/* 3D scene */}

{/* Helix strand A (orange) */} {strands.A.map((d) => (

))} {/* Helix strand B (white/dim) */} {strands.B.map((d) => (

))} {/* Cards */} {BENEFITS.map((b, i) => { const t = i / 5; const cardY = t * Y_RANGE; const cardAngle = t * ROT_RANGE; return (

(cardRefs.current[i] = el)} style={{ position: "absolute", left: -220, top: -150, width: 440, height: 300, transformStyle: "preserve-3d", backfaceVisibility: "hidden", WebkitBackfaceVisibility: "hidden", willChange: "transform, opacity", transform: `translateY(${cardY}px) rotateY(${cardAngle}deg) translateZ(${RADIUS}px)`, }}>

); })}

{/* Progress dots */}

); }; Object.assign(window, { HelixSection });

{benefit.title}

Šesť dôvodov, prečo si nás vybrať.

Šesť dôvodov,
prečo si nás vybrať.