frapx started from wanting a fragment shader on a page without shipping a 3D engine. Here is the same full-screen shader with each:
| Library | min+gzip |
|---|---|
@frapx/fx-canvas |
11 kB |
| Babylon.js | 45 kB |
| three.js | 133 kB |
Start with fx-canvas, then add the pieces you keep reusing — SDF, noise, raymarching, multipass/FBO, GPU particles and frame export — maintained together. For a 3D scene with meshes, models and lights, use three.js or Babylon.js instead.
frapx is split into several small packages instead of one big one. The prefix in the package name tells you what kind of package it is — you never need to guess:
fx-* — effect runtimes
Instantiate directly in your app. @frapx/fx-canvas
drives a full-screen WebGL fragment shader as a background or overlay.
This is what most people install first. @frapx/fx-passes
chains passes and accumulates samples for anti-aliased, motion-blurred
video frames (WebGL2). @frapx/fx-particles
draws GPU particles — snow, dust, sparkles, confetti — from presets, with
reproducible frames for export (WebGL2).
react-* — framework bindings
A thin React wrapper around an fx-* package. @frapx/react-canvas
wraps @frapx/fx-canvas as a <ShaderBackground /> component and a
useShaderBackground() hook, and @frapx/react-particles
wraps @frapx/fx-particles as <Particles /> and useParticles().
glsl-* — GLSL snippets
Plain GLSL source strings you concatenate into your own fragment
shader — not a runtime, no instantiation. @frapx/glsl-noise
(3D noise), @frapx/glsl-flowmap
(flowmap decode/advection), @frapx/glsl-sdf
(2D/3D signed distance functions), @frapx/glsl-raymarch
(raymarching loop, shadows and camera rays) and @frapx/glsl-sdf-volume
(meshes baked in Blender as 3D SDFs) are available today.
tool-* — tools
Export and production utilities built on an fx-* instance, not effects
themselves. @frapx/tool-capture
renders deterministic 8-bit or 16-bit PNG sequences to a folder or a ZIP
in the browser, and @frapx/tool-render
renders the same page from the command line, resumably, without a tab open.
@frapx/tool-dev shows shader compile
errors on the page while you hot reload.
core — internal engine
@frapx/core is the shared WebGL lifecycle
host every fx-* package is built on. You install it transitively — as
an fx-* package’s dependency — and never import it directly.
| I want to… | Install |
|---|---|
| Add an animated WebGL background to a plain website | @frapx/fx-canvas |
| Add the same, but I’m in a React app | @frapx/fx-canvas + @frapx/react-canvas |
| Add turbulence/grain to my own fragment shader | @frapx/glsl-noise (needs @frapx/fx-canvas or your own GL setup) |
| Distort a texture with a painted flowmap | @frapx/glsl-flowmap (WebGL2 / GLSL ES 3.00) |
| Draw shapes with signed distance functions | @frapx/glsl-sdf |
| Raymarch a 3D scene with shadows, occlusion and a camera | @frapx/glsl-raymarch + @frapx/glsl-sdf |
| Raymarch a mesh baked in Blender, or blend it with SDF shapes | @frapx/glsl-sdf-volume (WebGL2) + @frapx/glsl-raymarch |
| Export my shader as a PNG sequence for video | @frapx/fx-canvas + @frapx/tool-capture |
| Render hours-long frame sequences from the command line, then encode with ffmpeg | @frapx/tool-capture in the page + @frapx/tool-render |
| Edit shaders with hot reload and see compile errors on the page | setFragment() (built in) + @frapx/tool-dev |
| Chain passes (bloom, trails) or render anti-aliased, motion-blurred frames | @frapx/fx-passes (+ @frapx/tool-capture to export) |
| Add falling snow, drifting dust, sparkles or confetti over a page | @frapx/fx-particles (WebGL2) |
| Add the same particles in a React app | @frapx/fx-particles + @frapx/react-particles |
| Export a particle layer with alpha to composite over other footage | @frapx/fx-particles + @frapx/tool-capture (+ @frapx/tool-render) |
Still not sure? Start with Getting Started — it
walks through the one package (@frapx/fx-canvas) that covers the common case.
@frapx/shader or @frapx/runtime?All five packages were renamed on 2026-07-12 to this prefix scheme. No public API changed — only package names and import paths. See the migration guide for the full old → new mapping.