/* Posy site — shared primitives (ported + adapted from the app) */
const { useState, useEffect, useRef } = React;
// ————— Brand Mark —————
const BrandMark = ({ size = 28 }) => (
);
// ————— Bed sigils —————
const BedSigil = ({ variant = 0, size = 36 }) => {
const shapes = [
,
,
,
,
,
,
];
return (
);
};
// ————— Hanko seal —————
const Hanko = ({ size = 44 }) => (
);
// ————— Ensō (large atmospheric ring) —————
const Enso = ({ size = 540, opacity = 0.28 }) => (
);
// ————— Watercolor blob —————
const WatercolorBlob = ({ top, left, right, size = 220, color = "var(--moss-soft)", delay = 0, dur = 18, opacity = 1 }) => (
);
// ————— Ambient particles —————
function Particles({ season, intensity = 0.7 }) {
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext("2d");
let w, h, particles, raf;
const resize = () => {
w = canvas.width = window.innerWidth * devicePixelRatio;
h = canvas.height = window.innerHeight * devicePixelRatio;
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";
};
resize();
window.addEventListener("resize", resize);
const config = {
spring: { color: [181, 80, 106], count: 24, size: [2, 6], shape: "petal", speed: 0.3 },
summer: { color: [90, 107, 63], count: 30, size: [1, 3], shape: "dot", speed: 0.2 },
autumn: { color: [165, 51, 33], count: 22, size: [3, 7], shape: "leaf", speed: 0.5 },
winter: { color: [200, 210, 215], count: 40, size: [1, 3], shape: "dot", speed: 0.25 }
}[season] || { color: [90, 107, 63], count: 30, size: [1, 3], shape: "dot", speed: 0.2 };
const cnt = Math.round(config.count * intensity);
particles = Array.from({ length: cnt }, () => ({
x: Math.random() * w,
y: Math.random() * h,
vx: (Math.random() - 0.5) * config.speed * devicePixelRatio,
vy: (Math.random() * 0.6 + 0.2) * config.speed * devicePixelRatio,
r: (config.size[0] + Math.random() * (config.size[1] - config.size[0])) * devicePixelRatio,
a: Math.random() * Math.PI * 2,
va: (Math.random() - 0.5) * 0.02,
o: 0.3 + Math.random() * 0.5
}));
const [cr, cg, cb] = config.color;
const tick = () => {
ctx.clearRect(0, 0, w, h);
particles.forEach(p => {
p.x += p.vx + Math.sin(p.a) * 0.3;
p.y += p.vy;
p.a += p.va;
if (p.y > h + 20) { p.y = -20; p.x = Math.random() * w; }
if (p.x > w + 20) p.x = -20;
if (p.x < -20) p.x = w + 20;
ctx.globalAlpha = p.o;
ctx.fillStyle = `rgb(${cr},${cg},${cb})`;
if (config.shape === "petal") {
ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.a);
ctx.beginPath(); ctx.ellipse(0, 0, p.r, p.r * 0.5, 0, 0, Math.PI * 2); ctx.fill();
ctx.restore();
} else if (config.shape === "leaf") {
ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.a);
ctx.beginPath();
ctx.moveTo(0, -p.r);
ctx.quadraticCurveTo(p.r * 0.6, 0, 0, p.r);
ctx.quadraticCurveTo(-p.r * 0.6, 0, 0, -p.r);
ctx.fill(); ctx.restore();
} else {
ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill();
}
});
raf = requestAnimationFrame(tick);
};
tick();
return () => {
cancelAnimationFrame(raf);
window.removeEventListener("resize", resize);
};
}, [season, intensity]);
return ;
}
Object.assign(window, { BrandMark, BedSigil, Hanko, Enso, WatercolorBlob, Particles });