Piggy Focus Timer

Inspiration

As someone who struggles with digital distractions while working from home, I wanted a focus tool that felt warm, unobtrusive, and actually easy to use—no clunky apps, no accounts, no internet needed. The cute piggy character came from a desire to add joy to the often tedious act of focusing; small, playful moments make sticking to a routine so much easier. I also wanted to lean into mobile-first design, since most of us reach for our phones first—and gravity-based controls (flip to start) felt like a natural, intuitive shortcut.

What it does

Piggy Focus Timer is an offline H5 Pomodoro timer designed for mobile browsers, WeChat, and the MeDo platform. It lets you start/pause focus/rest sessions with a tap (or flip of your phone), play ambient white noise (rain, forest, café, keyboard), track 7 days of focus history, and customize timer durations/themes—all stored locally, no ads, no fluff. The piggy character animates through focus states (waiting, focusing, celebrating) to keep the experience light and engaging.

How we built it

I built it entirely with front-end web tech: HTML5 for structure, CSS3 for gradients/animations/layering (frosted glass effects, phase-aware color shifts), and vanilla JavaScript for core logic. I integrated the DeviceOrientation API for gravity-based controls, Web Audio API for offline white noise, and localStorage to save stats/settings. Every design choice (soft gradients, micro-animations, touch-friendly buttons) centered on mobile usability and emotional warmth—no heavy frameworks, just lean, performant code to keep load time under 1 second.

Challenges we ran into

The biggest hurdle was making the timer run reliably in the background (even when the screen locks)—I had to test multiple timing mechanisms to avoid drift. The DeviceOrientation API also had cross-browser/permissions issues; I added silent fallbacks so the app still works if the sensor is unavailable. Designing smooth phase transitions (color shifts, piggy animations) without lag on low-end mobile devices required optimizing CSS animations and reducing asset size (kept total assets under 5MB).

Accomplishments that we're proud of

The app is fully offline, loads in under a second, and works seamlessly across mobile browsers/MeDo/WeChat. The gravity-based control feels intuitive (users love flipping their phone to start focusing!), and the piggy animations add joy without distraction. Most importantly, it’s a pure tool—no ads, no data collection, no accounts—just focused on helping people stay on track.

What we learned

I deepened my understanding of mobile H5 limitations (background timing, sensor permissions) and how to build graceful fallbacks. I also learned that small, intentional design choices (like the piggy’s breathing animation during focus) have a huge impact on user engagement. Optimizing for performance on mobile taught me to prioritize lean code over fancy libraries—sometimes vanilla JS is the best choice.

What's next for this project

Short-term: Add more white noise tracks (ocean, fireplace) and refine the dark/light mode transitions. Long-term: Test landscape mode support (for tablet users) and add optional mild haptic feedback for phase changes. I also want to tweak the piggy animations based on user feedback to make them even more charming (without adding bloat). No plans for cloud sync/accounts—keeping it simple and offline-first remains the priority.

Built With

• css3
• html5
• javascript
• localstorage