Life Calendar — your life in weeks
Enter your birth date and see your life as a grid of weeks: lived, this week, and everything ahead up to age 90.
I have a Telegram bot built around this idea, but a message in a chat doesn't hit the way 4,680 squares in front of you do. I wanted to move that feeling into the browser — no backend, instant.
90 years is only ~4,680 weeks. Seen as a single grid, a calendar stops being an abstraction. Also: Canvas turned out to be an order of magnitude faster than thousands of DOM nodes.
The first version rendered 4,680 <div>s. Layout choked on mobile. I rewrote it as one <canvas> with a resize observer — smooth even on weak phones.
Why bother
The idea isn't new — Tim Urban popularized it in "Your Life in Weeks." But reading an article is one thing; entering your date and seeing your grid is another. Below is a working mini-version of what runs in my "Life Calendar" Telegram bot.
How it works
One row = one year (52 weeks + a short "tail"). We count full weeks from birth date to today, paint them as lived, highlight the current week, and leave the rest up to the 90-year horizon as outlines.
All drawing happens on a <canvas>: thousands of rectangles paint in a single pass, with no DOM load. The grid animates in as a wave from left to right, but if prefers-reduced-motion is set, it simply appears all at once.