@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/shader-transition/shader-transition-presets.js

@@ -0,0 +1,346 @@
+//#region src/components/shader-transition/shader-transition-presets.ts
+/** Max over the frame's four corners of a centred-space shape function. */
+const corners = (fn) => `vec2 hh = vec2(uRes.x / uRes.y, 1.0) * 0.5; float far = max(max(${fn}(hh), ${fn}(-hh)), max(${fn}(vec2(hh.x, -hh.y)), ${fn}(vec2(-hh.x, hh.y))));`;
+const SHADER_TRANSITION_PRESETS = {
+	/** Ported: SmoothUI Aperture Blur — a ring opening from the centre, angular ripple, grain. */
+	"aperture-blur": {
+		source: "ApertureBlurTransition",
+		origin: "ported",
+		description: "An aperture opens from the centre, its rim rippling and glowing.",
+		duration: 900,
+		softness: .1,
+		glow: 1,
+		sheen: .55,
+		reverse: false,
+		glsl: `
+float field(vec2 uv, vec2 p, float t){
+  float a = atan(p.y, p.x);
+  float n = sin(a * 8.0 + t * 0.9) * 0.018 + sin(a * 17.0 - t * 0.6) * 0.006;
+  return (length(p) - n) / (rmax() + 0.02);
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  float swirl = smoothstep(-0.4, 0.4, sin(atan(p.y, p.x) * 2.0 + t * 0.7));
+  float grain = hash21(floor(uv * uRes / 3.0) + floor(t * 18.0)) * 0.3;
+  return swirl * exp(-d * d * 18.0) + grain * exp(-d * d * 40.0);
+}`
+	},
+	/** Ported: SmoothUI Chroma Blur — a diagonal curtain with rippling edge and chromatic fringes. */
+	"chroma-blur": {
+		source: "ChromaBlurTransition",
+		origin: "ported",
+		description: "A soft diagonal curtain with a rippling edge and chromatic fringes.",
+		duration: 1040,
+		softness: .16,
+		glow: .45,
+		sheen: .7,
+		reverse: false,
+		glsl: `
+float field(vec2 uv, vec2 p, float t){
+  float n = vnoise(uv * 10.0 + vec2(t * 0.28, -t * 0.18));
+  float wave = sin((uv.y + n * 0.12) * 28.0 + t * 2.2) * 0.018;
+  return (uv.x * 0.62 + uv.y * 0.38 + wave + 0.02) / 1.04;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  float a = d + 0.045;
+  float b = d - 0.045;
+  return exp(-a * a * 52.0) + exp(-b * b * 52.0) + vnoise(uv * 34.0 + t * 0.18) * 0.1;
+}`
+	},
+	/** Ported: SmoothUI Prism Sweep — a faceted glass band sweeping across, caustics behind the crest. */
+	"prism-sweep": {
+		source: "PrismSweepTransition",
+		origin: "ported",
+		description: "A faceted prism band sweeps across with caustics behind its crest.",
+		duration: 1240,
+		softness: .08,
+		glow: .9,
+		sheen: .9,
+		reverse: false,
+		glsl: `
+float field(vec2 uv, vec2 p, float t){
+  float c = t * 0.42;
+  float drift = sin(uv.y * 7.0 + c * 1.8) * 0.024 + sin(uv.y * 17.0 - c * 1.1 + 1.6) * 0.010
+    + sin((uv.x + uv.y) * 11.0 + c * 0.7) * 0.006;
+  return (uv.x + drift * 0.76 + 0.03) / 1.06;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  float c = t * 0.42;
+  float facets = smoothstep(0.18, 0.92, tri(uv.y * 12.0 + uv.x * 2.1 + c * 0.35));
+  float diagonal = tri((uv.y - uv.x * 0.36) * 5.3 - c * 0.2);
+  float caustic = pow(1.0 - diagonal, 4.0) * 0.42 + pow(facets, 2.2) * 0.22;
+  float ridge = exp(-(d + 0.05) * (d + 0.05) * 600.0);
+  return (caustic + ridge * 0.5) * exp(-d * d * 8.0);
+}`
+	},
+	/** original shader (effect inspired by SmoothUI SdfBlobTransition; no code referenced) */
+	"sdf-blob": {
+		source: "SdfBlobTransition",
+		origin: "original",
+		description: "Three soft blobs swell from different points and melt into one.",
+		duration: 1120,
+		softness: .06,
+		glow: .7,
+		sheen: .4,
+		reverse: false,
+		glsl: `
+float blobs(vec2 p){
+  float a = length(p - vec2(-0.32, 0.18));
+  float b = length(p - vec2(0.28, -0.16));
+  float c = length(p - vec2(0.06, 0.34));
+  return smin(smin(a, b, 0.22), c, 0.22);
+}
+float field(vec2 uv, vec2 p, float t){
+  ${corners("blobs")}
+  return (blobs(p) + (fbm(p * 3.0 + t * 0.2) - 0.5) * 0.12) / far;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  return exp(-d * d * 30.0) * fbm(p * 6.0 - t * 0.3);
+}`
+	},
+	/** original shader (effect inspired by SmoothUI OrganicMergeTransition; no code referenced) */
+	"organic-merge": {
+		source: "OrganicMergeTransition",
+		origin: "original",
+		description: "Two organic shapes grow from opposite corners and fuse where they meet.",
+		duration: 1120,
+		softness: .06,
+		glow: .65,
+		sheen: .6,
+		reverse: false,
+		glsl: `
+float pair(vec2 p){
+  vec2 hh = vec2(uRes.x / uRes.y, 1.0) * 0.5;
+  float a = length(p + hh * 0.55);
+  float b = length((p - hh * 0.55) * vec2(0.8, 1.25));
+  return smin(a, b, 0.3);
+}
+float field(vec2 uv, vec2 p, float t){
+  ${corners("pair")}
+  return (pair(p) + (vnoise(p * 4.0 + t * 0.3) - 0.5) * 0.08) / far;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  vec2 hh = vec2(uRes.x / uRes.y, 1.0) * 0.5;
+  float seam = abs(length(p + hh * 0.55) - length((p - hh * 0.55) * vec2(0.8, 1.25)));
+  return exp(-seam * 8.0) * exp(-d * d * 20.0);
+}`
+	},
+	/** original shader (effect inspired by SmoothUI SdfCircleTransition; no code referenced) */
+	"sdf-circle": {
+		source: "SdfCircleTransition",
+		origin: "original",
+		description: "A clean circle grows from the centre with a crisp edge.",
+		duration: 1e3,
+		softness: .025,
+		glow: .55,
+		sheen: 0,
+		reverse: false,
+		glsl: `
+float field(vec2 uv, vec2 p, float t){ return length(p) / rmax(); }
+float sheen(vec2 uv, vec2 p, float t, float d){ return 0.0; }`
+	},
+	/** original shader (effect inspired by SmoothUI WarpedCircleTransition; no code referenced) */
+	"warped-circle": {
+		source: "WarpedCircleTransition",
+		origin: "original",
+		description: "A circle whose perimeter waves as it grows.",
+		duration: 1120,
+		softness: .04,
+		glow: .7,
+		sheen: .35,
+		reverse: false,
+		glsl: `
+float field(vec2 uv, vec2 p, float t){
+  float a = atan(p.y, p.x);
+  float warp = sin(a * 6.0 + t * 1.6) * 0.035 + sin(a * 11.0 - t * 2.1) * 0.015;
+  return (length(p) + warp) / (rmax() + 0.05) + 0.02;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  return (0.5 + 0.5 * sin(atan(p.y, p.x) * 6.0 + t * 1.6)) * exp(-d * d * 24.0);
+}`
+	},
+	/** original shader (effect inspired by SmoothUI RadialCirclesTransition; no code referenced) */
+	"radial-circles": {
+		source: "RadialCirclesTransition",
+		origin: "original",
+		description: "A grid of dots swells into circles, radiating out from the centre.",
+		duration: 1120,
+		softness: .03,
+		glow: .3,
+		sheen: .5,
+		reverse: false,
+		glsl: `
+float field(vec2 uv, vec2 p, float t){
+  float s = 0.11;
+  vec2 ctr = (floor(p / s) + 0.5) * s;
+  return length(ctr) / rmax() * 0.62 + length(p - ctr) / (s * 0.7072) * 0.38;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  vec2 cell = floor(p / 0.11);
+  return step(0.5, fract((cell.x + cell.y) * 0.5)) * exp(-d * d * 25.0);
+}`
+	},
+	/** original shader (effect inspired by SmoothUI ShaderRevealNoiseTransition; no code referenced) */
+	noise: {
+		source: "ShaderRevealNoiseTransition",
+		origin: "original",
+		description: "A turbulent noise threshold: the cover arrives in organic patches.",
+		duration: 1080,
+		softness: .08,
+		glow: .55,
+		sheen: .45,
+		reverse: false,
+		glsl: `
+float field(vec2 uv, vec2 p, float t){
+  return (fbm(p * 3.2 + vec2(t * 0.12, -t * 0.08)) - 0.22) / 0.56;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  return fbm(p * 9.0 + t * 0.4) * exp(-d * d * 30.0);
+}`
+	},
+	/** original shader (effect inspired by SmoothUI ShaderRevealZoomTransition; no code referenced) */
+	zoom: {
+		source: "ShaderRevealZoomTransition",
+		origin: "original",
+		description: "A lens swells from the centre, then the frame zooms back through it.",
+		duration: 1080,
+		softness: .07,
+		glow: .6,
+		sheen: .5,
+		reverse: true,
+		glsl: `
+float lens(vec2 p){ return length((p - vec2(0.0, -0.08)) * vec2(1.0, 1.25)); }
+float field(vec2 uv, vec2 p, float t){
+  ${corners("lens")}
+  return lens(p) / far;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  return (0.5 + 0.5 * sin(length(p) * 48.0 - t * 3.0)) * exp(-d * d * 14.0);
+}`
+	},
+	/** original shader (effect inspired by SmoothUI ShaderRevealCircleTransition; no code referenced) */
+	circle: {
+		source: "ShaderRevealCircleTransition",
+		origin: "original",
+		description: "A circle with a noisy, smoky rim spreads from the centre.",
+		duration: 1080,
+		softness: .09,
+		glow: .6,
+		sheen: .4,
+		reverse: false,
+		glsl: `
+float field(vec2 uv, vec2 p, float t){
+  return (length(p) + (fbm(p * 4.0 + t * 0.25) - 0.5) * 0.22) / (rmax() + 0.06) + 0.03;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  return fbm(p * 7.0 - t * 0.3) * exp(-d * d * 22.0);
+}`
+	},
+	/** original shader (effect inspired by SmoothUI ShaderRevealWipeTransition; no code referenced) */
+	wipe: {
+		source: "ShaderRevealWipeTransition",
+		origin: "original",
+		description: "A narrow, noise-displaced blade wipes across toward the inline end.",
+		duration: 1e3,
+		softness: .025,
+		glow: 1,
+		sheen: .3,
+		reverse: false,
+		glsl: `
+float field(vec2 uv, vec2 p, float t){
+  return uv.x * 0.9 + (fbm(vec2(uv.y * 6.0, t * 0.35)) - 0.5) * 0.1 + 0.05;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  return vnoise(vec2(uv.y * 40.0, t)) * exp(-d * d * 60.0);
+}`
+	},
+	/** original shader (effect inspired by SmoothUI ShaderRevealLumaTransition; no code referenced) */
+	luma: {
+		source: "ShaderRevealLumaTransition",
+		origin: "original",
+		description: "Horizontal ribbons pour down from the top, each on its own delay.",
+		duration: 1080,
+		softness: .05,
+		glow: .4,
+		sheen: .45,
+		reverse: false,
+		glsl: `
+float field(vec2 uv, vec2 p, float t){
+  float row = floor(uv.y * 12.0);
+  return hash21(vec2(row, 7.0)) * 0.4 + (1.0 - uv.y) * 0.35 + (1.0 - fract(uv.y * 12.0)) * 0.25;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  return mod(floor(uv.y * 12.0), 2.0) * exp(-d * d * 12.0);
+}`
+	},
+	/** original shader (effect inspired by SmoothUI ShaderRevealPlanetaryTransition; no code referenced) */
+	planetary: {
+		source: "ShaderRevealPlanetaryTransition",
+		origin: "original",
+		description: "Spiral arms wind outward from the centre like a vortex.",
+		duration: 1180,
+		softness: .06,
+		glow: .6,
+		sheen: .5,
+		reverse: false,
+		glsl: `
+float field(vec2 uv, vec2 p, float t){
+  float r = length(p) / rmax();
+  float arm = fract((atan(p.y, p.x) / TAU + 0.5) * 2.0 + r * 1.1 - t * 0.04);
+  return r * 0.55 + arm * 0.45;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  return (0.5 + 0.5 * sin(atan(p.y, p.x) * 4.0 + length(p) * 18.0 - t * 2.0)) * exp(-d * d * 18.0);
+}`
+	},
+	/** original shader (effect inspired by SmoothUI ShaderRevealStripesTransition; no code referenced) */
+	stripes: {
+		source: "ShaderRevealStripesTransition",
+		origin: "original",
+		description: "Slanted bars of random width snap shut like a barcode shutter.",
+		duration: 1e3,
+		softness: .015,
+		glow: .35,
+		sheen: .4,
+		reverse: false,
+		glsl: `
+float field(vec2 uv, vec2 p, float t){
+  float s = (uv.x + uv.y * 0.35) / 1.35;
+  return s * 0.55 + hash21(vec2(floor(s * 26.0), 3.1)) * 0.45;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  float s = (uv.x + uv.y * 0.35) / 1.35;
+  return step(0.5, hash21(vec2(floor(s * 26.0), 9.7))) * exp(-d * d * 40.0);
+}`
+	},
+	/** original shader (effect inspired by SmoothUI ShaderRevealPushTransition; no code referenced) */
+	push: {
+		source: "ShaderRevealPushTransition",
+		origin: "original",
+		description: "A noisy front pushes up from the bottom, pulled along by flowing noise.",
+		duration: 1080,
+		softness: .07,
+		glow: .55,
+		sheen: .45,
+		reverse: false,
+		glsl: `
+float field(vec2 uv, vec2 p, float t){
+  float n = fbm(vec2(uv.x * 3.0, uv.y * 2.0 - t * 0.5));
+  return uv.y * 0.8 + (n - 0.5) * 0.36 + 0.1;
+}
+float sheen(vec2 uv, vec2 p, float t, float d){
+  return fbm(vec2(uv.x * 8.0, uv.y * 4.0 - t * 0.8)) * exp(-d * d * 20.0);
+}`
+	}
+};
+const SHADER_TRANSITION_PRESET_NAMES = Object.keys(SHADER_TRANSITION_PRESETS);
+/** The preset for a name; unknown names fall back to `noise` (and warn in development). */
+function getShaderTransitionPreset(name) {
+	const preset = SHADER_TRANSITION_PRESETS[name];
+	if (preset) return preset;
+	if (process.env.NODE_ENV !== "production") console.warn(`[ShaderTransition] unknown preset "${name}"; using "noise".`);
+	return SHADER_TRANSITION_PRESETS.noise;
+}
+//#endregion
+export { SHADER_TRANSITION_PRESETS, SHADER_TRANSITION_PRESET_NAMES, getShaderTransitionPreset };
+
+//# sourceMappingURL=shader-transition-presets.js.map

