/playground

Playgrounds

Every instrument with every knob exposed. Try a preset, twist the dials, build your own look — then copy a code snippet straight into your project. The playground is also bundled with each instrument so paying customers can run it locally.

@caustics/plotburn

A GPU chart engine — a million points at 60fps. Switch mark type, swap presets, toggle crosshair / tooltip / zoom / brush / legend, and reshuffle the data.

Open playground →

@caustics/spatial-scroll

Scroll-driven 3D as a keyframe timeline. Load a GLB and drive a quaternion-correct camera — orbit, dolly, flythrough, turntable, reveal.

Open playground →

@caustics/sonogram

Sound into motion. A built-in demo beat (or your mic) drives a live shader-gradient and a visualizer, with BPM / onset readouts — the catalog multiplier.

Open playground →

A procedural material engine — terrazzo, marble, riso, woven & noise-field surfaces that recolor from theme tokens, bake to seamless PNGs, and export PBR maps.

Open playground →

@caustics/flowfield

GPU particle advection — noise, image-gradient & SDF-text fields rendered as points, trails, dye or lines. Switch fields, modes, presets; reshuffle the seed.

Open playground →

@caustics/transition-flow

Transition Flow

WebGL image transitions — 21 hand-tuned shaders, slider and draggable before/after compare. Cycle transitions, switch modes, tune duration and easing.

Open playground →

@caustics/shader-gradient

Shader Gradient

Five algorithms, 37 presets, full post-process pipeline. Twist every knob, export your configuration.

Open playground →

@caustics/fluid-canvas

Real-time fluid simulation — bloom, sunrays, agent swarms, 20 presets. Paint into the dye field and watch it flow.

Open playground →

@caustics/reaction-diffusion

Reaction Diffusion

Gray-Scott reaction-diffusion — nine interaction modes, organic Turing patterns, full palette control.

Open playground →

@caustics/aurora

Northern-lights curtains — four presets, palette and motion control. Tunable to the pixel.

Open playground →

@caustics/blob-backgrounds

Blob Backgrounds

Metaball blob fields — four presets, gooeyness, glow, three-color palettes. Liquid WebGL backgrounds.

Open playground →

@caustics/noise-grain

Film-grain texture overlay — four presets, four renderers, blend modes. The analog grain dark UIs need.

Open playground →

@caustics/particles

Six preset particle systems — network, starfield, fireflies and more. Count, links, cursor reactivity, all live.

Open playground →

@caustics/kinetic-text

Seven animation families, 20 presets, variable-font axes. Type that breathes, reveals, decodes, and yields to the cursor.

Open playground →

@caustics/text-reveal

Headline split-reveal — rise, blur-in, word-by-word, fade. Split by char, word, or line; reorder and replay.

Open playground →

@caustics/magnetic-elements

Magnetic Elements

Five physics modes, 11 presets, group coordination, per-axis locks, CSS custom-property bridge. Hover the stage and feel the engine.

Open playground →

@caustics/parallax-cards

Tilt-on-hover depth cards — four presets, glare, magnetism, per-layer depth. Pure DOM, zero WebGL.

Open playground →

@caustics/distortion-hover

Distortion Hover

WebGL image displacement — four effects (ripple, noise, swirl, bulge). Intensity, radius, chromatic split.

Open playground →

@caustics/cursor-effects

Custom cursors — ring, dot-trail, magnetic, crosshair. Color, trail, hover-scale, scoped to the stage.

Open playground →

@caustics/scroll-reveal

Scroll-triggered entrances — four presets, direction, distance, stagger. Hit replay to watch them arrive.

Open playground →