ns-ui / loud
Full-bleed animated gradient background — a WebGL shader drifts three theme-derived colors through a domain-warped noise flow field into a simple 3-stop ramp, reading as a calm moving current of color rather than a shader demo.
Use when a calm full-bleed moving current of colour behind other content, theme-derived and pointer-inert, for when the background should read as atmosphere rather than as an effect anyone stops to notice; pick hero-vortex-street instead when the backdrop should react to the cursor, or surface-glass when the job is a container's own material rather than the page behind it.
Install
npx shadcn add https://design.helpmarq.comns-ui / background-gradient-shader
| Prop | Type | Default | Description |
|---|---|---|---|
| colors? | string[] | — | Optional fixed palette (hex strings) overriding the theme-derived default. |
| speed? | number | — | Flow speed multiplier. @default 1 |
| scale? | number | — | Noise zoom — smaller reads as broader, slower-moving fields. @default 1 |
| className? | string | — | — |
| style? | React.CSSProperties | — | — |