@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/components/effects/FlutedGlass/FlutedGlass.shaders.js

@@ -0,0 +1,335 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslRotate2, glslHashFloat } from '../shared/shaderNoise.glsl.js';
+import { glslImageCoverUV } from '../shared/imageUV.glsl.js';
+
+/**
+ * FlutedGlass fragment shader — adapted from paper-design/shaders'
+ * `fluted-glass.ts` (https://github.com/paper-design/shaders, Apache
+ * License 2.0). An image filter: refracts a source image through a
+ * directional fluted/ribbed glass grid, with a real per-pixel Gaussian blur.
+ *
+ * Simplified from the original: image UV computed via the shared
+ * `getImageCoverUV` cover-fit helper (see shared/imageUV.glsl.ts) instead of
+ * paper-design's ShaderSizingParams fit engine; pure-hash GLSL instead of
+ * pre-generated noise-texture sampling.
+ */
+const flutedGlassFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec2 iResolution;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorShadow;
+uniform vec4 u_colorHighlight;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_size;
+uniform float u_shadows;
+uniform float u_angle;
+uniform float u_stretch;
+uniform float u_shape;
+uniform float u_distortion;
+uniform float u_highlights;
+uniform float u_distortionShape;
+uniform float u_shift;
+uniform float u_blur;
+uniform float u_edges;
+uniform float u_marginLeft;
+uniform float u_marginRight;
+uniform float u_marginTop;
+uniform float u_marginBottom;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+${glslRotate2}
+${glslHashFloat}
+${glslImageCoverUV}
+
+float hash21(vec2 p) {
+  return randomR(p);
+}
+
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float getUvFrame(vec2 uv, float softness) {
+  float aax = 2. * fwidth(uv.x);
+  float aay = 2. * fwidth(uv.y);
+  float left = smoothstep(0., aax + softness, uv.x);
+  float right = 1. - smoothstep(1. - softness - aax, 1., uv.x);
+  float bottom = smoothstep(0., aay + softness, uv.y);
+  float top = 1. - smoothstep(1. - softness - aay, 1., uv.y);
+  return left * right * bottom * top;
+}
+
+const int MAX_RADIUS = 50;
+vec4 samplePremultiplied(sampler2D tex, vec2 uv) {
+  vec4 c = texture(tex, uv);
+  c.rgb *= c.a;
+  return c;
+}
+
+vec4 getBlur(sampler2D tex, vec2 uv, vec2 texelSize, vec2 dir, float sigma) {
+  if (sigma <= .5) return texture(tex, uv);
+  int radius = int(min(float(MAX_RADIUS), ceil(3.0 * sigma)));
+
+  float twoSigma2 = 2.0 * sigma * sigma;
+  float gaussianNorm = 1.0 / sqrt(TWO_PI * sigma * sigma);
+
+  vec4 sum = samplePremultiplied(tex, uv) * gaussianNorm;
+  float weightSum = gaussianNorm;
+
+  for (int i = 1; i <= MAX_RADIUS; i++) {
+    if (i > radius) break;
+
+    float x = float(i);
+    float w = exp(-(x * x) / twoSigma2) * gaussianNorm;
+
+    vec2 offset = dir * texelSize * x;
+    vec4 s1 = samplePremultiplied(tex, uv + offset);
+    vec4 s2 = samplePremultiplied(tex, uv - offset);
+
+    sum += (s1 + s2) * w;
+    weightSum += 2.0 * w;
+  }
+
+  vec4 result = sum / weightSum;
+  if (result.a > 0.) {
+    result.rgb /= result.a;
+  }
+
+  return result;
+}
+
+vec2 rotateAspect(vec2 p, float a, float aspect) {
+  p.x *= aspect;
+  p = rotate(p, a);
+  p.x /= aspect;
+  return p;
+}
+
+float smoothFract(float x) {
+  float f = fract(x);
+  float w = fwidth(x);
+  float edge = abs(f - 0.5) - 0.5;
+  float band = smoothstep(-w, w, edge);
+  return mix(f, 1.0 - f, band);
+}
+
+void main() {
+  float patternRotation = -u_angle * PI / 180.;
+  float patternSize = mix(200., 5., u_size);
+
+  vec2 fragUV = gl_FragCoord.xy / iResolution.xy;
+  vec2 imageUV0 = getImageCoverUV(fragUV, iResolution, u_imageAspectRatio);
+  vec2 uv = imageUV0;
+
+  vec2 uvMask = fragUV;
+  vec2 sw = vec2(.005);
+  vec4 margins = vec4(u_marginLeft, u_marginTop, u_marginRight, u_marginBottom);
+  float mask =
+    smoothstep(margins[0], margins[0] + sw.x, uvMask.x + sw.x) *
+    smoothstep(margins[2], margins[2] + sw.x, 1.0 - uvMask.x + sw.x) *
+    smoothstep(margins[1], margins[1] + sw.y, uvMask.y + sw.y) *
+    smoothstep(margins[3], margins[3] + sw.y, 1.0 - uvMask.y + sw.y);
+  float maskOuter =
+    smoothstep(margins[0] - sw.x, margins[0], uvMask.x + sw.x) *
+    smoothstep(margins[2] - sw.x, margins[2], 1.0 - uvMask.x + sw.x) *
+    smoothstep(margins[1] - sw.y, margins[1], uvMask.y + sw.y) *
+    smoothstep(margins[3] - sw.y, margins[3], 1.0 - uvMask.y + sw.y);
+  float maskStroke = maskOuter - mask;
+  float maskInner =
+    smoothstep(margins[0] - 2. * sw.x, margins[0], uvMask.x) *
+    smoothstep(margins[2] - 2. * sw.x, margins[2], 1.0 - uvMask.x) *
+    smoothstep(margins[1] - 2. * sw.y, margins[1], uvMask.y) *
+    smoothstep(margins[3] - 2. * sw.y, margins[3], 1.0 - uvMask.y);
+  float maskStrokeInner = maskInner - mask;
+
+  uv -= .5;
+  uv *= patternSize;
+  uv = rotateAspect(uv, patternRotation, u_imageAspectRatio);
+
+  float curve = 0.;
+  float patternY = uv.y / u_imageAspectRatio;
+  if (u_shape > 4.5) {
+    curve = .5 + .5 * sin(.5 * PI * uv.x) * cos(.5 * PI * patternY);
+  } else if (u_shape > 3.5) {
+    curve = 10. * abs(fract(.1 * patternY) - .5);
+  } else if (u_shape > 2.5) {
+    curve = 4. * sin(.23 * patternY);
+  } else if (u_shape > 1.5) {
+    curve = .5 + .5 * sin(.5 * uv.x) * sin(1.7 * uv.x);
+  }
+
+  vec2 UvToFract = uv + curve;
+  vec2 fractOrigUV = fract(uv);
+  vec2 floorOrigUV = floor(uv);
+
+  float x = smoothFract(UvToFract.x);
+  float xNonSmooth = fract(UvToFract.x) + .0001;
+
+  float highlightsWidth = 2. * max(.001, fwidth(UvToFract.x));
+  highlightsWidth += 2. * maskStrokeInner;
+  float highlights = smoothstep(0., highlightsWidth, xNonSmooth);
+  highlights *= smoothstep(1., 1. - highlightsWidth, xNonSmooth);
+  highlights = 1. - highlights;
+  highlights *= u_highlights;
+  highlights = clamp(highlights, 0., 1.);
+  highlights *= mask;
+
+  float shadows = pow(x, 1.3);
+  float distortion = 0.;
+  float fadeX = 1.;
+  float frameFade = 0.;
+
+  float aa = fwidth(xNonSmooth);
+  aa = max(aa, fwidth(uv.x));
+  aa = max(aa, fwidth(UvToFract.x));
+  aa = max(aa, .0001);
+
+  if (u_distortionShape == 1.) {
+    distortion = -pow(1.5 * x, 3.);
+    distortion += (.5 - u_shift);
+    frameFade = pow(1.5 * x, 3.);
+    aa = max(.2, aa);
+    aa += mix(.2, 0., u_size);
+    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
+    distortion = mix(.5, distortion, fadeX);
+  } else if (u_distortionShape == 2.) {
+    distortion = 2. * pow(x, 2.);
+    distortion -= (.5 + u_shift);
+    frameFade = pow(abs(x - .5), 4.);
+    aa = max(.2, aa);
+    aa += mix(.2, 0., u_size);
+    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
+    distortion = mix(.5, distortion, fadeX);
+    frameFade = mix(1., frameFade, .5 * fadeX);
+  } else if (u_distortionShape == 3.) {
+    distortion = pow(2. * (xNonSmooth - .5), 6.);
+    distortion -= .25;
+    distortion -= u_shift;
+    frameFade = 1. - 2. * pow(abs(x - .4), 2.);
+    aa = .15;
+    aa += mix(.1, 0., u_size);
+    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
+    frameFade = mix(1., frameFade, fadeX);
+  } else if (u_distortionShape == 4.) {
+    x = xNonSmooth;
+    distortion = sin((x + .25) * TWO_PI);
+    shadows = .5 + .5 * asin(distortion) / (.5 * PI);
+    distortion *= .5;
+    distortion -= u_shift;
+    frameFade = .5 + .5 * sin(x * TWO_PI);
+  } else if (u_distortionShape == 5.) {
+    distortion -= pow(abs(x), .2) * x;
+    distortion += .33;
+    distortion -= 3. * u_shift;
+    distortion *= .33;
+    frameFade = .3 * (smoothstep(.0, 1., x));
+    shadows = pow(x, 2.5);
+    aa = max(.1, aa);
+    aa += mix(.1, 0., u_size);
+    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);
+    distortion *= fadeX;
+  }
+
+  vec2 dudx = dFdx(imageUV0);
+  vec2 dudy = dFdy(imageUV0);
+  vec2 grainUV = imageUV0 - .5;
+  grainUV *= (.8 / vec2(length(dudx), length(dudy)));
+  grainUV += .5;
+  float grain = valueNoise(grainUV);
+  grain = smoothstep(.4, .7, grain);
+  grain *= u_grainMixer;
+  distortion = mix(distortion, 0., grain);
+
+  shadows = min(shadows, 1.);
+  shadows += maskStrokeInner;
+  shadows *= mask;
+  shadows = min(shadows, 1.);
+  shadows *= pow(u_shadows, 2.);
+  shadows = clamp(shadows, 0., 1.);
+
+  distortion *= 3. * u_distortion;
+  frameFade *= u_distortion;
+
+  fractOrigUV.x += distortion;
+  floorOrigUV = rotateAspect(floorOrigUV, -patternRotation, u_imageAspectRatio);
+  fractOrigUV = rotateAspect(fractOrigUV, -patternRotation, u_imageAspectRatio);
+
+  uv = (floorOrigUV + fractOrigUV) / patternSize;
+  uv += pow(maskStroke, 4.);
+  uv += vec2(.5);
+
+  uv = mix(imageUV0, uv, smoothstep(0., .7, mask));
+  float blur = mix(0., 50., u_blur);
+  blur = mix(0., blur, smoothstep(.5, 1., mask));
+
+  float edgeDistortion = mix(.0, .04, u_edges);
+  edgeDistortion += .06 * frameFade * u_edges;
+  edgeDistortion *= mask;
+  float frame = getUvFrame(uv, edgeDistortion);
+
+  float stretch = 1. - smoothstep(0., .5, xNonSmooth) * smoothstep(1., 1. - .5, xNonSmooth);
+  stretch = pow(stretch, 2.);
+  stretch *= mask;
+  stretch *= getUvFrame(uv, .1 + .05 * mask * frameFade);
+  uv.y = mix(uv.y, .5, u_stretch * stretch);
+
+  vec4 image = getBlur(u_image, uv, 1. / iResolution, vec2(0., 1.), blur);
+  image.rgb *= image.a;
+  vec4 backColor = u_colorBack;
+  backColor.rgb *= backColor.a;
+  vec4 highlightColor = u_colorHighlight;
+  highlightColor.rgb *= highlightColor.a;
+  vec4 shadowColor = u_colorShadow;
+
+  vec3 color = highlightColor.rgb * highlights;
+  float opacity = highlightColor.a * highlights;
+
+  shadows = mix(shadows * shadowColor.a, 0., highlights);
+  color = mix(color, shadowColor.rgb * shadowColor.a, .5 * shadows);
+  color += .5 * pow(shadows, .5) * shadowColor.rgb;
+  opacity += shadows;
+  color = clamp(color, vec3(0.), vec3(1.));
+  opacity = clamp(opacity, 0., 1.);
+
+  color += image.rgb * (1. - opacity) * frame;
+  opacity += image.a * (1. - opacity) * frame;
+
+  color += backColor.rgb * (1. - opacity);
+  opacity += backColor.a * (1. - opacity);
+
+  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));
+  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
+  grainOverlay = pow(grainOverlay, 1.3);
+  float grainOverlayV = grainOverlay * 2. - 1.;
+  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
+  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
+  grainOverlayStrength = pow(grainOverlayStrength, .8);
+  grainOverlayStrength *= mask;
+  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);
+  opacity += .5 * grainOverlayStrength;
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { flutedGlassFragmentShader };

