Aurora
Ambient gradient surface with browser-native animated color fields and static fallback
Ambient background effect
Layered gradients drift when the browser can animate custom properties, then fall back to a static surface when it cannot.
Docs keep motion opt-in here so the visual stays visible without spinning up the GPU until you ask for it.
Motion
Respects reduced motion automatically.
Runtime
Ambient depth without canvas or shaders.
Best for
Hero panels, promo rails, and soft section framing.
Sunrise
Warm launch surface
A brighter preset for promotional callouts and high-energy hero moments.
Custom tuple
Editorial calm
Swap in your own three-color tuple when the built-in palettes are close but not exact.
- This component does not add meaning by itself; ensure child content supplies the required headings, labels, and landmarks.
- Only add landmark or region semantics when the section has a unique, meaningful label.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { Aurora, Card } from '@dryui/ui';
</script>
<Aurora palette="ocean">
<Card.Root>
<Card.Content>Ambient backgrounds stay native and no-dependency.</Card.Content>
</Card.Root>
</Aurora>Import options
Root package
import { Aurora } from '@dryui/ui'Per-component subpath
import { Aurora } from '@dryui/ui/aurora'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
| palette | AuroraNamedPalette | readonly [string, string, string] | — | 'cosmic' | — | — |
| speed | slownormalfast | — | 'normal' | — | — |
| motion | autonever | — | 'auto' | — | — |
| intensity | number | — | 80 | — | — |
| waviness | number | — | 50 | — | — |
| colorSpace | srgboklchoklab | — | 'srgb' | — | — |
| blendMode | BlendMode | — | — | — | — |
| layerOpacity | number | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | — | — |