An SVG neon tube ring with blacked-out electrode ends in five gas or phosphor colors. It can switch off to pale daylight glass or sputter like a failing tube, stilled under reduced motion; also exports a bloom ring.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/neon-orbnpx shadcn add @01orbital/neon-orbyarn shadcn add @01orbital/neon-orbbunx --bun shadcn add @01orbital/neon-orbPart of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/orbs/neon-orb.tsx, as source you own and edit.
import { NeonOrb } from "@/components/orbs/neon-orb"
// A lit tube needs a dark ground; the card shows it in dark mode.
export default function NeonOrbDemo() {
return (
<div className="grid w-full place-items-center p-6">
<NeonOrb gas="neon" size={260} />
</div>
)
}Neon Orb is built from 2 parts. In the example they nest like this:
NeonOrbNeonOrb: A ring of neon tube drawn as an SVG: a pale core with a glow inside and outside the ring, and a short dark break where the tube's two ends meet, at about 7 o'clock. It is decorative and hidden from assistive tech.NeonBloomRing: A softer neon ring: an unbroken ring of color with layered bloom around it, without the tube's pale core or the dark break at its ends. It is decorative and hidden from assistive tech.A ring of neon tube drawn as an SVG: a pale core with a glow inside and outside the ring, and a short dark break where the tube's two ends meet, at about 7 o'clock. It is decorative and hidden from assistive tech.
With flicker a lit tube cuts out in a few quick bursts, then holds steady for long stretches. Reduced motion keeps it steady.
Prop
Type
It also accepts the HTML attributes of the element it renders.
A softer neon ring: an unbroken ring of color with layered bloom around it, without the tube's pale core or the dark break at its ends. It is decorative and hidden from assistive tech.
Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
No other registry pieces.
Neon Disc
A neon tube ring with its electrode gap masked out, plus an inner glow, outward throw and soft halo all derived from one tube color. It reads on light paper as well as on dark grounds.
Orb Crescent
A dark sphere with two colored crescent lights in three set-ups: cyan and coral opposing, violet and rose adjacent, or a sharp cyan rim with a soft fill. Size takes pixels or any CSS length.