package/dist/components/effects/FlutedGlass/FlutedGlass.types.d.ts

@@ -0,0 +1,61 @@
+import type React from "react";
+import type { ShaderTextureSource } from "../shared";
+export declare const FLUTED_GLASS_SHAPES: {
+    readonly lines: 1;
+    readonly linesIrregular: 2;
+    readonly wave: 3;
+    readonly zigzag: 4;
+    readonly pattern: 5;
+};
+export type FlutedGlassShape = keyof typeof FLUTED_GLASS_SHAPES;
+export declare const FLUTED_GLASS_DISTORTION_SHAPES: {
+    readonly prism: 1;
+    readonly lens: 2;
+    readonly contour: 3;
+    readonly cascade: 4;
+    readonly flat: 5;
+};
+export type FlutedGlassDistortionShape = keyof typeof FLUTED_GLASS_DISTORTION_SHAPES;
+export interface FlutedGlassProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Source image (URL or an existing HTMLImageElement). Required. */
+    image: ShaderTextureSource;
+    /** Background CSS color shown outside the margin. Default: 'var(--color-surface-sunken)'. */
+    colorBack?: string;
+    /** Ridge shadow color. Default: 'var(--color-text-primary)'. */
+    colorShadow?: string;
+    /** Ridge highlight color. Default: 'var(--color-background)'. */
+    colorHighlight?: string;
+    /** Directional grid pattern. Default: 'lines'. */
+    shape?: FlutedGlassShape;
+    /** Per-ridge refraction profile. Default: 'lens'. */
+    distortionShape?: FlutedGlassDistortionShape;
+    /** Ridge frequency/size. Default: 0.5. */
+    size?: number;
+    /** Grid rotation, degrees. Default: 0. */
+    angle?: number;
+    /** Refraction strength, 0-1. Default: 0.5. */
+    distortion?: number;
+    /** Refraction phase shift. Default: 0. */
+    shift?: number;
+    /** Blur applied through the glass, 0-1. Default: 0.2. */
+    blur?: number;
+    /** Edge highlight strength, 0-1. Default: 0.3. */
+    edges?: number;
+    /** Shadow strength, 0-1. Default: 0.4. */
+    shadows?: number;
+    /** Ridge highlight strength, 0-1. Default: 0.5. */
+    highlights?: number;
+    /** Vertical stretch at ridge centers, 0-1. Default: 0. */
+    stretch?: number;
+    /** Inset margin on all sides, 0-1 (overridable per-side). Default: 0. */
+    margin?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    /** Grain influence on the distortion, 0-1. Default: 0. */
+    grainMixer?: number;
+    /** Post-composite grain overlay strength, 0-1. Default: 0. */
+    grainOverlay?: number;
+    className?: string;
+}

