Neon
A self-contained cyberpunk theme preset: electric accents on near-black, thin CRT scanlines, condensed monospace type, and hard-edged HUD chrome with corner brackets. A seeded, subtle glitch tears the heading into a chromatic split, and a built-in radio switcher swaps the accent between yellow, cyan, and magenta. Reduced motion drops the glitch for a clean static HUD.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/neonManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| accent | NeonAccentName | Controlled accent name. Leave undefined for uncontrolled. | |
| defaultAccent | NeonAccentName | "yellow" | Initial accent when uncontrolled. |
| onAccentChange | (accent: NeonAccentName) => void | Fires with the next accent whenever the switcher changes. | |
| eyebrow | string | "// SECTOR 07" | Small eyebrow label above the heading. |
| title | string | "NEON DISTRICT" | Heading text — this line receives the seeded glitch shear. |
| children | React.ReactNode | Panel body. Falls back to a sample readout when omitted. | |
| speed | number | 1 | Glitch cadence multiplier — higher fires the shear more often. |
| intensity | number | 1 | Glitch shear magnitude (chromatic offset in px scales with this). |
| paused | boolean | false | Freeze the glitch and scan sweep at a clean static frame. |
| scanlines | boolean | true | Render the thin CRT scanline texture. |
| showSwitcher | boolean | true | Show the built-in accent radio switcher. |
| accentColors | Partial<Record<NeonAccentName, string>> | Override the primary hue of any preset (any palette reachable). | |
| seed | number | 1 | Seed for the deterministic glitch schedule. |
Also accepts all props of Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "title"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.