Use this free, browser-based 90-second timer to manage intense emotions. A science-backed utility for emotional regulation, calm breathing, and cooling down.
AI Generation Prompt
Technical Specification: 90-Second Emotional Regulation Timer
1. Overview
A clean, professional, single-file browser utility that helps users manage intense emotional responses by enforcing a 90-second 'cool down' period. The application uses a science-backed methodology to interrupt the chemical surge of anger and assist with emotional regulation.
2. Core Features
- 90-Second Timer: A precise countdown timer with a clear start/stop/reset interface.
- Guided Breathing Pacer: A visual pulse animation (expanding/contracting circle) synchronized to a 4-7-8 breathing rhythm.
- Pre-Session Check-in: A simple, non-intrusive modal that asks the user to acknowledge the intensity of their current emotion (for cognitive awareness, not data logging).
- Affirmation Library: A randomized selection of calming, non-judgmental phrases displayed below the timer to maintain focus.
- Responsive Design: Fluid layout that adjusts perfectly from mobile phones to desktop monitors.
3. UI/UX Specification
- Layout:
- Header: Simple title and a small 'Help/Instructions' button (triggers a modal).
- Main Area: A large, centered circular progress ring indicating the 90 seconds remaining.
- Footer/Controls: Start, Pause, and Reset buttons with distinct, modern styling.
- Interaction: Smooth CSS transitions for all button hover states and timer updates.
- Color Palette (Light Mode Only):
- Primary: Calming Seafoam (#A3D9D1)
- Secondary: Soft Slate (#78909C)
- Background: Off-White (#F8FAFC)
- Text: Dark Charcoal (#2D3748)
- Accent: Muted Lavender (#B39DDB) for affirmations.
4. Technical Constraints & Directives
- Single File: All HTML, CSS, and Vanilla JavaScript must be contained in one
index.htmlfile. - Storage Restrictions: Absolutely no
localStorage,sessionStorage, or cookies. State management must be handled in-memory using JavaScript variables. - Sandboxed Environment: The app must be fully functional within a null-origin iframe (no popups, no external dependencies that require origin access).
- Accessibility: Use semantic HTML5 elements. Ensure high contrast and clear typography (sans-serif, standard system fonts).
- Animations: Utilize CSS keyframes for the breathing pacer and timer transition. Avoid heavy JS-based animations to ensure performance.
- External Libraries: Use only CDN-hosted minified libraries (e.g., Tailwind CSS via CDN) to maintain the single-file requirement.
5. Implementation Steps
- Create the base HTML structure with a responsive container.
- Apply the light-mode palette using Tailwind CSS utility classes.
- Implement the
Timerclass in Vanilla JS, managing the 90-second countdown in memory. - Build the custom modal system (replacing standard
alert/prompt) to handle instructions and post-timer reflection. - Ensure all interactive elements have 0.2s smooth transitions.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
Why is the timer set to exactly 90 seconds?
The 90-second timeframe is based on neurobiological research suggesting that a surge of emotion, such as anger or intense stress, lasts about 90 seconds in the human body. Once this chemical surge dissipates, you are essentially choosing to remain in that emotional state by repeating the initial thought patterns. By using this 90-second timer, you provide yourself a dedicated window to pause, regulate your breathing, and allow the initial chemical rush to pass. This practice prevents acting on impulsive feelings and helps you return to a rational, calm state of mind without needing to store or track user progress.
Is this tool a substitute for professional mental health therapy?
This application is a free digital utility designed to support emotional regulation and stress management; it is not a medical device or a replacement for professional therapy. If you are experiencing persistent mental health challenges or severe anger issues, please consult with a qualified psychologist or medical professional who can provide personalized care. This tool is intended for immediate, situational support during moments of heightened stress or emotional frustration. It aims to bridge the gap between an emotional trigger and a thoughtful response, helping you practice mindfulness in the moment.
How does the in-memory functionality ensure user privacy?
This utility is built using a stateless architecture, meaning no data is saved to your browser's local storage, cookies, or indexed databases. Every session is entirely isolated within the current browser tab's memory; once you refresh or close the tab, all session data is permanently cleared. Because we prioritize user privacy, there are no accounts, no server-side tracking, and no persistent records of your emotional check-ins. You can use the timer as often as needed with the assurance that your interaction remains completely ephemeral and private.
What is the best way to utilize the timer during a stress spike?
When you feel an emotional spike, open the tool and immediately initiate the 90-second cycle. Focus your attention entirely on the visual progress indicator or the guided breathing animation rather than the source of your frustration. This shift in focus is critical to allowing your nervous system to reset. Combine the timer with controlled, deep breathing exercises. If you find that 90 seconds is not enough, you are encouraged to reset and repeat the cycle. The goal is not to suppress your emotions, but to observe them without reacting until the physiological intensity has faded.
