Dot Waves

/**
 * VibeBox Motion · Dot Waves
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
"use client";

import type { ReactNode } from "react";
import { BackdropCanvas, type PosterSpec } from "@/lib/vibebox/backdrop-canvas";
import { dotWavesPiece, presets, type DotWavesPreset } from "./dot-waves.shader";

export type DotWavesColor = "paperD" | "dotA" | "dotB";
export type DotWavesValue = "cellsD" | "wave" | "contrast";

export type DotWavesProps = {
  /** What sits on the scene: a heading, a call to action, a whole section. */
  children?: ReactNode;
  /** A named look: `ink`, `cyan`, `slate`, `rose`, `paper`. */
  preset?: DotWavesPreset;
  /** Overrides single palette colours with any CSS colour. */
  colors?: Partial<Record<DotWavesColor, string>>;
  /** Multiplies the preset's speed (1 keeps it, 0 holds the scene still). */
  speed?: number;
  /** Multiplies the preset's brightness. */
  intensity?: number;
  /** The pointer and touch move the scene. */
  interactive?: boolean;
  /** Accessible name; leave it out when the scene is only a background. */
  label?: string;
  /** Hold one still frame until this is false (for a gallery card). */
  still?: boolean;
  className?: string;
} & Partial<Record<DotWavesValue, number>>;

const POSTER: PosterSpec = { type: "linear", from: "paperD", to: "paperD", angle: 180, blobs: [{ color: "dotA", at: [30, 60], size: 50 }, { color: "dotB", at: [72, 35], size: 40 }] };

export function DotWaves({ children, preset, colors, speed, intensity, interactive = true, label, still, className, cellsD, wave, contrast }: DotWavesProps) {
  return (
    <BackdropCanvas
      slug="dot-waves"
      piece={dotWavesPiece}
      presets={presets}
      fallback="ink"
      preset={preset}
      colors={colors}
      values={{ cellsD, wave, contrast }}
      speed={speed}
      intensity={intensity}
      poster={POSTER}
      scale={0.5}
      stillTime={3}
      still={still}
      interactive={interactive}
      label={label}
      className={className}
    >
      {children}
    </BackdropCanvas>
  );
}

/**
 * VibeBox Motion · Dot Waves
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { compose, createScenePiece, type ScenePreset } from "@/lib/vibebox/engine/backdrops";

/*
 * A halftone field: a grid of dots whose size follows a travelling wave, with the colour running
 * from one end of the palette to the other along the wave. It reads as a printed gradient that
 * breathes. The pointer drops a swell in the field.
 */

const SCENE = /* glsl */ `
uniform vec3 uPaperD;
uniform vec3 uDotA;
uniform vec3 uDotB;
uniform float uCellsD;
uniform float uWave;
uniform float uContrast;
uniform float uSpeed;
uniform float uIntensity;

float T;

void main() {
  vec2 uv = centred(gl_FragCoord.xy);
  T = uTime * uSpeed;
  float aspect = uResolution.x / uResolution.y;
  vec2 pu = vec2((uPointer.x - 0.5) * aspect, uPointer.y - 0.5);

  float cells = uCellsD * 36.0;
  vec2 g = uv * cells;
  // A staggered grid reads smoother than a square one.
  g.x += mod(floor(g.y), 2.0) * 0.5;
  vec2 id = floor(g);
  vec2 f = fract(g) - 0.5;
  vec2 centre = (id + 0.5 - vec2(mod(id.y, 2.0) * 0.5, 0.0)) / cells;

  // The wave: two crossing swells and a slow drift of noise, with the pointer's swell on top.
  float w = 0.5 + 0.5 * sin(centre.x * 3.2 * uWave + T * 0.6 + sin(centre.y * 2.0 + T * 0.3) * 1.2);
  w = w * 0.6 + 0.4 * (0.5 + 0.5 * sin(centre.y * 5.0 * uWave - T * 0.5 + centre.x * 2.0));
  w += 0.35 * (fbm3(centre * 2.0 + vec2(T * 0.05, 0.0)) - 0.5);
  float d = length(centre - pu);
  w += uHover * 0.5 * exp(-d * d * 8.0);
  w = clamp(w, 0.0, 1.0);

  float radius = mix(0.04, 0.46, pow(w, uContrast));
  float dist = length(f);
  float aa = 1.5 / (uResolution.y / cells);
  float dotMask = smoothstep(radius + aa, radius - aa, dist);

  vec3 col = lin(uPaperD);
  col = mix(col, mix(lin(uDotA), lin(uDotB), w), dotMask);

  col *= uIntensity;
  col *= 1.0 - 0.2 * smoothstep(0.6, 1.2, length(uv * vec2(0.85, 1.1)));
  fragColor = vec4(finish(col, gl_FragCoord.xy), 1.0);
}
`;

export const fragment = compose(SCENE);

export const PRESET_NAMES = ["ink", "cyan", "slate", "rose", "paper"] as const;
export type DotWavesPreset = (typeof PRESET_NAMES)[number];

export const presets: Record<DotWavesPreset, ScenePreset> = {
  ink: {
    colors: { paperD: "#070610", dotA: "#3a2a8a", dotB: "#b9a6ff" },
    values: { cellsD: 1, wave: 1, contrast: 1.2, speed: 0.8, intensity: 1.1 },
  },
  cyan: {
    colors: { paperD: "#03121a", dotA: "#0d6a8a", dotB: "#6fffe0" },
    values: { cellsD: 1, wave: 1, contrast: 1.1, speed: 0.9, intensity: 1.1 },
  },
  slate: {
    colors: { paperD: "#0e1118", dotA: "#3a4458", dotB: "#cfd6e6" },
    values: { cellsD: 0.9, wave: 0.9, contrast: 1.3, speed: 0.6, intensity: 1.05 },
  },
  rose: {
    colors: { paperD: "#14060d", dotA: "#8a1f4a", dotB: "#ffb3cf" },
    values: { cellsD: 1, wave: 1.1, contrast: 1.2, speed: 0.8, intensity: 1.1 },
  },
  paper: {
    colors: { paperD: "#f4efe6", dotA: "#c9442a", dotB: "#1b1b1b" },
    values: { cellsD: 0.95, wave: 1, contrast: 1.2, speed: 0.6, intensity: 1 },
  },
};

export const dotWavesPiece = createScenePiece("dot-waves", fragment);

/**
 * VibeBox Motion · Dot Waves
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
export { DotWaves, type DotWavesProps, type DotWavesColor, type DotWavesValue } from "./dot-waves.client";
export { PRESET_NAMES as DOT_WAVES_PRESETS, presets as dotWavesPresets, type DotWavesPreset } from "./dot-waves.shader";