setRipples(rs => rs.filter(x => x.id !== r.id))}
/>
))}
);
}
// ============================================================
// Donut canvas — ASCII torus in the bg, drag-rotatable
// ============================================================
// Per-palette color ramps: bg = canvas clear color, dim = shadow side char, bright = highlight char
const DONUT_PALETTES = {
olive: { bg:[58,69,37], dim:[58,69,37], bright:[192,98,58] },
'sun-baked': { bg:[140,65,40], dim:[140,65,40], bright:[90,106,58] },
forest: { bg:[31,45,16], dim:[31,45,16], bright:[94,156,0] },
studio: { bg:[230,220,186], dim:[150,135,95], bright:[192,98,58] },
};
function DonutCanvas({ palette }){
const canvasRef = useRef(null);
const stateRef = useRef({ A: 0, B: 0, isDragging: false, lastX:0, lastY:0 });
useEffect(() => {
const cv = canvasRef.current;
if (!cv) return;
const ctx = cv.getContext('2d');
let raf;
const state = stateRef.current;
const pal = DONUT_PALETTES[palette] || DONUT_PALETTES.olive;
function resize(){
cv.width = window.innerWidth;
cv.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);
const CHARS = ' .,-~:;=+*#$@';
function render(){
const W = cv.width, H = cv.height;
const cellW = 7, cellH = 12;
const cols = Math.floor(W / cellW);
const rows = Math.floor(H / cellH);
const zBuf = new Float32Array(cols * rows);
const cBuf = new Int8Array(cols * rows);
zBuf.fill(0); cBuf.fill(-1);
// Visible desktop area: full width, between menubar(30) and dock(58)
const K1 = Math.min(W, H - 30 - 58) * 0.32 / cellW;
const K2 = 5;
const R1 = 1, R2 = 2;
for (let theta = 0; theta < 6.28; theta += 0.07) {
for (let phi = 0; phi < 6.28; phi += 0.02) {
const ct = Math.cos(theta), st = Math.sin(theta);
const cp = Math.cos(phi), sp = Math.sin(phi);
const cA = Math.cos(state.A), sA = Math.sin(state.A);
const cB = Math.cos(state.B), sB = Math.sin(state.B);
const circX = R2 + R1 * ct;
const circY = R1 * st;
const x = circX * (cB*cp + sA*sB*sp) - circY*cA*sB;
const y = circX * (sB*cp - sA*cB*sp) + circY*cA*cB;
const z = K2 + cA*circX*sp + circY*sA;
const ooz = 1/z;
// Centre on the visible desktop area (between menubar and dock)
const menubarRows = Math.round(30 / cellH);
const dockRows = Math.round(58 / cellH);
const xp = Math.floor(cols / 2 + K1*ooz*x);
const yp = Math.floor((rows + menubarRows - dockRows) / 2 - K1*ooz*y * (cellW/cellH));
const L = cp*ct*sB - cA*ct*sp - sA*st + cB*(cA*st - ct*sA*sp);
if (yp >= 0 && yp < rows && xp >= 0 && xp < cols && L > 0) {
const idx = xp + cols*yp;
if (ooz > zBuf[idx]) {
zBuf[idx] = ooz;
cBuf[idx] = Math.floor(L * 8);
}
}
}
}
// Clear to palette background
ctx.fillStyle = `rgba(${pal.bg[0]},${pal.bg[1]},${pal.bg[2]},0.96)`;
ctx.fillRect(0, 0, W, H);
ctx.font = `400 10.5px 'Martian Mono', monospace`;
ctx.textBaseline = 'top';
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
const idx = c + cols*r;
const charIdx = cBuf[idx];
if (charIdx < 0) continue;
const ch = CHARS[Math.min(charIdx, CHARS.length-1)];
const t = Math.min(1, charIdx/11);
// Interpolate dim → bright across the palette ramp
const rr = Math.floor(pal.dim[0] + (pal.bright[0] - pal.dim[0]) * t);
const gg = Math.floor(pal.dim[1] + (pal.bright[1] - pal.dim[1]) * t);
const bb = Math.floor(pal.dim[2] + (pal.bright[2] - pal.dim[2]) * t);
ctx.fillStyle = `rgba(${rr},${gg},${bb},${0.55 + 0.4*t})`;
ctx.fillText(ch, c*cellW, r*cellH);
}
}
}
function loop(){
if (!state.isDragging) {
state.A += 0.004;
state.B += 0.008;
}
render();
raf = requestAnimationFrame(loop);
}
loop();
const onDown = (e) => {
if (e.target !== cv) return;
state.isDragging = true;
state.lastX = e.clientX;
state.lastY = e.clientY;
};
const onMove = (e) => {
if (!state.isDragging) return;
const dx = e.clientX - state.lastX;
const dy = e.clientY - state.lastY;
state.B += dx * 0.005;
state.A -= dy * 0.005;
state.lastX = e.clientX;
state.lastY = e.clientY;
};
const onUp = () => { state.isDragging = false; };
cv.addEventListener('mousedown', onDown);
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseup', onUp);
return () => {
cancelAnimationFrame(raf);
window.removeEventListener('resize', resize);
cv.removeEventListener('mousedown', onDown);
window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseup', onUp);
};
}, [palette]); // re-run whenever palette changes
return
;
}
// ============================================================
// Donut Takeover (konami easter)
// ============================================================
function DonutTakeover({ palette, onClose }){
const ref = useRef(null);
useEffect(() => {
const c = ref.current;
if (!c) return;
const ctx = c.getContext('2d');
let A=0, B=0, raf;
const CHARS = ' .,-~:;=+*#$@';
const pal = DONUT_PALETTES[palette] || DONUT_PALETTES.olive;
// Dramatic near-black tinted to the palette bg (multiply by 0.15)
const dk = pal.bg.map(v => Math.max(4, Math.floor(v * 0.15)));
function resize(){ c.width = window.innerWidth; c.height = window.innerHeight; }
resize();
window.addEventListener('resize', resize);
function draw(){
const W = c.width, H = c.height;
const cellW = 9, cellH = 14;
const cols = Math.floor(W/cellW), rows = Math.floor(H/cellH);
const zBuf = new Float32Array(cols*rows); const cBuf = new Int8Array(cols*rows);
zBuf.fill(0); cBuf.fill(-1);
const K1 = Math.min(W,H)*0.36/cellW, K2 = 5, R1=1, R2=2;
for (let t=0;t<6.28;t+=0.06){
for (let p=0;p<6.28;p+=0.018){
const ct=Math.cos(t), st=Math.sin(t), cp=Math.cos(p), sp=Math.sin(p);
const cA=Math.cos(A), sA=Math.sin(A), cB=Math.cos(B), sB=Math.sin(B);
const cx=R2+R1*ct, cy=R1*st;
const x=cx*(cB*cp+sA*sB*sp)-cy*cA*sB;
const y=cx*(sB*cp-sA*cB*sp)+cy*cA*cB;
const z=K2+cA*cx*sp+cy*sA;
const ooz=1/z;
const xp=Math.floor(cols/2+K1*ooz*x);
const yp=Math.floor(rows/2-K1*ooz*y*(cellW/cellH));
const L=cp*ct*sB-cA*ct*sp-sA*st+cB*(cA*st-ct*sA*sp);
if (yp>=0&&yp
=0&&xp0){
const idx=xp+cols*yp;
if (ooz>zBuf[idx]){ zBuf[idx]=ooz; cBuf[idx]=Math.floor(L*8); }
}
}
}
ctx.fillStyle=`rgba(${dk[0]},${dk[1]},${dk[2]},1)`;
ctx.fillRect(0,0,W,H);
ctx.font="400 12px 'Martian Mono', monospace";
ctx.textBaseline='top';
for (let r=0;r { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
}, [palette]); // re-run when palette changes
return (
● donut mode — press esc / click to exit
);
}
// ============================================================
// DesktopPlant — Easter egg, bottom-right corner
// Click 30 times to watch it grow and bloom 🌸
// ============================================================
function Flower({ cx, cy, r, petalColor }) {
// Each petal: portrait ellipse centered just above (cx, cy), rotated around (cx, cy)
return (
{[0, 72, 144, 216, 288].map((deg, i) => (
))}
);
}
function DesktopPlant() {
const [grow, setGrow] = useState(0);
const [showHint, setShowHint] = useState(false);
const [shake, setShake] = useState(false);
const hintTimer = useRef(null);
const shakeTimer = useRef(null);
const onClick = () => {
if (grow >= 30) return;
const next = grow + 1;
setGrow(next);
// brief shake feedback
setShake(true);
clearTimeout(shakeTimer.current);
shakeTimer.current = setTimeout(() => setShake(false), 320);
// show progress counter then fade
setShowHint(true);
clearTimeout(hintTimer.current);
hintTimer.current = setTimeout(() => setShowHint(false), 1600);
};
const bloomed = grow >= 30;
return (
{/* Progress hint or bloom badge */}
{showHint && !bloomed && (
{grow} / 30
)}
{bloomed && (
🌸
)}
{photo.svg}
{photo.tag} — {photo.yr} · {photo.caption}
esc to close
);
}
// ============================================================
// Mount
// ============================================================
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();