Ridgeline

/**
 * VibeBox Motion · Ridgeline
 * 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 { Ridgeline, type RidgelineProps, type RidgelineColor, type RidgelineValue } from "./ridgeline.client";
export { PRESET_NAMES as RIDGELINE_PRESETS, presets as ridgelinePresets, type RidgelinePreset } from "./ridgeline.shader";

/**
 * VibeBox Motion · Ridgeline
 * 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 { ridgelinePiece, presets, type RidgelinePreset } from "./ridgeline.shader";

export type RidgelineColor = "sky" | "horizon" | "sun" | "far" | "near" | "mist";
export type RidgelineValue = "layers" | "peak" | "trees" | "snow" | "sunX" | "sunY";

export type RidgelineProps = {
  /** What sits on the scene: a heading, a call to action, a whole section. */
  children?: ReactNode;
  /** A named look: `alpine`, `dunes`, `forest`, `paper`, `mist`, `volcano`. */
  preset?: RidgelinePreset;
  /** Overrides single palette colours with any CSS colour. */
  colors?: Partial<Record<RidgelineColor, 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<RidgelineValue, number>>;

const POSTER: PosterSpec = { type: "horizon", top: "sky", horizon: "horizon", groundTop: "far", groundBottom: "near", at: 55, glow: "sun", glowAt: [66, 50] };

export function Ridgeline({ children, preset, colors, speed, intensity, interactive = true, label, still, className, layers, peak, trees, snow, sunX, sunY }: RidgelineProps) {
  return (
    <BackdropCanvas
      slug="ridgeline"
      piece={ridgelinePiece}
      presets={presets}
      fallback="alpine"
      preset={preset}
      colors={colors}
      values={{ layers, peak, trees, snow, sunX, sunY }}
      speed={speed}
      intensity={intensity}
      poster={POSTER}
      scale={0.5}
      stillTime={3}
      still={still}
      interactive={interactive}
      label={label}
      className={className}
    >
      {children}
    </BackdropCanvas>
  );
}

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

/*
 * Layers of land receding into haze: mountains, dunes, hills or a forest edge, painted far to near
 * under a sky with a sun. Each layer's skyline is a fractal curve (smooth for dunes, creased for
 * peaks), tinted from the far colour to the near colour and veiled in mist where it meets the
 * layer behind. The pointer lets the layers slide a little at different speeds.
 */

