"use client";

import { LightConeBeam } from "./index";

export interface DemoProps {
  tint?: string;
  glow?: number;
  grain?: number;
  baseWidth?: number;
  motion?: "turn" | "wobble" | "tilt";
  speed?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ tint = "#38BDF8", glow = 1, grain = 0.5, baseWidth = 5.5, motion = "turn", speed = 0.5 }: DemoProps) {
  return (
    <div className="relative h-full w-full">
      <LightConeBeam tint={tint} glow={glow} grain={grain} baseWidth={baseWidth} motion={motion} speed={speed} />
      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between gap-6 p-6 sm:p-8">
        <div>
          <p className="text-[11px] font-medium uppercase tracking-[0.24em] text-white/50">Dome projector</p>
          <h3 className="mt-1 text-2xl font-semibold tracking-tight text-white sm:text-[28px]">Zenith beam holding at 41 degrees</h3>
        </div>
        <p className="max-w-[24ch] text-right text-xs leading-relaxed text-white/45">
          {motion === "tilt" ? "Aim leans with the pointer." : motion === "wobble" ? "Base easing side to side on its own." : "Turning steadily on its own."}
        </p>
      </div>
    </div>
  );
}

1e:T312b, 1f:T2bd37,

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

const props = withDefaults(
  defineProps<{
    tint?: string;
    glow?: number;
    grain?: number;
    baseWidth?: number;
    motion?: "turn" | "wobble" | "tilt";
    speed?: number;
  }>(),
  { tint: "#38BDF8", glow: 1, grain: 0.5, baseWidth: 5.5, motion: "turn", speed: 0.5 },
);

type RGB = readonly [number, number, number];

const clamp = (v: number, lo: number, hi: number) => (v < lo ? lo : v > hi ? hi : v);

function hexToHsl(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;
  const r = ((n >> 16) & 255) / 255;
  const g = ((n >> 8) & 255) / 255;
  const b = (n & 255) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const d = max - min;
  const l = (max + min) / 2;
  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
  let h = 0;
  if (d !== 0) {
    if (max === r) h = ((g - b) / d) % 6;
    else if (max === g) h = (b - r) / d + 2;
    else h = (r - g) / d + 4;
    h = (h * 60 + 360) % 360;
  }
  return [h, s * 100, l * 100];
}

function hslToUnit(h: number, s: number, l: number): RGB {
  const a = (s / 100) * Math.min(l / 100, 1 - l / 100);
  const f = (n: number) => {
    const k = (n + ((h % 360) + 360) / 30) % 12;
    return l / 100 - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
  };
  return [f(0), f(8), f(4)];
}

function hash(x: number, y: number, seed: number): number {
  const s = Math.sin(x * 127.1 + y * 311.7 + seed * 0.6180339887) * 43758.5453;
  return s - Math.floor(s);
}

const clampByte = (v: number) => (v < 0 ? 0 : v > 255 ? 255 : v);

const EYE_X = 0;
const EYE_Y = 0.6;
const EYE_Z = 3.3;
const FWD_Y = 0.3906;
const FWD_Z = -0.9206;
const UP_Y = 0.9206;
const UP_Z = 0.3906;
const TAN_FOVY = Math.tan((44 * Math.PI) / 180 / 2);

const CONE_H = 5.1;
const CROSS_Z = 1.3;

const START_T = 0.08;
const MAX_STEPS = 20;
const MIN_STEP = 0.045;
const MAX_STEP = 0.55;
const STEP_SCALE = 0.9;
const MAX_DIST = 9.5;
const EXIT_LIGHT = 3.2;
// Gaussian rolloff on distance-to-surface: bigger FALLOFF_K hugs the glow tighter to the shape so
// the frame reads as a defined wedge against black rather than a wash (see weight below).
const FALLOFF_K = 26;
const STEP_BRIGHT = 0.95;
const LIGHT_CUTOFF = 0.004;

