"use client";

import { BarWaveMatrix, type BarWaveOrientation } from "./index";

export interface DemoProps {
  colorA?: string;
  colorB?: string;
  columns?: number;
  rows?: number;
  speed?: number;
  orientation?: BarWaveOrientation;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  colorA = "#38BDF8",
  colorB = "#FF4D8D",
  columns = 14,
  rows = 8,
  speed = 0.35,
  orientation = "horizontal",
}: DemoProps) {
  return (
    <div className="w-full p-4 sm:p-6">
      <BarWaveMatrix
        colorA={colorA}
        colorB={colorB}
        columns={columns}
        rows={rows}
        speed={speed}
        orientation={orientation}
        className="h-[220px] rounded-xl border border-white/10 sm:h-[260px]"
      />
    </div>
  );
}

1d:T28bd, 1e:T22fc8,

<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from "vue";

const props = withDefaults(
  defineProps<{
    colorA?: string;
    colorB?: string;
    columns?: number;
    rows?: number;
    speed?: number;
    orientation?: "horizontal" | "vertical";
  }>(),
  {
    colorA: "#38BDF8",
    colorB: "#FF4D8D",
    columns: 14,
    rows: 8,
    speed: 0.35,
    orientation: "horizontal",
  },
);

const TAU = Math.PI * 2;
const SPREAD = 7;
const ROW_FACTOR = 0.6;
const TRAVEL_FRAC = 0.82;
const DENT_PHASE = Math.PI * 0.85;
const EASE_RATE = 6;

const host = ref<HTMLDivElement | null>(null);
const canvas = ref<HTMLCanvasElement | null>(null);
let stop: (() => void) | null = null;

function hexToRgb(hex: string): [number, number, number] {
  const raw = hex.replace("#", "");
  const full = raw.length === 3 ? raw.replace(/./g, (c) => c + c) : raw.padEnd(6, "0").slice(0, 6);
  const n = Number.parseInt(full, 16) || 0;
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}

/** Perceptual (sRGB relative) luminance, used to decide which of the two colors reads brighter. */
function relativeLuminance(r: number, g: number, b: number): number {
  const linear = (c: number) => {
    const cs = c / 255;
    return cs <= 0.04045 ? cs / 12.92 : ((cs + 0.055) / 1.055) ** 2.4;
  };
  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
}

function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
  const rn = r / 255;
  const gn = g / 255;
  const bn = b / 255;
  const max = Math.max(rn, gn, bn);
  const min = Math.min(rn, gn, bn);
  const l = (max + min) / 2;
  if (max === min) return [0, 0, l];
  const d = max - min;
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  let h: number;
  if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) * 60;
  else if (max === gn) h = ((bn - rn) / d + 2) * 60;
  else h = ((rn - gn) / d + 4) * 60;
  return [h, s, l];
}

function hueChannel(p: number, q: number, t: number): number {
  let tt = t;
  if (tt < 0) tt += 1;
  if (tt > 1) tt -= 1;
  if (tt < 1 / 6) return p + (q - p) * 6 * tt;
  if (tt < 1 / 2) return q;
  if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6;
  return p;
}

function hslToRgb(h: number, s: number, l: number): [number, number, number] {
  if (s === 0) {
    const v = Math.round(l * 255);
    return [v, v, v];
  }
  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
  const p = 2 * l - q;
  const hk = (((h % 360) + 360) % 360) / 360;
  const r = hueChannel(p, q, hk + 1 / 3);
  const g = hueChannel(p, q, hk);
  const b = hueChannel(p, q, hk - 1 / 3);
  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

/** Shortest-arc hue interpolation, so a blue-to-pink ramp turns through violet instead of grey. */
function lerpHue(h1: number, h2: number, t: number): number {
  const diff = (((h2 - h1 + 180) % 360) + 360) % 360 - 180;
  return (h1 + diff * t + 360) % 360;
}

function fillRoundedRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) {
  const rr = Math.max(0, Math.min(r, w / 2, h / 2));
  ctx.beginPath();
  ctx.moveTo(x + rr, y);
  ctx.arcTo(x + w, y, x + w, y + h, rr);
  ctx.arcTo(x + w, y + h, x, y + h, rr);
  ctx.arcTo(x, y + h, x, y, rr);
  ctx.arcTo(x, y, x + w, y, rr);
  ctx.closePath();
  ctx.fill();
}

