// line.jsx — atmospheric line decorator
// Substitute for the WebGL line in the real site. SVG path with
// gaussian-blur "bloom" filter. Three flavors:
// — follows cursor with smooth lag (or static)
// — branched threads for Cases block
// — radiate outward for the final CTA
// — ambient curves spanning the whole page
// (rendered only when presence = "everywhere")
const { useEffect, useRef, useState } = React;
function HeroLine({ presence = "pulse" }) {
const ref = useRef(null);
useEffect(() => {
// Static sweeping curve — no longer follows the cursor.
const draw = () => {
if (!ref.current) return;
const cx = window.innerWidth / 2;
const cy = window.innerHeight / 2;
ref.current.setAttribute(
"d",
`M ${cx - 600} ${cy - 320} C ${cx - 280} ${cy - 80}, ${cx + 280} ${cy + 80}, ${cx + 600} ${cy + 320}`
);
};
draw();
window.addEventListener("resize", draw);
return () => window.removeEventListener("resize", draw);
}, [presence]);
return (
);
}
// HeroLines — a "scene" of decorative lines composed inside the hero only.
// Three styles, swappable from Tweaks. Designed to land at the bottom-center
// of the hero so the SiteLine in About picks them up.
function HeroLines({ style = "trail" }) {
if (style === "off") return null;
// "trail" — single sweeping S-curve plus a faint twin behind it (current vibe)
if (style === "trail") {
return (
);
}
// "descend" — 3 curves descending from top edge, converging at x=600 bottom,
// i.e. the start of the SiteLine. Reads as the line "appearing from above".
// Base paths stay solid; a comet pulse rides each path.
if (style === "descend") {
const D1 = "M 200 -10 C 240 200, 420 460, 600 800";
const D2 = "M 800 -10 C 760 220, 700 480, 600 800";
const D3 = "M 1100 -10 C 1000 240, 800 500, 600 800";
return (
);
}
// "orbit" — elliptical loop around the logo + tail exiting bottom-center
if (style === "orbit") {
return (
);
}
// "weave" — 3 horizontal-ish wavy lines weaving across the hero
if (style === "weave") {
return (
);
}
return null;
}
// CursorGlow — a soft purple drop that follows the cursor with lag.
// Brighter in the hero, dimmer everywhere else (CSS handles dim via
// the .cursor-glow.outside class toggled below).
function CursorGlow() {
const ref = useRef(null);
const pos = useRef({ x: -200, y: -200 });
const target = useRef({ x: -200, y: -200 });
const visible = useRef(false);
useEffect(() => {
const onMove = (e) => {
target.current.x = e.clientX;
target.current.y = e.clientY;
if (!visible.current) {
pos.current.x = e.clientX;
pos.current.y = e.clientY;
visible.current = true;
}
// Detect whether we're inside hero (in viewport coords — covers
// "hero scrolled away" without measuring layout).
const hero = document.getElementById("hero");
let inHero = false;
if (hero) {
const r = hero.getBoundingClientRect();
inHero = e.clientY >= r.top && e.clientY <= r.bottom;
}
if (ref.current) {
ref.current.classList.toggle("in-hero", inHero);
ref.current.classList.toggle("outside", !inHero);
}
};
const onLeave = () => {
if (ref.current) ref.current.classList.add("is-hidden");
};
const onEnter = () => {
if (ref.current) ref.current.classList.remove("is-hidden");
};
window.addEventListener("mousemove", onMove);
document.addEventListener("mouseleave", onLeave);
document.addEventListener("mouseenter", onEnter);
let raf;
const tick = () => {
pos.current.x += (target.current.x - pos.current.x) * 0.12;
pos.current.y += (target.current.y - pos.current.y) * 0.12;
if (ref.current) {
ref.current.style.transform =
`translate3d(${pos.current.x}px, ${pos.current.y}px, 0) translate(-50%, -50%)`;
}
raf = requestAnimationFrame(tick);
};
tick();
return () => {
cancelAnimationFrame(raf);
window.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseleave", onLeave);
document.removeEventListener("mouseenter", onEnter);
};
}, []);
return ;
}
// Ambient lines that bleed through the whole page — for presence "everywhere"
function AmbientLines() {
return (
);
}
// Branching diagram, used inside the Cases block.
// columns: 3 per row, 2 rows → 6 verticals
function BranchSvg() {
return (
);
}
function FinalLines() {
return (
);
}
// SiteLine — vertical wavy line that draws progressively as you scroll
// past the hero. Spans from just-below-hero to the bottom of the page.
function SiteLine() {
const pathRef = useRef(null);
const twinRef = useRef(null);
const [bounds, setBounds] = useState({ top: 0, height: 600 });
const [pathLen, setPathLen] = useState(0);
const [twinLen, setTwinLen] = useState(0);
const [drawn, setDrawn] = useState(0);
const [twinDrawn, setTwinDrawn] = useState(0);
const [maskCss, setMaskCss] = useState(null);
const [casesRange, setCasesRange] = useState(null);
useEffect(() => {
const measure = () => {
const heroH = window.innerHeight;
const total = document.body.scrollHeight;
const newBounds = { top: heroH, height: Math.max(total - heroH, 600) };
setBounds(newBounds);
const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;
const measureSec = (id) => {
const el = document.getElementById(id);
if (!el) return null;
const r = el.getBoundingClientRect();
return {
y1: r.top + scrollY - newBounds.top,
y2: r.top + scrollY - newBounds.top + r.height,
};
};
const cR = measureSec("cases");
const wR = measureSec("why");
setCasesRange(cR);
// Fade-out mask: the line goes opaque from top until the start of
// the Why Traffy block, then fades to fully transparent over ~200px.
if (wR && newBounds.height > 0) {
const fadeStart = (wR.y1 / newBounds.height) * 100;
const fadeEnd = Math.min(100, ((wR.y1 + 220) / newBounds.height) * 100);
const mask = `linear-gradient(180deg, black 0%, black ${Math.max(0, fadeStart - 1)}%, transparent ${fadeEnd}%, transparent 100%)`;
setMaskCss(mask);
} else {
setMaskCss(null);
}
};
measure();
const ro = new ResizeObserver(measure);
ro.observe(document.body);
window.addEventListener("resize", measure);
const t1 = setTimeout(measure, 400);
const t2 = setTimeout(measure, 1500);
return () => {
ro.disconnect();
window.removeEventListener("resize", measure);
clearTimeout(t1); clearTimeout(t2);
};
}, []);
// Re-measure path lengths when geometry changes
useEffect(() => {
if (pathRef.current) setPathLen(pathRef.current.getTotalLength());
if (twinRef.current) setTwinLen(twinRef.current.getTotalLength());
else setTwinLen(0);
}, [bounds.height, casesRange]);
// Scroll progress
useEffect(() => {
let raf;
const onScroll = () => {
const start = bounds.top * 0.5;
const end = bounds.top + bounds.height * 0.92;
const cur = window.scrollY + window.innerHeight * 0.55;
const frac = Math.max(0, Math.min(1, (cur - start) / (end - start)));
const eased = 1 - Math.pow(1 - frac, 2.2);
setDrawn(eased);
// Twin progress tied to scroll through Cases: draws as user scrolls.
if (casesRange) {
const cTop = bounds.top + casesRange.y1;
const cBot = bounds.top + casesRange.y2;
const cFrac = Math.max(0, Math.min(1, (cur - cTop) / Math.max(1, cBot - cTop)));
const cEased = 1 - Math.pow(1 - cFrac, 2);
setTwinDrawn(cEased);
}
};
const scheduled = () => { if (!raf) raf = requestAnimationFrame(() => { raf = null; onScroll(); }); };
onScroll();
window.addEventListener("scroll", scheduled, { passive: true });
return () => { window.removeEventListener("scroll", scheduled); if (raf) cancelAnimationFrame(raf); };
}, [bounds, casesRange]);
// Main path — starts at x=600 (where hero lines converge), waves through
// sections, returns to center axis from cases onward.
const path = React.useMemo(() => {
const segs = 8;
const h = bounds.height;
const yStep = h / segs;
// 0 1 2 3 4 5 6 7 8
// about services more creat cases why ctct end
const xs = [600, 400, 860, 320, 760, 600, 600, 600, 600];
let d = `M ${xs[0]} 0`;
for (let i = 1; i <= segs; i++) {
const x1 = xs[i] ?? 600;
const x0 = xs[i - 1] ?? 600;
const y0 = (i - 1) * yStep;
const y1 = i * yStep;
const cy0 = y0 + yStep * 0.35;
const cy1 = y1 - yStep * 0.35;
d += ` C ${x0} ${cy0}, ${x1} ${cy1}, ${x1} ${y1}`;
}
return d;
}, [bounds.height]);
// Single-thread path: the line no longer splits through Cases. Twin path
// disabled so only the main wave runs the full height.
const twinPath = null;
const offset = pathLen > 0 ? pathLen * (1 - drawn) : 0;
const twinOffset = twinLen > 0 ? twinLen * (1 - twinDrawn) : 0;
return (
);
}
Object.assign(window, { HeroLine, HeroLines, BranchSvg, FinalLines, AmbientLines, SiteLine, CursorGlow });