Liquid Ink

/**
 * VibeBox Motion · Liquid Ink
 * 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 { LiquidInk, type LiquidInkProps, type LiquidInkColor, type LiquidInkValue } from "./liquid-ink.client";
export { PRESET_NAMES as LIQUID_INK_PRESETS, presets as liquidInkPresets, type LiquidInkPreset } from "./liquid-ink.shader";

/**
 * VibeBox Motion · Liquid Ink
 * 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 { liquidInkPiece, presets, type LiquidInkPreset } from "./liquid-ink.shader";

export type LiquidInkColor = "base" | "inkA" | "inkB" | "vein" | "high";
export type LiquidInkValue = "scaleV" | "flow" | "veins" | "sharp";

export type LiquidInkProps = {
  /** What sits on the scene: a heading, a call to action, a whole section. */
  children?: ReactNode;
  /** A named look: `ink`, `coffee`, `marble`, `indigo`, `rose`. */
  preset?: LiquidInkPreset;
  /** Overrides single palette colours with any CSS colour. */
  colors?: Partial<Record<LiquidInkColor, 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<LiquidInkValue, number>>;

const POSTER: PosterSpec = { type: "linear", from: "base", to: "inkA", angle: 135, blobs: [{ color: "inkB", at: [70, 30], size: 55 }, { color: "vein", at: [35, 70], size: 22 }] };

export function LiquidInk({ children, preset, colors, speed, intensity, interactive = true, label, still, className, scaleV, flow, veins, sharp }: LiquidInkProps) {
  return (
    <BackdropCanvas
      slug="liquid-ink"
      piece={liquidInkPiece}
      presets={presets}
      fallback="ink"
      preset={preset}
      colors={colors}
      values={{ scaleV, flow, veins, sharp }}
      speed={speed}
      intensity={intensity}
      poster={POSTER}
      scale={0.5}
      stillTime={3}
      still={still}
      interactive={interactive}
      label={label}
      className={className}
    >
      {children}
    </BackdropCanvas>
  );
}

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

/*
 * Ink dropped in water, or marble: the plane is bent by its own noise twice (so it folds like
 * smoke), a gradient of three colours runs through the folds, bright veins ride the creases where
 * the fluid is thinnest, and the pointer stirs a small whirl.
 */

const SCENE = /* glsl */ `
uniform vec3 uBase;
uniform vec3 uInkA;
uniform vec3 uInkB;
uniform vec3 uVein;
uniform vec3 uHigh;
uniform float uScaleV;
uniform float uFlow;
uniform float uVeins;
uniform float uSharp;
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);
  // A whirl around the pointer.
  vec2 rel = uv - pu;
  float rr = length(rel);
  float swirl = uHover * 1.6 * exp(-rr * rr * 7.0);
  uv = pu + rot(swirl) * rel;

  vec2 p = uv * uScaleV;
  vec2 q = vec2(fbm(p + vec2(0.0, T * 0.05)), fbm(p + vec2(5.2, 1.3) - T * 0.04));
  vec2 r = vec2(fbm(p + uFlow * 2.4 * q + vec2(1.7, 9.2) + T * 0.06), fbm(p + uFlow * 2.4 * q + vec2(8.3, 2.8) - T * 0.05));
  float f = fbm(p + uFlow * 2.4 * r);

  // The gradient through the folds.
  vec3 col = lin(uBase);
  col = mix(col, lin(uInkA), smoothstep(0.32, 0.62, f));
  col = mix(col, lin(uInkB), smoothstep(0.58, 0.86, f + 0.2 * (q.x - 0.5)));
  // Veins where the folds crease: fine, bright and only in the thick of the ink.
  float crease = 1.0 - abs(2.0 * fbm(p * 1.1 + 2.0 * r) - 1.0);
  float vein = pow(clamp(crease, 0.0, 1.0), uSharp + 2.0);
  col += lin(uVein) * vein * uVeins * 0.55 * smoothstep(0.35, 0.7, f);
  // A thin bright edge where the ink meets clear water.
  float edge = smoothstep(0.035, 0.0, abs(f - 0.5));
  col += lin(uHigh) * edge * 0.22;

  col *= uIntensity;
  col *= 1.0 - 0.3 * smoothstep(0.55, 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", "coffee", "marble", "indigo", "rose"] as const;
export type LiquidInkPreset = (typeof PRESET_NAMES)[number];

export const presets: Record<LiquidInkPreset, ScenePreset> = {
  ink: {
    colors: { base: "#05030f", inkA: "#2a1a7a", inkB: "#7a4cff", vein: "#9fe7ff", high: "#ffffff" },
    values: { scaleV: 0.95, flow: 1, veins: 0.9, sharp: 5, speed: 0.7, intensity: 1 },
  },
  coffee: {
    colors: { base: "#1a0e08", inkA: "#4a2a17", inkB: "#a8693a", vein: "#f4dcc0", high: "#fff4e4" },
    values: { scaleV: 0.9, flow: 1, veins: 0.7, sharp: 4, speed: 0.55, intensity: 1.05 },
  },
  marble: {
    colors: { base: "#f6f3ee", inkA: "#d3cdc3", inkB: "#8f887e", vein: "#b8892f", high: "#ffffff" },
    values: { scaleV: 0.85, flow: 0.9, veins: 1.5, sharp: 6, speed: 0.4, intensity: 1 },
  },
  indigo: {
    colors: { base: "#02060f", inkA: "#0c2a5a", inkB: "#1f6fd1", vein: "#6fe3ff", high: "#d8f6ff" },
    values: { scaleV: 1.0, flow: 1.1, veins: 0.8, sharp: 5, speed: 0.75, intensity: 1 },
  },
  rose: {
    colors: { base: "#14060d", inkA: "#6a1a3a", inkB: "#ff5f9f", vein: "#ffd0e0", high: "#fff0f5" },
    values: { scaleV: 0.95, flow: 1, veins: 0.8, sharp: 5, speed: 0.65, intensity: 1 },
  },
};

export const liquidInkPiece = createScenePiece("liquid-ink", fragment);