Flipi

Overview

A flip clock and Pomodoro timer that's as precise as it looks. Simple surface, surprisingly complex underneath.

The goal was to create an experience that feels both visually polished and technically robust.

System Design & Architecture

Flipi is built as a client-only, time-sensitive system:

Time Engine

• Uses system timestamps (Date.now) as the source of truth
• Computes elapsed time instead of relying on interval counts
• Ensures accuracy even under throttling or tab inactivity

State Management (Zustand)

• Centralized store for:

  • Timer state (running, paused, completed)
  • Pomodoro sessions
  • UI preferences (themes, sounds)

• Lightweight and optimized for frequent updates

Rendering Layer

• Flip animations triggered based on time state changes
• Decoupled animation logic from time calculation to avoid drift

---

Key Engineering Decisions

1. Timestamp-Based Timekeeping

Decision: Use system time instead of interval-based counters.

Why:

• setInterval is throttled in inactive tabs
• Counting ticks leads to drift over time

Implementation:

• Store start time and compute elapsed duration on each update

Outcome:

• Consistent and accurate timing regardless of browser state

2. Decoupling Animation from Logic

Decision: Separate animation triggers from time calculations.

Why:

• Animations can lag or drop frames
• Tight coupling leads to visible inconsistencies

Outcome:

• Visual layer remains smooth even if rendering is delayed
• Logical time remains correct

3. Handling Background Execution

Decision: Use Web Workers and Service Workers for off-main-thread execution.

Why:

• Main thread is paused or throttled in background tabs
• Timers must remain reliable

Trade-offs:

• Increased complexity in synchronization

4. Animation Realism

Decision: Recreate physical flip clock behavior using CSS 3D transforms. Getting the flip animation to feel mechanical (not floaty) took significant iteration on timing curves and the layering of front/back card elements. Small details — like the shadow at the fold — make a big difference.

Why:

• Achieve tactile, realistic UI experience
• Differentiate from standard digital timers

Implementation:

• Layered elements with perspective transforms
• Carefully tuned keyframes for natural motion

---

Challenges

Maintaining Accuracy Under Browser Throttling

Timers often pause or slow down in inactive tabs.

Solution:

• Recomputed elapsed time using timestamps
• Synced state on tab visibility changes

Synchronizing Animation with Real Time

Visual transitions must match actual time progression.

Solution:

• Trigger animations based on computed time changes
• Avoid relying on animation duration for correctness

Reliable Background Execution

Ensuring timers continue functioning in PWA/offline mode.

Solution:

• Leveraged Web Workers for background computation
• Designed fallback mechanisms on app resume

---

Learnings

This project highlighted challenges in building time-sensitive systems on the web:

• Browser lifecycle and throttling behavior is unpredictable — design around it
• Separating logic from presentation isn't just good architecture, it's essential for time-sensitive UIs
• Leveraging browser APIs (Workers, PWA) effectively