FlipClock

A retro-style flip clock desktop app built with Tauri 2, Vue 3, and TypeScript. Features smooth CSS 3D flip animations, countdown timer, alarm system, and system tray integration.

Features

Flip Clock

• 6-digit flip card display (HH:MM:SS) with realistic 3D CSS animations
• Date and weekday display
• 24-hour / 12-hour format toggle
• Breathing colon animation

Countdown Timer

• Flip card countdown with hours, minutes, and seconds
• Start / Pause / Reset controls

Alarm System

• Multiple alarms with custom labels
• Repeat modes: Once, Daily, Weekdays, Custom (select specific days)
• Toggle switch to enable/disable individual alarms
• Persistent storage across app restarts

Desktop Integration

• System tray — minimize to tray, right-click menu (Show / Always on Top / Quit)
• Always on Top — pin button in toolbar or via tray menu
• Close to tray — closing the window hides to tray instead of quitting
• System notifications — native OS notifications when alarms trigger
• Keyboard shortcuts — 1/2/3 switch tabs, Ctrl+T toggle pin, Esc dismiss alarm

Tech Stack

Layer	Technology
Frontend	Vue 3 (Composition API) + TypeScript
Styling	CSS 3D Transforms + CSS Variables
Desktop	Tauri 2 (Rust)
Build	Vite + Cargo
Font	JetBrains Mono (bundled offline)
Storage	tauri-plugin-store
Notifications	tauri-plugin-notification

Getting Started

Prerequisites

• Node.js (v18+)
• pnpm
• Rust

Linux (Ubuntu 22.04)

Install the required system dependencies:

sudo apt install libglib2.0-dev libgtk-3-dev libwebkit2gtk-4.1-dev libjavascriptcoregtk-4.1-dev librsvg2-dev libssl-dev libayatana-appindicator3-dev

Install & Run

pnpm install
pnpm tauri dev

First run will compile Rust dependencies (~2-5 minutes). Subsequent runs are fast.

Build for Production

pnpm tauri build

Output: src-tauri/target/release/ (exe ~6-8 MB)

License

MIT