#Product 01-03 From Page Flip to Clock Flip: Making the Numbers Flip from Top to Bottom

For Clock App Lab #001, I wanted the time display to feel more like a real object, not just text changing on a screen. At first, I tried making each digit flip separately, but the result looked too mechanical and unnatural. In this version, I changed the display into two larger panels: one for the hour and one for the minutes. I also shortened the flip animation so the movement feels more like a quick physical motion.

In this third note for Clock App Lab #001, I want to write about the flip animation for the clock display.

At the beginning, the time display was very simple. The numbers changed normally, almost like plain text. It worked, but it did not feel like a clock object. Since the design already had a retro desk clock shape, I wanted the numbers to change with a small physical motion.

The idea was to make the numbers flip from top to bottom.

This came from looking at page flip and card flip examples. Many CSS flip animations use rotateY() to turn something sideways, like a book page. That kind of animation is useful as a reference, but it is not the right direction for this clock. A clock display should not feel like a book turning from left to right. It should feel like a small panel dropping from top to bottom.

So the first experiment was to take the general idea of a flip animation and change the direction. Instead of rotating on the Y axis, the clock display needed to rotate on the X axis. In other words, the movement had to go vertically.

The basic idea was simple:

the old number is visiblethe top half flips downwardthe next number appears underneaththe display settles into the new time

Before placing this inside the final clock design, I made a small reference implementation to test the movement.

This first test helped me understand the basic movement, but it also showed a problem. I originally tried to build the clock with four separate digit panels: one for each digit of the hour and minute. That meant the display was divided into four small parts.

At first, this sounded logical. A digital time display has digits, so each digit could have its own flip unit. But visually, it did not feel right.

The clock started to look too technical. Each digit moved on its own, and the display lost the feeling of a real clock. A real desk clock usually feels more unified. The hour area and the minute area are read as larger blocks, not as four isolated pieces.

This was one of the first design mistakes in the project.

The mistake was useful, though. It made the direction clearer. Instead of treating the time as four independent digits, I changed the structure into two panels.

The left panel shows the hour.The right panel shows the minutes.

This immediately made the display feel calmer and closer to the reference image. The clock no longer looked like four separate UI parts. It started to feel more like one small object.

Another issue was the speed of the flip animation.

In the first version, I made the animation a little too slow because I wanted the movement to be visible. But when the motion was slow, the illusion started to break. The back side of the panel and the background behind it became too easy to notice. Instead of looking like a real flipping panel, it started to look like layers of HTML moving around.

That was not the effect I wanted.

For this clock, the flip should be quick. It should feel like a small mechanical movement, not a dramatic animation. A real flip clock does not slowly rotate for a long time. It changes quickly and then becomes still again.

So I shortened the animation. The top half flips down quickly, and the bottom half follows almost immediately. The goal is not to show off the animation. The goal is to make the time change feel slightly physical.

This also changed how I handled the colors. At first, the back side of the flipping panel was dark, almost black. But when the motion was visible, that black surface stood out too much. It looked like a hidden layer was being exposed.

To avoid that, I made the front and back of the panel use the same color. In light mode, the panel uses a dark gray-green LCD color on both sides. In dark mode, the panel uses the same warm neo-orange color on both sides. This keeps the flip from revealing something that feels unrelated to the display.

The clock has two visual states.

In light mode, the display has a deep gray LCD feeling. The border is dark, the digits are almost black, and the whole display feels like an old digital clock.

In dark mode, the display becomes warm orange, like a backlight in a dark room. The digits remain dark, but the panel glows softly. This is not just a “dark theme.” It is more like changing the clock from a daytime object into a nighttime object.

The flip animation needed to work in both modes. If the panel color changes but the flipping part does not match, the illusion breaks. So the flip panel, the static panel, and the back side all need to share the same color system.

After adjusting the structure, the animation, and the colors, the result became much closer to what I wanted.

The most important lesson from this step was that more detailed implementation does not always create a better result. The first four-digit structure was more detailed, but it looked less natural. The final two-panel structure is simpler, but it feels more like a real clock.

That is a useful lesson for small UI projects. Sometimes the best design is not the most technically divided design. It is the structure that matches how people visually understand the object.

For Clock App Lab #001, this means the time display should be treated as two readable blocks: hour and minutes. The animation should support that feeling, not fight against it.

The final implementation uses two panels, a short top-to-bottom flip animation, and matching colors on the front and back of each panel. The code is still small, but the behavior feels much more intentional than a simple text replacement.

This part of the project also makes a good development note because it includes both a mistake and an improvement. I did not start with the correct structure. I tried four separate digits, saw the problem, and then changed the design into two panels.

That is the kind of process I want to keep in Clock App Lab. Not just showing a finished result, but also recording why something was changed.

In the next step, I want to continue refining the clock as a PWA. The visual prototype is now close enough for the first version, so the next topics can move toward the actual app structure: responsive layout, manifest.json, icons, service worker, and testing it on Android and iPhone.

For now, the flip animation is good enough to move forward.

It is not perfect yet, but it has the right direction:a small retro clock display, two large panels, and a quick top-to-bottom motion that makes the numbers feel like part of a real object.