VisitorCounter

Retro visitor counter with 7-segment LCD display and counting animation.

Preview

You are visitor #

000000

*Since 1999*

You are visitor #

000000

*Since 1999*

You are visitor #

000000

*Since 1999*

Installation

npx shadcn@latest add https://retro90s.dev/r/visitor-counter.json

Usage

import { VisitorCounter } from "@/components/ui/visitor-counter"

export function MyComponent() {
  return (
    <VisitorCounter
      count={1337}
      variant="neon"
      animate
    />
  )
}

Variants

Default

You are visitor #

012345

*Since 1999*

variant="default"

Neon

You are visitor #

042069

*Since 1999*

variant="neon"

Retro

You are visitor #

008088

*Since 1999*

variant="retro"

Sizes

You are visitor #

000999

*Since 1999*

size="sm"

You are visitor #

000999

*Since 1999*

size="default"

You are visitor #

000999

*Since 1999*

size="lg"

Counting Animation

By default, the counter animates from 0 to the target number on mount. Refresh the page to see the animation again.

You are visitor #

0000000

*Since 1999*

Use animate={false} to disable animation

Customization

Hackers online:

0042

*Since 1999*

You are visitor #

001337

*Since 1999*

Props

Prop	Type	Default
count	number	(required)
variant	"default" \| "neon" \| "retro"	"default"
size	"sm" \| "default" \| "lg"	"default"
digitCount	number	6
prefixText	string	"You are visitor #"
animate	boolean	true
animationDuration	number (ms)	2000
showFrame	boolean	true