Nixie Counter
Glowing 1950s Nixie tubes — every digit cathode faintly visible behind the lit one.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
A live clock by default, or any value. Each tube stacks all ten digits like real glass, with a mesh anode and an orange neon glow that flickers when it changes.
Installation
$ npx shadcn@latest add https://guetix.com/r/nixie-counter.json
Uses the shadcn CLI. It creates components/guetix/nixie-counter.tsx and installs nothing else.
Usage
example.tsx
import { NixieCounter } from "@/components/guetix/nixie-counter";
export default function Example() {
return <NixieCounter />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Digits and ':'; omit for a live clock. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- role=timer with the full value as its label.