FRUTIGER FLOCUS

A Frutiger Aero-inspired productivity app with a Pomodoro timer, animated visualizer, draggable media widgets, session tracking, and playful break interactions.

Features

• Glossy Frutiger Aero UI and animated ambient background
• Focus/Break Pomodoro timer with progress seek and transport controls
• Session tracking with Today stats and streak metrics
• Quick Widgets panel:
  • Notes
  • Tasks
  • Rotating positive quotes
  • FLOCUS BUD status card
• Draggable media surfaces:
  • YouTube player (retro TV-style)
  • Apple Music / Spotify panel (settings-driven source)
  • Fish Tank media panel
• Sun clock floating panel
• Interactive bubbles, grass animations, and TOUCH GRASS sunflower mini-game

Screenshots

Player

Stats

Tech Stack

• Next.js 16 (App Router)
• React 19
• TypeScript
• Tailwind CSS 4
• Playwright (E2E)

Local Development

npm install
npm run dev

Open http://localhost:3000.

Quality Scripts

npm run lint
npm run typecheck
npm run test
npm run test:e2e
npm run build

npm run build is strict and runs lint + typecheck before production build.