Warming up
Wax is finding its way.
function setPower(next) {
powered = next;
lamp.classList.toggle('off', !powered);
controlCard.classList.toggle('off', !powered);
scene.style.setProperty('--glow', powered ? '.9' : '.16');
powerButton.setAttribute('aria-pressed', String(powered));
powerButton.setAttribute('aria-label', powered ? 'Turn lamp off' : 'Turn lamp on');
stateText.textContent = powered ? 'Warming up' : 'Cooling down';
stateHint.textContent = powered ? 'Wax is finding its way.' : 'The room settles into dusk.';
lastStateChange = performance.now();
}
powerButton.addEventListener('click', () => setPower(!powered));
window.addEventListener('resize', resize, { passive: true });
resize();
[exit 0]
[file change]
update [workspace]/index.html
[command]
$ /bin/zsh -lc "sed -n '142,174p' index.html && sed -n '278,356p' index.html"
box-shadow: 0 2px 7px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.5);
transition: transform 260ms cubic-bezier(.2,.8,.2,1), background 260ms;
}
.off .switch-knob { transform: translateX(32px); background: linear-gradient(145deg, #a6a0a4, #5a555d); }
.switch-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.footnote {
position: absolute; z-index: 5; right: max(24px, calc((100vw - 1100px) / 2));
bottom: max(28px, env(safe-area-inset-bottom));
color: rgba(235, 215, 199, .38); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
writing-mode: vertical-rl;
}
@media (max-width: 600px) {
.topline { width: calc(100% - 40px); }
.edition { font-size: 8px; }
.intro { top: clamp(66px, 9vh, 82px); }
h1 { font-size: clamp(25px, 7vw, 31px); }
.subtitle { font-size: 11px; margin-top: 6px; }
.lamp { height: min(63vh, 550px); bottom: 22.5vh; }
.footnote { display: none; }
.control-card { min-height: 72px; bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (max-height: 620px) {
.intro { top: 58px; }
.lamp { height: min(58vh, 410px); bottom: 21vh; }
.desk-shadow { bottom: calc(21vh - 12px); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; }
}
for (let i = 0; i < sides.length - 1; i++) {
const [y0, w0] = sides[i], [y1, w1] = sides[i + 1];
if (y <= y1) {
const t = smooth(clamp((y - y0) / (y1 - y0), 0, 1));
return w0 + (w1 - w0) * t;
}
}
return 68;
}
function resize() {
const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
canvas.width = Math.round(viewW * dpr);
canvas.height = Math.round(viewH * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
function makeBlob(x, y, r, vy = 0) {
return { id: ++idCounter, x, y, r, vy, heat: clamp((y - minY) / (maxY - minY), .05, .95), phase: random(0, Math.PI * 2), splitIn: random(4, 8), mergeLock: 0 };
}
function seedBlobs() {
for (let i = 0; i < 9; i++) {
const y = random(143, 400);
const w = halfWidth(y);
blobs.push(makeBlob(130 + random(-w * .52, w * .52), y, random(10, 16), random(-3, 3)));
}
}
function splitBlob(index, b) {
if (blobs.length >= 13 || b.r < 22) return;
const angle = random(-Math.PI * .8, Math.PI * .8);
const r = b.r / Math.sqrt(2);
const offset = r * .74;
const dx = Math.cos(angle) * offset, dy = Math.sin(angle) * offset;
const first = makeBlob(b.x - dx, b.y - dy, r, b.vy - random(3, 7));
const second = makeBlob(b.x + dx, b.y + dy, r, b.vy + random(2, 5));
first.heat = second.heat = b.heat;
first.mergeLock = second.mergeLock = 1.25;
first.splitIn = second.splitIn = random(5, 9);
blobs.splice(index, 1, first, second);
}
function update(dt) {
for (const b of blobs) {
const t = clamp((b.y - minY) / (maxY - minY), 0, 1);
const targetHeat = powered ? .14 + .76 * t : .035;
b.heat += (targetHeat - b.heat) * Math.min(1, dt * (powered ? .32 : .16));
b.vy += (.52 - b.heat) * 56 * dt;
b.vy *= Math.exp(-.78 * dt);
b.vy = clamp(b.vy, -19, 19);
b.y += b.vy * dt;
b.phase += dt * (1.1 + (b.id % 5) * .12);
b.splitIn -= dt;
b.mergeLock = Math.max(0, b.mergeLock - dt);
const hw = halfWidth(clamp(b.y, minY, maxY));
const xLimit = Math.max(5, hw - b.r * .78);
b.x = clamp(b.x, 130 - xLimit, 130 + xLimit);
if (b.y < minY + b.r * .55) { b.y = minY + b.r * .55; b.vy = Math.max(0, b.vy) * .28; }
if (b.y > maxY - b.r * .55) { b.y = maxY - b.r * .55; b.vy = Math.min(0, b.vy) * .28; }
}
// Touching drops become one body; accumulated warm wax later divides again.
for (let i = 0; i < blobs.length; i++) {
const a = blobs[i];
if (a.mergeLock > 0) continue;
let merged = false;
for (let j = i + 1; j < blobs.length; j++) {
const b = blobs[j];
if (b.mergeLock > 0) continue;
const dx = b.x - a.x, dy = b.y - a.y;
const rr = a.r + b.r;
const maxMerged = Math.min(34, viewW * .14);
if (dx * dx + dy * dy < rr * rr * .57 && Math.hypot(dx, dy) < maxMerged * 1.7 && Math.hypot(a.r, b.r) <= maxMerged) {
const ma = a.r * a.r, mb = b.r * b.r, m = ma + mb;
a.x = (a.x * ma + b.x * mb) / m;
a.y = (a.y * ma + b.y * mb) / m;
a.vy = (a.vy * ma + b.vy * mb) / m;
a.heat = (a.heat * ma + b.heat * mb) / m;
a.r = Math.sqrt(m);
a.splitIn = Math.min(a.splitIn, random(1.8, 3.8));
blobs.splice(j, 1);
merged = true;
break;
[exit 0]
[file change]
update [workspace]/index.html
[command]
$ /bin/zsh -lc 'rg -n "https?://|