// The base-width control (2 to 8) maps onto a much narrower world-space half-radius so the shape
// stays inside the fixed camera frustum at every setting instead of its flanks running off-frame.
const HALF_BASE_MIN = 0.55;
const HALF_BASE_MAX = 1.55;
function mapHalfBase(baseWidth: number): number {
  const t = (clamp(baseWidth, 2, 8) - 2) / 6;
  return HALF_BASE_MIN + t * (HALF_BASE_MAX - HALF_BASE_MIN);
}

const COLOR_FY = 0.6;
const COLOR_FZ = 0.9;
const COLOR_PHASE = 0.5;
const HUE_SHIFT = 9;
const GRAIN_SCALE = 0.17;

const TURN_RATE = 0.5;
const WOBBLE_RATE = 0.85;
const WOBBLE_AMOUNT = 0.95;
const TILT_MAX = 1.6;
const TILT_STIFFNESS = 50;
const TILT_DAMPING = 12;

const BUFFER_H = 100;
const BUFFER_W_MAX = 182;

interface RenderParams {
  cosA: number;
  sinA: number;
  shear: number;
  leanX: number;
  leanZ: number;
  halfBase: number;
  slopeCos: number;
  lo: RGB;
  hi: RGB;
  glow: number;
  grainAmt: number;
  seed: number;
  mode: "turn" | "wobble" | "tilt";
}

/** One frame: march every pixel's ray toward the cone, accumulate banded color, roll off, add grain. */
function renderBeam(img: ImageData, w: number, h: number, p: RenderParams): void {
  const data = img.data;
  const aspect = w / h;
  const isTurn = p.mode === "turn";
  const isWobble = p.mode === "wobble";
  const isTilt = p.mode === "tilt";
  const [loR, loG, loB] = p.lo;
  const [hiR, hiG, hiB] = p.hi;
  let o = 0;
  for (let py = 0; py < h; py++) {
    const ndcY = 1 - ((py + 0.5) / h) * 2;
    const uy = ndcY * TAN_FOVY;
    const dyBase = FWD_Y + uy * UP_Y;
    const dzBase = FWD_Z + uy * UP_Z;
    for (let px = 0; px < w; px++) {
      const ndcX = ((px + 0.5) / w) * 2 - 1;
      let dx = ndcX * aspect * TAN_FOVY;
      let dy = dyBase;
      let dz = dzBase;
      const inv = 1 / Math.sqrt(dx * dx + dy * dy + dz * dz);
      dx *= inv;
      dy *= inv;
      dz *= inv;

      let t = START_T;
      let lr = 0;
      let lg = 0;
      let lb = 0;
      for (let s = 0; s < MAX_STEPS; s++) {
        const wx = EYE_X + dx * t;
        const wy = EYE_Y + dy * t;
        const wz = EYE_Z + dz * t;
        let lx = wx;
        let lz = wz;
        if (isTurn) {
          lx = wx * p.cosA - wz * p.sinA;
          lz = wx * p.sinA + wz * p.cosA;
        } else if (isWobble) {
          const k = wy < 0 ? 0 : wy > CONE_H ? 1 : wy / CONE_H;
          lx = wx - p.shear * (1 - k);
        } else if (isTilt) {
          const k = wy < 0 ? 0 : wy > CONE_H ? 1 : wy / CONE_H;
          lx = wx - p.leanX * k;
          lz = wz - p.leanZ * k;
        }
        const zc = lz * CROSS_Z;
        const r = Math.sqrt(lx * lx + zc * zc);
        const ny = wy < 0 ? 0 : wy > CONE_H ? CONE_H : wy;
        const radiusAtY = p.halfBase * (1 - ny / CONE_H);
        const distSide = (r - radiusAtY) * p.slopeCos;
        const distBottom = -wy;
        const distTop = wy - CONE_H;
        let d = distSide;
        if (distBottom > d) d = distBottom;
        if (distTop > d) d = distTop;
        const dPos = d > 0 ? d : 0;
        const weight = STEP_BRIGHT * Math.exp(-dPos * dPos * FALLOFF_K);
        if (weight > LIGHT_CUTOFF) {
          const m = 0.5 + 0.5 * Math.sin(wy * COLOR_FY + wz * COLOR_FZ + COLOR_PHASE);
          lr += (loR + (hiR - loR) * m) * weight;
          lg += (loG + (hiG - loG) * m) * weight;
          lb += (loB + (hiB - loB) * m) * weight;
        }
        const raw = Math.abs(d) * STEP_SCALE;
        t += raw < MIN_STEP ? MIN_STEP : raw > MAX_STEP ? MAX_STEP : raw;
        if (t > MAX_DIST || lr + lg + lb > EXIT_LIGHT) break;
      }

      const fr = 1 - Math.exp(-lr * p.glow);
      const fg = 1 - Math.exp(-lg * p.glow);
      const fb = 1 - Math.exp(-lb * p.glow);
      const n = (hash(px, py, p.seed) - 0.5) * p.grainAmt * GRAIN_SCALE;
      data[o++] = clampByte((fr + n) * 255);
      data[o++] = clampByte((fg + n) * 255);
      data[o++] = clampByte((fb + n) * 255);
      data[o++] = 255;
    }
  }
}

