npm install @caustics/shader-gradient <script> import { ShaderGradient } from '@caustics/shader-gradient'; </script> <ShaderGradient preset="aurora" />
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | string | "aurora" | Named preset. Overrides individual props when set. |
| speed | number | 1.0 | Animation speed multiplier. 0 = static. |
| intensity | number | 0.5 | Effect intensity. Range: 0–1. |
| colors | string[] | undefined | Override palette. Accepts hex, hsl, or CSS custom properties. |
| reducedMotion | 'pause' | 'static' | 'static' | Behavior when prefers-reduced-motion is active. |
| class | string | undefined | Additional CSS classes applied to the root element. |
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 MIT, commercial use included └── 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.
The shader uses layered simplex noise to drive color transitions, resulting in 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.