Nixie alarm
Alarm set for 07:30 · arrows nudge it
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldNixie(el) on the mounted element instead.
HTML
CSS
JavaScript
Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Install with shadcn
Needs a free account token. Get a token
npx shadcn@latest add @movin/input-nixieAbout this component
An alarm time set on four nixie tubes: each digit lights its own wire numeral deep in the stack behind the mesh, the old one fades as the new one strikes, and the colon bulbs blink once the time is set.
- Dependencies
- None
- Difficulty
- Advanced
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Glow
- Focus
Techniques4
- SVG
- SVG filter
- Keyframes
- State machine
Accessibility
Keyboard and screen readers
One native input named "Alarm time, 24 hour" with a numeric keypad; the tubes are aria-hidden and the set time, or the reason for a refusal, is announced.
Reduced motion
Everything changes at once, without the motion.
Use it in anything you build, commercial and client work included. Licence
More inputs
See all11 of 12 · two lines of six
25 of 60 · finish a word to lift it
The planchette is moving…