ChronoGrid

Where 135 analog clocks become a digital display—time as interactive art.

ChronoGrid is a web-based art installation that bridges analog and digital timekeeping. Built with React and TypeScript, it uses 135 individual analog clocks arranged in a grid, where each clock's hands are positioned at precise angles to form the shapes of digital numbers. As time flows, mathematical calculations transform into visual poetry—all clocks smoothly transition in a mesmerizing choreography, creating a display that's both functional and beautiful. It's a unique fusion of mechanical aesthetics, computational geometry, and digital information design.

Features

• Real-time clock display using multiple analog clocks
• Clock hands smoothly animate when time changes
• Configurable settings panel with:
  • Time format (12-hour or 24-hour)
  • Show/hide seconds
  • Visual style (2D or 3D)
  • Animation speed control
  • Customizable colors (background, clock face, hands)
• Settings persist in browser localStorage
• Responsive design
• Built with React, TypeScript, and Vite

Getting Started

Installation

npm install

Development

npm run dev

The application will start on http://localhost:5173 (or another available port).

Build for Production

npm run build

Preview Production Build

npm run preview

How It Works

The application uses a grid of small analog clocks (3 columns × 5 rows per digit) to display each number. Each clock's hour and minute hands are positioned at specific angles to create the visual pattern of digits 0-9. When the time changes, all clock hands smoothly transition to their new positions.

Project Structure

src/
├── components/
│   ├── Clock.tsx              # Single analog clock component
│   ├── Clock.css
│   ├── DigitDisplay.tsx       # Grid of clocks forming a digit
│   ├── DigitDisplay.css
│   ├── TimeDisplay.tsx        # Main time display component
│   ├── TimeDisplay.css
│   ├── SettingsPanel.tsx      # Settings configuration panel
│   └── SettingsPanel.css
├── utils/
│   └── digitPatterns.ts       # Clock hand positions for digits 0-9
├── types.ts                   # TypeScript type definitions
├── App.tsx                    # Main application component
├── App.css
├── index.css                  # Global styles
└── main.tsx                   # Application entry point

Technologies Used

• React - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• CSS3 - Styling and animations

Customization

Click the "Settings" button in the top-right corner to customize:

• Time format (12h/24h)
• Display seconds
• Visual style (2D flat or 3D with shadows)
• Animation speed
• Colors for background, clock faces, and hands

All settings are automatically saved to your browser's localStorage.

License

MIT