// Direction 1 — Cinematic Monolith // Display serif (Fraunces) + clean sans (Inter). Charcoal base, deep teal accent, // large breathing room. The hero is a single monolithic word with a slow // flickering cursor; the icon mark drifts in space behind it. window.DirectionCinematic = function DirectionCinematic() { const [scrollY, setScrollY] = React.useState(0); const [winW, setWinW] = React.useState(window.innerWidth); const ref = React.useRef(null); const mobile = winW < 768; React.useEffect(() => { const onResize = () => setWinW(window.innerWidth); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); React.useEffect(() => { const el = ref.current; if (!el) return; const onScroll = () => setScrollY(el.scrollTop); el.addEventListener('scroll', onScroll, { passive: true }); return () => el.removeEventListener('scroll', onScroll); }, []); const C = window.SYNALITH_COPY; const teal = '#5FD4D9'; const tealDeep = '#1F8A92'; const orange = '#F17750'; const ink = '#0B0E10'; return (
{/* ─── Nav ─── */} {/* ─── Hero ─── */}
{/* Vector backdrop — atmospheric isometric geometry echoing the logo DNA */} {/* Atmospheric haze */}
Independent · Est. 2026

Worlds carved
from intention

{C.mission}

{/* Scroll cue */}
Scroll
{/* ─── About ─── */}
01 — Studio

We are a small studio. We mean to stay that way.

{C.about.map((p, i) =>

{p}

)}
{/* ─── Work / Coming Soon ─── */}
{/* Soft vector glow + drifting mark */}
{/* ─── Values ─── */}
03 — Philosophy

Three ideas we keep returning to.

{C.pillars.map((v) => (
{v.n}

{v.title}

{v.body}

))}
{/* ─── Footer ─── */}
); }; const navLinkStyle = { color: 'inherit', textDecoration: 'none', transition: 'color 0.2s', }; const sectionLabel = (teal) => ({ fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', color: teal, fontWeight: 500, paddingTop: 14, }); function ProjectCard({ p, i, teal, tealDeep }) { const [hover, setHover] = React.useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative', aspectRatio: '3 / 4', background: `linear-gradient(165deg, #11171a 0%, #0a0d0f 100%)`, border: '1px solid rgba(255,255,255,0.06)', padding: 32, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', overflow: 'hidden', cursor: 'pointer', transition: 'transform 0.6s cubic-bezier(0.2,0.7,0.2,1), border-color 0.3s', transform: hover ? 'translateY(-6px)' : 'translateY(0)', borderColor: hover ? `${teal}40` : 'rgba(255,255,255,0.06)', }}> {/* Procedural backdrop — different per card */}
Project
{p.id}
{p.tag}
{p.state} More soon →
); } function ProjectBackdrop({ seed, teal, tealDeep, hover }) { // Three different abstract treatments — same DNA, different geometry if (seed === 0) { return ( {Array.from({ length: 14 }).map((_, i) => ( ))} ); } if (seed === 1) { return ( {Array.from({ length: 6 }).map((_, i) => ( ))} ); } return ( {Array.from({ length: 30 }).map((_, i) => { const x = (i * 37) % 300; const y = (i * 53 + 50) % 400; return ; })} ); } // Scattered signal nodes around the isometric monument — core + 8 satellites const NODES = [ { x: 450, y: 405 }, // 0: core (matches anchor circle) { x: 180, y: 200 }, { x: 720, y: 180 }, { x: 760, y: 440 }, { x: 620, y: 680 }, { x: 280, y: 700 }, { x: 100, y: 480 }, { x: 340, y: 140 }, { x: 560, y: 120 }, ]; // ─── Hero backdrop — vector isometric geometry, no bitmap ─── function HeroBackdrop({ scrollY, teal, tealDeep, orange = '#F17750', mobile }) { // A loose abstract isometric monument: stacked prisms, drifting hex grid, // and a constellation of points. All vector, all crisp at any size. const py = scrollY * 0.18; const px = Math.sin(scrollY * 0.005) * 8; // ─── Random-walking satellite on the outer prism's edges ─── // The satellite slowly traverses the edges of the isometric wireframe, // picking a random adjacent vertex at each junction. const VERTS = React.useMemo(() => ([ { x: 450, y: 80 }, // 0 top { x: 760, y: 240 }, // 1 top-right { x: 760, y: 560 }, // 2 bottom-right { x: 450, y: 720 }, // 3 bottom { x: 140, y: 560 }, // 4 bottom-left { x: 140, y: 240 }, // 5 top-left { x: 450, y: 400 }, // 6 inner front corner ]), []); // Adjacency: hexagonal silhouette + 3 isometric inner edges const ADJ = React.useMemo(() => ([ [1, 5, 6], // 0 → TR, TL, inner [0, 2, 6], // 1 → top, BR, inner [1, 3], // 2 → TR, bottom [2, 4, 6], // 3 → BR, BL, inner (alternate inner edge for variety) [3, 5, 6], // 4 → bottom, TL, inner [0, 4], // 5 → top, BL [0, 1, 3, 4], // 6 → top, TR, bottom, BL ]), []); const satRef = React.useRef(null); React.useEffect(() => { const g = satRef.current; if (!g) return; const circles = g.querySelectorAll('circle'); let raf; let from = 0, to = ADJ[0][Math.floor(Math.random() * ADJ[0].length)]; let startedAt = performance.now(); const speedPxPerMs = 0.045; // slightly slower for smoother feel const dist = (a, b) => Math.hypot(b.x - a.x, b.y - a.y); let duration = dist(VERTS[from], VERTS[to]) / speedPxPerMs; let pauseUntil = 0; const pickNext = () => { const options = ADJ[to].filter(v => v !== from); const choices = options.length ? options : ADJ[to]; from = to; to = choices[Math.floor(Math.random() * choices.length)]; startedAt = performance.now(); duration = dist(VERTS[from], VERTS[to]) / speedPxPerMs; }; // Smooth ease — slow out of vertices, gentle cruise, slow into next const ease = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; const tick = (now) => { if (now < pauseUntil) { raf = requestAnimationFrame(tick); return; } const t = Math.min(1, (now - startedAt) / duration); const eased = ease(t); const a = VERTS[from], b = VERTS[to]; const x = a.x + (b.x - a.x) * eased; const y = a.y + (b.y - a.y) * eased; // Direct DOM update — no React re-render circles.forEach(c => { c.setAttribute('cx', x); c.setAttribute('cy', y); }); if (t >= 1) { pauseUntil = now + 200 + Math.random() * 600; // shorter pauses pickNext(); } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [VERTS, ADJ]); return (