/* ===================================================================
GLOBALSTAFF — Hero
Right side: an architectural blueprint of a stone wall that draws
itself, then transforms into a finished stone installation.
Narrative: Concept → Planning → Execution → Result.
=================================================================== */
/* deterministic coursed-ashlar block layout (no photography) */
const STONE_WALL = (() => {
// pseudo-random with fixed seed for stable layout
let s = 20260612;
const rnd = () => {
s = (s * 1664525 + 1013904223) % 4294967296;
return s / 4294967296;
};
const X0 = 36, X1 = 524, Y0 = 60, Y1 = 540;
const tones = ["#D9D2C5", "#CFC6B6", "#E1DBCF", "#C9C0AF", "#D4CCBD", "#DED8CA", "#C5BCAB", "#D0C8B8"];
const rows = [];
let y = Y0;
let r = 0;
while (y < Y1 - 20) {
const h = 44 + Math.round(rnd() * 30);
const hh = Math.min(h, Y1 - y);
// split row into blocks
const blocks = [];
let x = X0;
// offset start so courses break joints
while (x < X1 - 20) {
let w = 70 + Math.round(rnd() * 90);
if (x + w > X1) w = X1 - x;
blocks.push({ x, y, w, h: hh, tone: tones[(r + blocks.length) % tones.length] });
x += w;
}
rows.push(blocks);
y += hh;
r++;
}
return rows.flat();
})();
function HeroStone() {
// 0 board · 1 blueprint lines · 2 block outlines · 3 material · 4 finished
const [phase, setPhase] = useState(0);
const wrapRef = useRef(null);
useEffect(() => {
let timers = [];
const run = () => {
timers.forEach(clearTimeout);
timers = [];
setPhase(0);
timers.push(setTimeout(() => setPhase(1), 1100));
timers.push(setTimeout(() => setPhase(2), 2900));
timers.push(setTimeout(() => setPhase(3), 4700));
timers.push(setTimeout(() => setPhase(4), 6500));
};
let started = false;
const begin = () => { if (started) return; started = true; run(); };
const unsub = watchInView(wrapRef.current, begin, 0.2);
timers.push(setTimeout(begin, 600));
const loop = setInterval(() => { run(); }, 16000);
return () => { timers.forEach(clearTimeout); clearInterval(loop); if (unsub) unsub(); };
}, []);
const STAGES = ["Drawing board", "Blueprint", "Stone layout", "Material", "Finished"];
// course separators (horizontal) for the planning stage
const courseYs = [...new Set(STONE_WALL.map((b) => b.y))].filter((y) => y > 60);
return (
{/* stage indicator */}
{STAGES.map((st, i) => (
= i ? " on" : "") + (phase === i ? " cur" : "")}>
{st}
))}
);
}
function Hero() {
return (
Natural stone · Facades · Masonry
Architectural stone, built with engineering precision
GlobalStaff designs and installs natural stone, facade cladding and masonry across
Estonia and the Baltics — carrying every project from technical drawing to finished surface.