Aurora
Add curtains of light behind a hero, with space below for your copy.
import { Aurora } 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 launch or a hero that should feel atmospheric: a new product, a beta, a sign-in screen. The curtains hang in the upper part of the frame and fade out below the horizon, so the lower part stays calm for a headline and a call to action. Don't use it behind dense content or in more than one section per page. Its glow is a statement, and two of them compete.
The aurora fills its nearest positioned ancestor and paints behind your content, so make the container relative and isolate. Place the copy below the horizon.
import { Aurora } from '@youj/motion/backgrounds'
export function LaunchHero() {
return (
<section className="relative isolate flex min-h-[640px] flex-col justify-end pb-24">
<Aurora />
<p className="relative text-5xl font-semibold">Answers that arrive before the question</p>
</section>
)
}Three layers drift at different depths. Each has a bright lower edge that swells and folds, rays that hang upward and fade over the curtain's height, and pulses of brightness that travel along it. On a dark canvas the layers add light. On a light canvas they tint it, so the same component works in both modes.
Description
A hero section with the aurora curtains behind its headline, the copy in the quiet lower part of the frame.
With interactive on (the default), the ribbons lean gently toward the pointer's horizontal position. The lean eases in when the pointer enters the frame and out when it leaves. The pointer is tracked on the window, so the aurora responds under the content above it. Touch doesn't lean the ribbons, because it produces no hover.
Controls for the horizon height and the color family, so you can see both change in place.
horizon sets the height of the lowest curtain edge, from 0 (the bottom of the frame) to 1 (the top). The default, 0.58, leaves the lower part of the frame for content. Lower it for a taller glow behind short copy. Raise it to keep the curtains above a form or a card.
colors takes three CSS colors, from the back layer to the front. By default they're a family around --color-accent: a cooler teal-leaning layer at the back, the accent in the middle and a violet at the front. Token references stay in step with the theme.
intensity, from 0 to 1.5, sets the brightness of the ribbons, and speed multiplies the drift. The speed stacks with the time scale, which slows everything together.
A sign-in card over a calmer aurora with a raised horizon, lower intensity and no pointer response.
For sign-in and onboarding screens, raise the horizon so the curtains hang behind the top of the card, lower the intensity, and turn off interactive. A surface that moves with the pointer is a distraction while someone types.
Code
aurora-demo.tsx, the Demo story. The component itself comes from the package.
Reference
Propscolors, intensity, speed… (6)
Props
| Prop | Type | |
|---|---|---|
colors | [string, string, string]Three CSS colors, back layer to front. Default: an analogous family around the accent token. | – |
intensity | numberBrightness of the ribbons, 0–1.5. default 1 | 1 |
speed | numberDrift speed multiplier. default 1 | 1 |
horizon | numberHeight of the lowest curtain edge, 0 (bottom) to 1 (top). default 0.58 | 0.58 |
interactive | booleanRibbons lean gently with 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, with dithering against 8-bit banding in the soft gradients. The loop pauses when the aurora is offscreen or the tab is hidden, recovers from a lost GL context, and releases the context on unmount. Without WebGL2, it falls back to a static CSS wash of the same colors.
MotionDrift, pointer lean · reduced motion
Motion
| Moment | Tokens | ||
|---|---|---|---|
| Driftlayers, folds and pulses, on one 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 still frame of the curtains and stops. There's no drift and no lean, and the frame redraws only when the size, the props or the theme change.
Reduced motion
The aurora draws one composed frame and holds it. The curtains, their colors and the quiet space for your copy stay the same, so the hero looks as designed, only still. Switch on Reduced motion in any preview above to compare.
AccessibilityARIA
Accessibility
- It's decorative: the element is
aria-hiddenand ignores pointer events. - Keep text below the horizon, where the frame is quiet, and check its contrast there. On a light canvas the curtains tint, so muted text over the brightest band can drop below 4.5:1.
- The drift is slow, and it stops offscreen. Under reduced motion the aurora doesn't move at all.