A simple, fullscreen-capable timer application designed for tracking talk durations with visual feedback. Perfect for lightning talks, presentations, and Toastmasters meetings!
Inspired by Toastmasters Timer Zoom Backgrounds, this app provides clear visual cues to help speakers stay on time.
This is a Next.js project bootstrapped with create-next-app. It uses shadcn/ui for the UI components.
-
Visual Color Transitions: Timer changes colors based on configurable time thresholds
- 🟢 Green: Initial state (before warning threshold)
- 🟡 Yellow: Warning state (approaching time limit)
- 🔴 Red: Overtime state (exceeded time limit)
-
Progress Bar: White progress bar at the top of the screen shows elapsed time relative to the red threshold
-
Fullscreen Mode: Toggle fullscreen mode for a distraction-free timer experience
- Click the fullscreen button (maximize/minimize icon) in the footer controls
- Use the keyboard shortcut F to quickly toggle fullscreen mode
- Works across different browsers and devices
-
Configurable Settings: Customize your timer experience
- Set a custom talk title
- Configure yellow threshold (warning time in seconds)
- Configure red threshold (overtime time in seconds)
-
Auto-hiding Controls: Footer controls automatically hide after 3 seconds of inactivity, reappearing on mouse movement
-
Document Title Updates: Browser tab title shows elapsed time when the timer is running
- Starting the Timer: Click the Play button (
▶️ ) in the footer controls or press P or Space - Pausing the Timer: Click the Pause button (⏸) while the timer is running or press P or Space
- Resetting the Timer: Click the Reset button (↻) to set the timer back to 00:00 or press R
- Configuring Settings: Click the Settings button (⚙️) to:
- Change the talk title
- Set the yellow threshold (warning time in seconds, default: 90 seconds)
- Set the red threshold (overtime time in seconds, default: 120 seconds)
- Fullscreen Mode:
- Click the Fullscreen button or press F key
- Press Esc or F key again to exit fullscreen
- P or Space: Toggle start/pause timer
- R: Reset timer to 00:00
- F: Toggle fullscreen mode
- ?: Show keyboard shortcuts help dialog
Note: All keyboard shortcuts are disabled when typing in input fields
- Node.js 18.x or later
- npm, yarn, pnpm, or bun
-
Clone the repository:
git clone https://github.com/dnafication/talk-timer.git cd talk-timer -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open http://localhost:3000 with your browser to see the timer.
The page auto-updates as you edit files. This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
- Framework: Next.js 14 (App Router)
- Language: TypeScript (strict mode)
- UI Library: React 18
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Icons: Radix UI Icons and Lucide React
/
├── app/ # Next.js App Router pages
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── talk-timer.tsx # Main timer component
│ ├── timer-display.tsx # Timer display component
│ ├── footer.tsx # Footer with controls
│ └── progress-bar.tsx # Progress bar component
├── lib/ # Utility functions
│ └── utils.ts # cn() utility for className merging
└── .github/ # GitHub configuration
We welcome contributions! Please see CONTRIBUTING.md for guidelines on how to contribute to this project.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
- Toastmasters Timer Zoom Backgrounds - The inspiration for this application
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
This project is open source and available under the MIT License.