Backlog - Shader Playground UI

Code

body { margin: 0; font-family: "Trebuchet MS", "Segoe UI", sans-serif; background: #070e1a; color: #edf4ff; }
.topbar { padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; }
.topbar a { color: #8ee7ff; text-decoration: none; }
main { width: min(1000px, 92%); margin: 0 auto; }
.layout { margin-top: 1rem; display: grid; grid-template-columns: 260px 1fr; gap: 0.8rem; }
.controls { border: 1px solid #2c425f; border-radius: 12px; padding: 0.8rem; display: grid; gap: 0.55rem; }
label { display: grid; gap: 0.25rem; font-size: 0.9rem; color: #c1d1e8; }
canvas { width: 100%; border: 1px solid #2c425f; border-radius: 12px; background: #0d1322; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

const freqInput = document.getElementById("freq");
const intensityInput = document.getElementById("intensity");
const hueInput = document.getElementById("hue");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

function render() {
  const freq = Number(freqInput.value);
  const intensity = Number(intensityInput.value);
  const hue = Number(hueInput.value);

  const img = ctx.createImageData(canvas.width, canvas.height);
  const data = img.data;

  for (let y = 0; y < canvas.height; y += 1) {
    for (let x = 0; x < canvas.width; x += 1) {
      const i = (y * canvas.width + x) * 4;
      const nx = x / canvas.width;
      const ny = y / canvas.height;
      const wave = Math.sin(nx * freq * Math.PI + ny * 6) * 0.5 + 0.5;
      const tone = Math.floor((hue + wave * 120) % 360);
      const c = `hsl(${tone} 75% ${30 + intensity * 45}%)`;

      const m = c.match(/hsl\((\d+)\s+\d+%\s+(\d+)%\)/);
      const light = Number(m[2]) / 100;
      const base = light * 255;

      data[i] = Math.min(255, base + wave * 60);
      data[i + 1] = Math.min(255, base + (1 - wave) * 70);
      data[i + 2] = Math.min(255, base + intensity * 90);
      data[i + 3] = 255;
    }
  }

  ctx.putImageData(img, 0, 0);
}

[freqInput, intensityInput, hueInput].forEach((input) => {
  input.addEventListener("input", render);
});

render();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shader Playground Editor</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="topbar">
      <a href="../">Back to demos</a>
      <p>Backlog 31</p>
    </header>

    <main>
      <h1>Shader Playground (UI Editor)</h1>
      <p>Control gradient frequency and palette parameters to simulate shader tuning.</p>

      <section class="layout">
        <div class="controls">
          <label>Frequency <input id="freq" type="range" min="1" max="12" step="0.1" value="5" /></label>
          <label>Intensity <input id="intensity" type="range" min="0" max="1" step="0.01" value="0.55" /></label>
          <label>Hue Shift <input id="hue" type="range" min="0" max="360" step="1" value="190" /></label>
        </div>
        <canvas id="canvas" width="920" height="480"></canvas>
      </section>
    </main>

    <script src="script.js"></script>
  </body>
</html>

Backlog - Shader Playground UI

Interactive parameter editor for shader-like visual tuning.

Source

Repository: libs-gen
Original demo id: 31-shader-playground-editor

Notes

Interactive parameter editor for shader-like visual tuning.