Neon Sign
ProOpen late
Coffee and records
Installation
npx shadcn add @useplanes/neon-sign
Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.
Unlock with Planes Pro
$99 once · 118 Pro components · lifetime updates.
<NeonSign as="h1" color="#ff3ea5" className="text-8xl font-light">
Open late
</NeonSign>Examples
Two-tone sign
Delay the second line so it strikes after the first one holds.
<NeonSign as="h2" className="text-8xl font-light">Open late</NeonSign>
<NeonSign as="p" color="#38e1ff" delay={1.4} className="text-2xl uppercase tracking-[0.2em]">
Coffee and records
</NeonSign>Replay
The ignition plays once per mount. Change the key to strike it again.
<NeonSign key={run}>Open late</NeonSign>
<button onClick={() => setRun((r) => r + 1)}>Replay</button>Reduced motion
With prefers-reduced-motion the sign is lit from the start, with no ignition and no brown-outs.
<NeonSign>Reduced motion is always on.</NeonSign>Use cases
Hero headline
A brand name or tagline that switches on as the page loads, on a dark hero.
Event and nightlife
Venue, bar, music or event pages where the sign is the mood.
Status sign
An Open, Live or On Air sign that flickers on when the state turns true.
Section opener
A section heading that lights up as the reader scrolls into it, in daylight on light pages and full bloom on dark ones.