const host = ref<HTMLDivElement | null>(null);
const surface = ref<HTMLCanvasElement | null>(null);
let repaint: (() => void) | undefined;
let teardown: (() => void) | undefined;
let pointerCleanup: (() => void) | undefined;
const pointerState = { nx: 0, ny: 0, engaged: false };

function setupPointer() {
  pointerCleanup?.();
  pointerCleanup = undefined;
  pointerState.engaged = false;
  if (props.motion !== "tilt") return;
  const el = host.value;
  if (!el) return;
  const onMove = (event: PointerEvent) => {
    const rect = el.getBoundingClientRect();
    pointerState.nx = clamp(((event.clientX - rect.left) / (rect.width || 1)) * 2 - 1, -1, 1);
    pointerState.ny = clamp(((event.clientY - rect.top) / (rect.height || 1)) * 2 - 1, -1, 1);
    pointerState.engaged = true;
  };
  const onLeave = () => {
    pointerState.engaged = false;
  };
  el.addEventListener("pointermove", onMove, { passive: true });
  el.addEventListener("pointerleave", onLeave, { passive: true });
  window.addEventListener("pointerup", onLeave, { passive: true });
  window.addEventListener("pointercancel", onLeave, { passive: true });
  pointerCleanup = () => {
    el.removeEventListener("pointermove", onMove);
    el.removeEventListener("pointerleave", onLeave);
    window.removeEventListener("pointerup", onLeave);
    window.removeEventListener("pointercancel", onLeave);
    pointerState.engaged = false;
  };
}

