@bg-effects/nixie-clock

English | 简体中文

A vintage Nixie tube clock background effect built with Vue.

Live Demo

Features

• 🕰️ Vintage Aesthetics: Faithful recreation of classic Nixie tube glow and glass reflections.
• 🎨 Highly Customizable: Adjustable colors, glow intensity, tube reflection, and more.
• 🎞️ Rich Animations: Supports multiple transition types like fade and slide.
• 🛠️ Debug Mode: Built-in visual debug panel for real-time adjustments.
• 📦 Ready to Use: Easy-to-use Vue component with simple configuration.

Installation

pnpm add @bg-effects/nixie-clock

Usage

<script setup>
import { NixieClock } from '@bg-effects/nixie-clock'
</script>

<template>
  <div style="width: 100vw; height: 100vh; background: #000;">
    <NixieClock 
      :digit-count="6"
      mode="clock"
      color="#ffbb33"
    />
  </div>
</template>

Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | mode | 'clock' \| 'matrix' | 'clock' | Display mode (clock or digital matrix) | | color | string | '#ffbb33' | Digit and glow color | | digitCount | number | 6 | Number of digits to display | | showSeconds | boolean | true | Whether to show seconds | | fontSize | number | 60 | Font size in pixels | | glowIntensity | number | 1.0 | Intensity of the tube glow | | glassOpacity | number | 0.2 | Opacity of the glass tube | | tubeReflection | number | 0.5 | Strength of glass reflections | | flicker | boolean | true | Enable vintage flickering effect | | breathing | boolean | true | Enable breathing animation | | animationType | 'none' \| 'fade' \| 'slide' | 'fade' | Digit transition animation | | debug | boolean | false | Enable debug panel | | lang | 'zh-CN' \| 'en' | 'zh-CN' | UI language |

Local Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

License

MIT