package/dist/components/shader-transition/shader-transition-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shader-transition-presets.js","names":["table"],"sources":["../../../src/components/shader-transition/shader-transition-presets.ts"],"sourcesContent":["// Ported from SmoothUI \"Aperture Blur\", \"Chroma Blur\" and \"Prism Sweep\" transitions (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\n\n/*\n * The preset table. A preset is data: GLSL defining two functions, and the\n * uniforms the shared program reads.\n *\n *   float field(vec2 uv, vec2 p, float t)          when this pixel is covered, 0 → 1\n *   float sheen(vec2 uv, vec2 p, float t, float d)  secondary-accent tint of the cover;\n *                                                   d is the signed distance to the front\n *\n * `uv` is 0–1 across the frame (x mirrored in RTL), `p` is centred and\n * aspect-corrected (x spans ±aspect/2, y ±1/2), `t` is seconds. Every preset\n * links against one vertex shader and one prelude (hash21, vnoise, fbm, smin,\n * rmax, tri) in shader-transition-engine.ts.\n *\n * Provenance. Only three presets port SmoothUI shader code — aperture-blur,\n * chroma-blur and prism-sweep, SmoothUI's own designs — re-expressed as a field\n * and a sheen, with its literal palette replaced by theme tokens. SmoothUI's\n * other thirteen transitions come from Codrops material, whose licence forbids\n * redistribution: radial-circles, sdf-circle, warped-circle and organic-merge\n * are stages of the Codrops SDF shader progression (SmoothUI's docs say so),\n * sdf-blob is the engine that hosts those stages, and the eight shader-reveal\n * variants are SmoothUI's adaptations of Yuri Artiukh's \"Demo 1–8\" WebGL image\n * transitions published on Codrops (SmoothUI's changelog calls them the \"Akella\n * transitions\"). For those thirteen the shaders below are original, written\n * from each effect's description without reading the source shader, and each is\n * marked \"original shader (effect inspired by SmoothUI <name>; no code\n * referenced)\".\n */\n\nexport interface ShaderTransitionPreset {\n  /** The SmoothUI component this preset reproduces. */\n  source: string;\n  /** Whether the shader is ported from SmoothUI or written from scratch. */\n  origin: \"ported\" | \"original\";\n  /** One line for a gallery caption. */\n  description: string;\n  /** Default run length in ms at `--motion-scale: 1`. */\n  duration: number;\n  /** Width of the front in field units (0–1). */\n  softness: number;\n  /** Strength of the primary-accent glow on the front. */\n  glow: number;\n  /** Strength of the preset's secondary-accent sheen on the cover. */\n  sheen: number;\n  /** Uncover along the reversed field (the cover retreats) instead of continuing. */\n  reverse: boolean;\n  /** Defines `field` and `sheen`. */\n  glsl: string;\n}\n\n/** Max over the frame's four corners of a centred-space shape function. */\nconst corners = (fn: string) =>\n  `vec2 hh = vec2(uRes.x / uRes.y, 1.0) * 0.5; float far = max(max(${fn}(hh), ${fn}(-hh)), max(${fn}(vec2(hh.x, -hh.y)), ${fn}(vec2(-hh.x, hh.y))));`;\n\nexport const SHADER_TRANSITION_PRESETS = {\n  /* SmoothUI's own designs, ported --------------------------------------- */\n\n  /** Ported: SmoothUI Aperture Blur — a ring opening from the centre, angular ripple, grain. */\n  \"aperture-blur\": {\n    source: \"ApertureBlurTransition\",\n    origin: \"ported\",\n    description: \"An aperture opens from the centre, its rim rippling and glowing.\",\n    duration: 900,\n    softness: 0.1,\n    glow: 1,\n    sheen: 0.55,\n    reverse: false,\n    glsl: `\nfloat field(vec2 uv, vec2 p, float t){\n  float a = atan(p.y, p.x);\n  float n = sin(a * 8.0 + t * 0.9) * 0.018 + sin(a * 17.0 - t * 0.6) * 0.006;\n  return (length(p) - n) / (rmax() + 0.02);\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  float swirl = smoothstep(-0.4, 0.4, sin(atan(p.y, p.x) * 2.0 + t * 0.7));\n  float grain = hash21(floor(uv * uRes / 3.0) + floor(t * 18.0)) * 0.3;\n  return swirl * exp(-d * d * 18.0) + grain * exp(-d * d * 40.0);\n}`,\n  },\n\n  /** Ported: SmoothUI Chroma Blur — a diagonal curtain with rippling edge and chromatic fringes. */\n  \"chroma-blur\": {\n    source: \"ChromaBlurTransition\",\n    origin: \"ported\",\n    description: \"A soft diagonal curtain with a rippling edge and chromatic fringes.\",\n    duration: 1040,\n    softness: 0.16,\n    glow: 0.45,\n    sheen: 0.7,\n    reverse: false,\n    glsl: `\nfloat field(vec2 uv, vec2 p, float t){\n  float n = vnoise(uv * 10.0 + vec2(t * 0.28, -t * 0.18));\n  float wave = sin((uv.y + n * 0.12) * 28.0 + t * 2.2) * 0.018;\n  return (uv.x * 0.62 + uv.y * 0.38 + wave + 0.02) / 1.04;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  float a = d + 0.045;\n  float b = d - 0.045;\n  return exp(-a * a * 52.0) + exp(-b * b * 52.0) + vnoise(uv * 34.0 + t * 0.18) * 0.1;\n}`,\n  },\n\n  /** Ported: SmoothUI Prism Sweep — a faceted glass band sweeping across, caustics behind the crest. */\n  \"prism-sweep\": {\n    source: \"PrismSweepTransition\",\n    origin: \"ported\",\n    description: \"A faceted prism band sweeps across with caustics behind its crest.\",\n    duration: 1240,\n    softness: 0.08,\n    glow: 0.9,\n    sheen: 0.9,\n    reverse: false,\n    glsl: `\nfloat field(vec2 uv, vec2 p, float t){\n  float c = t * 0.42;\n  float drift = sin(uv.y * 7.0 + c * 1.8) * 0.024 + sin(uv.y * 17.0 - c * 1.1 + 1.6) * 0.010\n    + sin((uv.x + uv.y) * 11.0 + c * 0.7) * 0.006;\n  return (uv.x + drift * 0.76 + 0.03) / 1.06;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  float c = t * 0.42;\n  float facets = smoothstep(0.18, 0.92, tri(uv.y * 12.0 + uv.x * 2.1 + c * 0.35));\n  float diagonal = tri((uv.y - uv.x * 0.36) * 5.3 - c * 0.2);\n  float caustic = pow(1.0 - diagonal, 4.0) * 0.42 + pow(facets, 2.2) * 0.22;\n  float ridge = exp(-(d + 0.05) * (d + 0.05) * 600.0);\n  return (caustic + ridge * 0.5) * exp(-d * d * 8.0);\n}`,\n  },\n\n  /* SDF family: original shaders ----------------------------------------- */\n\n  /** original shader (effect inspired by SmoothUI SdfBlobTransition; no code referenced) */\n  \"sdf-blob\": {\n    source: \"SdfBlobTransition\",\n    origin: \"original\",\n    description: \"Three soft blobs swell from different points and melt into one.\",\n    duration: 1120,\n    softness: 0.06,\n    glow: 0.7,\n    sheen: 0.4,\n    reverse: false,\n    glsl: `\nfloat blobs(vec2 p){\n  float a = length(p - vec2(-0.32, 0.18));\n  float b = length(p - vec2(0.28, -0.16));\n  float c = length(p - vec2(0.06, 0.34));\n  return smin(smin(a, b, 0.22), c, 0.22);\n}\nfloat field(vec2 uv, vec2 p, float t){\n  ${corners(\"blobs\")}\n  return (blobs(p) + (fbm(p * 3.0 + t * 0.2) - 0.5) * 0.12) / far;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  return exp(-d * d * 30.0) * fbm(p * 6.0 - t * 0.3);\n}`,\n  },\n\n  /** original shader (effect inspired by SmoothUI OrganicMergeTransition; no code referenced) */\n  \"organic-merge\": {\n    source: \"OrganicMergeTransition\",\n    origin: \"original\",\n    description: \"Two organic shapes grow from opposite corners and fuse where they meet.\",\n    duration: 1120,\n    softness: 0.06,\n    glow: 0.65,\n    sheen: 0.6,\n    reverse: false,\n    glsl: `\nfloat pair(vec2 p){\n  vec2 hh = vec2(uRes.x / uRes.y, 1.0) * 0.5;\n  float a = length(p + hh * 0.55);\n  float b = length((p - hh * 0.55) * vec2(0.8, 1.25));\n  return smin(a, b, 0.3);\n}\nfloat field(vec2 uv, vec2 p, float t){\n  ${corners(\"pair\")}\n  return (pair(p) + (vnoise(p * 4.0 + t * 0.3) - 0.5) * 0.08) / far;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  vec2 hh = vec2(uRes.x / uRes.y, 1.0) * 0.5;\n  float seam = abs(length(p + hh * 0.55) - length((p - hh * 0.55) * vec2(0.8, 1.25)));\n  return exp(-seam * 8.0) * exp(-d * d * 20.0);\n}`,\n  },\n\n  /** original shader (effect inspired by SmoothUI SdfCircleTransition; no code referenced) */\n  \"sdf-circle\": {\n    source: \"SdfCircleTransition\",\n    origin: \"original\",\n    description: \"A clean circle grows from the centre with a crisp edge.\",\n    duration: 1000,\n    softness: 0.025,\n    glow: 0.55,\n    sheen: 0,\n    reverse: false,\n    glsl: `\nfloat field(vec2 uv, vec2 p, float t){ return length(p) / rmax(); }\nfloat sheen(vec2 uv, vec2 p, float t, float d){ return 0.0; }`,\n  },\n\n  /** original shader (effect inspired by SmoothUI WarpedCircleTransition; no code referenced) */\n  \"warped-circle\": {\n    source: \"WarpedCircleTransition\",\n    origin: \"original\",\n    description: \"A circle whose perimeter waves as it grows.\",\n    duration: 1120,\n    softness: 0.04,\n    glow: 0.7,\n    sheen: 0.35,\n    reverse: false,\n    glsl: `\nfloat field(vec2 uv, vec2 p, float t){\n  float a = atan(p.y, p.x);\n  float warp = sin(a * 6.0 + t * 1.6) * 0.035 + sin(a * 11.0 - t * 2.1) * 0.015;\n  return (length(p) + warp) / (rmax() + 0.05) + 0.02;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  return (0.5 + 0.5 * sin(atan(p.y, p.x) * 6.0 + t * 1.6)) * exp(-d * d * 24.0);\n}`,\n  },\n\n  /** original shader (effect inspired by SmoothUI RadialCirclesTransition; no code referenced) */\n  \"radial-circles\": {\n    source: \"RadialCirclesTransition\",\n    origin: \"original\",\n    description: \"A grid of dots swells into circles, radiating out from the centre.\",\n    duration: 1120,\n    softness: 0.03,\n    glow: 0.3,\n    sheen: 0.5,\n    reverse: false,\n    glsl: `\nfloat field(vec2 uv, vec2 p, float t){\n  float s = 0.11;\n  vec2 ctr = (floor(p / s) + 0.5) * s;\n  return length(ctr) / rmax() * 0.62 + length(p - ctr) / (s * 0.7072) * 0.38;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  vec2 cell = floor(p / 0.11);\n  return step(0.5, fract((cell.x + cell.y) * 0.5)) * exp(-d * d * 25.0);\n}`,\n  },\n\n  /* Shader-reveal family: original shaders ------------------------------- */\n\n  /** original shader (effect inspired by SmoothUI ShaderRevealNoiseTransition; no code referenced) */\n  noise: {\n    source: \"ShaderRevealNoiseTransition\",\n    origin: \"original\",\n    description: \"A turbulent noise threshold: the cover arrives in organic patches.\",\n    duration: 1080,\n    softness: 0.08,\n    glow: 0.55,\n    sheen: 0.45,\n    reverse: false,\n    glsl: `\nfloat field(vec2 uv, vec2 p, float t){\n  return (fbm(p * 3.2 + vec2(t * 0.12, -t * 0.08)) - 0.22) / 0.56;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  return fbm(p * 9.0 + t * 0.4) * exp(-d * d * 30.0);\n}`,\n  },\n\n  /** original shader (effect inspired by SmoothUI ShaderRevealZoomTransition; no code referenced) */\n  zoom: {\n    source: \"ShaderRevealZoomTransition\",\n    origin: \"original\",\n    description: \"A lens swells from the centre, then the frame zooms back through it.\",\n    duration: 1080,\n    softness: 0.07,\n    glow: 0.6,\n    sheen: 0.5,\n    reverse: true,\n    glsl: `\nfloat lens(vec2 p){ return length((p - vec2(0.0, -0.08)) * vec2(1.0, 1.25)); }\nfloat field(vec2 uv, vec2 p, float t){\n  ${corners(\"lens\")}\n  return lens(p) / far;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  return (0.5 + 0.5 * sin(length(p) * 48.0 - t * 3.0)) * exp(-d * d * 14.0);\n}`,\n  },\n\n  /** original shader (effect inspired by SmoothUI ShaderRevealCircleTransition; no code referenced) */\n  circle: {\n    source: \"ShaderRevealCircleTransition\",\n    origin: \"original\",\n    description: \"A circle with a noisy, smoky rim spreads from the centre.\",\n    duration: 1080,\n    softness: 0.09,\n    glow: 0.6,\n    sheen: 0.4,\n    reverse: false,\n    glsl: `\nfloat field(vec2 uv, vec2 p, float t){\n  return (length(p) + (fbm(p * 4.0 + t * 0.25) - 0.5) * 0.22) / (rmax() + 0.06) + 0.03;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  return fbm(p * 7.0 - t * 0.3) * exp(-d * d * 22.0);\n}`,\n  },\n\n  /** original shader (effect inspired by SmoothUI ShaderRevealWipeTransition; no code referenced) */\n  wipe: {\n    source: \"ShaderRevealWipeTransition\",\n    origin: \"original\",\n    description: \"A narrow, noise-displaced blade wipes across toward the inline end.\",\n    duration: 1000,\n    softness: 0.025,\n    glow: 1,\n    sheen: 0.3,\n    reverse: false,\n    glsl: `\nfloat field(vec2 uv, vec2 p, float t){\n  return uv.x * 0.9 + (fbm(vec2(uv.y * 6.0, t * 0.35)) - 0.5) * 0.1 + 0.05;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  return vnoise(vec2(uv.y * 40.0, t)) * exp(-d * d * 60.0);\n}`,\n  },\n\n  /** original shader (effect inspired by SmoothUI ShaderRevealLumaTransition; no code referenced) */\n  luma: {\n    source: \"ShaderRevealLumaTransition\",\n    origin: \"original\",\n    description: \"Horizontal ribbons pour down from the top, each on its own delay.\",\n    duration: 1080,\n    softness: 0.05,\n    glow: 0.4,\n    sheen: 0.45,\n    reverse: false,\n    glsl: `\nfloat field(vec2 uv, vec2 p, float t){\n  float row = floor(uv.y * 12.0);\n  return hash21(vec2(row, 7.0)) * 0.4 + (1.0 - uv.y) * 0.35 + (1.0 - fract(uv.y * 12.0)) * 0.25;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  return mod(floor(uv.y * 12.0), 2.0) * exp(-d * d * 12.0);\n}`,\n  },\n\n  /** original shader (effect inspired by SmoothUI ShaderRevealPlanetaryTransition; no code referenced) */\n  planetary: {\n    source: \"ShaderRevealPlanetaryTransition\",\n    origin: \"original\",\n    description: \"Spiral arms wind outward from the centre like a vortex.\",\n    duration: 1180,\n    softness: 0.06,\n    glow: 0.6,\n    sheen: 0.5,\n    reverse: false,\n    glsl: `\nfloat field(vec2 uv, vec2 p, float t){\n  float r = length(p) / rmax();\n  float arm = fract((atan(p.y, p.x) / TAU + 0.5) * 2.0 + r * 1.1 - t * 0.04);\n  return r * 0.55 + arm * 0.45;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  return (0.5 + 0.5 * sin(atan(p.y, p.x) * 4.0 + length(p) * 18.0 - t * 2.0)) * exp(-d * d * 18.0);\n}`,\n  },\n\n  /** original shader (effect inspired by SmoothUI ShaderRevealStripesTransition; no code referenced) */\n  stripes: {\n    source: \"ShaderRevealStripesTransition\",\n    origin: \"original\",\n    description: \"Slanted bars of random width snap shut like a barcode shutter.\",\n    duration: 1000,\n    softness: 0.015,\n    glow: 0.35,\n    sheen: 0.4,\n    reverse: false,\n    glsl: `\nfloat field(vec2 uv, vec2 p, float t){\n  float s = (uv.x + uv.y * 0.35) / 1.35;\n  return s * 0.55 + hash21(vec2(floor(s * 26.0), 3.1)) * 0.45;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  float s = (uv.x + uv.y * 0.35) / 1.35;\n  return step(0.5, hash21(vec2(floor(s * 26.0), 9.7))) * exp(-d * d * 40.0);\n}`,\n  },\n\n  /** original shader (effect inspired by SmoothUI ShaderRevealPushTransition; no code referenced) */\n  push: {\n    source: \"ShaderRevealPushTransition\",\n    origin: \"original\",\n    description: \"A noisy front pushes up from the bottom, pulled along by flowing noise.\",\n    duration: 1080,\n    softness: 0.07,\n    glow: 0.55,\n    sheen: 0.45,\n    reverse: false,\n    glsl: `\nfloat field(vec2 uv, vec2 p, float t){\n  float n = fbm(vec2(uv.x * 3.0, uv.y * 2.0 - t * 0.5));\n  return uv.y * 0.8 + (n - 0.5) * 0.36 + 0.1;\n}\nfloat sheen(vec2 uv, vec2 p, float t, float d){\n  return fbm(vec2(uv.x * 8.0, uv.y * 4.0 - t * 0.8)) * exp(-d * d * 20.0);\n}`,\n  },\n} satisfies Record<string, ShaderTransitionPreset>;\n\nexport type ShaderTransitionPresetName = keyof typeof SHADER_TRANSITION_PRESETS;\n\nexport const SHADER_TRANSITION_PRESET_NAMES = Object.keys(\n  SHADER_TRANSITION_PRESETS,\n) as ShaderTransitionPresetName[];\n\n/** The preset for a name; unknown names fall back to `noise` (and warn in development). */\nexport function getShaderTransitionPreset(name: string): ShaderTransitionPreset {\n  const table: Record<string, ShaderTransitionPreset> = SHADER_TRANSITION_PRESETS;\n  const preset = table[name];\n  if (preset) return preset;\n  if (process.env.NODE_ENV !== \"production\") {\n    console.warn(`[ShaderTransition] unknown preset \"${name}\"; using \"noise\".`);\n  }\n  return SHADER_TRANSITION_PRESETS.noise;\n}\n"],"mappings":";;AAoDA,MAAM,WAAW,OACf,mEAAmE,GAAG,QAAQ,GAAG,cAAc,GAAG,uBAAuB,GAAG;AAE9H,MAAa,4BAA4B;;CAIvC,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;;;;;CAWR;;CAGA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;;;;;CAWR;;CAGA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;;;;;;;;;CAeR;;CAKA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;;IAQN,QAAQ,OAAO,EAAE;;;;;;CAMnB;;CAGA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;;IAQN,QAAQ,MAAM,EAAE;;;;;;;;CAQlB;;CAGA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;CAGR;;CAGA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;;;CASR;;CAGA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;;;;CAUR;;CAKA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;CAOR;;CAGA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;IAGN,QAAQ,MAAM,EAAE;;;;;;CAMlB;;CAGA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;CAOR;;CAGA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;CAOR;;CAGA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;;CAQR;;CAGA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;;;CASR;;CAGA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;;;CASR;;CAGA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;EACV,UAAU;EACV,MAAM;EACN,OAAO;EACP,SAAS;EACT,MAAM;;;;;;;;CAQR;AACF;AAIA,MAAa,iCAAiC,OAAO,KACnD,yBACF;;AAGA,SAAgB,0BAA0B,MAAsC;CAE9E,MAAM,SAASA,0BAAM;CACrB,IAAI,QAAQ,OAAO;CACnB,IAAI,QAAQ,IAAI,aAAa,cAC3B,QAAQ,KAAK,sCAAsC,KAAK,kBAAkB;CAE5E,OAAO,0BAA0B;AACnC"}

