Time, Beautifully Flipped.
Fliko is a premium flip clock web application built entirely with HTML, CSS, and Vanilla JavaScript. It recreates the classic mechanical flip clock with smooth 3D animations while offering modern features such as world clocks, themes, fullscreen mode, screensaver mode, timers, and extensive customization—all in a single HTML file.
- Authentic mechanical flip-card animation
- Smooth 3D CSS transforms
- Real-time updates every second
- 12-hour & 24-hour formats
- Optional AM/PM display
- Optional seconds display
- Optional milliseconds display
Includes 15 built-in preset timezones:
- 🇮🇳 India (Asia/Kolkata)
- 🇺🇸 New York
- 🇺🇸 Los Angeles
- 🇬🇧 London
- 🇫🇷 Paris
- 🇩🇪 Berlin
- 🇦🇪 Dubai
- 🇯🇵 Tokyo
- 🇸🇬 Singapore
- 🇨🇳 Shanghai
- 🇰🇷 Seoul
- 🇦🇺 Sydney
- 🇳🇿 Auckland
- 🇧🇷 São Paulo
- 🇿🇦 Johannesburg
Additional features:
- Search all IANA timezones
- Automatic local timezone detection
- Live UTC offset
- Timezone abbreviation
- World clock cards
- Persistent saved selection
Choose from multiple handcrafted themes:
- Classic Black
- Modern White
- Blue Neon
- Amber Retro
- Matrix Green
- Midnight Purple
- Ocean
- Sunset
Supports:
- Light Mode
- Dark Mode
- Auto Theme (System)
Multiple built-in backgrounds including:
- Solid
- Gradient
- Animated Gradient
- Aurora
- Glass
- Particles
- Noise
- Animated Blobs
Customize nearly every aspect of the clock:
- Theme
- Background
- Timezone
- Date format
- Clock format
- Animation speed
- Font size
- Fullscreen
- Screensaver timeout
- Seconds
- Milliseconds
- Auto Theme
All settings are automatically saved.
Perfect for monitors and displays.
Features:
- Fullscreen clock
- Auto-hide interface
- Moving clock to prevent burn-in
- Hidden cursor
- Exit with keyboard, mouse, or touch
Includes:
- Stopwatch
- Countdown Timer
- Pomodoro Timer
Fliko remembers your preferences automatically.
Saved settings include:
- Theme
- Background
- Timezone
- Clock format
- Date format
- World clocks
- UI preferences
- Animation settings
| Key | Action |
|---|---|
| F | Toggle Fullscreen |
| S | Toggle Screensaver |
| D | Toggle Dark Mode |
| T | Open Theme Selector |
| Esc | Exit Fullscreen / Screensaver |
Optimized for:
- Desktop
- Laptop
- Tablet
- Mobile
- Portrait
- Landscape
- Ultra-wide Displays
- Keyboard Navigation
- ARIA Labels
- Focus Indicators
- High Contrast Support
- Reduced Motion Support
Designed for smooth performance.
- 60 FPS animations
- Efficient DOM updates
- Minimal repaints
- Lightweight
- No external libraries
- Fast loading
Fliko/
│
├── index.html
└── README.md
Everything is contained inside a single HTML file.
- Download the project.
- Open
index.htmlin any modern web browser. - Enjoy.
No installation required.
No dependencies.
No internet connection required.
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Safari
- Opera
- Brave
Latest versions recommended.
- HTML5
- CSS3
- Vanilla JavaScript
- CSS 3D Transforms
- Local Storage API
- Intl DateTime API
- Fullscreen API
[ Home Screen Screenshot ]
[ Settings Panel ]
[ World Clock View ]
[ Screensaver Mode ]
[ Dark Theme ]
[ Light Theme ]
Fliko combines the nostalgic charm of classic mechanical flip clocks with modern web technologies, delivering a clean, elegant, and distraction-free experience suitable for desktops, workspaces, dashboards, and personal productivity setups.
- Alarm System
- Calendar Integration
- Weather Widgets
- Analog Clock Mode
- Multiple Clock Layouts
- Sound Effects
- Custom Themes
- Plugin Support
- Clock Skins
- Multi-language Support
- Progressive Web App (PWA)
Suggestions, improvements, and feature ideas are always welcome.
Feel free to fork the project and customize it to your needs.
This project is released under the MIT License.
You are free to use, modify, and distribute it according to the license terms.