Third Time - Productivity Timer

A minimalist web app implementing the "Third Time" productivity method with rich visual feedback.

The Method

  • Work for as long or short as you like, until you want or need to break
  • Break for up to one-third of the time you've just worked
  • Save unused break time for later
  • Handle interruptions and big breaks (meals)

Features

  • Flexible work/break timing
  • Break time banking system with visual time bank
  • Interruption handling
  • Big break support for meals
  • Clean, distraction-free interface with rich visual feedback
  • Customizable break fractions (1/2, 1/3, 1/4, 1/5, 1/6)

Visual Features

  • Circular Progress Indicators: Real-time visual progress for work and break sessions
  • Time Bank Visualization: Saved break time represented as collectible gems/coins
  • Progress Bars: Visual representation of work vs break time accumulation
  • Efficiency Meter: Color-coded circular progress showing session efficiency
  • Work/Break Ratio Bar: Visual split showing time distribution
  • Interactive Fraction Settings: Visual representation of work-to-break ratios

Usage

  1. Click "Start Working" to begin a work session
  2. Watch the circular progress indicator fill as you work
  3. Click "Take Break" when you want to stop working
  4. The app calculates your earned break time (work time ÷ fraction)
  5. See your banked time as visual gems in the Time Bank
  6. Take your break and click "Resume Work" when ready
  7. Any unused break time is saved and visualized for later

Project Structure

├── frontend/
│   ├── index.html          # Main app interface
│   ├── index.tsx           # React app with visual components
│   └── style.css           # Styling with animations
├── backend/
│   └── index.ts            # Static file server
└── shared/
    └── types.ts            # Shared TypeScript types