Winter Focus

Inspiration

The holiday season isn't just about cozy fireplaces; it's also about the chaotic energy of the Grinch! We wanted to capture this duality in a productivity tool. Most focus timers are boring and utilitarian. We asked: What if your focus could literally fuel the holiday spirit (or destroy it)? Thus, Winter Focus was born—a battle between the Naughty and Nice lists directly on your desktop.

What it does

Winter Focus is a gamified dual-mode Pomodoro timer that adapts to your holiday mood.

• Santa Mode 🎅: A serene, red-and-gold wonderland where your focus fills a Glass Snow Globe with "Holiday Spirit".
• Grinch Mode 💚: A toxic, neon-green lair where focusing causes the Grinch's Heart to physically grow three sizes.

As you complete focus sessions, your chosen object evolves. Reaching 100% (15 sessions) unlocks a Premium 3D Gift Box that reveals a hidden, curated Spotify playlist—Christmas Classics for Santa, or Grinch's Grooves for the mischief-makers.

How we built it

We utilized the modern Next.js 14 stack to ensure a blazing fast experience.

• Animations: We used Framer Motion extensively to create the liquid fill effect in the globe and the pulsating growth of the Grinch's heart.
• Styling: Tailwind CSS was the backbone of our visual design, specifically using CSS variables to handle the instant full-app theme switching (data-mode).
• State Management: We chose Zustand for its simplicity and persistence, ensuring your focus streak is saved locally even if you refresh the page.

Challenges we ran into

The biggest challenge was the Visual Progression. We initially tried standard progress bars, but they felt generic. Pivoting to the "Visual Metaphors" (The Globe vs. The Heart) required complex CSS layering. Specifically, getting the "liquid" to animate smoothly inside the glass sphere without obscuring the gold icons required precise Z-index stacking and backdrop-filter management.

Accomplishments that we're proud of

We are incredibly proud of the "Grinch Mode" aesthetic. It’s not just a palette swap; we reworked the entire vibe with skewed containers, "ash" particles instead of snow, and a distorted, edgy UI that feels authentically 'Grinchy'.

What's next for Winter Focus

We plan to introduce a Global Leaderboard where users can contribute their focus minutes to "Team Santa" or "Team Grinch" to see which side truly wins Christmas!

Built With

• framer-motion
• lucide
• next.js
• react
• spotify
• tailwind-css
• typescript
• vercel
• zustand