Rays

/**
 * VibeBox Motion · Rays
 * 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 { Rays, type RaysProps, type RaysColor, type RaysValue } from "./rays.client";
export { PRESET_NAMES as RAYS_PRESETS, presets as raysPresets, type RaysPreset } from "./rays.shader";

/**
 * VibeBox Motion · Rays
 * 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 { raysPiece, presets, type RaysPreset } from "./rays.shader";

export type RaysColor = "base" | "haze" | "beam" | "core";
export type RaysValue = "sourceX" | "sourceY" | "spread" | "sharp" | "dust" | "blinds";

export type RaysProps = {
  /** What sits on the scene: a heading, a call to action, a whole section. */
  children?: ReactNode;
  /** A named look: `cathedral`, `cinema`, `dawn`, `forest`, `violet`, `mono`. */
  preset?: RaysPreset;
  /** Overrides single palette colours with any CSS colour. */
  colors?: Partial<Record<RaysColor, 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<RaysValue, number>>;

const POSTER: PosterSpec = { type: "radial", base: "base", glow: "beam", edge: "haze", at: [40, 0] };

export function Rays({ children, preset, colors, speed, intensity, interactive = true, label, still, className, sourceX, sourceY, spread, sharp, dust, blinds }: RaysProps) {
  return (
    <BackdropCanvas
      slug="rays"
      piece={raysPiece}
      presets={presets}
      fallback="cathedral"
      preset={preset}
      colors={colors}
      values={{ sourceX, sourceY, spread, sharp, dust, blinds }}
      speed={speed}
      intensity={intensity}
      poster={POSTER}
      scale={0.5}
      stillTime={3.2}
      still={still}
      interactive={interactive}
      label={label}
      className={className}
    >
      {children}
    </BackdropCanvas>
  );
}

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

/*
 * Light through haze: a source above the frame and shafts that fan from it. Three layers of
 * angular noise at different widths and drift speeds give the shafts their depth (the broad ones
 * move slowly, the fine ones faster), each fading with distance from the source; a bloom sits at
 * the source, dust catches the light inside the beams, and the floor of the frame falls into the
 * base colour. The pointer swings the source a little.
 */

const SCENE = /* glsl */ `
uniform vec3 uBase;
uniform vec3 uHaze;
uniform vec3 uBeam;
uniform vec3 uCore;
uniform float uSourceX;
uniform float uSourceY;
uniform float uSpread;
uniform float uSharp;
uniform float uDust;
uniform float uBlinds;
uniform float uSpeed;
uniform float uIntensity;

float T;

float ang1(float a, float seed) {
  // 1D value noise on the angle, wrapped smoothly.
  float i = floor(a);
  float f = fract(a);
  f = f * f * (3.0 - 2.0 * f);
  return mix(h1(int(i) + int(seed * 31.0)), h1(int(i) + 1 + int(seed * 31.0)), f);
}

void main() {
  vec2 uv = centred(gl_FragCoord.xy);
  T = uTime * uSpeed;
  float aspect = uResolution.x / uResolution.y;
  vec2 src = vec2(uSourceX * 0.5 * aspect + (uPointer.x - 0.5) * 0.18 * (0.3 + uHover), 0.5 + uSourceY * 0.5);
  vec2 v = uv - src;
  float dist = length(v);
  float a = atan(v.x, -v.y);

  // Three layers of shafts.
  float s = 0.0;
  float w1 = ang1(a * 5.0 * uSpread + T * 0.06, 1.0);
  float w2 = ang1(a * 11.0 * uSpread - T * 0.09, 2.0);
  float w3 = ang1(a * 27.0 * uSpread + T * 0.14, 3.0);
  s += pow(w1, uSharp) * 0.9;
  s += pow(w2, uSharp * 1.2) * 0.7;
  s += pow(w3, uSharp * 1.6) * 0.45;
  // Optional blinds: the shafts are cut into soft bands, as through slats, slightly tilted.
  float slats = mix(1.0, smoothstep(0.12, 0.62, abs(fract(uv.y * 5.2 + uv.x * 0.22) - 0.5) * 2.0), uBlinds);
  s *= slats;

  float reach = exp(-dist * 1.35);
  float beam = s * reach;
  vec3 col = lin(uBase);
  // The haze fills the frame with a soft gradient toward the source.
  col += lin(uHaze) * (0.35 * exp(-dist * 1.9) + 0.08);
  col += lin(uBeam) * beam * 1.15;
  // A bloom at the source.
  col += lin(uCore) * (exp(-dist * 6.0) * 0.9 + exp(-dist * 22.0) * 1.4);

  // Dust catching the light inside the shafts.
  if (uDust > 0.01) {
    vec2 g = uv * vec2(34.0, 22.0) + vec2(T * 0.06, -T * 0.11);
    vec2 cell = floor(g);
    float rnd = h2(ivec2(cell));
    vec2 o = h22(ivec2(cell)) - 0.5;
    float d = length(fract(g) - 0.5 - o * 0.7);
    float tw = 0.5 + 0.5 * sin(T * (0.6 + rnd * 1.6) + rnd * 40.0);
    float mote = smoothstep(0.1, 0.0, d) * step(0.78, rnd) * tw;
    col += lin(uBeam) * mote * uDust * (0.2 + 1.6 * beam);
  }

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

export const fragment = compose(SCENE);

export const PRESET_NAMES = ["cathedral", "cinema", "dawn", "forest", "violet", "mono"] as const;
export type RaysPreset = (typeof PRESET_NAMES)[number];

export const presets: Record<RaysPreset, ScenePreset> = {
  cathedral: {
    colors: { base: "#0b0704", haze: "#5a3410", beam: "#ffcf8a", core: "#fff3d6" },
    values: { sourceX: 0.35, sourceY: 0.25, spread: 1, sharp: 2.2, dust: 1, blinds: 0, speed: 0.7, intensity: 1 },
  },
  cinema: {
    colors: { base: "#03060d", haze: "#0f2a4a", beam: "#8ec9ff", core: "#eaf5ff" },
    values: { sourceX: -0.3, sourceY: 0.3, spread: 1.1, sharp: 2.6, dust: 0.8, blinds: 0.7, speed: 0.6, intensity: 1 },
  },
  dawn: {
    colors: { base: "#120a14", haze: "#6a2a4a", beam: "#ffb09a", core: "#fff0e0" },
    values: { sourceX: 0.0, sourceY: 0.15, spread: 0.9, sharp: 1.8, dust: 0.9, blinds: 0, speed: 0.55, intensity: 1.05 },
  },
  forest: {
    colors: { base: "#030b07", haze: "#0e3a22", beam: "#c9ffb0", core: "#f4ffe0" },
    values: { sourceX: 0.45, sourceY: 0.3, spread: 1.2, sharp: 2.4, dust: 1.2, blinds: 0, speed: 0.6, intensity: 1 },
  },
  violet: {
    colors: { base: "#07030f", haze: "#2a1054", beam: "#c79bff", core: "#f4ecff" },
    values: { sourceX: -0.15, sourceY: 0.25, spread: 1, sharp: 2, dust: 0.8, blinds: 0.35, speed: 0.65, intensity: 1 },
  },
  mono: {
    colors: { base: "#040405", haze: "#202228", beam: "#ffffff", core: "#ffffff" },
    values: { sourceX: 0.2, sourceY: 0.3, spread: 1, sharp: 2.8, dust: 0.6, blinds: 0, speed: 0.5, intensity: 1 },
  },
};

export const raysPiece = createScenePiece("rays", fragment);