After sleep, work, and everything else — here's what's actually left.
An interactive memento mori that calculates how much of your life is genuinely discretionary after subtracting sleep, work, education, grooming, commuting, and habitual time-wasting. Grounded in real population data. Designed to be uncomfortable.
Most "life in weeks" visualizations show you how many weeks remain. This one goes further — it subtracts every hour you've already committed to obligations and habits, then shows you what's actually yours.
- 🟥 A canvas-rendered grid of every week of your life, with past weeks marked
- ⏱️ A real-time countdown to your statistically expected death
- 📊 Stat cards breaking down years lost to sleep, work, school, chores, social media, TV, and streaming
- 🌍 Per-country life expectancy data (UN WPP 2024, 57 countries, male/female)
- 🎛️ Fully adjustable parameters with age-dynamic and sex-dynamic defaults
- 🌗 Auto dark/light mode (geolocation-based sunrise/sunset →
prefers-color-schemefallback)
| Layer | Choice |
|---|---|
| Framework | React + Vite (TypeScript) |
| Styling | Tailwind CSS |
| Grid | HTML5 Canvas 2D API |
| Animations | CSS keyframes + requestAnimationFrame |
| Icons | lucide-react |
| Fonts | Space Grotesk · Inter · Cormorant Garamond |
| Deployment | Cloudflare Pages |
| Country detection | ipapi.co/json/ → Intl timezone fallback |
| Persistence | sessionStorage |
| Data | UN World Population Prospects 2024 (hardcoded) |
No backend. No database. No tracking. All state is in-memory.
| Data | Source |
|---|---|
| Life expectancy by country + sex | UN WPP 2024 |
| Social media usage by age | DemandSage 2026 · Gallup 2024 |
| TV & household time use | BLS American Time Use Survey |
| Streaming (SVOD) time | Nielsen Gauge 2025 |
| Commute time | U.S. Census Bureau ACS |
| Grooming time | BLS ATUS + Euromonitor Personal Care Survey |
git clone https://github.com/avocadoattack/memento-mori.git
cd memento-mori
npm install
npm run devThen open http://localhost:5173.
Canvas grid, not DOM nodes — rendering 4,000+ DOM nodes for the week grid caused severe performance issues. The grid is drawn on an HTML5 Canvas and redraws in under 16ms.
Two-color grid — proportional category coloring was tried and abandoned. Work dominated 43 years; TV dominated retirement. The result looked like a barcode and conveyed nothing emotionally. Red X marks on a warm beige grid is cleaner and more resonant.
Education in calendar years — displaying instruction hours ÷ 8,760 produced confusing outputs like "1.6 years." Education is always shown as calendar years of school.
Custom stepper sliders — native <input type="range"> was broken in the build environment across multiple fix attempts. All sliders use a custom StepperSlider component.
- Mobile layout refinements
- Add authorship credit and link to avocadoattack website
- Create subdomain and connect in CF Pages
- Add GH repo link to the live site
- Share / export (shareable link with encoded parameters)
- Localization (non-US defaults for commute, chores, eating)
- Healthy life expectancy mode (HALE toggle)
- Partner/family time category
- Sleep debt visualization
MIT — see LICENSE for details.
Built with real data. Use your time wisely.