// artistic-graphics.jsx — decorative artistic layers for Delta V landing
// Exports to window: Constellation, OrbitalDiagram, GhostNumeral, CornerFrame, AsciiPanel, GridField
(function () {
const { useEffect, useRef, useState } = React;
// ─── Constellation: animated node + edge network ───────────
// Draws on a canvas behind a section. Nodes drift slowly, connected
// by hairlines where they're close enough. Accent-colored.
function Constellation({
density = 0.00009, // nodes per px^2
maxLink = 160, // max distance for a link, px
speed = 0.08, // base drift speed
className = '',
opacity = 0.55,
}) {
const wrapRef = useRef(null);
const canvasRef = useRef(null);
const nodesRef = useRef([]);
const rafRef = useRef(0);
const activeRef = useRef(false);
useEffect(() => {
const wrap = wrapRef.current, canvas = canvasRef.current;
if (!wrap || !canvas) return;
const ctx = canvas.getContext('2d');
let w = 0, h = 0, dpr = Math.min(window.devicePixelRatio || 1, 2);
const getAccent = () => {
const s = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim();
return s || 'oklch(0.82 0.14 220)';
};
const resize = () => {
const r = wrap.getBoundingClientRect();
w = Math.max(1, r.width); h = Math.max(1, r.height);
canvas.width = Math.floor(w * dpr);
canvas.height = Math.floor(h * dpr);
canvas.style.width = w + 'px'; canvas.style.height = h + 'px';
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
// rebuild nodes based on area
const target = Math.max(16, Math.min(140, Math.round(w * h * density)));
const nodes = nodesRef.current;
if (nodes.length < target) {
for (let i = nodes.length; i < target; i++) {
nodes.push({
x: Math.random() * w, y: Math.random() * h,
vx: (Math.random() - 0.5) * speed,
vy: (Math.random() - 0.5) * speed,
r: 0.8 + Math.random() * 1.4,
});
}
} else if (nodes.length > target) {
nodes.length = target;
} else {
// wrap existing nodes inside new bounds
for (const n of nodes) {
if (n.x > w) n.x = Math.random() * w;
if (n.y > h) n.y = Math.random() * h;
}
}
};
const draw = () => {
if (!activeRef.current) { rafRef.current = requestAnimationFrame(draw); return; }
ctx.clearRect(0, 0, w, h);
const accent = getAccent();
const nodes = nodesRef.current;
for (const n of nodes) {
n.x += n.vx; n.y += n.vy;
if (n.x < 0) n.x = w; else if (n.x > w) n.x = 0;
if (n.y < 0) n.y = h; else if (n.y > h) n.y = 0;
}
// links
ctx.lineWidth = 0.6;
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
const a = nodes[i], b = nodes[j];
const dx = a.x - b.x, dy = a.y - b.y;
const d = Math.hypot(dx, dy);
if (d < maxLink) {
const alpha = (1 - d / maxLink) * 0.35;
ctx.strokeStyle = `color-mix(in oklch, ${accent} ${Math.round(alpha * 100)}%, transparent)`;
ctx.beginPath();
ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y);
ctx.stroke();
}
}
}
// nodes
for (const n of nodes) {
ctx.fillStyle = accent;
ctx.globalAlpha = 0.9;
ctx.beginPath();
ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
ctx.fill();
}
ctx.globalAlpha = 1;
rafRef.current = requestAnimationFrame(draw);
};
resize();
const ro = new ResizeObserver(resize);
ro.observe(wrap);
const io = new IntersectionObserver(([e]) => { activeRef.current = e.isIntersecting; }, { threshold: 0 });
io.observe(wrap);
rafRef.current = requestAnimationFrame(draw);
return () => {
cancelAnimationFrame(rafRef.current);
ro.disconnect(); io.disconnect();
};
}, [density, maxLink, speed]);
return (
);
}
// ─── OrbitalDiagram: rotating ring set ─────────────────────
function OrbitalDiagram({ size = 520, className = '', style = {} }) {
return (
{/* Ring 1 — tight circle with dashes */}
{/* Ring 2 — tilted ellipse */}
{/* Ring 3 — large outer circle */}
{/* tick marks at cardinal points on outer ring */}
{/* mono annotations */}
N · ∆V
S · 02
W
E
{/* center mark */}
);
}
// ─── GhostNumeral: huge outlined display numeral, parallaxed ──
function GhostNumeral({ children, style = {}, className = '' }) {
const ref = useRef(null);
const [y, setY] = useState(0);
useEffect(() => {
const onScroll = () => {
const el = ref.current; if (!el) return;
const r = el.getBoundingClientRect();
const vh = window.innerHeight;
const center = r.top + r.height / 2;
const delta = (center - vh / 2) / vh; // -1..1
setY(delta * -40); // move up as we scroll past
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
{children}
);
}
// ─── CornerFrame: technical-drawing crosshair markers ──────
function CornerFrame({ label = '', children, className = '' }) {
return (
{label} : null}
{children}
);
}
// ─── AsciiPanel: monospace block with mark ─────────────────
const ASCII_BLOCK = String.raw`
┌──────────────────────────────┐
│ ∆V · SIGNAL → NOISE │
│ ──────────────── │
│ decentralize · self-host │
│ verify · don't trust │
│ operate · iterate · ship │
└──────────────────────────────┘
╲ ╱
╲ ╱
╲ ╱
╲ ╱
╲╱
∆V
`;
function AsciiPanel({ className = '' }) {
return (
{ASCII_BLOCK}
);
}
// ─── GridField: subtle dotted-grid background with vignette ──
function GridField({ className = '', opacity = 0.5 }) {
return (
);
}
// ─── CoordTag: tiny "lat/long"-style section label chip ────
function CoordTag({ n, label, style = {} }) {
return (
{n}
{label}
);
}
// ─── StatsBar: editorial KPIs band ─────────────────────────
const STATS = [
{ k: '04', v: 'Disciplines' },
{ k: '100%', v: 'Self-ownership' },
{ k: '∞', v: 'Iteration' },
{ k: 'E2E', v: 'Encrypted by default' },
];
function StatsBar() {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setSeen(true); io.disconnect(); }
}, { rootMargin: '-10% 0px -10% 0px' });
io.observe(el);
return () => io.disconnect();
}, []);
return (
{STATS.map((s, i) => (
{s.k}
{s.v}
))}
{children}
);
}
// ─── FloatingMarks: cluster of tiny mono tags that parallax differently ──
// Each mark has its own speed multiplier to create depth.
function FloatingMarks({ marks = [] }) {
return (
{marks.map((m, i) => (
{m.kind === 'cross' ? {m.text} }
))}
);
}
function RingMark({ size = 22 }) {
return (
);
}
function DashMark({ length = 40 }) {
return (
);
}
// ─── VerticalRule: thin vertical line that draws in as you scroll ───
function VerticalRule({ side = 'left', offset = 24 }) {
const ref = useRef(null);
const [p, setP] = useState(0);
useEffect(() => {
const el = ref.current; if (!el) return;
const measure = () => {
const r = el.getBoundingClientRect();
const vh = window.innerHeight;
const raw = (vh - r.top) / (vh + r.height);
setP(Math.max(0, Math.min(1, raw)));
};
window.addEventListener('scroll', measure, { passive: true });
window.addEventListener('resize', measure);
measure();
return () => { window.removeEventListener('scroll', measure); window.removeEventListener('resize', measure); };
}, []);
const style = {
position: 'absolute',
[side]: offset,
top: 0, bottom: 0, width: 1,
pointerEvents: 'none', zIndex: 0,
overflow: 'hidden',
};
return (
);
}
// ─── FloatingGlyph: a single parallaxing glyph anchored by CSS ─────
function FloatingGlyph({ kind = 'delta', size = 80, style = {}, speed = 0.2 }) {
const ref = useRef(null);
const shift = useScrollShift(ref, { speed });
const glyph = {
delta:
{glyph}
);
}
// ─── NoiseFrame: hairline border with subtle noise, for section edges ──
function SectionEdge({ position = 'top' }) {
return (
);
}
Object.assign(window, {
Constellation, OrbitalDiagram, GhostNumeral, CornerFrame, AsciiPanel, GridField, CoordTag, StatsBar,
DriftLayer, FloatingMarks, VerticalRule, FloatingGlyph, SectionEdge, useScrollShift,
});
})();