// Dalflow — abstract art components (flow / orbit / lattice / pulse / mesh)
// Each renders into a full-bleed slot with positioned art.
const { useEffect, useRef, useState } = React;
// ===== Logo mark =====
function LogoMark({ size = 22 }) {
return (
);
}
// ===== Flow art: organic curves =====
function FlowArt({ seed = 0, hue = 'accent' }) {
// 5 flowing curves
const c = hue === 'warm' ? 'var(--warm)' : 'var(--accent)';
return (
);
}
// ===== Orbit art: concentric rings + nodes =====
function OrbitArt({ seed = 0 }) {
const c = 'var(--accent)';
return (
);
}
// ===== Lattice art: structured grid =====
function LatticeArt({ seed = 0 }) {
const c = 'var(--accent)';
const cells = [];
for (let r = 0; r < 10; r++) {
for (let col = 0; col < 8; col++) {
const fill = ((r * 7 + col * 3 + seed) % 11) < 2;
cells.push({ r, col, fill });
}
}
return (
);
}
// ===== Pulse art: radiating arcs =====
function PulseArt({ seed = 0 }) {
const c = 'var(--accent)';
return (
);
}
// ===== Mesh art: connected nodes (network graph) =====
function MeshArt({ seed = 0 }) {
const c = 'var(--accent)';
// Deterministic node positions
const nodes = [
{ x: 80, y: 100 }, { x: 200, y: 60 }, { x: 320, y: 130 },
{ x: 120, y: 220 }, { x: 230, y: 200 }, { x: 340, y: 260 },
{ x: 80, y: 340 }, { x: 200, y: 380 }, { x: 320, y: 420 },
];
const links = [[0,1],[1,2],[0,3],[1,3],[1,4],[2,5],[3,4],[4,5],[3,6],[4,7],[5,8],[6,7],[7,8]];
return (
);
}
// ===== Tape art: horizontal stacked tapes =====
function TapeArt({ seed = 0 }) {
const c = 'var(--accent)';
return (
);
}
// ===== Service icon (small inline) =====
function ServiceIcon({ kind, size = 28 }) {
const c = 'currentColor';
switch (kind) {
case 'agent':
return (
);
case 'auto':
return (
);
case 'strat':
return (
);
case 'integ':
return (
);
case 'dash':
return (
);
case 'partner':
return (
);
case 'email':
return (
);
case 'portal':
return (
);
// Why-card glyphs
case 'founder':
return (
);
case 'speed':
return (
);
case 'simple':
return (
);
case 'roi':
return (
);
default: return null;
}
}
// ===== Reveal hook (intersection observer) =====
function useReveal() {
const ref = useRef(null);
useEffect(() => {
if (!ref.current) return;
const el = ref.current;
const obs = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add('in');
obs.unobserve(e.target);
}
});
},
{ threshold: 0.15 }
);
obs.observe(el);
return () => obs.disconnect();
}, []);
return ref;
}
Object.assign(window, {
LogoMark,
FlowArt, OrbitArt, LatticeArt, PulseArt, MeshArt, TapeArt,
ServiceIcon,
useReveal,
});