LIGHT. MATH. YOUR NEXT BUILD.

Wisp

Weightless spirals float slowly across the canvas on gentle wandering paths. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.

Category: Trails / weightless spirals.

Open Wisp in the live editor to customize its palette, motion, and supported camera controls. Use Take the code to download the configured kit after signing in. Complete membership access is free during the current launch offer.

Presets

• Moon wisp: #091326, #5f91b0, #d6eef9
• Rose wisp: #1f1020, #b06f9d, #f5d9ef
• Mist wisp: #0c201d, #689f8e, #e7f3d2

Shader and camera controls

• Travel speed (speed): 0 to 2. Default: 0.3.
• Particles (particleCount): 800 to 10000. Default: 1600.
• Dot size (dotSize): 0.5 to 8. Default: 0.9.
• Trail dispersion (amplitude): 0 to 2. Default: 1.
• Trail length (trailLength): 0.3 to 2. Default: 1.15.
• Trail fade (trailFalloff): 0.25 to 4. Default: 0.8.
• Path wander (turbulence): 0 to 2. Default: 0.25.
• Cursor strength (interaction): 0 to 2. Default: 0.25.
• Soft focus (softness): 0 to 1. Default: 0.4.
• Zoom (zoom): 0.3 to 3. Default: 1.
• Grain (noise): 0 to 0.3. Default: 0.06.
• Fade in · ms (fadeIn): 0 to 10000. Default: 0.
• Fade delay · ms (fadeDelay): 0 to 5000. Default: 0.
• Image opacity (overlayOpacity): 0 to 1. Default: 0.5.
• Glow (glow): 0 to 1.5. Default: 0.45.
• Cursor radius (gridRadius): 40 to 320. Default: 150.
• Force: attract / repel / disperse (force): -1 to 1. Default: 0.
• Recovery (recovery): 0.25 to 3. Default: 1.
• Click wave (pulseStrength): 0 to 2. Default: 1.
• Depth (depth): 0 to 2. Default: 1.15.
• Size variation (sizeVariation): 0 to 1. Default: 0.7.
• Opacity (opacity): 0.1 to 1. Default: 0.8.
• Light (intensity): 0.2 to 1.5. Default: 1.
• Twinkle (twinkle): 0 to 1. Default: 0.3.
• Spread (spread): 0.3 to 2. Default: 1.
• Text breathing room (quietRadius): 0 to 0.5. Default: 0.
• Camera rotation (cameraRotation): -180 to 180. Default: 0.
• Camera zoom (cameraZoom): 0.3 to 4. Default: 1.
• Horizontal focus (cameraX): -2 to 2. Default: 0.
• Vertical focus (cameraY): -2 to 2. Default: 0.

These ranges describe the published catalog version c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21. The website editor can curate or lock particular controls. The live editor and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "wisp",
    "colors": [
      "#091326",
      "#5f91b0",
      "#d6eef9"
    ],
    "speed": 0.3,
    "particleCount": 1600,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. JavaScript, React, and Next.js guides explain integration.

Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See performance and licensing.

Browse all shader references.