Get Everything →
caustics

Production-ready creative effects for the modern web

Drop-in WebGL shaders, particle systems, and scroll animations. Svelte. React. Vanilla JS.

Browse Components → Explore the instruments →
Built with @caustics/shader-gradient
scroll
001 — The Gap

Agencies charge $30K. Open source costs you 40 hours. Caustics charges $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 — Specimens

Five instruments live and running. More on the way.

Five real WebGL instruments ship today — the rest of the library is in active development. Hover any specimen to inspect. Click to view the full demo, configuration API, and code samples.

@caustics/shader-gradient
$39 →
caustics
Shader Gradient
Animated mesh gradient backgrounds rendered via WebGL fragment shaders. Configurable colors, speed, grain, and blur. The effect used on this site's hero.
$39 View Demo →
@caustics/magnetic-elements
$39 →
Magnetic Elements
Hover effects with physical weight. Cursor-attracted UI elements driven by lerp, spring, magnetic, orbital, or jitter physics. Eleven curated presets, group coordination, per-axis locks, deterministic return tween, and a CSS custom-property bridge for driving any CSS from cursor proximity. Zero-markup activation via data attributes.
$39 View Demo →
@caustics/particles
$49 →
Particle Field
Configurable particle systems with connection lines, cursor reactivity, and six built-in presets. A lightweight alternative to tsParticles.
$49 View Demo →
@caustics/fluid-canvas
$69 →
Fluid Canvas
Real-time WebGL Navier-Stokes fluid simulation. Twenty presets across six aesthetic personalities, four interaction modes including multi-touch, image-as-dye seeding, obstacle masks, built-in recording. The full physics engine, not a configured recipe.
$69 View Demo →
@caustics/kinetic-text
$59 →
whisper
Kinetic Text
Typography animation engine. Variable-font axes, scroll velocity, scramble, jello drag, elastic propagation. Six animation families and twenty curated presets — all sharing one accessibility-first API.
$59 View Demo →
@caustics/scroll-reveal
$29 →
grid-stagger
Scroll Reveal
Performant reveal animations triggered as elements enter the viewport. IntersectionObserver-based, fully accessible, supports stagger on grids and lists.
$29 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 →