Neon tube lettering with glow, four sizes, an intensity dimmer and opt-in flicker for the whole sign or single letters, plus burnt-out letters. Flicker is capped for flash safety and stops under reduced motion.
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-signnpx shadcn add @01orbital/neon-signyarn shadcn add @01orbital/neon-signbunx --bun shadcn add @01orbital/neon-signPart 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/neon-sign/neon-sign.tsx, as source you own and edit.
import {
NeonLetter,
NeonSign,
} from "@/components/neon-sign/neon-sign"
export default function NeonSignDemo({
animate = false,
}: {
// Flicker the sign; the card's play button turns it on.
animate?: boolean
}) {
return (
<NeonSign size="lg" flicker={animate}>
OP<NeonLetter>E</NeonLetter>N LATE
</NeonSign>
)
}Neon Sign is built from 2 parts. In the example they nest like this:
NeonSign
└─ NeonLetterNeonSign: Text drawn as a lit neon tube, with a colored glow around each letter. Put plain text inside, and wrap any letter in NeonLetter to make it flicker on its own or show it burnt out.NeonLetter: One letter of a NeonSign. A flickering letter runs on its own timing, so letters don't flicker in step. The burnt variant shows the letter as faint, unlit dark glass.Text drawn as a lit neon tube, with a colored glow around each letter. Put plain text inside, and wrap any letter in NeonLetter to make it flicker on its own or show it burnt out.
Nothing flickers unless asked: set flicker on the sign or on a single NeonLetter. Flickering stops when reduced motion is on. The text keeps its spaces and does not wrap.
Prop
Type
It also accepts the HTML attributes of the element it renders.
One letter of a NeonSign. A flickering letter runs on its own timing, so letters don't flicker in step. The burnt variant shows the letter as faint, unlit dark glass.
A letter flickers when its sign does, or on its own when you set flicker on the letter.
Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: class-variance-authority, cn. The CLI installs them for you.
No other registry pieces.
Neoconstruct Wedge Orb
Poster art: a painted orb pierced by a red wedge on a diagonal black field, after El Lissitzky. Takes any Orb Palettes colorway; drop it into the Neoconstruct Hero as artwork.
Poster
Printed card on a stage: a child image fills it behind a label, title, description and mono footnote. Hanken Grotesk sets the label, Geist Mono the footnote; add dark and any text shadow yourself.