MariaRemindsUs is an open-source productivity and wellness browser extension built on modern web extension standards (Manifest V3). It injects lightweight, hardware-accelerated 60 FPS alpha-transparent animations into your active browsing sessions when interval alarms fire, cueing ergonomic adjustments and hydration breaks without breaking your workflow.
| Icon | Action Type | Format & Profile | Default Duration | Description |
|---|---|---|---|---|
 |
Hydration | WebM (VP9, Alpha 60 FPS) | 8 seconds | Hydration reminder prompting a water break. |
 |
Workout / Gym | WebM (VP9, Alpha 60 FPS) | 8 seconds | Light physical activation and muscle stretch sequence. |
 |
Nutrition / Food | WebM (VP9, Alpha 60 FPS) | 8 seconds | Nutritional pause cue to prevent prolonged fasting at desks. |
 |
Ergonomics / Posture | WebM (VP9, Dual-Key Alpha 60 FPS) | 8 seconds | Spinal realignment and ergonomic posture correction check. |
 |
Rest / Ocular Break | WebM (VP9, Alpha 60 FPS) | 8 seconds | Ocular relaxation and brief mental reset sequence. |
- Stays in Fullscreen: Appears smoothly over YouTube, Netflix, and Twitch without kicking you out of fullscreen mode.
- Auto-Pauses Videos: Temporarily pauses active media while Maria is on screen, then resumes playback automatically.
- Safe Dismissal: Only closes when you press
Escapeor when the animation ends — accidental clicks won't dismiss it.
- Clean Transparent Backgrounds: Seamlessly blends into any website with no black or white borders.
- Watermark-Free: Crisp, clean visuals with all AI watermarks removed.
- Fluid 60 FPS: Ultra-smooth playback across all 5 break routines (Water, Gym, Food, Posture, and Sleep).
| Layer | Technology | Details |
|---|---|---|
| Extension Engine | |
Modern cross-browser extension framework for Manifest V3 & Gecko |
| User Interface | |
Reactive component architecture with responsive SVG controls |
| Type Safety | |
Strict typing across background alarms and storage state |
| Video & Audio | |
60 FPS transparent animations with matching audio cues |
| Page Safety |  |
Isolated overlay that never breaks or alters website layouts |
RemindMeMaria-Ext/
├── entrypoints/
│ ├── background.ts # Central background coordinator (alarms, events)
│ ├── content/
│ │ ├── index.tsx # Shadow DOM injection layer
│ │ └── BreakOverlayApp.tsx # Alpha-blended overlay video component
│ ├── popup/
│ │ ├── main.tsx # React mounting point
│ │ └── App.tsx # Settings, interval selector, routine toggles
│ └── offscreen/ # Chromium offscreen audio executor
├── components/ # Reusable UI widgets and vector icons
├── lib/
│ ├── alarms.ts # Browser alarm scheduling service
│ ├── audio.ts # Web Audio API procedural chime synthesizers
│ ├── breakTypes.ts # Break registry and metadata mapping
│ ├── exclusions.ts # Domain exclusion and whitelist matching
│ ├── storage.ts # Strongly-typed browser.storage layer
│ └── typing.ts # Typing cadence detection engine
├── public/
│ └── videos/ # Processed 60 FPS alpha WebM assets and audio files
└── wxt.config.ts # Multi-target build and manifest configuration
# Clone the repository
git clone https://github.com/tech-anupam/MariaReminds-ext.git
cd MariaReminds-ext
# Install dependencies
npm install
### Production Build
```bash
# Compile production artifacts for Chrome / Edge
npm run build
# Compile production artifacts for Firefox
npm run build:firefox
# Generate distribution archive (.zip)
npm run zip
- Developer: Anupam Jha
- Portfolio: anupambuilds.store
- Discord Community: discord.gg/MNCdjVcbtc
- Repository: github.com/tech-anupam/MariaReminds-ext
Licensed under the MIT License. Copyright © 2026 Anupam Jha.