Production-ready creative effects for the modern web

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

Browse Components → Get Everything — $499

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

Ten components. Every one of them is running on this site.

Hover any specimen to inspect. Click to view the full demo, configuration API, and code samples.

@caustics/shader-gradient

$39 →

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.

Configurable particle systems with connection lines, cursor reactivity, and six built-in presets. A lightweight alternative to tsParticles.

$49 View Demo →

@caustics/scroll-reveal

$29 →

Scroll Reveal

Performant reveal animations triggered as elements enter the viewport. IntersectionObserver-based, fully accessible, supports stagger on grids and lists.

$29 View Demo →

@caustics/distortion-hover

$49 →

Distortion Hover

WebGL displacement effects on image hover. The portfolio staple agencies charge $5K+ to implement, available as a drop-in component.

$49 View Demo →

@caustics/noise-grain

$39 →

Noise Grain

Animated film grain and noise texture overlays. Adds depth and the analog aesthetic to flat designs. Three rendering modes: CSS, Canvas, and WebGL.

$39 View Demo →

@caustics/blob-backgrounds

$39 →

Blob Backgrounds

Liquid morphing organic blob backgrounds. The lava lamp effect every SaaS landing page wants, as a drop-in component.

$39 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
npm install @caustics/shader-gradient

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

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

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

004 — Everything

Everything. Forever.

All components. All templates. All boilerplates. Lifetime updates. One purchase.

View the Bundle →