Flow Lines

/**
 * VibeBox Motion · Flow Lines
 * 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 { flowLinesPiece, presets, type FlowLinesPreset } from "./flow-lines.shader";

export type FlowLinesColor = "base" | "a" | "b" | "c";
export type FlowLinesValue = "lines" | "amp" | "freq" | "width" | "glow" | "tilt";

export type FlowLinesProps = {
  /** What sits on the scene: a heading, a call to action, a whole section. */
  children?: ReactNode;
  /** A named look: `aurora`, `ember`, `ocean`, `orchid`, `gold`, `ice`. */
  preset?: FlowLinesPreset;
  /** Overrides single palette colours with any CSS colour. */
  colors?: Partial<Record<FlowLinesColor, 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<FlowLinesValue, number>>;

const POSTER: PosterSpec = { type: "linear", from: "base", to: "base", angle: 180, blobs: [{ color: "a", at: [28, 58], size: 52 }, { color: "c", at: [76, 42], size: 46 }] };

export function FlowLines({ children, preset, colors, speed, intensity, interactive = true, label, still, className, lines, amp, freq, width, glow, tilt }: FlowLinesProps) {
  return (
    <BackdropCanvas
      slug="flow-lines"
      piece={flowLinesPiece}
      presets={presets}
      fallback="aurora"
      preset={preset}
      colors={colors}
      values={{ lines, amp, freq, width, glow, tilt }}
      speed={speed}
      intensity={intensity}
      poster={POSTER}
      scale={0.6}
      stillTime={4}
      still={still}
      interactive={interactive}
      label={label}
      className={className}
    >
      {children}
    </BackdropCanvas>
  );
}

/**
 * VibeBox Motion · Flow Lines
 * 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";

/*
 * Many thin lines of light that ride one slow wave. Each line is a curve of x with its own
 * phase, so together they bunch and fan like silk threads; they brighten where they converge,
 * take their colour from a three-stop ramp across the stack, and thin out toward the far edge so
 * the sheet reads as having depth. The pointer pulls the lines toward it.
 */

const SCENE = /* glsl */ `
uniform vec3 uBase;
uniform vec3 uA;
uniform vec3 uB;
uniform vec3 uC;
uniform float uLines;
uniform float uAmp;
uniform float uFreq;
uniform float uWidth;
uniform float uGlow;
uniform float uTilt;
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 m = (uPointer - 0.5) * vec2(aspect, 1.0);
  int count = int(clamp(uLines, 8.0, 64.0));
  vec3 col = lin(uBase);
  // A faint floor glow so the dark is not flat.
  col += lin(uB) * 0.025 * exp(-pow(uv.y + 0.35, 2.0) * 6.0);

  float acc = 0.0;
  vec3 tint = vec3(0.0);
  for (int i = 0; i < 64; i++) {
    if (i >= count) break;
    float t = float(i) / float(max(count - 1, 1));
    // The stack's depth: nearer lines (t small) are lower and bigger, far ones higher and finer.
    float depth = mix(1.0, 0.4, t);
    float x = uv.x * uFreq;
    float ph = t * 3.2 + T * (0.22 + 0.05 * t);
    float y = mix(-0.34, 0.3, t) * uTilt + (-0.06 + 0.12 * t) * 0.0;
    float wave = sin(x * 1.1 + ph) * 0.55 + sin(x * 2.3 - ph * 1.7 + 1.3) * 0.28 + sin(x * 0.45 + ph * 0.6) * 0.5;
    y += wave * uAmp * depth * 0.22;
    // The pointer draws the lines toward it.
    float pull = exp(-pow((uv.x - m.x) * 1.6, 2.0)) * (0.5 + uHover * 0.9);
    y += (m.y - y) * pull * 0.14 * (1.0 - t);
    float d = abs(uv.y - y);
    float w = uWidth * 0.0036 * (0.55 + 0.7 * depth);
    float core = exp(-pow(d / w, 2.0));
    float halo = exp(-d / (w * 7.0)) * 0.18 * uGlow;
    float line = (core + halo) * (0.45 + 0.9 * depth);
    // Brighter where the stack bunches (neighbours close together).
    vec3 c = t < 0.5 ? mix(lin(uA), lin(uB), t * 2.0) : mix(lin(uB), lin(uC), (t - 0.5) * 2.0);
    tint += c * line;
    acc += line;
  }
  col += tint * 0.55;
  col += lin(uB) * acc * 0.03 * uGlow;

  col *= uIntensity;
  col *= 1.0 - 0.42 * smoothstep(0.4, 1.2, length(uv * vec2(0.75, 1.0)));
  fragColor = vec4(finish(col, gl_FragCoord.xy), 1.0);
}
`;

export const fragment = compose(SCENE);

export const PRESET_NAMES = ["aurora", "ember", "ocean", "orchid", "gold", "ice"] as const;
export type FlowLinesPreset = (typeof PRESET_NAMES)[number];

export const presets: Record<FlowLinesPreset, ScenePreset> = {
  aurora: {
    colors: { base: "#04060f", a: "#33e0ff", b: "#6f5cff", c: "#ff4fd8" },
    values: { lines: 44, amp: 1, freq: 1.7, width: 1, glow: 1, tilt: 1, speed: 0.8, intensity: 1.1 },
  },
  ember: {
    colors: { base: "#0a0405", a: "#ff3b30", b: "#ff9a2e", c: "#ffe27a" },
    values: { lines: 40, amp: 1.05, freq: 1.5, width: 1, glow: 1.1, tilt: 1, speed: 0.75, intensity: 1.1 },
  },
  ocean: {
    colors: { base: "#020a10", a: "#00e0c0", b: "#1a8cff", c: "#a8f0ff" },
    values: { lines: 48, amp: 0.95, freq: 1.8, width: 0.9, glow: 1, tilt: 1, speed: 0.7, intensity: 1.1 },
  },
  orchid: {
    colors: { base: "#0a0412", a: "#ff6ad5", b: "#b24dff", c: "#6dc4ff" },
    values: { lines: 42, amp: 1.1, freq: 1.6, width: 1, glow: 1.1, tilt: 1, speed: 0.8, intensity: 1.1 },
  },
  gold: {
    colors: { base: "#0a0804", a: "#ffd978", b: "#f2a93c", c: "#fff3c8" },
    values: { lines: 46, amp: 0.9, freq: 1.5, width: 0.9, glow: 1, tilt: 1, speed: 0.6, intensity: 1.1 },
  },
  ice: {
    colors: { base: "#04060b", a: "#e8f4ff", b: "#9ec8ff", c: "#ffffff" },
    values: { lines: 38, amp: 0.9, freq: 1.6, width: 0.8, glow: 0.9, tilt: 1, speed: 0.6, intensity: 1.05 },
  },
};

export const flowLinesPiece = createScenePiece("flow-lines", fragment);

/**
 * VibeBox Motion · Flow Lines
 * 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 { FlowLines, type FlowLinesProps, type FlowLinesColor, type FlowLinesValue } from "./flow-lines.client";
export { PRESET_NAMES as FLOW_LINES_PRESETS, presets as flowLinesPresets, type FlowLinesPreset } from "./flow-lines.shader";