Shader Aurora
WebGL shader aurora that reaches toward the cursor. Pro · 3D and motion › WebGL
Northern lights behind your content, drawn by a fragment shader: three curtains of light sway on slow fractal noise, with rays running up from a bright hem, and lean towards the pointer. They unfurl from the top edge as the scene first appears; overlapping light rolls off softly and a fine dither keeps the dark tails free of bands. The shader renders at a fraction of the screen's resolution (the light is soft anyway), at a capped pixel ratio, only while on screen. Colours are theme tokens, re-read when the theme changes. With reduced motion one still frame is drawn; without WebGL2 a CSS gradient stands in.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add shader-auroranpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ShaderAurora } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
colors | string[] | Up to three CSS colours of the curtains, low to high. Default: the theme's chart colours 1–3. | |
speed | number | 1 | How fast the curtains drift: 1 is a slow natural pace, 0 freezes them. |
intensity | number | 1 | Brightness of the light, 0–2. |
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 curtains lean towards the pointer and brighten under it. |
Related components
- Shader Gradient — Live shader gradient for heroes: colors flow around 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: Path Text · Next: Shader Gradient · All 3D and motion