Atmosphere
Float a card on a painted, grainy ground: a meadow, dunes, a copper glow or a dusk, each with a preset to match.
import { Atmosphere } 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 page, a sign-up or a product shot: anywhere one card should be the hero on a ground with some weather to it. Give it the preset of the same name, and keep one per page.
It fills its nearest positioned ancestor and paints behind your content, so make the container relative and isolate.
import { meadow, YoujProvider } from '@youj/core'
import { Atmosphere } from '@youj/motion/backgrounds'
export function Launch() {
return (
<YoujProvider theme={meadow}>
<section className="relative isolate grid min-h-dvh place-items-center p-6">
<Atmosphere scene="meadow" />
<YourCard />
</section>
</YoujProvider>
)
}Description
A card on each scene in turn, wearing the preset of the scene's name.
Every scene is drawn in its own palette for light and dark, and each palette comes from a combination in Sanzo Wada's A Dictionary of Color Combinations. The preset of the same name (meadow, sandstone, cinnabar, umber from @youj/core) takes its accent, neutrals and chart colors from that same combination, so the card and its ground read as one scheme. The middle of each composition is its quietest part, where the card sits. See all six, with the two photographs the docs use, on Backdrops.
The four scenes:
meadow: a meadow under sky, panned so the grass streaks. At night it's the blue hour.sandstone: broad dunes lit from the top left, with a fine suede grain lit by the same light. At night the sand sits under a navy sky, with a sienna rim on the crests.cinnabar: near-black glowing into English red, crossed by soft shadow bands, under heavy grain. By day it's ivory warming to the red.umber: a dusk going down from a pale sky to umber, with a coarse stipple. At night it's a slate sky over a brass horizon.
The sandstone scene in your theme's colors.
Pass five CSS colors to colors, in the scene's own order, and they replace its palette in both modes. Tokens keep them in step with your theme. The orders are:
meadow: sky, haze, grass, deep, glint.sandstone: light, mid, shadow, deep, rim.cinnabar: base, low, mid, glow, band.umber: sky, glow, middle, low, deepest.
Code
atmosphere-demo.tsx, the Demo story. The component itself comes from the package.
Reference
Propsscene, colors, speed… (5)
Props
| Prop | Type | |
|---|---|---|
scene | AtmosphereScene'meadow''sandstone''cinnabar''umber'The ground: default 'meadow' | 'meadow' |
colors | readonly string[]Five CSS colors in the scene's own order (meadow: sky, haze, grass, deep, glint; sandstone: light, mid, shadow, deep, rim; cinnabar: base, low, mid, glow, band; umber: sky, glow, middle, low, deepest), in place of its palette for both modes. Tokens follow the mode. | – |
speed | numberDrift speed multiplier. default 1 | 1 |
grain | numberFilm grain, 0–1. Default: the scene's own (stronger on cinnabar, finer on sandstone, which has its own suede). | – |
className | string | – |
PerformanceOne fragment shader, at most 24 frames a second, paused off screen
Performance
Each scene is one WebGL2 fragment shader on a single full-screen triangle, at a device-pixel ratio capped at 1.5 (1 on a low-power device). It draws at most 24 frames a second, since its drift is slow, and pauses off screen and in a hidden tab. It survives a lost GL context and releases the context on unmount. Without WebGL2 it's a still CSS gradient in the same palette, with grain, chosen for the page's light or dark.
MotionDrift · reduced motion
Motion
| Moment | Tokens | ||
|---|---|---|---|
| Driftthe meadow slides along its streaks, the dunes and bands shift, the dusk glow wanders | no token speed ÷ time scale | speed ÷ time scale | |
| Graina fresh pattern each frame, like film | no token at most 24 frames a second | at most 24 frames a second |
Reduced motion
Draws one composed still frame with the grain halved, and stops. It redraws only when the size, the props or the theme change.
Reduced motion
Each scene draws one composed frame and holds it, with the grain halved and still. The composition and the palette stay the same, so the page looks as designed, only still. Switch on Reduced motion in any preview above to compare.
AccessibilityDecorative
Accessibility
It's decorative, so it's aria-hidden and ignores pointer events. Keep text on a card, not on the scene: the grounds vary in lightness across the frame, and only the card's surface is held to your theme's contrast.