onMounted(() => {
  const el = host.value;
  const canvas = surface.value;
  const view = canvas?.getContext("2d");
  const buffer = document.createElement("canvas");
  const bctx = buffer.getContext("2d");
  if (!el || !canvas || !view || !bctx) return;

  const calm = window.matchMedia("(prefers-reduced-motion: reduce)");
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  const wobblePhase = Math.random() * Math.PI * 2;

  let img = bctx.createImageData(1, 1);
  let bw = 1;
  let bh = 1;
  let clock = 0;
  let turnAngle = 0;
  let leanX = 0;
  let leanZ = 0;
  let leanVX = 0;
  let leanVZ = 0;
  let seed = 0;
  let last = 0;
  let raf = 0;
  let inView = true;
  let pageVisible = !document.hidden;
  let active = true;

  const draw = () => {
    const [h0, s0, l0] = hexToHsl(props.tint);
    const sat = clamp(s0, 55, 100);
    const light = clamp(l0, 44, 68);
    const halfBase = mapHalfBase(props.baseWidth);
    renderBeam(img, bw, bh, {
      cosA: Math.cos(turnAngle),
      sinA: Math.sin(turnAngle),
      shear: Math.sin(clock * WOBBLE_RATE + wobblePhase) * WOBBLE_AMOUNT,
      leanX,
      leanZ,
      halfBase,
      slopeCos: CONE_H / Math.sqrt(CONE_H * CONE_H + halfBase * halfBase),
      lo: hslToUnit(h0 - HUE_SHIFT, sat, light),
      hi: hslToUnit(h0 + HUE_SHIFT, sat, light),
      glow: clamp(props.glow, 0.2, 3),
      grainAmt: clamp(props.grain, 0, 1),
      seed,
      mode: props.motion,
    });
    bctx.putImageData(img, 0, 0);
    view.imageSmoothingEnabled = true;
    view.imageSmoothingQuality = "high";
    view.drawImage(buffer, 0, 0, canvas.width, canvas.height);
  };

  const resize = () => {
    const w = Math.max(1, el.clientWidth);
    const h = Math.max(1, el.clientHeight);
    canvas.width = Math.round(w * dpr);
    canvas.height = Math.round(h * dpr);
    bh = BUFFER_H;
    bw = clamp(Math.round((BUFFER_H * w) / h), 32, BUFFER_W_MAX);
    buffer.width = bw;
    buffer.height = bh;
    img = bctx.createImageData(bw, bh);
    draw();
  };

  const needsLoop = () => active && !calm.matches;

  const tick = (now: number) => {
    raf = 0;
    if (!active || calm.matches) return;
    const dt = Math.min(0.05, (now - (last || now)) / 1000);
    last = now;
    const spd = clamp(props.speed, 0.1, 2);
    clock += dt * spd;
    turnAngle += dt * spd * TURN_RATE;
    const tiltActive = props.motion === "tilt" && pointerState.engaged;
    const targetX = tiltActive ? pointerState.nx * TILT_MAX : 0;
    const targetZ = tiltActive ? pointerState.ny * TILT_MAX * 0.6 : 0;
    leanVX += ((targetX - leanX) * TILT_STIFFNESS - leanVX * TILT_DAMPING) * dt;
    leanX += leanVX * dt;
    leanVZ += ((targetZ - leanZ) * TILT_STIFFNESS - leanVZ * TILT_DAMPING) * dt;
    leanZ += leanVZ * dt;
    seed += 1;
    draw();
    if (needsLoop()) raf = requestAnimationFrame(tick);
  };

  const wake = () => {
    if (!raf && needsLoop()) {
      last = 0;
      raf = requestAnimationFrame(tick);
    }
  };

  const syncActive = () => {
    active = inView && pageVisible;
    if (active) wake();
  };

  const onCalmChange = () => {
    cancelAnimationFrame(raf);
    raf = 0;
    if (calm.matches) {
      turnAngle = 0;
      leanX = 0;
      leanZ = 0;
      leanVX = 0;
      leanVZ = 0;
    }
    draw();
    wake();
  };

  repaint = () => {
    draw();
    wake();
  };

  const observer = new ResizeObserver(resize);
  observer.observe(el);
  resize();
  setupPointer();

  const io = new IntersectionObserver(
    (entries) => {
      inView = !!entries[0]?.isIntersecting;
      syncActive();
    },
    { threshold: 0 },
  );
  io.observe(el);

  const onVisibility = () => {
    pageVisible = !document.hidden;
    syncActive();
  };
  document.addEventListener("visibilitychange", onVisibility);
  calm.addEventListener("change", onCalmChange);
  wake();

  teardown = () => {
    cancelAnimationFrame(raf);
    observer.disconnect();
    io.disconnect();
    document.removeEventListener("visibilitychange", onVisibility);
    calm.removeEventListener("change", onCalmChange);
    pointerCleanup?.();
    repaint = undefined;
  };
});

onBeforeUnmount(() => teardown?.());

watch(
  () => [props.tint, props.glow, props.grain, props.baseWidth, props.motion, props.speed],
  () => {
    setupPointer();
    repaint?.();
  },
);
</script>

<template>
  <div ref="host" class="light-cone-beam">
    <canvas ref="surface" aria-hidden="true" class="light-cone-beam__canvas"></canvas>
  </div>
</template>

<style scoped>
.light-cone-beam {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0d10;
}
.light-cone-beam__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
</style>

Zenith beam holding at 41 degrees

Nearby

Zenith beam holding at 41 degrees