127 Components
Aurora Flux Surface
BackgroundsGPU-composited ambient aurora canvas where dual radial luminance fields with contrasting spring mass chase the pointer.
Coupled Luminance FluxDual-mass radial aurora chasing pointer
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/aurora-flux-surface.json"
Props
TypeScript props supported by <AuroraFluxSurface />.
| Prop | Type | Default | Description |
|---|---|---|---|
| orbRadius | number | 260 | Radius of the primary radial luminance field in pixels. |
| stiffness | number | 180 | Spring stiffness coefficient for the leading luminance orb. |
| damping | number | 24 | Spring damping coefficient controlling luminance trail decay. |
Key Features
- Pairs a low-mass leading radial orb (m=0.4) with a high-mass trailing orb (m=1.4) for organic fluidseparation.
- Composited directly via Framer Motion useMotionTemplate with zero React state re-renders.
- Monochrome architectural dot overlay preserving BoseUI's high-contrast aesthetic.
Keyboard & Accessibility
- Marks all ambient luminance and dot texture layers with aria-hidden='true'.
- Freezes luminance orb coordinates when prefers-reduced-motion is active.
- Preserves WCAG AA contrast inside the foreground container.