AuroraSurface
A slow, low-frequency background wash for a hero — one memorable moment, not a particle system.
@luc/ui/motionLive preview
Both fields come from the live accent, so the surface follows every palette rather than pinning two colours.
Drawdown control
Half the risk, the same breadth.
<AuroraSurface tone="duotone" density="normal" speed={26} grid vignette />Other configurations
The same primitive, arranged differently. Each snippet is printed from the props its preview above was rendered with.
Content-first, no grid
`neutral` stays monochrome for a surface that has to carry content; the grid is what makes the duotone version read as a plotted plane.
Drawdown control
Half the risk, the same breadth.
<AuroraSurface tone="neutral" density="quiet" speed={40} grid={false} vignette />Rich and slow
Density is the number of fields and `speed` is seconds per cycle, so the calm setting is the slower one.
Drawdown control
Half the risk, the same breadth.
<AuroraSurface tone="duotone" density="rich" speed={64} grid vignette />Usage
import { AuroraSurface } from "@luc/ui/motion";<AuroraSurface tone="duotone" density="normal" speed={26} grid vignette />API
| Export | Kind | Signature |
|---|---|---|
AuroraSurface | 7 documented props | ({ className, children, tone, density, speed, grid, vignette, surface, static: isStatic, ...props }: AuroraSurfaceProps) => import("@types/react").JSX.Element |
AuroraSurface props
Type: AuroraSurfaceProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
density? | AuroraDensity | undefined | — | How many light fields drift across the surface. |
grid? | boolean | undefined | — | A faint technical grid behind the light. |
speed? | number | undefined | — | Seconds per drift cycle. Slower reads as more expensive. |
static? | boolean | undefined | — | Freeze the drift without removing the composition. |
surface? | "canvas" | "default" | "raised" | "transparent" | undefined | — | Floor on the surface's own colour. |
tone? | "neutral" | "brand" | "duotone" | undefined | — | `brand` uses the live accent; `duotone` adds a hue-rotated second field (still the same accent family, so it follows every palette); `neutral` stays monochrome for content-first s… |
vignette? | boolean | undefined | — | Darken the corners so foreground text keeps its contrast. |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Surfaces
Panels that respond to a pointer, a scroll or a state change.
Related