06Crumpled Paper Surface Shaded by a Noise Field

<main class="stage">
<div class="vd is-demo" id="vdRoot">
  <canvas class="vd__canvas" id="vdCanvas" width="480" height="300"></canvas>
  <p class="vd__caption">A Crumpled Paper Texture Shaded by Noise</p>
</div>
</main>

@use "../../../../site/static/demo-tokens" as *;
@include stage($stage-yellow);

.vd {
  position: relative;
  width: min(92vw, calc(160vh - 12.8vw));
  aspect-ratio: 480 / 300;
  margin: 0 auto;
  border-radius: $r-card;
  overflow: hidden;
  box-shadow: $shadow-raised;
}

.vd__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.vd__caption {
  position: absolute;
  left: $sp-3;
  bottom: $sp-3;
  max-width: 72%;
  margin: 0;
  padding: $sp-1 $sp-3;
  border-radius: $r-pill;
  background: rgba(255, 247, 230, .85);
  color: $subject-ink;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}

@media (max-width: 340px) {
  .vd__caption { font-size: 10px; padding: $sp-1 $sp-2; }
}

@media (prefers-reduced-motion: reduce) {
  .vd { cursor: default; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.vd {
  position: relative;
  width: min(92vw, 160vh - 12.8vw);
  aspect-ratio: 480/300;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
}

.vd__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.vd__caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: 72%;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 247, 230, 0.85);
  color: #17141a;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}

@media (max-width: 340px) {
  .vd__caption {
    font-size: 10px;
    padding: 4px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vd {
    cursor: default;
  }
}

(function () {
  var root = document.getElementById('vdRoot');
  var canvas = document.getElementById('vdCanvas');
  var ctx = canvas.getContext('2d');
  var wrap = canvas.parentElement;

  var LW = 320, LH = 200;
  var PAGE_L = 30, PAGE_T = 20, PAGE_R = 290, PAGE_B = 180;
  var CELL = 6;
  var SCENE_BG = '#17141a';
  var PAPER = [255, 247, 230];

  function seedRand(seed) {
    var s = seed >>> 0;
    return function () { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296; };
  }
  function clamp(v, a, b) { return v < a ? a : (v > b ? b : v); }
  function smoothStep(t) { return t * t * (3 - 2 * t); }

  function makeValueNoise(seed) {
    var rnd = seedRand(seed);
    var GRID = 24;
    var lattice = [];
    for (var i = 0; i < GRID * GRID; i += 1) lattice.push(rnd());
    function latAt(xi, yi) {
      xi = ((xi % GRID) + GRID) % GRID; yi = ((yi % GRID) + GRID) % GRID;
      return lattice[yi * GRID + xi];
    }
    return function valueNoise(x, y) {
      var xi = Math.floor(x), yi = Math.floor(y);
      var xf = x - xi, yf = y - yi;
      var v00 = latAt(xi, yi), v10 = latAt(xi + 1, yi), v01 = latAt(xi, yi + 1), v11 = latAt(xi + 1, yi + 1);
      var sx = smoothStep(xf), sy = smoothStep(yf);
      var a = v00 + (v10 - v00) * sx;
      var b = v01 + (v11 - v01) * sx;
      return a + (b - a) * sy;
    };
  }
  var valueNoise = makeValueNoise(41306);

  function crumpleHeight(x, y, phase) {
    var n1 = valueNoise(x * 0.16 + phase, y * 0.16);
    var n2 = valueNoise(x * 0.4 - phase * 1.4, y * 0.4 + phase * 0.6);
    return n1 * 0.66 + n2 * 0.34;
  }

  var phase = 0;
  var CYCLE_MS = 900;

  function draw() {
    ctx.fillStyle = SCENE_BG;
    ctx.fillRect(0, 0, LW, LH);
    ctx.fillStyle = 'rgba(0,0,0,.3)';
    ctx.fillRect(PAGE_L - 6, PAGE_B + 3, PAGE_R - PAGE_L + 12, 6);

    var lightX = -0.7, lightY = -0.7;                   // 좌상단 광원 방향 (정규화 근사)
    for (var y = PAGE_T; y < PAGE_B; y += CELL) {
      for (var x = PAGE_L; x < PAGE_R; x += CELL) {
        var u = (x - PAGE_L) / CELL, v = (y - PAGE_T) / CELL;
        var h0 = crumpleHeight(u, v, phase);
        var hx = crumpleHeight(u + 1, v, phase);
        var hy = crumpleHeight(u, v + 1, phase);
        var gx = (hx - h0) * 6, gy = (hy - h0) * 6;      // 높낮이 기울기 = 음영의 근거
        var lambert = clamp(0.72 - (gx * lightX + gy * lightY) * 0.9, 0.28, 1.15);
        var r = clamp(Math.round(PAPER[0] * lambert), 0, 255);
        var g = clamp(Math.round(PAPER[1] * lambert), 0, 255);
        var b = clamp(Math.round(PAPER[2] * lambert), 0, 255);
        ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
        ctx.fillRect(x, y, CELL + 1, CELL + 1);
      }
    }

    // 대각으로 훑는 광택 — 노이즈만으론 프레임 간 변화가 작아 별도로 움직임을 더한다
    var p = (nowMs % CYCLE_MS) / CYCLE_MS;
    var sweepX = PAGE_L - 60 + p * (PAGE_R - PAGE_L + 120);
    var g2 = ctx.createLinearGradient(sweepX - 34, 0, sweepX + 34, 0);
    g2.addColorStop(0, 'rgba(255,255,255,0)');
    g2.addColorStop(0.5, 'rgba(255,255,255,.16)');
    g2.addColorStop(1, 'rgba(255,255,255,0)');
    ctx.fillStyle = g2;
    ctx.fillRect(PAGE_L, PAGE_T, PAGE_R - PAGE_L, PAGE_B - PAGE_T);
  }

  var nowMs = 0;
  function update(dt, tMs) {
    if (reduce) return;
    nowMs = tMs;
    phase += dt * 0.5;
  }

  var cw = 480, ch = 300, sx = 1, sy = 1;
  function fit() {
    var r = wrap.getBoundingClientRect();
    cw = Math.max(1, Math.round(r.width));
    ch = Math.max(1, Math.round(r.height));
    canvas.width = cw; canvas.height = ch;
    sx = cw / LW; sy = ch / LH;
    render();
  }
  function render() {
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, cw, ch);
    ctx.save();
    ctx.scale(sx, sy);
    draw();
    ctx.restore();
  }

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var playing = !reduce;
  if (reduce) { root.classList.remove('is-demo'); phase = 1.2; nowMs = 0; }

  var lastTs = null;
  function tick(ts) {
    if (lastTs === null) lastTs = ts;
    var dt = Math.min((ts - lastTs) / 1000, 0.05);
    lastTs = ts;
    if (playing) update(dt, ts);
    render();
    requestAnimationFrame(tick);
  }
  fit();
  window.addEventListener('resize', fit);
  render();
  if (playing) requestAnimationFrame(tick);
})();

import { useEffect, useRef } from "react";
import styles from "./PaperTextureCrumpleNoiseShade.module.scss";

export default function PaperTextureCrumpleNoiseShade() {
  const rootRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const root = rootRef.current;
    const canvas = canvasRef.current;
    if (!root || !canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;
    const wrap = canvas.parentElement as HTMLElement;

    const LW = 320, LH = 200;
    const PAGE_L = 30, PAGE_T = 20, PAGE_R = 290, PAGE_B = 180;
    const CELL = 6;
    const SCENE_BG = "#17141a";
    const PAPER: [number, number, number] = [255, 247, 230];

    function seedRand(seed: number) {
      let s = seed >>> 0;
      return function () { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296; };
    }
    function clamp(v: number, a: number, b: number): number { return v < a ? a : (v > b ? b : v); }
    function smoothStep(t: number): number { return t * t * (3 - 2 * t); }

    function makeValueNoise(seed: number) {
      const rnd = seedRand(seed);
      const GRID = 24;
      const lattice: number[] = [];
      for (let i = 0; i < GRID * GRID; i += 1) lattice.push(rnd());
      function latAt(xi: number, yi: number): number {
        xi = ((xi % GRID) + GRID) % GRID; yi = ((yi % GRID) + GRID) % GRID;
        return lattice[yi * GRID + xi];
      }
      return function valueNoise(x: number, y: number): number {
        const xi = Math.floor(x), yi = Math.floor(y);
        const xf = x - xi, yf = y - yi;
        const v00 = latAt(xi, yi), v10 = latAt(xi + 1, yi), v01 = latAt(xi, yi + 1), v11 = latAt(xi + 1, yi + 1);
        const sx = smoothStep(xf), sy = smoothStep(yf);
        const a = v00 + (v10 - v00) * sx;
        const b = v01 + (v11 - v01) * sx;
        return a + (b - a) * sy;
      };
    }
    const valueNoise = makeValueNoise(41306);

    function crumpleHeight(x: number, y: number, phase: number): number {
      const n1 = valueNoise(x * 0.16 + phase, y * 0.16);
      const n2 = valueNoise(x * 0.4 - phase * 1.4, y * 0.4 + phase * 0.6);
      return n1 * 0.66 + n2 * 0.34;
    }

    let phase = 0;
    const CYCLE_MS = 900;

    function draw(): void {
      ctx!.fillStyle = SCENE_BG;
      ctx!.fillRect(0, 0, LW, LH);
      ctx!.fillStyle = "rgba(0,0,0,.3)";
      ctx!.fillRect(PAGE_L - 6, PAGE_B + 3, PAGE_R - PAGE_L + 12, 6);

      const lightX = -0.7, lightY = -0.7;
      for (let y = PAGE_T; y < PAGE_B; y += CELL) {
        for (let x = PAGE_L; x < PAGE_R; x += CELL) {
          const u = (x - PAGE_L) / CELL, v = (y - PAGE_T) / CELL;
          const h0 = crumpleHeight(u, v, phase);
          const hx = crumpleHeight(u + 1, v, phase);
          const hy = crumpleHeight(u, v + 1, phase);
          const gx = (hx - h0) * 6, gy = (hy - h0) * 6;
          const lambert = clamp(0.72 - (gx * lightX + gy * lightY) * 0.9, 0.28, 1.15);
          const r = clamp(Math.round(PAPER[0] * lambert), 0, 255);
          const g = clamp(Math.round(PAPER[1] * lambert), 0, 255);
          const b = clamp(Math.round(PAPER[2] * lambert), 0, 255);
          ctx!.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
          ctx!.fillRect(x, y, CELL + 1, CELL + 1);
        }
      }

      const p = (nowMs % CYCLE_MS) / CYCLE_MS;
      const sweepX = PAGE_L - 60 + p * (PAGE_R - PAGE_L + 120);
      const g2 = ctx!.createLinearGradient(sweepX - 34, 0, sweepX + 34, 0);
      g2.addColorStop(0, "rgba(255,255,255,0)");
      g2.addColorStop(0.5, "rgba(255,255,255,.16)");
      g2.addColorStop(1, "rgba(255,255,255,0)");
      ctx!.fillStyle = g2;
      ctx!.fillRect(PAGE_L, PAGE_T, PAGE_R - PAGE_L, PAGE_B - PAGE_T);
    }

    let nowMs = 0;
    function update(dt: number, tMs: number): void {
      if (reduce) return;
      nowMs = tMs;
      phase += dt * 0.5;
    }

    let cw = 480, ch = 300, sx = 1, sy = 1;
    function fit(): void {
      const r = wrap.getBoundingClientRect();
      cw = Math.max(1, Math.round(r.width));
      ch = Math.max(1, Math.round(r.height));
      canvas!.width = cw; canvas!.height = ch;
      sx = cw / LW; sy = ch / LH;
      render();
    }
    function render(): void {
      ctx!.setTransform(1, 0, 0, 1, 0, 0);
      ctx!.clearRect(0, 0, cw, ch);
      ctx!.save();
      ctx!.scale(sx, sy);
      draw();
      ctx!.restore();
    }

    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const playing = !reduce;
    if (reduce) { root.classList.remove("is-demo"); phase = 1.2; nowMs = 0; }

    let lastTs: number | null = null;
    let raf = 0;
    function tick(ts: number): void {
      if (lastTs === null) lastTs = ts;
      const dt = Math.min((ts - lastTs) / 1000, 0.05);
      lastTs = ts;
      if (playing) update(dt, ts);
      render();
      raf = requestAnimationFrame(tick);
    }
    fit();
    window.addEventListener("resize", fit);
    render();
    if (playing) raf = requestAnimationFrame(tick);

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("resize", fit);
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div className={`${styles.vd} is-demo`} ref={rootRef}>
        <canvas className={styles.vd__canvas} ref={canvasRef} width={480} height={300} />
        <p className={styles.vd__caption}>구겨진 표면이 노이즈로 음영지는 종이 질감</p>
      </div>
    </main>
  );
}