Live Demo

This is the same wave-and-pointer shader from examples/vite-basic, running live via @frapx/fx-canvas — not a screenshot or a video. Move your pointer over it and drag the slider; both are wired to the shader through the normal public API (u_pointerUv / u_pointerActive built-in uniforms, and a custom progress uniform via fx.setUniform()).

Progress

import { createShaderBackground, glsl } from "@frapx/fx-canvas";

const fx = createShaderBackground({
  target: "#demo",
  fragment: glsl`
    precision highp float;

    uniform vec2 u_resolution;
    uniform vec2 u_pointerUv;
    uniform float u_pointerActive;
    uniform float u_time;
    uniform float u_progress;

    void main() {
      vec2 uv = gl_FragCoord.xy / u_resolution;
      float wave = sin((uv.x + u_progress) * 12.0 + u_time * 1.5) * 0.5 + 0.5;
      float pointer = smoothstep(0.35, 0.0, distance(uv, u_pointerUv)) * u_pointerActive;
      vec3 base = mix(vec3(0.03, 0.05, 0.08), vec3(0.1, 0.35, 0.5), uv.y);
      vec3 color = base + vec3(0.15, 0.45, 0.55) * wave + vec3(0.7, 0.9, 1.0) * pointer;
      gl_FragColor = vec4(color, 1.0);
    }
  `,
  uniforms: { progress: 0 }
});

slider.addEventListener("input", () => {
  fx.setUniform("progress", Number(slider.value));
});

Want to see the flowmap-painter tool (the app that produces the flowmap textures used by @frapx/glsl-flowmap)? It’s deployed separately at /frapx/playground/.