const SCENE = /* glsl */ `
uniform vec3 uSky;
uniform vec3 uHorizon;
uniform vec3 uSun;
uniform vec3 uFar;
uniform vec3 uNear;
uniform vec3 uMist;
uniform float uLayers;
uniform float uPeak;
uniform float uTrees;
uniform float uSnow;
uniform float uSunX;
uniform float uSunY;
uniform float uSpeed;
uniform float uIntensity;

float T;

float skyline(float x, float t, float seed) {
  float smoothHills = fbm3(vec2(x * (0.9 + t * 0.9), seed));
  float creased = ridged(vec2(x * (0.7 + t * 0.8), seed + 3.0));
  float h = mix(smoothHills, creased * 0.9, uPeak);
  return (h - 0.5) * (0.5 + 0.55 * t);
}

void main() {
  vec2 uv = centred(gl_FragCoord.xy);
  T = uTime * uSpeed;
  float aspect = uResolution.x / uResolution.y;
  float shift = (uPointer.x - 0.5) * 0.12 * (0.3 + uHover);

  // Sky and sun.
  float sy = clamp((uv.y + 0.5), 0.0, 1.0);
  vec3 col = lin(mix(uHorizon, uSky, smoothstep(0.2, 1.0, sy)));
  vec2 sunPos = vec2(uSunX * 0.5 * aspect, -0.02 + uSunY * 0.45);
  float sd = length(uv - sunPos);
  vec3 sun = lin(uSun);
  col += sun * (exp(-sd * 3.2) * 0.35 + exp(-sd * 11.0) * 0.5 + 2.2 * smoothstep(0.05, 0.035, sd));

  int count = int(clamp(uLayers, 2.0, 7.0));
  for (int i = 0; i < 7; i++) {
    if (i >= count) break;
    float t = float(i) / float(max(count - 1, 1));
    float x = (uv.x + shift * (0.4 + 1.6 * t)) * 1.1 + T * 0.006 * (0.4 + t) + float(i) * 11.0;
    float baseline = mix(0.02, -0.3, t);
    float amp = skyline(x, t, float(i) * 7.3);
    // The ridge itself, smooth; the tree fringe rides on it and only touches the silhouette.
    float ridge = baseline + amp * mix(0.55, 1.0, uPeak * 0.5 + 0.5);
    float top = ridge;
    // Pines: a fringe of soft triangles on the nearer layers, grouped in stands rather than a comb.
    if (uTrees > 0.01 && t > 0.25) {
      float f = x * (34.0 + 46.0 * t);
      float tri = abs(fract(f) - 0.5) * 2.0;
      float stand = 0.55 + 0.45 * vnoise(vec2(f * 0.11, float(i) * 3.7));
      float tall = stand * (0.7 + 0.3 * h2(ivec2(int(floor(f)), i)));
      top += uTrees * (0.026 + 0.022 * t) * pow(1.0 - tri, 1.35) * tall;
    }
    float px = 1.4 / uResolution.y;
    float inside = smoothstep(top + px, top - px, uv.y);
    if (inside <= 0.0) continue;

    vec3 layerCol = lin(mix(uFar, uNear, pow(t, 0.9)));
    // Mist pools toward the top edge of each layer, thickest in the far ones.
    // Measured from the layer's own baseline, so the mist never inherits the skyline's jaggedness.
    float depthFromTop = clamp((baseline + 0.2 - uv.y) / 0.42, 0.0, 1.0);
    float mist = (1.0 - depthFromTop) * (0.85 - 0.6 * t) + (1.0 - t) * 0.12;
    layerCol = mix(layerCol, lin(uMist), clamp(mist, 0.0, 1.0));
    // Sunlit rim on the side facing the sun.
    float rim = smoothstep(0.012, 0.0, ridge - uv.y) * (0.25 + 0.75 * smoothstep(0.4, -0.2, uv.x - sunPos.x));
    layerCol += sun * rim * 0.28 * (1.0 - t * 0.5);
    // Snow where the peaks are tallest.
    if (uSnow > 0.01) {
      float line = baseline + 0.08 + (1.0 - uSnow) * 0.08;
      float depth = 0.045 + 0.07 * vnoise(vec2(x * 6.0, float(i) * 5.1));
      float snow = smoothstep(line, line + 0.06, ridge) * smoothstep(depth, 0.0, ridge - uv.y);
      layerCol = mix(layerCol, lin(mix(uMist, uSun, 0.45)), snow * 0.9);
    }
    col = mix(col, layerCol, inside);
  }

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

export const fragment = compose(SCENE);

export const PRESET_NAMES = ["alpine", "dunes", "forest", "paper", "mist", "volcano"] as const;
export type RidgelinePreset = (typeof PRESET_NAMES)[number];

export const presets: Record<RidgelinePreset, ScenePreset> = {
  alpine: {
    colors: { sky: "#2d4a8a", horizon: "#ffd6b8", sun: "#fff0d0", far: "#a9b4d6", near: "#141c36", mist: "#f1d9d2" },
    values: { layers: 6, peak: 1, trees: 0.12, snow: 0.7, sunX: 0.35, sunY: 0.12, speed: 0.6, intensity: 1 },
  },
  dunes: {
    colors: { sky: "#e8864a", horizon: "#ffd9a0", sun: "#fff5dc", far: "#f2b077", near: "#5a2418", mist: "#ffe0b8" },
    values: { layers: 5, peak: 0, trees: 0, snow: 0, sunX: -0.3, sunY: 0.2, speed: 0.5, intensity: 1 },
  },
  forest: {
    colors: { sky: "#7fa6a0", horizon: "#e9f0d8", sun: "#fff8e0", far: "#a8c2a6", near: "#0d2a1f", mist: "#e4efdc" },
    values: { layers: 7, peak: 0.35, trees: 1, snow: 0, sunX: 0.4, sunY: 0.3, speed: 0.5, intensity: 1 },
  },
  paper: {
    colors: { sky: "#ffd9a8", horizon: "#fff0d8", sun: "#fffaf0", far: "#f7a98b", near: "#33577a", mist: "#ffe9d1" },
    values: { layers: 5, peak: 0.25, trees: 0, snow: 0, sunX: 0.3, sunY: 0.28, speed: 0.4, intensity: 1 },
  },
  mist: {
    colors: { sky: "#c9d4df", horizon: "#f1f4f4", sun: "#ffffff", far: "#cfd9df", near: "#52606c", mist: "#eef2f3" },
    values: { layers: 6, peak: 0.6, trees: 0.5, snow: 0, sunX: 0.1, sunY: 0.3, speed: 0.4, intensity: 1 },
  },
  volcano: {
    colors: { sky: "#1a0b16", horizon: "#ff6a33", sun: "#ffc27a", far: "#6d2a2a", near: "#0b0508", mist: "#ff8a52" },
    values: { layers: 5, peak: 0.9, trees: 0, snow: 0, sunX: 0.0, sunY: 0.1, speed: 0.5, intensity: 1 },
  },
};

export const ridgelinePiece = createScenePiece("ridgeline", fragment);