Prompt weighting

<div class="wrap">
  <div class="promptbar">호수 위의 (산:<b id="w">1.1</b>), 노을</div>
  <canvas id="cv"></canvas>
</div>

.wrap{position:relative;width:100%;height:100%}
#cv{position:absolute;inset:0;width:100%;height:100%}
.promptbar{position:absolute;top:10px;left:10px;right:10px;z-index:2;padding:7px 10px;border-radius:10px;
  background:rgba(13,13,18,0.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.15);
  font-size:11px;color:#f1f0ec;font-family:ui-monospace,monospace}
.promptbar b{color:var(--accent)}

const cv = document.getElementById('cv'), ctx = cv.getContext('2d');
const wEl = document.getElementById('w');
function fit() { const dpr = Math.min(devicePixelRatio || 1, 2); cv.width = innerWidth * dpr; cv.height = innerHeight * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }
addEventListener('resize', fit); fit();

function render(weight) {
  const w = innerWidth, h = innerHeight;
  const g = ctx.createLinearGradient(0, 0, 0, h);
  g.addColorStop(0, 'hsl(28 70% 60%)'); g.addColorStop(1, 'hsl(255 40% 22%)');
  ctx.fillStyle = g; ctx.fillRect(0, 0, w, h);
  ctx.beginPath(); ctx.arc(w * 0.72, h * 0.28, Math.min(w, h) * 0.08, 0, Math.PI * 2); ctx.fillStyle = 'hsl(45 90% 78%)'; ctx.fill();
  ctx.fillStyle = 'hsl(210 35% 20%)'; ctx.fillRect(0, h * 0.82, w, h * 0.18);
  const scale = 0.45 + weight * 0.4;
  const sat = 20 + weight * 35;
  const baseY = h * 0.82, peakY = baseY - h * 0.42 * scale, halfW = w * 0.22 * scale;
  const cx = w * 0.42;
  ctx.beginPath(); ctx.moveTo(cx - halfW, baseY); ctx.lineTo(cx, peakY); ctx.lineTo(cx + halfW, baseY); ctx.closePath();
  ctx.fillStyle = 'hsl(255 ' + sat + '% ' + (22 + weight * 6) + '%)'; ctx.fill();
}
let t = 0;
setInterval(() => {
  t += 0.045;
  const weight = 1.1 + Math.sin(t) * 0.7;
  wEl.textContent = weight.toFixed(1);
  render(weight);
}, 50);
render(1.1);