{/* animated brand-gradient wash so the empty state still conveys motion */}
{fill ? (
/* full-bleed: hero copy sits over the center, so keep the empty-state
hint out of the way as a small bottom-right chip */
DROP A VIDEO
) : (
{label}
DROP A VIDEO TO PREVIEW
)}
)}
);
}
Object.assign(window, { Container, Section, Photo, GhostWord, Reveal, Marker, VideoSlot, ParticleText });
/* Speee-style particle hero on a light field: ambient dots drift across the
whole canvas while the centre pool assembles into each scene word, holds,
scatters, and reforms into the next — auto-cycling. Flame gold→red tint.
`onScene(i)` fires on each change so captions can sync. Static under
reduced-motion. */
function ParticleText({ scenes = ["TEN GROW"], interval = 3400, onScene, style }) {
const wrapRef = React.useRef(null);
const canvasRef = React.useRef(null);
const scenesRef = React.useRef(scenes);
scenesRef.current = scenes;
const cbRef = React.useRef(onScene);
cbRef.current = onScene;
React.useEffect(() => {
const wrap = wrapRef.current, canvas = canvasRef.current;
if (!wrap || !canvas) return;
const ctx = canvas.getContext("2d");
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
let W = 0, H = 0, core = [], ambient = [], raf = 0, t0 = performance.now();
let mouse = { x: -9999, y: -9999 }, sceneI = 0, lastSwitch = performance.now();
const lerpColor = (r, alpha = 1) => {
const a = [251, 166, 6], b = [236, 21, 11]; // gold → red (brand flame)
const c = a.map((v, i) => Math.round(v + (b[i] - v) * r));
return `rgba(${c[0]},${c[1]},${c[2]},${alpha})`;
};
function targetsFor(text) {
const off = document.createElement("canvas");
off.width = W; off.height = H;
const o = off.getContext("2d");
o.clearRect(0, 0, W, H);
o.fillStyle = "#fff";
o.textAlign = "center";
o.textBaseline = "middle";
let fontSize = Math.max(54, Math.min(W * 0.16, 230));
o.font = `800 ${fontSize}px Manrope, sans-serif`;
// fit long words inside the canvas so nothing is clipped at the edges
const maxW = W * 0.82;
const measured = o.measureText(text).width;
if (measured > maxW) { fontSize = fontSize * (maxW / measured); o.font = `800 ${fontSize}px Manrope, sans-serif`; }
o.fillText(text, W / 2, H / 2);
const data = o.getImageData(0, 0, W, H).data;
const gap = Math.max(4, Math.round(W / 320));
const pts = [];
for (let y = 0; y < H; y += gap) {
for (let x = 0; x < W; x += gap) {
if (data[(y * W + x) * 4 + 3] > 128) pts.push({ x, y });
}
}
return pts;
}
function assign(text, scatter) {
const targets = targetsFor(text);
const prev = core.map((p) => ({ x: p.x, y: p.y }));
core = targets.map((tp, i) => {
const seed = prev.length ? prev[Math.floor(Math.random() * prev.length)] : { x: Math.random() * W, y: Math.random() * H };
const p = {
tx: tp.x, ty: tp.y,
x: seed.x + (Math.random() - 0.5) * 30,
y: seed.y + (Math.random() - 0.5) * 30,
vx: 0, vy: 0,
r0: 0.85 + Math.random() * 1.25,
col: lerpColor(tp.x / W, 0.9),
ph: Math.random() * Math.PI * 2,
sp: 0.85 + Math.random() * 0.35,
};
p.r = p.r0;
if (scatter) { const a = Math.random() * Math.PI * 2, s = 6 + Math.random() * 12; p.vx = Math.cos(a) * s; p.vy = Math.sin(a) * s; }
return p;
});
if (reduce) core.forEach((p) => { p.x = p.tx; p.y = p.ty; });
}
function buildAmbient() {
const n = Math.round((W * H) / 14000);
ambient = Array.from({ length: n }, () => ({
x: Math.random() * W, y: Math.random() * H,
r: 0.6 + Math.random() * 2.6,
a: 0.12 + Math.random() * 0.5,
col: Math.random(),
vx: (Math.random() - 0.5) * 0.25, vy: (Math.random() - 0.5) * 0.25,
ph: Math.random() * Math.PI * 2,
}));
}
function init() {
const rect = wrap.getBoundingClientRect();
W = Math.max(1, Math.floor(rect.width));
H = Math.max(1, Math.floor(rect.height));
canvas.width = W * dpr; canvas.height = H * dpr;
canvas.style.width = W + "px"; canvas.style.height = H + "px";
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
buildAmbient();
assign(scenesRef.current[sceneI] || "", false);
if (reduce) draw(0);
}
function draw() {
ctx.clearRect(0, 0, W, H);
for (const p of ambient) {
ctx.globalAlpha = p.a;
ctx.fillStyle = lerpColor(p.col, 1);
ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill();
}
for (const p of core) {
ctx.globalAlpha = 0.95;
ctx.fillStyle = p.col;
ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill();
}
ctx.globalAlpha = 1;
}
function tick(now) {
const t = (now - t0) / 1000;
// scene auto-cycle
if (scenesRef.current.length > 1 && now - lastSwitch > interval) {
lastSwitch = now;
sceneI = (sceneI + 1) % scenesRef.current.length;
assign(scenesRef.current[sceneI], true);
if (cbRef.current) cbRef.current(sceneI);
}
for (const p of ambient) {
p.x += p.vx; p.y += p.vy;
p.a += Math.sin(t * 1.5 + p.ph) * 0.004;
if (p.x < -6) p.x = W + 6; else if (p.x > W + 6) p.x = -6;
if (p.y < -6) p.y = H + 6; else if (p.y > H + 6) p.y = -6;
}
for (const p of core) {
p.vx += (p.tx - p.x) * 0.007 * p.sp;
p.vy += (p.ty - p.y) * 0.007 * p.sp;
p.vx += Math.cos(p.ph + t * 1.3) * 0.01;
p.vy += Math.sin(p.ph + t * 1.3) * 0.01;
const dx = p.x - mouse.x, dy = p.y - mouse.y, d2 = dx * dx + dy * dy;
if (d2 < 8000) { const f = (8000 - d2) / 8000 * 0.9; const d = Math.sqrt(d2) + 0.01; p.vx += dx / d * f; p.vy += dy / d * f; }
p.vx *= 0.88; p.vy *= 0.88;
p.x += p.vx; p.y += p.vy;
}
draw();
raf = requestAnimationFrame(tick);
}
function burst(cx, cy) {
for (const p of core) {
const dx = p.x - cx, dy = p.y - cy, d = Math.sqrt(dx * dx + dy * dy) + 0.01;
const f = Math.min(24, 3800 / (d + 26));
p.vx += dx / d * f; p.vy += dy / d * f;
}
}
let ro;
const start = () => {
init();
if (!reduce) raf = requestAnimationFrame(tick);
ro = new ResizeObserver(() => { cancelAnimationFrame(raf); init(); if (!reduce) raf = requestAnimationFrame(tick); });
ro.observe(wrap);
};
const onMove = (e) => { const rect = wrap.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; };
const onLeave = () => { mouse.x = -9999; mouse.y = -9999; };
const onDown = (e) => { const rect = wrap.getBoundingClientRect(); burst(e.clientX - rect.left, e.clientY - rect.top); };
wrap.addEventListener("pointermove", onMove);
wrap.addEventListener("pointerleave", onLeave);
wrap.addEventListener("pointerdown", onDown);
if (document.fonts && document.fonts.ready) document.fonts.ready.then(start); else start();
return () => { cancelAnimationFrame(raf); if (ro) ro.disconnect(); wrap.removeEventListener("pointermove", onMove); wrap.removeEventListener("pointerleave", onLeave); wrap.removeEventListener("pointerdown", onDown); };
}, [interval]);
return (