package/dist/components/shader-transition/shader-transition.d.ts

@@ -0,0 +1,35 @@
+import { ShaderTransitionPresetName } from "./shader-transition-presets.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/shader-transition/shader-transition.d.ts
+type ShaderTransitionStatus = "idle" | "running" | "done";
+interface ShaderTransitionProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** The reveal pattern. Default "noise". */
+  preset?: ShaderTransitionPresetName;
+  /** Two-state API: shown while `active` is false. */
+  from?: ReactNode;
+  /** Two-state API: shown while `active` is true. */
+  to?: ReactNode;
+  /** Two-state API: which state is shown. Changing it runs the transition. */
+  active?: boolean;
+  /** Keyed API: changing the key runs the transition to the new children. */
+  transitionKey?: string | number;
+  children?: ReactNode;
+  /** Run length in ms at --motion-scale 1. Defaults to the preset's. */
+  duration?: number;
+  /** Colour token of the cover — the surface behind the content. Default "background". */
+  surface?: string;
+  /** Colour token of the glow on the moving front. Default "primary". */
+  accent?: string;
+  /** Colour token the preset's sheen tints the cover with. Default: accent mixed into surface. */
+  accentSecondary?: string;
+  /** Called when a run starts. */
+  onStart?: () => void;
+  /** Called when the incoming state becomes visible (the midpoint, or at once without motion). */
+  onSwap?: () => void;
+  /** Called when a run settles, however it ran. */
+  onRest?: () => void;
+}
+declare function ShaderTransition({ preset, from, to, active, transitionKey, children, duration, surface, accent, accentSecondary, onStart, onSwap, onRest, className, style, ref, ...props }: ShaderTransitionProps): import("react").JSX.Element;
+//#endregion
+export { ShaderTransition, ShaderTransitionProps, ShaderTransitionStatus };
+//# sourceMappingURL=shader-transition.d.ts.map

package/dist/components/shader-transition/shader-transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shader-transition.d.ts","names":[],"sources":["../../../src/components/shader-transition/shader-transition.tsx"],"mappings":";;;KAoDY;UAEK,8BAA8B,KAAK;;EAElD,SAAS;;EAET,OAAO;;EAEP,KAAK;;EAEL;;EAEA;EACA,WAAW;;EAEX;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;iBA2Cc,mBACd,QACA,MACA,IACA,QACA,eACA,UACA,UACA,SACA,QACA,iBACA,SACA,QACA,QACA,WACA,OACA,QACG,SACF,wCAAqB,IAAA"}