blocks-dusted 0.1.10 → 0.1.12

package/templates/shared/src/components/ui/button-dusted-fluid/index.tsx

@@ -0,0 +1,1521 @@
+/* eslint-disable prefer-const */
+'use client'
+
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+import { ButtonsEyeCatching } from '@/blocks/DD-FluidBtn/ButtonsEyeCatching'
+import { cn } from '@/utilities/ui'
+
+interface ColorRGB {
+  r: number
+  g: number
+  b: number
+}
+
+function clamp01(n: number) {
+  return Math.max(0, Math.min(1, n))
+}
+
+function lerp(a: number, b: number, t: number) {
+  return a + (b - a) * t
+}
+
+function mulColor(c: ColorRGB, m: number): ColorRGB {
+  return { r: c.r * m, g: c.g * m, b: c.b * m }
+}
+
+function HSVtoRGB(h: number, s: number, v: number): ColorRGB {
+  let r = 0,
+    g = 0,
+    b = 0
+  const i = Math.floor(h * 6)
+  const f = h * 6 - i
+  const p = v * (1 - s)
+  const q = v * (1 - f * s)
+  const t = v * (1 - (1 - f) * s)
+
+  switch (i % 6) {
+    case 0:
+      r = v
+      g = t
+      b = p
+      break
+    case 1:
+      r = q
+      g = v
+      b = p
+      break
+    case 2:
+      r = p
+      g = v
+      b = t
+      break
+    case 3:
+      r = p
+      g = q
+      b = v
+      break
+    case 4:
+      r = t
+      g = p
+      b = v
+      break
+    case 5:
+      r = v
+      g = p
+      b = q
+      break
+  }
+  return { r, g, b }
+}
+
+function randColor(): ColorRGB {
+  const c = HSVtoRGB(Math.random(), 1, 1)
+  // keep it “dusty” not neon
+  c.r *= 0.15
+  c.g *= 0.15
+  c.b *= 0.15
+  return c
+}
+
+export interface FluidDustRegionHandle {
+  /**
+   * Emit left-right trail behind the button, confined to this region.
+   * This does not read mouse position.
+   */
+  emitButtonTrail: (opts?: {
+    durationMs?: number
+    sweeps?: number
+    marginPx?: number
+    yBias?: number // 0..1 (0 top, 0.5 center, 1 bottom)
+    intensity?: number
+  }) => void
+
+  /** Immediately clears the effect in this region. */
+  clear: () => void
+
+  /** Pause rendering (keeps buffers). */
+  setEnabled: (v: boolean) => void
+
+  /** Start fading out the canvas after a delay */
+  startFadeOut: (delayMs: number, fadeMs: number) => void
+}
+
+interface FluidDustRegionProps {
+  SIM_RESOLUTION?: number
+  DYE_RESOLUTION?: number
+  DENSITY_DISSIPATION?: number
+  VELOCITY_DISSIPATION?: number
+  PRESSURE?: number
+  PRESSURE_ITERATIONS?: number
+  CURL?: number
+  SPLAT_RADIUS?: number
+  SPLAT_FORCE?: number
+  SHADING?: boolean
+  COLOR_UPDATE_SPEED?: number
+  BACK_COLOR?: ColorRGB
+  TRANSPARENT?: boolean
+
+  /** The region is sized by its parent. */
+  className?: string
+}
+
+export const FluidDustRegion = forwardRef<FluidDustRegionHandle, FluidDustRegionProps>(
+  function FluidDustRegion(
+    {
+      SIM_RESOLUTION = 128,
+      DYE_RESOLUTION = 900,
+      DENSITY_DISSIPATION = 3.35,
+      VELOCITY_DISSIPATION = 2.05,
+      PRESSURE = 0.1,
+      PRESSURE_ITERATIONS = 18,
+      CURL = 2.5,
+      SPLAT_RADIUS = 0.16,
+      SPLAT_FORCE = 5000, // adjust to suit
+      SHADING = true,
+      COLOR_UPDATE_SPEED = 10,
+      BACK_COLOR = { r: 0, g: 0, b: 0 },
+      TRANSPARENT = true,
+      className
+    },
+    ref
+  ) {
+    const canvasRef = useRef<HTMLCanvasElement>(null)
+    const fadeRafRef = useRef<number | null>(null)
+
+    // runtime flags
+    const enabledRef = useRef(true)
+    const rafRef = useRef<number | null>(null)
+
+    // burst state (no cursor)
+    const burstRef = useRef<{
+      active: boolean
+      t0: number
+      durationMs: number
+      sweeps: number
+      marginPx: number
+      yBias: number
+      intensity: number
+      baseColor: ColorRGB
+    }>({
+      active: false,
+      t0: 0,
+      durationMs: 420,
+      sweeps: 2,
+      marginPx: 18,
+      yBias: 0.55,
+      intensity: 1,
+      baseColor: randColor()
+    })
+
+    // API storage (assigned after GL init)
+    const apiRef = useRef<{
+      emitButtonTrail: (opts?: {
+        durationMs?: number
+        sweeps?: number
+        marginPx?: number
+        yBias?: number
+        intensity?: number
+      }) => void
+      clear: () => void
+      setEnabled: (v: boolean) => void
+      startFadeOut: (delayMs: number, fadeMs: number) => void
+    } | null>(null)
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        emitButtonTrail: (opts) => apiRef.current?.emitButtonTrail(opts),
+        clear: () => apiRef.current?.clear(),
+        setEnabled: (v) => apiRef.current?.setEnabled(v),
+        startFadeOut: (delayMs, fadeMs) => apiRef.current?.startFadeOut(delayMs, fadeMs)
+      }),
+      []
+    )
+
+    useEffect(() => {
+      const canvas = canvasRef.current!!
+      if (!canvas) return
+
+      function getWebGLContext(canvasEl: HTMLCanvasElement) {
+        const params: WebGLContextAttributes = {
+          alpha: true,
+          depth: false,
+          stencil: false,
+          antialias: false,
+          preserveDrawingBuffer: false
+        }
+
+        let gl = canvasEl.getContext('webgl2', params) as WebGL2RenderingContext | null
+
+        if (!gl) {
+          gl = (canvasEl.getContext('webgl', params) ||
+            canvasEl.getContext('experimental-webgl', params)) as WebGL2RenderingContext | null
+        }
+
+        if (!gl) throw new Error('Unable to initialize WebGL.')
+
+        const isWebGL2 = 'drawBuffers' in gl
+
+        let supportLinearFiltering = false
+        let halfFloat: any = null
+
+        if (isWebGL2) {
+          ;(gl as WebGL2RenderingContext).getExtension('EXT_color_buffer_float')
+          supportLinearFiltering = !!(gl as WebGL2RenderingContext).getExtension(
+            'OES_texture_float_linear'
+          )
+        } else {
+          halfFloat = (gl as WebGLRenderingContext).getExtension('OES_texture_half_float')
+          supportLinearFiltering = !!(gl as WebGLRenderingContext).getExtension(
+            'OES_texture_half_float_linear'
+          )
+        }
+
+        gl.clearColor(0, 0, 0, 1)
+
+        const halfFloatTexType = isWebGL2
+          ? (gl as WebGL2RenderingContext).HALF_FLOAT
+          : (halfFloat && halfFloat.HALF_FLOAT_OES) || 0
+
+        function supportRenderTextureFormat(
+          glAny: WebGLRenderingContext | WebGL2RenderingContext,
+          internalFormat: number,
+          format: number,
+          type: number
+        ) {
+          const texture = glAny.createTexture()
+          if (!texture) return false
+
+          glAny.bindTexture(glAny.TEXTURE_2D, texture)
+          glAny.texParameteri(glAny.TEXTURE_2D, glAny.TEXTURE_MIN_FILTER, glAny.NEAREST)
+          glAny.texParameteri(glAny.TEXTURE_2D, glAny.TEXTURE_MAG_FILTER, glAny.NEAREST)
+          glAny.texParameteri(glAny.TEXTURE_2D, glAny.TEXTURE_WRAP_S, glAny.CLAMP_TO_EDGE)
+          glAny.texParameteri(glAny.TEXTURE_2D, glAny.TEXTURE_WRAP_T, glAny.CLAMP_TO_EDGE)
+          glAny.texImage2D(glAny.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null)
+
+          const fbo = glAny.createFramebuffer()
+          if (!fbo) return false
+
+          glAny.bindFramebuffer(glAny.FRAMEBUFFER, fbo)
+          glAny.framebufferTexture2D(
+            glAny.FRAMEBUFFER,
+            glAny.COLOR_ATTACHMENT0,
+            glAny.TEXTURE_2D,
+            texture,
+            0
+          )
+          const status = glAny.checkFramebufferStatus(glAny.FRAMEBUFFER)
+          return status === glAny.FRAMEBUFFER_COMPLETE
+        }
+
+        function getSupportedFormat(
+          glAny: WebGLRenderingContext | WebGL2RenderingContext,
+          internalFormat: number,
+          format: number,
+          type: number
+        ): { internalFormat: number; format: number } | null {
+          if (!supportRenderTextureFormat(glAny, internalFormat, format, type)) {
+            if ('drawBuffers' in glAny) {
+              const gl2 = glAny as WebGL2RenderingContext
+              switch (internalFormat) {
+                case gl2.R16F:
+                  return getSupportedFormat(gl2, gl2.RG16F, gl2.RG, type)
+                case gl2.RG16F:
+                  return getSupportedFormat(gl2, gl2.RGBA16F, gl2.RGBA, type)
+                default:
+                  return null
+              }
+            }
+            return null
+          }
+          return { internalFormat, format }
+        }
+
+        let formatRGBA: any
+        let formatRG: any
+        let formatR: any
+
+        if (isWebGL2) {
+          const gl2 = gl as WebGL2RenderingContext
+          formatRGBA = getSupportedFormat(gl2, gl2.RGBA16F, gl2.RGBA, halfFloatTexType)
+          formatRG = getSupportedFormat(gl2, gl2.RG16F, gl2.RG, halfFloatTexType)
+          formatR = getSupportedFormat(gl2, gl2.R16F, gl2.RED, halfFloatTexType)
+        } else {
+          formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType)
+          formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType)
+          formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType)
+        }
+
+        return {
+          gl,
+          ext: {
+            formatRGBA,
+            formatRG,
+            formatR,
+            halfFloatTexType,
+            supportLinearFiltering
+          }
+        }
+      }
+
+      const { gl, ext } = getWebGLContext(canvas)
+      if (!gl || !ext) return
+
+      const config = {
+        SIM_RESOLUTION,
+        DYE_RESOLUTION,
+        DENSITY_DISSIPATION,
+        VELOCITY_DISSIPATION,
+        PRESSURE,
+        PRESSURE_ITERATIONS,
+        CURL,
+        SPLAT_RADIUS,
+        SPLAT_FORCE,
+        SHADING,
+        COLOR_UPDATE_SPEED,
+        PAUSED: false,
+        BACK_COLOR,
+        TRANSPARENT
+      }
+
+      if (!ext.supportLinearFiltering) {
+        config.DYE_RESOLUTION = 256
+        config.SHADING = false
+      }
+
+      function hashCode(s: string) {
+        if (!s.length) return 0
+        let hash = 0
+        for (let i = 0; i < s.length; i++) {
+          hash = (hash << 5) - hash + s.charCodeAt(i)
+          hash |= 0
+        }
+        return hash
+      }
+
+      function addKeywords(source: string, keywords: string[] | null) {
+        if (!keywords) return source
+        let keywordsString = ''
+        for (const keyword of keywords)
+          keywordsString += `#define ${keyword}
+`
+        return keywordsString + source
+      }
+
+      function compileShader(
+        type: number,
+        source: string,
+        keywords: string[] | null = null
+      ): WebGLShader | null {
+        const shaderSource = addKeywords(source, keywords)
+        const shader = gl.createShader(type)
+        if (!shader) return null
+        gl.shaderSource(shader, shaderSource)
+        gl.compileShader(shader)
+        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
+          console.trace(gl.getShaderInfoLog(shader))
+        return shader
+      }
+
+      function createProgram(
+        vertexShader: WebGLShader | null,
+        fragmentShader: WebGLShader | null
+      ): WebGLProgram | null {
+        if (!vertexShader || !fragmentShader) return null
+        const program = gl.createProgram()
+        if (!program) return null
+        gl.attachShader(program, vertexShader)
+        gl.attachShader(program, fragmentShader)
+        gl.linkProgram(program)
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS))
+          console.trace(gl.getProgramInfoLog(program))
+        return program
+      }
+
+      function getUniforms(program: WebGLProgram) {
+        let uniforms: Record<string, WebGLUniformLocation | null> = {}
+        const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS)
+        for (let i = 0; i < uniformCount; i++) {
+          const uniformInfo = gl.getActiveUniform(program, i)
+          if (uniformInfo)
+            uniforms[uniformInfo.name] = gl.getUniformLocation(program, uniformInfo.name)
+        }
+        return uniforms
+      }
+
+      class Program {
+        program: WebGLProgram | null
+        uniforms: Record<string, WebGLUniformLocation | null>
+        constructor(vertexShader: WebGLShader | null, fragmentShader: WebGLShader | null) {
+          this.program = createProgram(vertexShader, fragmentShader)
+          this.uniforms = this.program ? getUniforms(this.program) : {}
+        }
+        bind() {
+          if (this.program) gl.useProgram(this.program)
+        }
+      }
+
+      class Material {
+        vertexShader: WebGLShader | null
+        fragmentShaderSource: string
+        programs: Record<number, WebGLProgram | null>
+        activeProgram: WebGLProgram | null
+        uniforms: Record<string, WebGLUniformLocation | null>
+
+        constructor(vertexShader: WebGLShader | null, fragmentShaderSource: string) {
+          this.vertexShader = vertexShader
+          this.fragmentShaderSource = fragmentShaderSource
+          this.programs = {}
+          this.activeProgram = null
+          this.uniforms = {}
+        }
+
+        setKeywords(keywords: string[]) {
+          let hash = 0
+          for (const kw of keywords) hash += hashCode(kw)
+          let program = this.programs[hash]
+          if (program == null) {
+            const fragmentShader = compileShader(
+              gl.FRAGMENT_SHADER,
+              this.fragmentShaderSource,
+              keywords
+            )
+            program = createProgram(this.vertexShader, fragmentShader)
+            this.programs[hash] = program
+          }
+          if (program === this.activeProgram) return
+          if (program) this.uniforms = getUniforms(program)
+          this.activeProgram = program
+        }
+
+        bind() {
+          if (this.activeProgram) gl.useProgram(this.activeProgram)
+        }
+      }
+
+      const baseVertexShader = compileShader(
+        gl.VERTEX_SHADER,
+        `
+      precision highp float;
+      attribute vec2 aPosition;
+      varying vec2 vUv;
+      varying vec2 vL;
+      varying vec2 vR;
+      varying vec2 vT;
+      varying vec2 vB;
+      uniform vec2 texelSize;
+
+      void main () {
+        vUv = aPosition * 0.5 + 0.5;
+        vL = vUv - vec2(texelSize.x, 0.0);
+        vR = vUv + vec2(texelSize.x, 0.0);
+        vT = vUv + vec2(0.0, texelSize.y);
+        vB = vUv - vec2(0.0, texelSize.y);
+        gl_Position = vec4(aPosition, 0.0, 1.0);
+      }
+    `
+      )
+
+      const copyShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+      precision mediump float;
+      precision mediump sampler2D;
+      varying highp vec2 vUv;
+      uniform sampler2D uTexture;
+
+      void main () {
+          gl_FragColor = texture2D(uTexture, vUv);
+      }
+    `
+      )
+
+      const clearShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+      precision mediump float;
+      precision mediump sampler2D;
+      varying highp vec2 vUv;
+      uniform sampler2D uTexture;
+      uniform float value;
+
+      void main () {
+          gl_FragColor = value * texture2D(uTexture, vUv);
+      }
+    `
+      )
+
+      const displayShaderSource = `
+      precision highp float;
+      precision highp sampler2D;
+      varying vec2 vUv;
+      varying vec2 vL;
+      varying vec2 vR;
+      varying vec2 vT;
+      varying vec2 vB;
+      uniform sampler2D uTexture;
+      uniform vec2 texelSize;
+
+      void main () {
+          vec3 c = texture2D(uTexture, vUv).rgb;
+          #ifdef SHADING
+              vec3 lc = texture2D(uTexture, vL).rgb;
+              vec3 rc = texture2D(uTexture, vR).rgb;
+              vec3 tc = texture2D(uTexture, vT).rgb;
+              vec3 bc = texture2D(uTexture, vB).rgb;
+
+              float dx = length(rc) - length(lc);
+              float dy = length(tc) - length(bc);
+
+              vec3 n = normalize(vec3(dx, dy, length(texelSize)));
+              vec3 l = vec3(0.0, 0.0, 1.0);
+
+              float diffuse = clamp(dot(n, l) + 0.7, 0.7, 1.0);
+              c *= diffuse;
+          #endif
+
+          float a = max(c.r, max(c.g, c.b));
+          gl_FragColor = vec4(c, a);
+      }
+    `
+
+      const splatShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+      precision highp float;
+      precision highp sampler2D;
+      varying vec2 vUv;
+      uniform sampler2D uTarget;
+      uniform float aspectRatio;
+      uniform vec3 color;
+      uniform vec2 point;
+      uniform float radius;
+
+      void main () {
+          vec2 p = vUv - point.xy;
+          p.x *= aspectRatio;
+          vec3 splat = exp(-dot(p, p) / radius) * color;
+          vec3 base = texture2D(uTarget, vUv).xyz;
+          gl_FragColor = vec4(base + splat, 1.0);
+      }
+    `
+      )
+
+      const advectionShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+      precision highp float;
+      precision highp sampler2D;
+      varying vec2 vUv;
+      uniform sampler2D uVelocity;
+      uniform sampler2D uSource;
+      uniform vec2 texelSize;
+      uniform vec2 dyeTexelSize;
+      uniform float dt;
+      uniform float dissipation;
+
+      vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) {
+          vec2 st = uv / tsize - 0.5;
+          vec2 iuv = floor(st);
+          vec2 fuv = fract(st);
+
+          vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize);
+          vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize);
+          vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize);
+          vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize);
+
+          return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y);
+      }
+
+      void main () {
+          #ifdef MANUAL_FILTERING
+              vec2 coord = vUv - dt * bilerp(uVelocity, vUv, texelSize).xy * texelSize;
+              vec4 result = bilerp(uSource, coord, dyeTexelSize);
+          #else
+              vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
+              vec4 result = texture2D(uSource, coord);
+          #endif
+          float decay = 1.0 + dissipation * dt;
+          gl_FragColor = result / decay;
+      }
+    `,
+        ext.supportLinearFiltering ? null : ['MANUAL_FILTERING']
+      )
+
+      const divergenceShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+      precision mediump float;
+      precision mediump sampler2D;
+      varying highp vec2 vUv;
+      varying highp vec2 vL;
+      varying highp vec2 vR;
+      varying highp vec2 vT;
+      varying highp vec2 vB;
+      uniform sampler2D uVelocity;
+
+      void main () {
+          float L = texture2D(uVelocity, vL).x;
+          float R = texture2D(uVelocity, vR).x;
+          float T = texture2D(uVelocity, vT).y;
+          float B = texture2D(uVelocity, vB).y;
+
+          vec2 C = texture2D(uVelocity, vUv).xy;
+          if (vL.x < 0.0) { L = -C.x; }
+          if (vR.x > 1.0) { R = -C.x; }
+          if (vT.y > 1.0) { T = -C.y; }
+          if (vB.y < 0.0) { B = -C.y; }
+
+          float div = 0.5 * (R - L + T - B);
+          gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
+      }
+    `
+      )
+
+      const curlShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+      precision mediump float;
+      precision mediump sampler2D;
+      varying highp vec2 vUv;
+      varying highp vec2 vL;
+      varying highp vec2 vR;
+      varying highp vec2 vT;
+      varying highp vec2 vB;
+      uniform sampler2D uVelocity;
+
+      void main () {
+          float L = texture2D(uVelocity, vL).y;
+          float R = texture2D(uVelocity, vR).y;
+          float T = texture2D(uVelocity, vT).x;
+          float B = texture2D(uVelocity, vB).x;
+          float vorticity = R - L - T + B;
+          gl_FragColor = vec4(0.5 * vorticity, 0.0, 0.0, 1.0);
+      }
+    `
+      )
+
+      const vorticityShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+      precision highp float;
+      precision highp sampler2D;
+      varying vec2 vUv;
+      varying vec2 vL;
+      varying vec2 vR;
+      varying vec2 vT;
+      varying vec2 vB;
+      uniform sampler2D uVelocity;
+      uniform sampler2D uCurl;
+      uniform float curl;
+      uniform float dt;
+
+      void main () {
+          float L = texture2D(uCurl, vL).x;
+          float R = texture2D(uCurl, vR).x;
+          float T = texture2D(uCurl, vT).x;
+          float B = texture2D(uCurl, vB).x;
+          float C = texture2D(uCurl, vUv).x;
+
+          vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L));
+          force /= length(force) + 0.0001;
+          force *= curl * C;
+          force.y *= -1.0;
+
+          vec2 velocity = texture2D(uVelocity, vUv).xy;
+          velocity += force * dt;
+          velocity = min(max(velocity, -1000.0), 1000.0);
+          gl_FragColor = vec4(velocity, 0.0, 1.0);
+      }
+    `
+      )
+
+      const pressureShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+      precision mediump float;
+      precision mediump sampler2D;
+      varying highp vec2 vUv;
+      varying highp vec2 vL;
+      varying highp vec2 vR;
+      varying highp vec2 vT;
+      varying highp vec2 vB;
+      uniform sampler2D uPressure;
+      uniform sampler2D uDivergence;
+
+      void main () {
+          float L = texture2D(uPressure, vL).x;
+          float R = texture2D(uPressure, vR).x;
+          float T = texture2D(uPressure, vT).x;
+          float B = texture2D(uPressure, vB).x;
+          float divergence = texture2D(uDivergence, vUv).x;
+          float pressure = (L + R + B + T - divergence) * 0.25;
+          gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
+      }
+    `
+      )
+
+      const gradientSubtractShader = compileShader(
+        gl.FRAGMENT_SHADER,
+        `
+      precision mediump float;
+      precision mediump sampler2D;
+      varying highp vec2 vUv;
+      varying highp vec2 vL;
+      varying highp vec2 vR;
+      varying highp vec2 vT;
+      varying highp vec2 vB;
+      uniform sampler2D uPressure;
+      uniform sampler2D uVelocity;
+
+      void main () {
+          float L = texture2D(uPressure, vL).x;
+          float R = texture2D(uPressure, vR).x;
+          float T = texture2D(uPressure, vT).x;
+          float B = texture2D(uPressure, vB).x;
+          vec2 velocity = texture2D(uVelocity, vUv).xy;
+          velocity.xy -= vec2(R - L, T - B);
+          gl_FragColor = vec4(velocity, 0.0, 1.0);
+      }
+    `
+      )
+
+      const blit = (() => {
+        const buffer = gl.createBuffer()!
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]),
+          gl.STATIC_DRAW
+        )
+        const elemBuffer = gl.createBuffer()!
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elemBuffer)
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW)
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0)
+        gl.enableVertexAttribArray(0)
+
+        return (target: FBO | null, doClear = false) => {
+          if (!gl) return
+          if (!target) {
+            gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null)
+          } else {
+            gl.viewport(0, 0, target.width, target.height)
+            gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo)
+          }
+          if (doClear) {
+            gl.clearColor(0, 0, 0, 1)
+            gl.clear(gl.COLOR_BUFFER_BIT)
+          }
+          gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0)
+        }
+      })()
+
+      interface FBO {
+        texture: WebGLTexture
+        fbo: WebGLFramebuffer
+        width: number
+        height: number
+        texelSizeX: number
+        texelSizeY: number
+        attach: (id: number) => number
+      }
+
+      interface DoubleFBO {
+        width: number
+        height: number
+        texelSizeX: number
+        texelSizeY: number
+        read: FBO
+        write: FBO
+        swap: () => void
+      }
+
+      const copyProgram = new Program(baseVertexShader, copyShader)
+      const clearProgram = new Program(baseVertexShader, clearShader)
+      const splatProgram = new Program(baseVertexShader, splatShader)
+      const advectionProgram = new Program(baseVertexShader, advectionShader)
+      const divergenceProgram = new Program(baseVertexShader, divergenceShader)
+      const curlProgram = new Program(baseVertexShader, curlShader)
+      const vorticityProgram = new Program(baseVertexShader, vorticityShader)
+      const pressureProgram = new Program(baseVertexShader, pressureShader)
+      const gradientSubtractProgram = new Program(baseVertexShader, gradientSubtractShader)
+      const displayMaterial = new Material(baseVertexShader, displayShaderSource)
+
+      function createFBO(
+        w: number,
+        h: number,
+        internalFormat: number,
+        format: number,
+        type: number,
+        param: number
+      ): FBO {
+        gl.activeTexture(gl.TEXTURE0)
+        const texture = gl.createTexture()!
+        gl.bindTexture(gl.TEXTURE_2D, texture)
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param)
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param)
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null)
+        const fbo = gl.createFramebuffer()!
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo)
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0)
+        gl.viewport(0, 0, w, h)
+        gl.clear(gl.COLOR_BUFFER_BIT)
+
+        const texelSizeX = 1 / w
+        const texelSizeY = 1 / h
+
+        return {
+          texture,
+          fbo,
+          width: w,
+          height: h,
+          texelSizeX,
+          texelSizeY,
+          attach(id: number) {
+            gl.activeTexture(gl.TEXTURE0 + id)
+            gl.bindTexture(gl.TEXTURE_2D, texture)
+            return id
+          }
+        }
+      }
+
+      function createDoubleFBO(
+        w: number,
+        h: number,
+        internalFormat: number,
+        format: number,
+        type: number,
+        param: number
+      ): DoubleFBO {
+        const fbo1 = createFBO(w, h, internalFormat, format, type, param)
+        const fbo2 = createFBO(w, h, internalFormat, format, type, param)
+        return {
+          width: w,
+          height: h,
+          texelSizeX: fbo1.texelSizeX,
+          texelSizeY: fbo1.texelSizeY,
+          read: fbo1,
+          write: fbo2,
+          swap() {
+            const tmp = this.read
+            this.read = this.write
+            this.write = tmp
+          }
+        }
+      }
+
+      function resizeFBO(
+        target: FBO,
+        w: number,
+        h: number,
+        internalFormat: number,
+        format: number,
+        type: number,
+        param: number
+      ) {
+        const newFBO = createFBO(w, h, internalFormat, format, type, param)
+        copyProgram.bind()
+        if (copyProgram.uniforms.uTexture)
+          gl.uniform1i(copyProgram.uniforms.uTexture, target.attach(0))
+        blit(newFBO, false)
+        return newFBO
+      }
+
+      function resizeDoubleFBO(
+        target: DoubleFBO,
+        w: number,
+        h: number,
+        internalFormat: number,
+        format: number,
+        type: number,
+        param: number
+      ) {
+        if (target.width === w && target.height === h) return target
+        target.read = resizeFBO(target.read, w, h, internalFormat, format, type, param)
+        target.write = createFBO(w, h, internalFormat, format, type, param)
+        target.width = w
+        target.height = h
+        target.texelSizeX = 1 / w
+        target.texelSizeY = 1 / h
+        return target
+      }
+
+      function getResolution(resolution: number) {
+        const w = gl.drawingBufferWidth
+        const h = gl.drawingBufferHeight
+        const aspectRatio = w / h
+        let aspect = aspectRatio < 1 ? 1 / aspectRatio : aspectRatio
+        const min = Math.round(resolution)
+        const max = Math.round(resolution * aspect)
+        if (w > h) return { width: max, height: min }
+        return { width: min, height: max }
+      }
+
+      function scaleByPixelRatio(input: number) {
+        const pixelRatio = window.devicePixelRatio || 1
+        return Math.floor(input * pixelRatio)
+      }
+
+      function resizeCanvas() {
+        const width = scaleByPixelRatio(canvas.clientWidth)
+        const height = scaleByPixelRatio(canvas.clientHeight)
+        if (canvas.width !== width || canvas.height !== height) {
+          canvas.width = width
+          canvas.height = height
+          return true
+        }
+        return false
+      }
+
+      let dye!: DoubleFBO
+      let velocity!: DoubleFBO
+      let divergence!: FBO
+      let curl!: FBO
+      let pressure!: DoubleFBO
+
+      function initFramebuffers() {
+        const simRes = getResolution(config.SIM_RESOLUTION)
+        const dyeRes = getResolution(config.DYE_RESOLUTION)
+
+        const texType = ext.halfFloatTexType
+        const rgba = ext.formatRGBA
+        const rg = ext.formatRG
+        const r = ext.formatR
+        const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST
+
+        gl.disable(gl.BLEND)
+
+        if (!dye) {
+          dye = createDoubleFBO(
+            dyeRes.width,
+            dyeRes.height,
+            rgba.internalFormat,
+            rgba.format,
+            texType,
+            filtering
+          )
+        } else {
+          dye = resizeDoubleFBO(
+            dye,
+            dyeRes.width,
+            dyeRes.height,
+            rgba.internalFormat,
+            rgba.format,
+            texType,
+            filtering
+          )
+        }
+
+        if (!velocity) {
+          velocity = createDoubleFBO(
+            simRes.width,
+            simRes.height,
+            rg.internalFormat,
+            rg.format,
+            texType,
+            filtering
+          )
+        } else {
+          velocity = resizeDoubleFBO(
+            velocity,
+            simRes.width,
+            simRes.height,
+            rg.internalFormat,
+            rg.format,
+            texType,
+            filtering
+          )
+        }
+
+        divergence = createFBO(
+          simRes.width,
+          simRes.height,
+          r.internalFormat,
+          r.format,
+          texType,
+          gl.NEAREST
+        )
+        curl = createFBO(
+          simRes.width,
+          simRes.height,
+          r.internalFormat,
+          r.format,
+          texType,
+          gl.NEAREST
+        )
+        pressure = createDoubleFBO(
+          simRes.width,
+          simRes.height,
+          r.internalFormat,
+          r.format,
+          texType,
+          gl.NEAREST
+        )
+      }
+
+      function updateKeywords() {
+        const displayKeywords: string[] = []
+        if (config.SHADING) displayKeywords.push('SHADING')
+        displayMaterial.setKeywords(displayKeywords)
+      }
+
+      function correctRadius(radius: number) {
+        const aspectRatio = canvas.width / canvas.height
+        if (aspectRatio > 1) radius *= aspectRatio
+        return radius
+      }
+
+      function splat(u: number, v: number, dx: number, dy: number, color: ColorRGB) {
+        splatProgram.bind()
+        if (splatProgram.uniforms.uTarget)
+          gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0))
+        if (splatProgram.uniforms.aspectRatio)
+          gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height)
+        if (splatProgram.uniforms.point) gl.uniform2f(splatProgram.uniforms.point, u, v)
+        if (splatProgram.uniforms.color) gl.uniform3f(splatProgram.uniforms.color, dx, dy, 0)
+        if (splatProgram.uniforms.radius)
+          gl.uniform1f(splatProgram.uniforms.radius, correctRadius(config.SPLAT_RADIUS / 100))
+        blit(velocity.write)
+        velocity.swap()
+
+        if (splatProgram.uniforms.uTarget)
+          gl.uniform1i(splatProgram.uniforms.uTarget, dye.read.attach(0))
+        if (splatProgram.uniforms.color)
+          gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b)
+        blit(dye.write)
+        dye.swap()
+      }
+
+      function clearAll() {
+        // multiply existing buffers by 0 (hard clear)
+        gl.disable(gl.BLEND)
+
+        clearProgram.bind()
+        if (clearProgram.uniforms.value) gl.uniform1f(clearProgram.uniforms.value, 0.0)
+
+        if (clearProgram.uniforms.uTexture) {
+          gl.uniform1i(clearProgram.uniforms.uTexture, dye.read.attach(0))
+          blit(dye.write)
+          dye.swap()
+
+          gl.uniform1i(clearProgram.uniforms.uTexture, velocity.read.attach(0))
+          blit(velocity.write)
+          velocity.swap()
+
+          gl.uniform1i(clearProgram.uniforms.uTexture, pressure.read.attach(0))
+          blit(pressure.write)
+          pressure.swap()
+        }
+
+        // render once to ensure it visually clears
+        render(null)
+      }
+
+      function step(dt: number) {
+        gl.disable(gl.BLEND)
+
+        curlProgram.bind()
+        if (curlProgram.uniforms.texelSize)
+          gl.uniform2f(curlProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY)
+        if (curlProgram.uniforms.uVelocity)
+          gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read.attach(0))
+        blit(curl)
+
+        vorticityProgram.bind()
+        if (vorticityProgram.uniforms.texelSize)
+          gl.uniform2f(
+            vorticityProgram.uniforms.texelSize,
+            velocity.texelSizeX,
+            velocity.texelSizeY
+          )
+        if (vorticityProgram.uniforms.uVelocity)
+          gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read.attach(0))
+        if (vorticityProgram.uniforms.uCurl)
+          gl.uniform1i(vorticityProgram.uniforms.uCurl, curl.attach(1))
+        if (vorticityProgram.uniforms.curl)
+          gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL)
+        if (vorticityProgram.uniforms.dt) gl.uniform1f(vorticityProgram.uniforms.dt, dt)
+        blit(velocity.write)
+        velocity.swap()
+
+        divergenceProgram.bind()
+        if (divergenceProgram.uniforms.texelSize)
+          gl.uniform2f(
+            divergenceProgram.uniforms.texelSize,
+            velocity.texelSizeX,
+            velocity.texelSizeY
+          )
+        if (divergenceProgram.uniforms.uVelocity)
+          gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read.attach(0))
+        blit(divergence)
+
+        clearProgram.bind()
+        if (clearProgram.uniforms.uTexture)
+          gl.uniform1i(clearProgram.uniforms.uTexture, pressure.read.attach(0))
+        if (clearProgram.uniforms.value) gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE)
+        blit(pressure.write)
+        pressure.swap()
+
+        pressureProgram.bind()
+        if (pressureProgram.uniforms.texelSize)
+          gl.uniform2f(pressureProgram.uniforms.texelSize, velocity.texelSizeX, velocity.texelSizeY)
+        if (pressureProgram.uniforms.uDivergence)
+          gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence.attach(0))
+        for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) {
+          if (pressureProgram.uniforms.uPressure)
+            gl.uniform1i(pressureProgram.uniforms.uPressure, pressure.read.attach(1))
+          blit(pressure.write)
+          pressure.swap()
+        }
+
+        gradientSubtractProgram.bind()
+        if (gradientSubtractProgram.uniforms.texelSize)
+          gl.uniform2f(
+            gradientSubtractProgram.uniforms.texelSize,
+            velocity.texelSizeX,
+            velocity.texelSizeY
+          )
+        if (gradientSubtractProgram.uniforms.uPressure)
+          gl.uniform1i(gradientSubtractProgram.uniforms.uPressure, pressure.read.attach(0))
+        if (gradientSubtractProgram.uniforms.uVelocity)
+          gl.uniform1i(gradientSubtractProgram.uniforms.uVelocity, velocity.read.attach(1))
+        blit(velocity.write)
+        velocity.swap()
+
+        advectionProgram.bind()
+        if (advectionProgram.uniforms.texelSize)
+          gl.uniform2f(
+            advectionProgram.uniforms.texelSize,
+            velocity.texelSizeX,
+            velocity.texelSizeY
+          )
+        if (!ext.supportLinearFiltering && advectionProgram.uniforms.dyeTexelSize)
+          gl.uniform2f(
+            advectionProgram.uniforms.dyeTexelSize,
+            velocity.texelSizeX,
+            velocity.texelSizeY
+          )
+        const velocityId = velocity.read.attach(0)
+        if (advectionProgram.uniforms.uVelocity)
+          gl.uniform1i(advectionProgram.uniforms.uVelocity, velocityId)
+        if (advectionProgram.uniforms.uSource)
+          gl.uniform1i(advectionProgram.uniforms.uSource, velocityId)
+        if (advectionProgram.uniforms.dt) gl.uniform1f(advectionProgram.uniforms.dt, dt)
+        if (advectionProgram.uniforms.dissipation)
+          gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION)
+        blit(velocity.write)
+        velocity.swap()
+
+        if (!ext.supportLinearFiltering && advectionProgram.uniforms.dyeTexelSize)
+          gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, dye.texelSizeX, dye.texelSizeY)
+        if (advectionProgram.uniforms.uVelocity)
+          gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read.attach(0))
+        if (advectionProgram.uniforms.uSource)
+          gl.uniform1i(advectionProgram.uniforms.uSource, dye.read.attach(1))
+        if (advectionProgram.uniforms.dissipation)
+          gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION)
+        blit(dye.write)
+        dye.swap()
+      }
+
+      function drawDisplay(target: FBO | null) {
+        const width = target ? target.width : gl.drawingBufferWidth
+        const height = target ? target.height : gl.drawingBufferHeight
+        displayMaterial.bind()
+        if (config.SHADING && displayMaterial.uniforms.texelSize)
+          gl.uniform2f(displayMaterial.uniforms.texelSize, 1 / width, 1 / height)
+        if (displayMaterial.uniforms.uTexture)
+          gl.uniform1i(displayMaterial.uniforms.uTexture, dye.read.attach(0))
+        blit(target, false)
+      }
+
+      function render(target: FBO | null) {
+        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
+        gl.enable(gl.BLEND)
+        drawDisplay(target)
+      }
+
+      // init
+      updateKeywords()
+      initFramebuffers()
+      clearAll()
+
+      // run loop only while a burst is active
+      let lastUpdateTime = performance.now()
+
+      function tick() {
+        rafRef.current = null
+        if (!enabledRef.current) return
+
+        const b = burstRef.current
+        if (!b.active) return
+
+        const now = performance.now()
+        const dt = Math.min(0.016666, (now - lastUpdateTime) / 1000)
+        lastUpdateTime = now
+
+        if (resizeCanvas()) initFramebuffers()
+
+        // burst injection: left-right path inside THIS canvas
+        const t = now - b.t0
+        const p = clamp01(t / b.durationMs)
+
+        const px = scaleByPixelRatio(b.marginPx)
+        const startX = px
+        const endX = Math.max(px + 1, canvas.width - px)
+
+        // yBias (0 top -> 1 bottom). Note: our sim uses v with origin bottom-left.
+        const yPx = lerp(canvas.height * 0.15, canvas.height * 0.85, 1 - b.yBias)
+
+        const cycles = Math.max(1, b.sweeps)
+        const cyclePos = p * cycles
+        const cycleIndex = Math.floor(cyclePos)
+        const inCycleT = cyclePos - cycleIndex
+        const forward = cycleIndex % 2 === 0
+
+        // core X along sweep
+        const xPx = forward ? lerp(startX, endX, inCycleT) : lerp(endX, startX, inCycleT)
+
+        // small wobble to feel “dusty”
+        const wobbleY = Math.sin(p * Math.PI * 6) * scaleByPixelRatio(1.5)
+        const wobbleX = Math.cos(p * Math.PI * 4) * scaleByPixelRatio(1.0)
+
+        const x = xPx + wobbleX
+        const y = yPx + wobbleY
+
+        const u = clamp01(x / canvas.width)
+        const v = clamp01(1 - y / canvas.height)
+
+        // dx/dy to mimic cursor move; keep it noticeable for small region
+        const dx = (forward ? 1 : -1) * (26 + Math.random() * 18) * b.intensity
+        const dy = (Math.random() - 0.5) * 10 * b.intensity
+
+        // primary splat at path point
+        splat(
+          u,
+          v,
+          dx * config.SPLAT_FORCE * 0.0005,
+          dy * config.SPLAT_FORCE * 0.0005,
+          mulColor(b.baseColor, 1.6)
+        )
+
+        // thicken trail: micro-splats around it
+        for (let i = 0; i < 2; i++) {
+          const ju = clamp01(u + (Math.random() - 0.5) * 0.012)
+          const jv = clamp01(v + (Math.random() - 0.5) * 0.012)
+          const jdx = dx * (0.7 + Math.random() * 0.6) * config.SPLAT_FORCE * 0.0005
+          const jdy = dy * (0.7 + Math.random() * 0.6) * config.SPLAT_FORCE * 0.0005
+          splat(ju, jv, jdx, jdy, mulColor(b.baseColor, 1.2 + Math.random() * 0.8))
+        }
+
+        // step sim + render
+        step(dt)
+        render(null)
+
+        // stop after duration; keep a short fade-out simulation so it dissipates nicely
+        if (p >= 1) {
+          // let it dissipate for a moment then stop and leave canvas idle
+          // (no extra splats)
+          const tailMs = 500
+          if (t >= b.durationMs + tailMs) {
+            b.active = false
+            return
+          }
+        }
+
+        rafRef.current = requestAnimationFrame(tick)
+      }
+
+      function ensureTicking() {
+        if (rafRef.current != null) return
+        lastUpdateTime = performance.now()
+        rafRef.current = requestAnimationFrame(tick)
+      }
+
+      // Exposed API
+      apiRef.current = {
+        emitButtonTrail: (opts) => {
+          const b = burstRef.current
+          b.active = true
+          b.t0 = performance.now()
+          b.durationMs = Math.max(120, opts?.durationMs ?? 420)
+          b.sweeps = Math.max(1, opts?.sweeps ?? 2)
+          b.marginPx = Math.max(6, opts?.marginPx ?? 18)
+          b.yBias = clamp01(opts?.yBias ?? 0.55)
+          b.intensity = Math.max(0.2, opts?.intensity ?? 1)
+          b.baseColor = randColor()
+          ensureTicking()
+
+          // Cancel any existing fade
+          if (fadeRafRef.current != null) {
+            cancelAnimationFrame(fadeRafRef.current)
+            fadeRafRef.current = null
+          }
+          // Reset canvas opacity
+          if (canvas) canvas.style.opacity = '1'
+        },
+        clear: () => {
+          burstRef.current.active = false
+          if (rafRef.current != null) {
+            cancelAnimationFrame(rafRef.current)
+            rafRef.current = null
+          }
+          if (fadeRafRef.current != null) {
+            cancelAnimationFrame(fadeRafRef.current)
+            fadeRafRef.current = null
+          }
+          clearAll()
+          if (canvas) canvas.style.opacity = '1'
+        },
+        setEnabled: (v: boolean) => {
+          enabledRef.current = v
+          if (!v) {
+            burstRef.current.active = false
+            if (rafRef.current != null) {
+              cancelAnimationFrame(rafRef.current)
+              rafRef.current = null
+            }
+            if (fadeRafRef.current != null) {
+              cancelAnimationFrame(fadeRafRef.current)
+              fadeRafRef.current = null
+            }
+          }
+        },
+        startFadeOut: (delayMs: number, fadeMs: number) => {
+          if (fadeRafRef.current != null) {
+            cancelAnimationFrame(fadeRafRef.current)
+            fadeRafRef.current = null
+          }
+
+          const startTime = performance.now() + delayMs
+          const fade = () => {
+            const now = performance.now()
+            if (now < startTime) {
+              fadeRafRef.current = requestAnimationFrame(fade)
+              return
+            }
+
+            const elapsed = now - startTime
+            const progress = Math.min(1, elapsed / fadeMs)
+            const opacity = 1 - progress
+
+            if (canvas) canvas.style.opacity = String(opacity)
+
+            if (progress < 1) {
+              fadeRafRef.current = requestAnimationFrame(fade)
+            } else {
+              fadeRafRef.current = null
+              clearAll()
+              if (canvas) canvas.style.opacity = '1'
+            }
+          }
+          fadeRafRef.current = requestAnimationFrame(fade)
+        }
+      }
+
+      return () => {
+        apiRef.current = null
+        if (rafRef.current != null) cancelAnimationFrame(rafRef.current)
+        rafRef.current = null
+      }
+    }, [
+      SIM_RESOLUTION,
+      DYE_RESOLUTION,
+      DENSITY_DISSIPATION,
+      VELOCITY_DISSIPATION,
+      PRESSURE,
+      PRESSURE_ITERATIONS,
+      CURL,
+      SPLAT_RADIUS,
+      SPLAT_FORCE,
+      SHADING,
+      COLOR_UPDATE_SPEED,
+      BACK_COLOR,
+      TRANSPARENT
+    ])
+
+    return (
+      <div className={className ?? 'absolute inset-0 pointer-events-none'}>
+        <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />
+      </div>
+    )
+  }
+)
+
+export type ButtonDustedFluidLinkType = {
+  type?: 'reference' | 'custom' | null
+  url?: string | null
+  reference?: {
+    relationTo: 'pages' | 'posts'
+    value: any
+  } | null
+  newTab?: boolean | null
+  icon?: string | null
+}
+
+export type ButtonDustedFluidProps = {
+  variant?: 'v1' | 'v2' | 'v3' | 'v4' | 'v5'
+  label?: string
+  className?: string
+  disabled?: boolean
+  form?: string
+  type?: 'submit' | 'button' | 'reset'
+  size?: 'sm' | 'default' | 'lg' | 'icon'
+  displayMode?: 'iconWithLabel' | 'iconOnly' | 'labelOnly'
+  iconPosition?: 'before' | 'after'
+  iconName?: string
+  link?: ButtonDustedFluidLinkType | null
+  onClick?: () => void
+}
+
+export default function ButtonDustedFluid({
+  variant = 'v1',
+  label = 'BUTTON',
+  className,
+  disabled,
+  form,
+  type,
+  size,
+  displayMode,
+  iconPosition,
+  iconName,
+  link,
+  onClick
+}: ButtonDustedFluidProps) {
+  const effectiveIconName = iconName || link?.icon || undefined
+  const regionRef = useRef<FluidDustRegionHandle | null>(null)
+  const wrapRef = useRef<HTMLDivElement | null>(null)
+
+  const burstFromCenter = () => {
+    if (disabled) return
+
+    const wrap = wrapRef.current
+    if (!wrap) return
+
+    // Make the left-right sweep happen in a *tight band* around the center,
+    // so it reads like a burst emanating from behind the button.
+    const rect = wrap.getBoundingClientRect()
+    const half = Math.min(rect.width, rect.height) / 1
+    const marginPx = Math.max(6, half - 16) // keeps start/end near center
+
+    regionRef.current?.emitButtonTrail({
+      durationMs: 600,
+      sweeps: 2.5,
+      marginPx,
+      yBias: 0.45,
+      intensity: 0.5
+    })
+
+    // Fade out after burst completes: wait 500ms, then fade over 700ms
+    regionRef.current?.startFadeOut(500, 700)
+  }
+
+  const sizeClasses = {
+    sm: 'h-8 w-fit',
+    default: 'h-10 w-40',
+    lg: 'h-12 w-48',
+    icon: 'h-10 w-10'
+  }
+
+  const resolvedSize = (size ?? 'default') as keyof typeof sizeClasses
+
+  return (
+    <div
+      ref={wrapRef}
+      className={cn(
+        'dustedfluid-button relative inline-flex items-center justify-center p-4',
+        className
+      )}
+    >
+      {/* Canvas extends beyond button without affecting layout footprint */}
+      <div className="absolute p-32 w-full h-full pointer-events-none overflow-visible">
+        <FluidDustRegion ref={regionRef} />
+      </div>
+
+      <ButtonsEyeCatching
+        displayMode={displayMode}
+        iconPosition={iconPosition}
+        iconName={effectiveIconName}
+        variant={variant}
+        onClick={() => {
+          burstFromCenter()
+          onClick?.()
+        }}
+        onMouseEnter={burstFromCenter}
+        onSubmit={burstFromCenter}
+        className="relative z-10"
+        label={label}
+        size={resolvedSize}
+        disabled={disabled}
+        form={form}
+        htmlType={type}
+        url={link?.url ?? undefined}
+        newTab={link?.newTab ?? false}
+        reference={link?.reference ?? undefined}
+      />
+    </div>
+  )
+}