package/dist/components/effects/FlutedGlass/FlutedGlass.types.js

@@ -0,0 +1,16 @@
+const FLUTED_GLASS_SHAPES = {
+    lines: 1,
+    linesIrregular: 2,
+    wave: 3,
+    zigzag: 4,
+    pattern: 5,
+};
+const FLUTED_GLASS_DISTORTION_SHAPES = {
+    prism: 1,
+    lens: 2,
+    contour: 3,
+    cascade: 4,
+    flat: 5,
+};
+
+export { FLUTED_GLASS_DISTORTION_SHAPES, FLUTED_GLASS_SHAPES };

package/dist/components/effects/FlutedGlass/index.d.ts

@@ -0,0 +1,3 @@
+export { FlutedGlass } from "./FlutedGlass";
+export type { FlutedGlassProps, FlutedGlassShape, FlutedGlassDistortionShape, } from "./FlutedGlass.types";
+export { FLUTED_GLASS_SHAPES, FLUTED_GLASS_DISTORTION_SHAPES } from "./FlutedGlass.types";

package/dist/components/effects/GemSmoke/GemSmoke.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { GemSmokeProps } from "./GemSmoke.types";
+/**
+ * Animated dual inner/outer swirling smoke, masked into a glowing shape.
+ * WebGL2-powered; falls back to a static CSS radial glow when WebGL2 is
+ * unavailable or the user prefers reduced motion.
+ */
+export declare const GemSmoke: React.FC<GemSmokeProps>;

