Docs
Particle Digital clock

Particle Digital clock

Display a particle digital clock with animations.

Loading...

Installation

Copy and paste the clock code into your project.

Particle Clock

A visually engaging clock component that displays the current time using animated particles. The particles dynamically rearrange themselves to form the current time digits.

Features

  • Responsive design that adjusts to window resizing
  • Smooth particle animations
  • Digital clock display using the DS-Digital font
  • Automatic time updates every second

Usage Example


export default function ClockPage() {
  return (
    <div className="w-full h-screen">
      <ParticleClock />
    </div>
  );
}

Implementation Details

  • Uses a canvas element for rendering
  • Creates particles that animate to form the time digits
  • Updates the display when the time changes
  • Automatically adjusts to container size
  • Uses requestAnimationFrame for smooth animations

Styling

The component renders a block-level canvas element with w-full h-auto classes. You can wrap it in a container to control its dimensions.

FireworkNintendo Sw...