Flip Clock

A full-screen, immersive flip clock app for focus sessions — built with React + Vite.

goodflipclock.com

Preview

  

Features

Modes

• Clock — Real-time clock with animated flip cards and a mini seconds badge
• Timer — Countdown timer with configurable hours/minutes/seconds
• Pomodoro — Structured work/break sessions with automatic session transitions (focus → short break → long break cycle)

Customization

• Backgrounds — 16 curated local WebP images, CSS gradients, and solid colors
• Fonts — Multiple typeface options (Impact, Roboto, Orbitron, and more)
• Colors — Custom digit color and card panel color via spectrum color pickers
• All settings persist across sessions via localStorage

Desktop UX

• Focus mode — After 20 s of inactivity all chrome fades out, leaving only the clock; any mouse movement restores it
• Mode selector pill — Fixed glassmorphic bar at the bottom center for switching modes
• Inspirational quote — Fades in at the top of the screen on load
• Floating panels — Music player (YouTube IFrame API, 4 study stations), Task list, Notes, and a Buy Me a Coffee button

Mobile UX

• Portrait — Two vertically-stacked flip cards sized to fill as much screen height as possible; inspirational quote hidden; tap-to-focus collapses all chrome after 4 s of inactivity
• Landscape — Horizontal card layout; quote hidden; LandscapeBar provides floating mode dots (left) and customize/coffee buttons (right)
• Mobile bottom bar — Persistent bottom navigation with mode indicator dots, timer/pomodoro controls, and utility buttons (customize, music, coffee)
• Swipe to change mode — Left/right swipe on the clock area cycles through Clock → Timer → Pomodoro
• Mode label — 3 s fade toast at the top of the screen on every mode change

Animation System

• rotateX(-180deg) flip animation (0.6 s ease-in-out) with transform-origin: center calc(100% + 2px) pivot at the card center gap
• scaleX mode-transition animation (not rotateY) — keeps backdrop-filter working on all glassmorphic fixed elements
• All animations are GPU-compositor-safe: no 3D rendering contexts on ancestors of position: fixed elements

Tech Stack

• React 19 + Vite 6
• Plain CSS (no Tailwind, no CSS-in-JS)
• react-icons for the icon set
• YouTube IFrame API for the music player

Getting Started

npm install
npm run dev

Build for production:

npm run build
npm run preview

Project Structure

src/
├── App.jsx / App.css            # Root layout, responsive breakpoints, focus/tap-to-focus
├── main.jsx                     # Entry point; imports index.css
├── constants/                   # MODES, TIMER_STATES, POMODORO_SESSION_TYPES, …
├── contexts/
│   └── ThemeContext.jsx          # Global theme (background, font, clockColor, panelColor)
├── data/
│   └── quotes.js                # Inspirational quote collection
├── hooks/
│   ├── useTimer.js              # Countdown timer logic + flip animation state
│   ├── usePomodoroTimer.js      # Pomodoro session management
│   ├── useFont.js               # Font selection and application
│   ├── useFullscreen.js         # Fullscreen API wrapper
│   ├── useIdleMode.js           # Idle detection and auto-hide chrome
│   ├── useKeyboardShortcuts.js  # Global keyboard shortcuts
│   ├── useMobileChrome.js       # Mobile browser chrome detection
│   └── usePanelManager.js       # Panel state and visibility
├── utils/
│   ├── colorUtils.js            # isLightColor() — drives dark/light text mode
│   ├── fontUtils.js             # FONT_OPTIONS registry
│   ├── sounds.js                # Sound effects management
│   └── accessibilityTest.js     # Dev-only accessibility testing (lazy-imported)
├── styles/
│   └── cross-browser-fixes.css  # Vendor prefixes and browser-specific patches
└── components/
    ├── FlipClock/                # Central display + FlipCard animation engine
    │   └── displays/             # ClockDisplay, TimerDisplay, PomodoroDisplay, FlipCardGrid
    ├── ClockPreview/             # Live clock preview for customization panel
    ├── ModeSelector/             # Glassmorphic bottom pill (desktop only)
    ├── MobileBottomBar/          # Bottom navigation bar (mobile only)
    ├── LandscapeBar/             # Floating bar for mobile landscape mode
    ├── TimerControls/            # Desktop play/pause/stop for timer mode
    ├── TimerSettings/            # Timer duration input (TimeInput sub-component)
    ├── PomodoroControls/         # Desktop controls + skip for pomodoro mode
    ├── PomodoroSettings/         # Pomodoro duration customization
    ├── PomodoroSessionHeader/    # Session type/progress header
    ├── PomodoroSessionIndicator/ # Session progress dots (desktop + tablet only)
    ├── SessionProgress/          # Session time remaining display
    ├── CustomizationPanel/       # Tabbed modal: Background / Fonts / Colors
    ├── BackgroundSelector/       # Image/gradient/color picker grid
    ├── ImagePicker/              # 4×4 WebP background image grid (uses thumbnails)
    ├── GradientPicker/           # Curated CSS gradient selector
    ├── ColorSelector/            # Theme color picker (digit + panel colors)
    ├── ColorPicker/              # Generic color picker modal
    ├── SpectrumColorPicker/      # HSL spectrum-based color picker
    ├── FontSelector/             # Font family/weight selection
    ├── DisplaySettings/          # Display configuration options
    ├── MusicPlayer/              # YouTube IFrame streaming panel
    ├── TaskList/                 # Persistent to-do panel
    ├── NotesPanel/               # Scratchpad panel
    ├── InspirationalQuote/       # Fixed top quote (desktop + tablet only)
    ├── CoffeeButton/             # Buy Me a Coffee support button
    └── LiveRegion/               # ARIA live region for screen reader announcements

public/
└── images/backgrounds/           # 16 WebP background images (compressed)
    └── thumbs/                   # Thumbnail versions for the picker grid

Docs

• Architecture
• Components API
• Customization Guide
• Mobile UX
• Deployment
• Cross-Browser Testing