function createGrain(ctx: CanvasRenderingContext2D): CanvasPattern | null {
  const size = 48;
  const tile = document.createElement("canvas");
  tile.width = size;
  tile.height = size;
  const tctx = tile.getContext("2d");
  if (!tctx) return null;
  const image = tctx.createImageData(size, size);
  for (let i = 0; i < image.data.length; i += 4) {
    const v = Math.random() * 255;
    image.data[i] = v;
    image.data[i + 1] = v;
    image.data[i + 2] = v;
    image.data[i + 3] = 255;
  }
  tctx.putImageData(image, 0, 0);
  return ctx.createPattern(tile, "repeat");
}

function start() {
  stop?.();
  const hostEl = host.value;
  const canvasEl = canvas.value;
  if (!hostEl || !canvasEl) return;
  const ctx = canvasEl.getContext("2d");
  if (!ctx) return;

  const cols = Math.max(2, Math.round(props.columns));
  const rws = Math.max(1, Math.round(props.rows));
  const horizontal = props.orientation !== "vertical";
  const [ar, ag, ab] = hexToRgb(props.colorA);
  const [br, bg, bb] = hexToRgb(props.colorB);
  const [ah, as_, al] = rgbToHsl(ar, ag, ab);
  const [bh, bs, bl] = rgbToHsl(br, bg, bb);
  // The crest must always read as the lighter band, whichever hex the two props hold.
  const aDimmer = relativeLuminance(ar, ag, ab) <= relativeLuminance(br, bg, bb);
  const troughH = aDimmer ? ah : bh;
  const troughS = aDimmer ? as_ : bs;
  const troughL = aDimmer ? al : bl;
  const crestH = aDimmer ? bh : ah;
  const crestS = aDimmer ? bs : as_;
  const crestL = aDimmer ? bl : al;
  const speed = props.speed;
  const grain = createGrain(ctx);

  let width = 1;
  let height = 1;

  const resize = () => {
    const rect = hostEl.getBoundingClientRect();
    width = Math.max(1, Math.round(rect.width));
    height = Math.max(1, Math.round(rect.height));
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    canvasEl.width = Math.round(width * dpr);
    canvasEl.height = Math.round(height * dpr);
    canvasEl.style.width = `${width}px`;
    canvasEl.style.height = `${height}px`;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  };
  resize();
  const resizeObserver = new ResizeObserver(resize);
  resizeObserver.observe(hostEl);

  const reduceQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  let reduced = reduceQuery.matches;
  const onReduceChange = (event: MediaQueryListEvent) => {
    reduced = event.matches;
  };
  reduceQuery.addEventListener?.("change", onReduceChange);

  let t = 0;
  let pointerX = -9999;
  let pointerY = -9999;
  let pointerTarget = 0;
  let pointerStrength = 0;

  const draw = (dt: number) => {
    if (!reduced) t += dt;
    pointerStrength += (pointerTarget - pointerStrength) * Math.min(1, dt * EASE_RATE);

    ctx.clearRect(0, 0, width, height);
    const cellW = width / cols;
    const cellH = height / rws;
    const colPhase = TAU / SPREAD;
    const rowPhase = colPhase * ROW_FACTOR;
    const radius = Math.max(cellW, cellH) * 3.4;

    for (let row = 0; row < rws; row++) {
      for (let col = 0; col < cols; col++) {
        const cx = (col + 0.5) * cellW;
        const cy = (row + 0.5) * cellH;
        let phase = col * colPhase + row * rowPhase - t * speed * TAU;

        if (pointerStrength > 0.002) {
          const dx = cx - pointerX;
          const dy = cy - pointerY;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < radius) {
            const proximity = 1 - dist / radius;
            phase += proximity * proximity * pointerStrength * DENT_PHASE;
          }
        }

        const wave = Math.sin(phase);
        const colorT = (wave + 1) / 2;
        const hue = lerpHue(troughH, crestH, colorT);
        const sat = troughS + (crestS - troughS) * colorT;
        const light = troughL + (crestL - troughL) * colorT;
        const [r, g, b] = hslToRgb(hue, sat, light);
        ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;

        if (horizontal) {
          const barW = cellW * 0.6;
          const barH = cellH * 0.34;
          const travel = (cellW - barW) * 0.5 * TRAVEL_FRAC;
          fillRoundedRect(ctx, cx - barW / 2 + wave * travel, cy - barH / 2, barW, barH, barH / 2);
        } else {
          const barW = cellW * 0.34;
          const barH = cellH * 0.6;
          const travel = (cellH - barH) * 0.5 * TRAVEL_FRAC;
          fillRoundedRect(ctx, cx - barW / 2, cy - barH / 2 + wave * travel, barW, barH, barW / 2);
        }
      }
    }

    if (grain) {
      ctx.save();
      ctx.globalAlpha = 0.05;
      ctx.fillStyle = grain;
      ctx.fillRect(0, 0, width, height);
      ctx.restore();
    }
  };

  let rafId = 0;
  let lastTime = performance.now();
  let visible = true;

  const tick = (now: number) => {
    const dt = Math.min(0.05, (now - lastTime) / 1000);
    lastTime = now;
    draw(dt);
    rafId = requestAnimationFrame(tick);
  };
  const startLoop = () => {
    if (rafId) return;
    lastTime = performance.now();
    rafId = requestAnimationFrame(tick);
  };
  const stopLoop = () => {
    if (rafId) {
      cancelAnimationFrame(rafId);
      rafId = 0;
    }
  };

  const intersectionObserver = new IntersectionObserver(
    (entries) => {
      visible = entries[0]?.isIntersecting ?? true;
      if (visible && !document.hidden) startLoop();
      else stopLoop();
    },
    { threshold: 0.01 },
  );
  intersectionObserver.observe(hostEl);

  const onVisibility = () => {
    if (document.hidden) stopLoop();
    else if (visible) startLoop();
  };
  document.addEventListener("visibilitychange", onVisibility);

  const onPointerMove = (event: PointerEvent) => {
    const rect = hostEl.getBoundingClientRect();
    pointerX = event.clientX - rect.left;
    pointerY = event.clientY - rect.top;
    pointerTarget = 1;
  };
  const onPointerLeave = () => {
    pointerTarget = 0;
  };
  hostEl.addEventListener("pointermove", onPointerMove);
  hostEl.addEventListener("pointerleave", onPointerLeave);
  hostEl.addEventListener("pointercancel", onPointerLeave);

  startLoop();

  stop = () => {
    stopLoop();
    resizeObserver.disconnect();
    intersectionObserver.disconnect();
    document.removeEventListener("visibilitychange", onVisibility);
    reduceQuery.removeEventListener?.("change", onReduceChange);
    hostEl.removeEventListener("pointermove", onPointerMove);
    hostEl.removeEventListener("pointerleave", onPointerLeave);
    hostEl.removeEventListener("pointercancel", onPointerLeave);
  };
}

onMounted(start);
onUnmounted(() => stop?.());
watch(() => [props.colorA, props.colorB, props.columns, props.rows, props.speed, props.orientation], start);
</script>

<template>
  <div ref="host" class="bar-wave-matrix" role="img" aria-label="A grid of bars sliding into a travelling wave">
    <canvas ref="canvas" aria-hidden="true" class="bar-wave-matrix__canvas"></canvas>
  </div>
</template>

<style scoped>
.bar-wave-matrix {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 180px;
  overflow: hidden;
  background: #0b0d10;
}
.bar-wave-matrix__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
</style>

Nearby