Mesh Gradient
Add a slowly shifting, theme-aware gradient behind a hero section.
import { MeshGradient } from '@youj/motion/backgrounds'
Installation & usage
npm i @youj/motionFor an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.
Use it for a hero, a launch page or a sign-up screen that should feel warm and premium without saying anything specific. It's color without line work, so it sits behind a headline more calmly than any other background. Don't use it behind long text or tables, and give it one section per page: a second gradient dilutes the first.
The gradient fills its nearest positioned ancestor and paints behind your content, so make the container relative and isolate.
import { MeshGradient } from '@youj/motion/backgrounds'
export function Hero() {
return (
<section className="relative isolate min-h-[640px]">
<MeshGradient />
<h1 className="relative">The workspace that moves as fast as you think</h1>
</section>
)
}Description
A hero section over the gradient field, which leans toward the pointer.
A field in success, accent and warning colors with a lower intensity and some grain.
By default the colors come from your tokens: a family of the accent's neighbors (a violet, a cool cyan and a deep rose, each quieter than the accent) over --color-canvas. Switch between light and dark and the field reads them again. Pass up to four CSS colors to set your own. Token references keep them mode-aware.
Buttons for the intensity and grain of the field.
intensity, from 0 to 1.5, sets how much of the field is color and how much is canvas. Keep it below 1 behind long copy.speedmultiplies the drift. It stacks with the time scale, which slows everything together.grainadds film grain. Dithering against 8-bit banding is always on.interactiveleans the field toward the pointer.
Code
mesh-gradient-demo.tsx, the Demo story. The component itself comes from the package.
Reference
Propscolors, intensity, speed… (6)
Props
| Prop | Type | |
|---|---|---|
colors | string[]Up to four CSS colors for the color masses. Default: an analogous family derived from the accent token. | – |
intensity | numberHow much of the field is colored vs. canvas. 0–1.5, default 1. default 1 | 1 |
speed | numberDrift speed multiplier. default 1 | 1 |
grain | numberFilm grain amount, 0–1. Dithering against banding is always on. default 0.5 | 0.5 |
interactive | booleanThe field leans toward the pointer. default true | true |
className | string | – |
PerformanceIt's one WebGL2 fragment shader on a single full-screen triangle,…
Performance
It's one WebGL2 fragment shader on a single full-screen triangle, rendered at a device-pixel ratio capped at 2. The loop pauses offscreen and in hidden tabs, survives a lost GL context, and releases the context on unmount. Without WebGL2 it falls back to a static CSS gradient in the same colors.
MotionDrift, pointer lean · reduced motion
Motion
| Moment | Tokens | ||
|---|---|---|---|
| Driftcontinuous shader clock | no token speed ÷ time scale | speed ÷ time scale | |
| Pointer leaneases in and out with the pointer | no token smoothed per frame | smoothed per frame |
Reduced motion
Draws one composed still frame and stops. There's no drift and no pointer response, and the frame redraws only when the size, the props or the theme change.
Reduced motion
The gradient draws one composed frame and holds it, with the film grain halved for the still image. The colors and the composition stay the same, so the section looks as designed, only still. It redraws when the size, the props or the theme change. Switch on Reduced motion in any preview above to compare.
AccessibilityARIA
Accessibility
It's decorative, so it's aria-hidden and ignores pointer events. Check your text's contrast over the brightest part of the field. A lower intensity keeps it calm behind copy.