Shader Gradient
Live shader gradient for heroes: colors flow around the cursor. Pro · 3D and motion › WebGL
A living gradient for a hero, a pricing header or a login screen: four colours flow and marble into each other on a domain-warped noise field (blended in OKLab, so neighbouring hues stay vivid), catch a satin highlight along their ridges, bend softly around the pointer and carry a fine grain that hides banding; the field settles in as it first appears. Rendered by a fragment shader at a fraction of the screen's resolution, at a capped pixel ratio, only while on screen; colours are theme tokens, re-read when the theme changes. Content goes inside, on top. Reduced motion or speed 0: one still frame. Without WebGL2: a CSS gradient.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add shader-gradientnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ShaderGradient } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
colors | string[] | Up to four CSS colours that flow into each other. Default: the theme's chart colours 1–4. | |
speed | number | 1 | How fast the colours flow: 1 is a slow drift, 0 freezes them. |
warp | number | 1 | How strongly the colours swirl, 0–2: low is a calm wash, high marbles them. |
grain | number | 0.5 | Film grain over the gradient, 0–1: it hides banding on large, soft areas. |
sheen | number | 0.4 | A satin highlight running along the ridges of the flow, 0–1; 0 keeps the colours flat. |
quality | 'auto' | 'low' | 'balanced' | 'high' | 'auto' | Rendering quality: auto picks from the device; low / balanced / high cap resolution and frame rate. |
interactive | boolean | true | The flow bends around the pointer. |
Related components
- Shader Aurora — WebGL shader aurora that reaches toward the cursor
- Liquid Surface — GPU water surface: ripples follow the cursor, splash on click
- Particle Fabric — Fabric of tens of thousands of glowing points: folds, cursor, waves
- Particle Picture — Particles assemble into an image or text and flow between them
- Dot Globe — WebGL2 dot globe: markers, pulsing arcs, drag to rotate
- Horizon Grid — Endless grid floor fading into a glowing horizon
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
Previous: Shader Aurora · Next: Liquid Surface · All 3D and motion