SoftAurora
soft-auroraLayers two noise-driven gradients into a soft pointer-responsive aurora backdrop.
Usage
Basic usage
Set a layer of positioning containers, and SoftAurora can be used as a soft light background if it is completely covered.
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<SoftAurora className="absolute inset-0" />
</div>Customized double-layer color matching
color1 / color2 accepts any CSS color string (hex / oklch / chart token), and the two layers are misaligned and superimposed to produce mixed colors.
<SoftAurora
color1="var(--color-chart-3)"
color2="oklch(0.7 0.22 20)"
brightness={1.2}
className="absolute inset-0"
/>Highlight Active
Pull up speed / scale / bandSpread to make the aurora denser, brighter and flow faster.
<SoftAurora
speed={1.4}
scale={2.4}
brightness={1.3}
bandSpread={1.4}
className="absolute inset-0"
/>Wallpaper level (overlay content)
Low speed, turn off mouse parallax, and use fallback to cover the title copy on the aurora, suitable for the main visual of landing pages.
<SoftAurora
speed={0.3}
bandHeight={0.35}
enableMouseInteraction={false}
className="absolute inset-0"
fallback={
<div className="flex h-full flex-col items-center justify-center gap-1">
<p className="text-lg font-semibold text-white">Hulian Component Library</p>
<p className="text-xs text-white/60">Soft light aurora · WebGL · token Coloring</p>
</div>
}
/>When to Use
Use SoftAurora when a dark hero or spacious marketing surface needs slow color movement without a sharply defined focal object. It works behind large copy when brightness and band position are restrained. Choose DotPattern or GridPattern for regular geometry, or SideRays for directional beams from a corner.
Import
import { SoftAurora } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| color1 | string | var(--color-chart-1) | Primary band color for the first layer; accepts any CSS color resolved through an off-screen canvas |
| color2 | string | var(--color-chart-4) | Secondary color for the offset layer; overlap between the layers creates mixed hues |
| speed | number | 0.6 | Animation-speed multiplier; 0.2–2 is recommended |
| scale | number | 1.5 | Noise-sampling scale; higher values create finer texture, with 0.8–3 recommended |
| brightness | number | 1 | Overall brightness multiplier |
| noiseFrequency | number | 2.5 | Base noise frequency, controlling fold density |
| noiseAmplitude | number | 1 | Base noise amplitude, controlling vertical variation |
| bandHeight | number | 0.5 | Vertical band position from 0 to 1; lower values move the band downward |
| bandSpread | number | 1 | Width and intensity of the glow surrounding each band |
| octaveDecay | number | 0.1 | Contribution retained by higher-frequency noise octaves |
| layerOffset | number | 0 | Time-phase offset between the two layers; nonzero values separate their peaks |
| colorSpeed | number | 1 | Horizontal travel speed of the cosine color cycle |
| enableMouseInteraction | boolean | true | Enable subtle pointer-driven parallax |
| mouseInfluence | number | 0.25 | Distance the aurora shifts in response to the pointer |
| className | string | — | Class name forwarded to the root |
| style | CSSProperties | — | Inline styles forwarded to the root |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | Foreground content rendered above the static gradient when reduced motion is enabled |
Usage Guidelines
- SoftAurora does not add
inset-0itself. Position it explicitly, for example withabsolute inset-0, inside arelativeparent that has measurable dimensions andoverflow-hidden. - During SSR, the live root has no canvas. After hydration, a canvas is appended before OGL import and scene setup; if either step fails, that uninitialized or blank canvas remains and SoftAurora does not switch to the reduced-motion fallback. Reduced motion instead keeps the root, replaces the canvas with token gradients, and renders
fallbackabove that static layer. color1andcolor2are parsed through an off-screen canvas. Use full theme variables such asvar(--color-chart-1); bare values such asvar(--primary)do not resolve. See [[hulian-token-color-var-needs-color-prefix]].- Pointer parallax is decorative and is disabled by fallback paths. Keep essential information in normal foreground content rather than encoding it in motion.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<SoftAurora
speed={0.6}
scale={1.5}
brightness={1}
bandHeight={0.5}
enableMouseInteraction={true}
className="absolute inset-0"
/>
</div>