Production-ready creative effects for the modern web

001 — The Gap

Agencies charge $30K. Open source costs you 40 hours. Caustics starts at $29.

Drop-in creative components, configured for your brand, shipped with TypeScript, ready to install before your coffee cools.

What agencies charge $30K+ for

Bespoke WebGL shaders. Hand-built particle systems. Scroll-driven storytelling sequences. Custom cursor interactions. Each one a six-week engagement, three rounds of revision, a five-figure invoice.

$30,000+

avg custom WebGL site engagement

What you get for $29–$299

The same effects, pre-built and parameterized. Configure colors, speed, density. Drop into Svelte, React, or vanilla JS. Ship the same day. Commercial license included. Updates forever.

3 frameworks

Svelte · React · Vanilla JS, same API

002 — The grand instruments

Six flagship engines. Whole new product lines.

Beyond the core library, six flagship instruments open new ground: a GPU chart engine, scroll-driven 3D, an audio-to-visual multiplier, a procedural material baker, a GPU particle field, and a WebGL image-transition engine. 20 instruments ship today — hover any specimen to inspect, or open its playground to drive it live.

@caustics/plotburn

$179 →

Plotburn

A GPU chart engine that looks designed — a million data points at 60fps, art-directable strokes & fills (gradient / glow / grain, OKLCH palettes), and real ergonomics: nice / log / time axes, crosshair, tooltip, brush, zoom & pan, with an accessible data-table fallback.

$179 View Demo →

@caustics/spatial-scroll

$149 →

Spatial Scroll

Scroll-driven 3D as a declarative keyframe timeline — the Apple-product-page effect as a config object. Loads a GLB, drives a quaternion-correct camera (orbit / dolly / flythrough / turntable / reveal), pins on mobile by measured ratio, and projects HTML captions onto 3D anchors.

$149 View Demo →

@caustics/sonogram

$69 →

Sonogram

An audio-to-visual engine — musically-correct DSP (A-weighted bands, spectral-flux onsets, autocorrelation BPM, perceptual loudness) and a mapping graph that drives CSS variables, a canvas visualizer, AND any other Caustics engine's update(). One buy makes your whole catalog audio-reactive.

$69 View Demo →

@caustics/loom

$99 →

Loom

A live, deterministic, on-brand material runtime — eleven procedural surfaces (terrazzo, marble, riso, woven, field, concrete, hammered metal, plaster, wood, tile, leather) that recolor from your design tokens, render live and NON-REPEATING at zero per-frame cost, carry story-layer wear, bake to seamless PNGs, and export a verified per-engine PBR set (Unity/Unreal/Godot/three.js), wired glTF, MaterialX, and KTX2.

$99 View Demo →

@caustics/flowfield

$129 →

Flow Field

A GPU particle-advection engine — hundreds of thousands of particles steered by a noise, image-gradient, or SDF-text field, rendered as points, trails, dye, or lines, with film grain, pointer force, and an audio-reactive field. The generative background the field-image and SDF-text moat makes hard to copy.

$129 View Demo →

@caustics/transition-flow

$129 →

Transition Flow

A WebGL image-transition engine — 21 hand-tuned GLSL transitions, an autoplay slider, and a draggable before/after compare mode. The agency carousel, as a drop-in component.

$129 View Demo →

003 — Integration

Thirty seconds from npm install to shipped.

Each component ships as Svelte, React, and vanilla JS. No build step required.

Svelte

// Install once
pnpm add @caustics/shader-gradient

<script>
  import ShaderGradient from '@caustics/shader-gradient/svelte';
</script>

<ShaderGradient
  colors={['#0a0a0a', '#6366f1', '#22d3ee']}
  speed={0.6}
  grain="film"
  grainIntensity={0.12}
/>

// That's it. Your site now has a 60fps WebGL hero.

004 — The Library

The complete bundle is coming.

The everything-library bundle arrives once every instrument ships. For now, explore the instruments that are live today.

Explore the instruments →