NeonAurora
The neon.com hero as a live WebGL surface — bar clusters twinkling in green, teal, and blue.
NeonAurora recreates the neon.com hero video as a shader: clusters of thin vertical bars in green, teal, and blue, twinkling on black like data streams. Bars breathe between brightness rolls, clusters drift alive and dead on a slower clock, and a soft glow underlayer gives the crisp bars depth. Use it behind heroes, empty workspaces, and marketing moments. Drag the dials — density fills the sky, blur pulls the near layer out of focus as it approaches, and the palettes re-tint the whole field:
Install
npx shadcn@latest add https://ui.neon.com/r/neon-aurora.jsonUsage
import { NeonAurora } from "@/components/neon-ui/neon-aurora";
<section className="relative isolate overflow-hidden bg-black">
<NeonAurora className="absolute inset-0" />
<div className="relative">{content}</div>
</section>;Props
speed?number
Animation speed multiplier; 0 freezes the field.
number0.7density?number
0-1 share of bar clusters alive at once.
number0.2intensity?number
Overall brightness multiplier.
number2blur?number
0-1 depth-of-field blur on the near layer as it approaches.
number1glare?number
0-1 ambient bloom fog hanging around the lit regions.
number0.2flare?number
0-1 how often the warm flare ignites; 0 disables it.
number0.75thickness?number
0-1 how much of its column each bar fills.
number0whiteFlare?number
0-1 how often the hot white flare ignites; 0 disables it.
number0.6colors?[string, string, string]
Bar palette, mixed per bar: [deep, primary, accent].
[string, string, string]["#0e5f45", "#00e599", "#3b82f6"]Accessibility
The canvas is decorative (aria-hidden); keep real content in the DOM above it. Under prefers-reduced-motion (or speed={0}) a single frame renders with no animation.