About

A digital clock that merely displays numbers is a solved problem. This tool renders time as a fully animated 7-segment display on an HTML Canvas, where each digit morphs smoothly between states using cubic-eased interpolation. When a digit changes, a particle burst reinforces the transition visually. The colon separator pulses on a sinusoidal opacity curve synced to real seconds. All rendering runs inside a single requestAnimationFrame loop at native refresh rate, with zero DOM reflows. The glow effect uses shadowBlur compositing, not CSS filters, so it stays GPU-friendly. Note: time accuracy depends on the host device clock. Drift from UTC is not corrected here.

Five color presets map to curated pastel palettes. The 12-hour format appends an AM/PM indicator with its own fade animation. Reduced-motion preference disables particles and morphing, falling back to instant digit swaps. The canvas scales responsively but maintains a fixed aspect ratio of 4:1 to prevent distortion. All preferences persist across sessions via localStorage.

Formulas

Segment opacity during digit transition uses cubic ease-in-out interpolation over duration D:

t = elapsedD

ease(t) =

{

4t³ if t < 0.51 − (−2t + 2)³2 otherwise

Each segment's rendered opacity blends between old state s_old and new state s_new:

α = s_old ⋅ (1 − ease(t)) + s_new ⋅ ease(t)

Colon separator opacity follows a sine pulse:

α_colon = 0.3 + 0.7 ⋅ |sin(t ⋅ π)|

where t = fractional seconds from Date.now(). Particle position updates each frame with gravity g = 0.15px/frame²:

v_y = v_y + g , y = y + v_y

Reference Data

Segment	Position	Digits Active	Binary Mask
A (top)	Horizontal top	0, 2, 3, 5, 6, 7, 8, 9	1110111
B (top-right)	Vertical upper-right	0, 1, 2, 3, 4, 7, 8, 9	1101101
C (bottom-right)	Vertical lower-right	0, 1, 3, 4, 5, 6, 7, 8, 9	1111101
D (bottom)	Horizontal bottom	0, 2, 3, 5, 6, 8, 9	1011011
E (bottom-left)	Vertical lower-left	0, 2, 6, 8	1010010
F (top-left)	Vertical upper-left	0, 4, 5, 6, 8, 9	1001011
G (middle)	Horizontal center	2, 3, 4, 5, 6, 8, 9	0111110
Color Presets
Ocean	#7C9EF5 primary, #A8C4F7 glow
Coral	#F5A07C primary, #F7C4A8 glow
Mint	#7CF5B8 primary, #A8F7D0 glow
Lavender	#B87CF5 primary, #D0A8F7 glow
Rose	#F57CA0 primary, #F7A8C0 glow
Animation Timing
Digit morph	400ms cubic ease-in-out
Colon pulse	Sinusoidal, period 1s
Particle lifetime	600ms
Particle count	20 per digit change

Frequently Asked Questions

This clock reads from the host device's system clock via the JavaScript Date object. Consumer devices typically drift 0.5-2 seconds per day from UTC without NTP correction. If your OS has NTP sync enabled (default on most systems), drift stays under 50ms. The tool does not implement its own NTP client.

When the operating system's "prefers-reduced-motion: reduce" media query is active, the tool disables particle effects and digit morphing entirely. Digits swap instantly with no interpolation. The colon stops pulsing and remains at full opacity. This respects WCAG 2.1 Success Criterion 2.3.3.

Each digit 0-9 maps to a 7-bit mask where bits A through G represent the top, upper-right, lower-right, bottom, lower-left, upper-left, and middle segments respectively. For example, the digit 8 activates all 7 segments (mask 1111111), while the digit 1 activates only B and C (mask 0110000). Transitions morph segment opacity between the old and new masks.

Yes. The canvas internal resolution is multiplied by window.devicePixelRatio (typically 2 on Retina displays). The CSS display size remains unchanged, resulting in crisp rendering at native pixel density. This doubles memory usage on 2x screens but prevents blurry segment edges.

Particles use a pre-allocated object pool of 140 slots (7 digit positions × 20 particles each). When a digit changes, 20 pool slots are activated with randomized velocity vectors. Dead particles (lifetime expired) are simply marked inactive, not deleted. No new objects are created during runtime, keeping GC pauses at zero.