package/dist/components/effects/GemSmoke/GemSmoke.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useRef } from 'react';
+import { useReducedMotion } from 'motion/react';
+import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
+import { cn } from '../../../utils/cn.js';
+import { ShaderCanvas } from '../shared/ShaderCanvas/ShaderCanvas.js';
+import { resolveShaderColors, resolveShaderColor } from '../shared/resolveShaderColor.js';
+import { gemSmokeFragmentShader } from './GemSmoke.shaders.js';
+import { GEM_SMOKE_MAX_COLORS, GEM_SMOKE_SHAPES } from './GemSmoke.types.js';
+
+const DEFAULT_COLORS = ["var(--color-primary-300)", "var(--color-primary)", "var(--color-primary-700)"];
+const DEFAULT_COLOR_BACK = "var(--color-background)";
+const DEFAULT_COLOR_INNER = "var(--color-primary-50)";
+function useWebgl2Supported(disabled) {
+    return useMemo(() => {
+        if (disabled || typeof document === "undefined")
+            return false;
+        try {
+            return !!document.createElement("canvas").getContext("webgl2");
+        }
+        catch (_a) {
+            return false;
+        }
+    }, [disabled]);
+}
+/**
+ * Animated dual inner/outer swirling smoke, masked into a glowing shape.
+ * WebGL2-powered; falls back to a static CSS radial glow when WebGL2 is
+ * unavailable or the user prefers reduced motion.
+ */
+const GemSmoke = ({ colorBack = DEFAULT_COLOR_BACK, colors = DEFAULT_COLORS, colorInner = DEFAULT_COLOR_INNER, shape = "circle", innerDistortion = 0.5, outerDistortion = 0.3, outerGlow = 0.5, innerGlow = 0.8, offset = 0, angle = 0, size = 0.5, speed = 1, className, style, ...props }) => {
+    var _a, _b, _c;
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
+    const safeColors = colors.length > 0 ? colors.slice(0, GEM_SMOKE_MAX_COLORS) : DEFAULT_COLORS;
+    const resolvedColors = useMemo(() => resolveShaderColors(safeColors), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [safeColors.join("|"), isDark]);
+    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorBack, isDark]);
+    const resolvedInner = useMemo(() => resolveShaderColor(colorInner), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorInner, isDark]);
+    const uniformsRef = useRef({});
+    for (let i = 0; i < GEM_SMOKE_MAX_COLORS; i++) {
+        uniformsRef.current[`u_colors[${i}]`] =
+            (_b = (_a = resolvedColors[i]) !== null && _a !== void 0 ? _a : resolvedColors[resolvedColors.length - 1]) !== null && _b !== void 0 ? _b : [0, 0, 0, 0];
+    }
+    uniformsRef.current.u_colorsCount = resolvedColors.length;
+    uniformsRef.current.u_colorBack = resolvedBack;
+    uniformsRef.current.u_colorInner = resolvedInner;
+    uniformsRef.current.u_shape = GEM_SMOKE_SHAPES[shape];
+    uniformsRef.current.u_innerDistortion = innerDistortion;
+    uniformsRef.current.u_outerDistortion = outerDistortion;
+    uniformsRef.current.u_outerGlow = outerGlow;
+    uniformsRef.current.u_innerGlow = innerGlow;
+    uniformsRef.current.u_offset = offset;
+    uniformsRef.current.u_angle = angle;
+    uniformsRef.current.u_size = size;
+    uniformsRef.current.u_speed = speed;
+    const fallbackGradient = `radial-gradient(circle, ${(_c = safeColors[0]) !== null && _c !== void 0 ? _c : "var(--color-primary)"}, ${colorBack} 70%)`;
+    return (jsx("div", { className: cn("absolute inset-0 overflow-hidden pointer-events-none select-none", className), style: style, "aria-hidden": "true", ...props, children: isClient && webglSupported ? (jsx(ShaderCanvas, { fragmentShader: gemSmokeFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
+};
+
+export { GemSmoke };

package/dist/components/effects/GemSmoke/GemSmoke.shaders.d.ts

@@ -0,0 +1,18 @@
+/**
+ * GemSmoke fragment shader — adapted from paper-design/shaders'
+ * `gem-smoke.ts` (https://github.com/paper-design/shaders, Apache License
+ * 2.0).
+ *
+ * Simplified from the original: plain centered/aspect-corrected UV
+ * (gl_FragCoord/iResolution) instead of paper-design's ShaderSizingParams
+ * fit/scale/rotation engine.
+ *
+ * Image-input mode omitted: paper-design's `u_isImage` path expects a
+ * specially pre-processed texture (red channel = edge mask, green channel =
+ * alpha, read through a 9x9 Gaussian blur) rather than an ordinary photo —
+ * that pre-processing step is out of scope for this port. This ships the
+ * generative-shape modes only (none/circle/daisy/diamond/metaballs);
+ * image-driven logo mode may be added later alongside a documented
+ * preprocessing story.
+ */
+export declare const gemSmokeFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colors[6];\nuniform float u_colorsCount;\nuniform vec4 u_colorBack;\nuniform vec4 u_colorInner;\n\nuniform float u_innerDistortion;\nuniform float u_outerDistortion;\nuniform float u_outerGlow;\nuniform float u_innerGlow;\nuniform float u_offset;\nuniform float u_angle;\nuniform float u_size;\nuniform float u_shape;\nuniform float u_speed;\n\nout vec4 fragColor;\n\n\nconst float PI = 3.14159265359;\nconst float TWO_PI = 6.28318530718;\n\n\nvec2 rotate(vec2 v, float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c) * v;\n}\n\n\nfloat sst(float a, float b, float x) {\n  return smoothstep(a, b, x);\n}\n\nvoid main() {\n  float time = u_speed * iTime;\n\n  vec2 objectUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n  vec2 uv = objectUV + .5;\n  uv.y = 1. - uv.y;\n  float edge = 0.;\n\n  if (u_shape < 1.) {\n    vec2 borderUV = objectUV + .5;\n    vec2 mask = min(borderUV, 1. - borderUV);\n    vec2 pixel_thickness = min(250. / iResolution.xy, vec2(.5));\n    float maskX = pow(smoothstep(0.0, pixel_thickness.x, mask.x), .25);\n    float maskY = pow(smoothstep(0.0, pixel_thickness.y, mask.y), .25);\n    edge = clamp(1. - maskX * maskY, 0., 1.);\n  } else if (u_shape < 2.) {\n    vec2 shapeUV = (uv - .5) * .67;\n    edge = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);\n  } else if (u_shape < 3.) {\n    vec2 shapeUV = (uv - .5) * 1.68;\n    float r = length(shapeUV) * 2.;\n    float a = atan(shapeUV.y, shapeUV.x) + .2;\n    r *= (1. + .05 * sin(3. * a + 2. * time));\n    float f = abs(cos(a * 3.));\n    edge = smoothstep(f, f + .7, r);\n    edge *= edge;\n  } else if (u_shape < 4.) {\n    vec2 shapeUV = uv - .5;\n    shapeUV = rotate(shapeUV, .25 * PI);\n    shapeUV *= 1.42;\n    shapeUV += .5;\n    vec2 mask = min(shapeUV, 1. - shapeUV);\n    vec2 pixel_thickness = vec2(.15);\n    float maskX = pow(smoothstep(0.0, pixel_thickness.x, mask.x), .25);\n    float maskY = pow(smoothstep(0.0, pixel_thickness.y, mask.y), .25);\n    edge = clamp(1. - maskX * maskY, 0., 1.);\n  } else {\n    vec2 shapeUV = (uv - .5) * 1.3;\n    edge = 0.;\n    for (int i = 0; i < 5; i++) {\n      float fi = float(i);\n      float speed = 1.5 + 2. / 3. * sin(fi * 12.345);\n      float angle = -fi * 1.5;\n      vec2 dir1 = vec2(cos(angle), sin(angle));\n      vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));\n      vec2 traj = .4 * (dir1 * sin(time * speed + fi * 1.23) + dir2 * cos(time * (speed * 0.7) + fi * 2.17));\n      float d = length(shapeUV + traj);\n      edge += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);\n    }\n    edge = 1. - smoothstep(.65, .9, edge);\n    edge = pow(edge, 4.);\n  }\n\n  float imgAlpha = 1. - smoothstep(.9 - 2. * fwidth(edge), .9, edge);\n  float roundness = 1. - edge;\n\n  vec2 smokeUV = objectUV;\n  smokeUV = rotate(smokeUV, u_angle * PI / 180.);\n  smokeUV *= mix(4., 1., u_size);\n\n  vec2 innerUV = smokeUV;\n  vec2 outerUV = smokeUV;\n\n  innerUV.y += u_innerDistortion * (1. - sst(0., 1., length(.4 * innerUV)));\n  innerUV.y -= .4 * u_innerDistortion;\n  innerUV.y += .7 * u_offset * roundness;\n\n  outerUV.y += u_outerDistortion * (1. - sst(0., 1., length(.4 * outerUV)));\n  outerUV.y -= .4 * u_outerDistortion;\n\n  float innerSwirl = u_innerDistortion * roundness;\n  float outerSwirl = u_outerDistortion;\n\n  for (int i = 1; i < 5; i++) {\n    float fi = float(i);\n\n    float stretchIn = max(length(dFdx(innerUV)), length(dFdy(innerUV)));\n    float dampenIn = 1. / (1. + stretchIn * 8.);\n    float sIn = innerSwirl * dampenIn;\n    innerUV.x += sIn / fi * cos(time + fi * 2.9 * innerUV.y);\n    innerUV.y += sIn / fi * cos(time + fi * 1.5 * innerUV.x);\n\n    float stretchOut = max(length(dFdx(outerUV)), length(dFdy(outerUV)));\n    float dampenOut = 1. / (1. + stretchOut * 8.);\n    float sOut = outerSwirl * dampenOut;\n    outerUV.x += sOut / fi * cos(time + fi * 2.9 * outerUV.y);\n    outerUV.y += sOut / fi * cos(time + fi * 1.5 * outerUV.x);\n  }\n\n  float innerShape = exp(-1.5 * dot(innerUV, innerUV));\n  float outerShape = exp(-1.5 * dot(outerUV, outerUV));\n\n  float outerMask = pow(u_outerGlow, 2.) * (1. - imgAlpha);\n  float innerMask = (.01 + .99 * u_innerGlow) * imgAlpha;\n\n  innerShape *= innerMask;\n  outerShape *= outerMask;\n\n  float mixer = (innerShape + outerShape) * u_colorsCount;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n\n  float smokeMask = 0.;\n  int cntStop = int(u_colorsCount);\n  for (int i = 1; i < 7; i++) {\n    if (i > cntStop) break;\n    float m = sst(0., 1., clamp(mixer - float(i - 1), 0., 1.));\n    if (i == 1) smokeMask = m;\n    vec4 c = u_colors[i - 1];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  vec3 color = gradient.rgb * smokeMask;\n  float opacity = gradient.a * smokeMask;\n\n  float innerOpacity = u_colorInner.a * imgAlpha;\n  vec3 innerColor = u_colorInner.rgb * innerOpacity;\n  color += innerColor * (1.0 - opacity);\n  opacity += innerOpacity * (1.0 - opacity);\n\n  vec3 backColor = u_colorBack.rgb * u_colorBack.a;\n  color += backColor * (1.0 - opacity);\n  opacity += u_colorBack.a * (1.0 - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n";