The Fractal Clock
A mesmerizing visual of time where the hands recursively sprout smaller rotating hands, creating a self-similar branching pattern in perpetual motion.
Configure complexity, scale, and colors. The clock will recursively animate based on linear CSS animations.
Press F for fullscreen
The Fractal Clock is a meditative visualization of time inspired by the classic epicycle mechanical clocks and mathematical tree fractals. In this ambient display, each clock hand recursively branches into a minute and second hand, which themselves sprout further rotating divisions. The result is a gorgeous, swirling geometric tree in continuous hardware-accelerated motion. By offsetting the starting position of the linear animations in CSS, the entire branching pattern rotates in perfect synchronization with your real-world system clock, creating a mesmerizing pattern that feels both mathematically complex and naturally organic.
What Is a Fractal Clock?
A fractal clock represents time using nested, recursive lines. At its base, the root hour hand rotates on a standard 12-hour period. Positioned at the tip of the hour hand are a minute hand and a second hand, which rotate on 1-hour and 60-second periods relative to their parent hand. At the tip of each of those hands, further hands are sprouted recursively, extending down multiple levels of depth. Because the rotation is cumulative (each child inherits the angle of all its parent hands), the system traces out a complex circular web of joints, demonstrating the concept of self-similarity and epicycles in physics and geometry.
How It Works Under the Hood
This implementation is built using standard HTML5 and CSS keyframe animations. It is highly optimized: by computing the exact number of seconds elapsed since 12:00:00 on client load, we apply a negative CSS animation-delay to the entire tree. The browser's native animation engine then runs the rotation formulas at 60fps/120fps with zero JavaScript layout thrashing. You can customize the depth of recursion (Complexity), the scale of the hands (Length), and change color themes to fit your space, making it a perfect digital screensaver or focus timer.
For related tools, check out Fibonacci Clock, Binary Clock, and Decimal Clock.
Frequently Asked Questions
What is a fractal clock?
A fractal clock is a visual representation of time where each clock hand recursively branches into smaller, rotating hands at its tip. This creates a self-similar, tree-like geometric structure that moves in sync with the real time.
Who created the original web fractal clock?
The web version of this clock was famously ported and shared by developer Alec Lownes (cakenggt) on GitHub, inspired by the classic macOS screensaver created by Rob Mayoff.
How do you read the time on the fractal clock?
The primary hour hand originates from the center of the clock. Its children are the main minute and second hands, and each hand continues to branch outwards. Because of the complexity, it reads more as a piece of kinetic art, but you can enable the digital time overlay to view the exact time at a glance.
Can I customize the colors and complexity?
Yes. The controls panel above the clock card allows you to adjust the recursion depth from 3 to 8 layers, change the hand lengths from 5% to 20% of the container size, choose from 5 vibrant color palettes, and toggle the digital clock overlay on or off.
Does it drain my battery or CPU?
No. Unlike canvas or WebGL scripts that run heavy math loops in JavaScript on every frame, this clock uses recursive CSS keyframe animations. The browser delegates these rotations to the GPU, making it extremely lightweight and efficient to run continuously as an ambient screensaver.