The effect. Anywhere.
Turn images, video, and canvas content into a living field of dots. One JavaScript module, the same GPU simulation, and no framework required.
Add it to your site.
Download the module and place it in your site’s public folder. Paste this snippet into your page, then replace /your-image.jpg with your image. Your preview settings are included.
Works with plain HTML, React, Vue, and other frameworks. Serve through HTTP or HTTPS. Keep the demo and module together to run this page locally.
Video, cameras & lifecycle
Pass a loaded <video> instead of an image for video or webcam input. You control playback and camera permissions. Use mirror: true for a webcam.
effect.update({ radius: 2 }) changes settings. effect.pause() and effect.resume() control rendering. Call effect.dispose() when removing the effect; stop your own webcam tracks separately.
The module resizes with its canvas. Set the canvas width and height in CSS. Cross-origin media needs CORS permission from the media server and crossOrigin = "anonymous" before setting its URL.
Requires WebGL 2 and floating-point render targets. This processes media supplied to a canvas; it is not a CSS filter for arbitrary page elements.
Use the raw GLSL
The effect uses two simulation passes and a particle draw pass. Import the four shader strings from the module, or download the sources:
Velocity · Position · Particle vertex · Particle fragment
The simulation shaders expect the texture uniforms and resolution definition supplied by Three.js GPUComputationRenderer.