// ФриТаун — sticky scroll scene: isometric 3D-style house that builds itself function ScrollScene() { const ref = React.useRef(null); const [progress, setProgress] = React.useState(0); React.useEffect(() => { const onScroll = () => { if (!ref.current) return; const rect = ref.current.getBoundingClientRect(); const total = Math.max(1, rect.height - window.innerHeight); const p = -rect.top / total; setProgress(Math.max(0, Math.min(1, p))); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); // Current step (0, 1, 2) const step = progress < 0.34 ? 0 : progress < 0.67 ? 1 : 2; const stepNums = ["01", "02", "03"]; const stepEyes = ["Шаг первый", "Шаг второй", "Шаг третий"]; // Subtle parallax — slight rotateZ + translateY for camera feel // (the SVG is isometric so it already looks 3D; we don't rotateY a flat plane) const rotZ = -2 + progress * 4; const translateY = -progress * 24; const scale = 0.94 + Math.sin(progress * Math.PI) * 0.08; // Construction milestones const plotMarks = true; const foundation = progress > 0.04; const wallsRise = progress > 0.14; const wallsDone = progress > 0.24; const roofFront = progress > 0.34; const roofSide = progress > 0.42; const chimney = progress > 0.52; const door = progress > 0.60; const winFront = progress > 0.66; const winSide = progress > 0.72; const winAttic = progress > 0.78; const lights = progress > 0.84; const smoke = progress > 0.90; return (

{/* LEFT TEXT */}

{stepEyes[step]}

От участка к проекту.

От проекта к стройке.

От стройки под ключ.

{/* RIGHT STAGE */}

14.2 × 9.8 м ↕ 6.4 м 4 спальни Сдан · 142-й

{/* SCROLL PROGRESS TRACK */}

Прокрутите вниз {Math.round(progress * 100).toString().padStart(2, "0")} / 100

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