// Animated centerpiece compositions. Each variant returns an SVG.
// All variants live inside a 1000x1000 viewBox; the page scales them.
const C = 500; // center
// ────────────────────────────────────────────────────────────────────
// ORBITAL — concentric rotating arcs + tick marks + iridescent core
// ────────────────────────────────────────────────────────────────────
function Orbital({ speed = 1, accent = 'iridescent' }) {
// Tick generator
const ticks = (r, count, len) => {
const arr = [];
for (let i = 0; i < count; i++) {
const a = (i / count) * Math.PI * 2;
const x1 = C + Math.cos(a) * r;
const y1 = C + Math.sin(a) * r;
const x2 = C + Math.cos(a) * (r + len);
const y2 = C + Math.sin(a) * (r + len);
arr.push();
}
return arr;
};
// Dashed arc segment
const arc = (r, sweep, rot) => {
const a0 = (rot * Math.PI) / 180;
const a1 = a0 + (sweep * Math.PI) / 180;
const x0 = C + Math.cos(a0) * r;
const y0 = C + Math.sin(a0) * r;
const x1 = C + Math.cos(a1) * r;
const y1 = C + Math.sin(a1) * r;
const large = sweep > 180 ? 1 : 0;
return `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1}`;
};
return (
);
}
// ────────────────────────────────────────────────────────────────────
// PRISM — overlapping iridescent discs with screen blending
// ────────────────────────────────────────────────────────────────────
function Prism({ speed = 1 }) {
return (
);
}
// ────────────────────────────────────────────────────────────────────
// LATTICE — wireframe icosahedron-ish, slow rotation
// ────────────────────────────────────────────────────────────────────
function Lattice({ speed = 1 }) {
// Build icosahedron vertices in 3D, project orthographically with a y-rot driven by time
const phi = (1 + Math.sqrt(5)) / 2;
const r = 280;
const verts = [
[-1, phi, 0], [1, phi, 0], [-1, -phi, 0], [1, -phi, 0],
[0, -1, phi], [0, 1, phi], [0, -1, -phi], [0, 1, -phi],
[ phi, 0, -1], [ phi, 0, 1], [-phi, 0, -1], [-phi, 0, 1],
];
const edges = [
[0,1],[0,5],[0,7],[0,10],[0,11],
[1,5],[1,7],[1,8],[1,9],
[2,3],[2,4],[2,6],[2,10],[2,11],
[3,4],[3,6],[3,8],[3,9],
[4,5],[4,9],[4,11],
[5,9],[5,11],
[6,7],[6,8],[6,10],
[7,8],[7,10],
[8,9],
[10,11],
];
const [t, setT] = React.useState(0);
React.useEffect(() => {
let raf;
const start = performance.now();
const loop = (now) => {
setT((now - start) / 1000);
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, []);
const ay = t * 0.18 * speed;
const ax = t * 0.11 * speed + 0.4;
const project = ([x, y, z]) => {
// rotate around Y
let x2 = x * Math.cos(ay) - z * Math.sin(ay);
let z2 = x * Math.sin(ay) + z * Math.cos(ay);
// rotate around X
let y3 = y * Math.cos(ax) - z2 * Math.sin(ax);
let z3 = y * Math.sin(ax) + z2 * Math.cos(ax);
return [C + x2 * r * 0.4, C + y3 * r * 0.4, z3];
};
const projected = verts.map(project);
return (
);
}
// ────────────────────────────────────────────────────────────────────
// RIBBON — parallel curved bands sweeping
// ────────────────────────────────────────────────────────────────────
function Ribbon({ speed = 1 }) {
const lines = 28;
return (
);
}
window.Orbital = Orbital;
window.Prism = Prism;
window.Lattice = Lattice;
window.Ribbon = Ribbon;