# Foci – Your Focus System: Timer, Tasks, Goals & Ambient Music

> Foci is a free all-in-one focus system built with Next.js, React, and Tailwind CSS. It combines a Pomodoro timer, task tracking, daily goals, streak stats, built-in ambient music, and motivational quotes into one distraction-free workspace. No sign-up required — works instantly in any modern browser.

## What is Foci?

Foci is more than a Pomodoro timer. It’s a complete focus system designed for students, developers, writers, and anyone who wants to get more done. Timer. Tasks. Goals. Streaks. Ambient music to stay in the zone — everything you need to focus, in one window. Foci is completely free and requires no account to get started.

## Key Features

- **Focus Timer**: A visual SVG-based circular countdown timer with smooth animations for work and break sessions.
- **Customizable Durations**: Set your own work duration (default 25 min), break duration (default 5 min), and inactivity threshold.
- **Task Tracking**: Create, start, complete, and delete tasks. Organize into projects with subtasks. Track sessions and total time spent per task automatically.
- **Daily Goals & Streaks**: Set a daily session goal and track your streak of consecutive productive days.
- **Ambient Music**: Built-in ambient sound generator (rain, café, white noise, brown noise) using Web Audio API — works offline. Plus optional lo-fi radio via YouTube embeds.
- **Auto-Start**: Optionally auto-start the next work session when a break ends.
- **Browser Notifications**: Get notified when a work session or break completes.
- **Motivational Quotes**: Rotating inspirational quotes displayed during sessions to keep you motivated.
- **Dark Mode**: Full light and dark theme support based on system preference.
- **Cloud Sync**: Optionally sign up to sync settings, tasks, and progress across devices via Supabase.
- **Installable PWA**: Install Foci on your device and use it offline.
- **Data Privacy**: All data is stored locally by default. No tracking, no ads.

## How to Use Foci

1. Visit https://usefoci.com and click "Try without account" or sign up for free.
2. Add tasks and organize them into projects.
3. Open Settings to configure work duration, break duration, and daily session goal.
4. Select a task, turn on ambient music if you like, and press Start.
5. When the timer ends, take a break. Foci handles the transition automatically.
6. Hit your daily goal and build your streak. Track progress with stats and charts.

## Frequently Asked Questions

**Q: What is Foci?**
A: Foci is a free all-in-one focus system that combines a Pomodoro timer, task tracking, daily goals, streak stats, and built-in ambient music — everything you need to stay productive, in one window.

**Q: Do I need an account?**
A: No. You can use Foci immediately without signing up. Create an account only if you want to sync data across devices.

**Q: Does Foci have background music?**
A: Yes. Foci includes built-in ambient sounds (rain, café, white noise, brown noise) that work offline via Web Audio API, plus optional lo-fi YouTube radio streams — perfect for getting in the zone.

**Q: What is the Pomodoro technique?**
A: The Pomodoro technique is a time management method that alternates focused work intervals (typically 25 minutes) with short breaks (typically 5 minutes). After four cycles, take a longer break. It helps maintain concentration and prevent burnout.

**Q: How does task tracking work?**
A: Create tasks, organize them into projects, and select one before starting the timer. Foci automatically logs sessions and time spent per-task so you know exactly where your hours go.

**Q: Can I customize the timer?**
A: Yes. You can adjust work duration, break duration, and daily session goals in the Settings panel.

**Q: Where is my data stored?**
A: By default, all data is stored in your browser's local storage. If you sign up, data is synced to a secure Supabase backend.

**Q: What browsers are supported?**
A: Foci works in all modern browsers including Chrome, Firefox, Safari, and Edge.

## Tech Stack

- Next.js 15 (App Router)
- React 19
- TypeScript
- Tailwind CSS 4
- Supabase (optional cloud sync)
- Local Storage for offline persistence

## Architecture

- `src/app/layout.tsx` – Root layout with SEO metadata and structured data.
- `src/app/page.tsx` – Landing page with feature overview.
- `src/app/app/page.tsx` – Main app with timer, controls, tasks, and settings.
- `src/app/login/page.tsx` – Authentication page.
- `src/components/CircularTimer.tsx` – SVG-based circular countdown display.
- `src/components/TimerControls.tsx` – Start, pause, and reset buttons.
- `src/components/DailyProgress.tsx` – Daily goal progress bar and streak display.
- `src/components/SettingsPanel.tsx` – Settings modal for durations, goals, notifications.
- `src/components/TaskList.tsx` – Task creation, listing, and time tracking.
- `src/hooks/useTimer.ts` – Core timer logic hook (work/break cycles, callbacks).
- `src/lib/types.ts` – TypeScript type definitions (Settings, Task, TimerStatus, etc.).
- `src/lib/quotes.ts` – Array of motivational quotes.
- `src/lib/storage/` – Storage abstraction layer (local + Supabase).
- `src/lib/supabase/` – Supabase client utilities for auth and cloud sync.

## URL

- Homepage: https://usefoci.com
- App: https://usefoci.com/app
- Blog: https://usefoci.com/blog
- Login: https://usefoci.com/login

## Blog

Foci publishes articles about the Pomodoro technique, focus strategies, and time management. Blog posts are available at https://usefoci.com/blog.

- [What Is the Pomodoro Technique? A Complete Guide](https://usefoci.com/blog/pomodoro-technique-guide) — 2026-03-01
- [How to Stay Focused While Studying: 7 Proven Strategies](https://usefoci.com/blog/how-to-stay-focused-while-studying) — 2026-03-04
- [Pomodoro vs. Flowtime vs. 52/17: Which Focus Technique Is Best?](https://usefoci.com/blog/pomodoro-vs-flowtime-vs-52-17) — 2026-03-07

For the full text of all blog posts, see: https://usefoci.com/llms-full.txt