Caustics
Indigo, cyan, and pink — the brand signature
pnpm add @caustics/shader-gradient <!-- Svelte 5 --> <script> import ShaderGradient from '@caustics/shader-gradient/svelte'; </script> <ShaderGradient preset="caustics" />
pnpm add @caustics/shader-gradient /* React */ import { ShaderGradient } from '@caustics/shader-gradient/react'; return <ShaderGradient preset="aurora" />;
pnpm add @caustics/shader-gradient /* Vanilla — programmatic mount() */ import { mount } from '@caustics/shader-gradient'; const api = mount(document.querySelector('#hero'), { preset: 'caustics', grain: 'film', }); /* api.update({ ... }), api.pause(), api.resume(), api.destroy() */
Every preset is a tuned configuration of the same flow algorithm — colour palette,
post-process pipeline, grain, and motion parameters chosen so each one feels
finished out of the box. Try any of them via the preset chips in the hero above,
or set one in code with the preset prop.
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | PresetName | — | One of 37 curated configurations (caustics, aurora, sunset, …). User props override preset values. |
| algorithm | GradientAlgorithm | 'simplex' | 'flow' (the Caustics signature) · 'simplex' · 'worley' · 'curl' · 'ridged' |
| colors | string[] | preset palette | 2–8 hex strings (#rrggbb) or [r, g, b] tuples. Omit to use the active preset's palette. |
| speed | number | 1.0 | Animation speed multiplier. 0 = static. |
| grain | GrainType | 'none' | 'none' · 'film' · 'digital' · 'halftone' · 'dither'. Strength via grainIntensity (0–1). |
| blur / warp / scale / rotation | number | 0 / 0.3 / 1 / 0 | Pattern transforms: softening, domain distortion, feature density, orientation (degrees). |
| vignette / glow | number | 0 / 0 | Post-process: radial corner darkening and additive glow on bright regions. The flow signature pairs with vignette ≈ 0.45. |
| interactive | boolean | false | Mouse position influences the noise field. Strength via mouseInfluence (0–1). |
| compose | ComposeConfig | — | Layer a secondary gradient with a blend mode (multiply, screen, overlay, …) and its own palette. |
| reducedMotion | 'pause' | 'static' | 'ignore' | 'pause' | Behaviour under prefers-reduced-motion: reduce. |
caustics-shader-gradient/ ├── svelte/ ShaderGradient.svelte · index.ts · types.ts ├── react/ ShaderGradient.tsx · index.ts · types.ts ├── vanilla/ shader-gradient.ts · compiled .js ├── docs/ README.md · API.md · CHANGELOG.md ├── LICENSE.md Caustics Commercial License └── package.json
Shader Gradient renders animated, configurable mesh gradient backgrounds using a WebGL fragment shader. Unlike CSS gradients, it produces smooth organic movement that responds to time — and optionally to the user’s cursor.
Five noise algorithms drive the color transitions: the domain-warped flow field — the Caustics signature look behind the caustics preset and this site’s own hero — plus simplex, worley, curl, and ridged. The result is the fluid “mesh gradient” aesthetic you see on Stripe, Linear, and premium SaaS landing pages — but as a drop-in component you own.
Ships with Svelte, React, and vanilla JS versions. Full TypeScript types included.
Caustics Commercial License · lifetime updates within v1