Visualizing Time Progress with Dynamic Clock Arcs

Mantine Clock 2.0 introduces powerful arc rendering to show elapsed time at a glance

We're excited to announce the release of Mantine Clock 2.0, featuring a game-changing addition: dynamic arc rendering. This major update transforms how users visualize time progression by adding colorful, customizable arcs that follow clock hands and instantly communicate elapsed time.

What Are Clock Arcs?

Clock arcs are sector-shaped visual indicators that sweep from a defined starting point to the current position of each clock hand. Think of them as progress indicators that make it incredibly easy to see at a glance how much time has passed since a specific moment.

For example:

• A seconds arc might show how many seconds have elapsed since the start of the current minute

• A minutes arc could visualize how much of the current hour has passed

• An hours arc might display progress through a work shift or meeting duration

Key Features

Independent Control for Each Hand

The new arc system provides complete control over seconds, minutes, and hours arcs:

<Clock
  withSecondsArc
  secondsArcFrom="12:00:00"
  secondsArcColor="red.6"
  secondsArcOpacity={0.6}
  
  withMinutesArc
  minutesArcFrom="12:00"
  minutesArcColor="blue.6"
  minutesArcOpacity={0.5}
  
  withHoursArc
  hoursArcFrom="12:00"
  hoursArcDirection="counterClockwise"
  hoursArcColor="teal.6"
  hoursArcOpacity={0.4}
/>

Smart Arc Positioning

Each arc intelligently respects the corresponding hand's length, ensuring perfect visual alignment. The arc never extends beyond its hand, maintaining clean, professional aesthetics.

Bidirectional Support

Arcs can sweep both clockwise and counterclockwise, opening up creative possibilities for different use cases:

• Clockwise arcs for showing elapsed time

• Counterclockwise arcs for displaying remaining time

• Mixed directions for complex time tracking scenarios

Flexible Time References

The system supports multiple time input formats:

• String format: "12:30:45" for precise time specification

• Date objects: For timezone-aware calculations

• Fractional precision: Seconds contribute to minute positioning, minutes affect hour positioning

Real-World Applications

Meeting Duration Tracker

Show how much of a scheduled meeting has elapsed with a subtle arc that grows as time progresses, helping participants stay aware of remaining time without checking their phones.

Workout Timer

Display workout intervals with color-coded arcs—red for high-intensity periods, blue for rest periods—making it easy to see progress at a glance.

Shift Progress Indicator

For service industries, display work shift progress with an arc that fills throughout the day, providing instant visual feedback on how much of the shift remains.

Educational Tools

In classroom settings, use arcs to show lesson segment progress or exam time remaining, helping students manage their time more effectively.

Technical Excellence

Performance Optimized

The arc rendering system uses optimized SVG rendering with geometric precision hints to ensure smooth performance and crisp visuals across all devices.

Theme Integration

Arcs seamlessly integrate with Mantine's theming system, supporting all color variants and automatically adapting to light and dark modes.

TypeScript Ready

Full TypeScript support with comprehensive interfaces ensures type safety and excellent developer experience:

interface ClockArcsProps {
  withSecondsArc?: boolean;
  secondsArcFrom?: string | Date;
  secondsArcDirection?: 'clockwise' | 'counterClockwise';
  secondsArcColor?: MantineColor;
  secondsArcOpacity?: number;
  // ... and more for minutes and hours
}

Migration and Compatibility

Mantine Clock 2.0 maintains complete backward compatibility—existing implementations continue working without changes. The arc features are opt-in, activated only when you explicitly enable them with props like `withSecondsArc`.

Interactive Demo

We've built a comprehensive interactive demo that lets you experiment with all arc parameters in real-time. Adjust colors, directions, start times, and opacities to see how arcs can enhance your time visualization needs.