Life Calendar — сетка жизни в неделях
Введите дату рождения и увидьте свою жизнь как сетку недель: прожитое, эта неделя и всё, что впереди до 90 лет.
У меня есть Telegram-бот с этой идеей, но текст в чате не бьёт так, как 4680 квадратов перед глазами. Хотелось перенести эмоцию в браузер — без бэкенда, мгновенно.
90 лет — это всего ~4680 недель. Когда видишь их одной сеткой, календарь перестаёт быть абстракцией. А ещё Canvas оказался быстрее тысяч DOM-элементов на порядок.
Первый вариант рисовал 4680 <div>. На мобильном лейаут задыхался. Переписал на один <canvas> с resize-observer — стало плавно даже на слабых телефонах.
Зачем это вообще
Идея не новая — её популяризировал Тим Урбан в «Your Life in Weeks». Но одно дело прочитать статью, другое — ввести свою дату и увидеть свою сетку. Ниже — рабочая мини-версия того, что у меня крутится в Telegram-боте «Life Calendar».
Как это устроено
Одна строка = один год (52 недели + короткий «хвост»). Считаем число полных недель от даты рождения до сегодня, красим их как прожитые, текущую неделю подсвечиваем, остальное до горизонта в 90 лет оставляем контуром.
Вся отрисовка — на <canvas>: тысячи прямоугольников рисуются за один проход, без нагрузки на DOM. Появление сетки анимируется волной слева направо, но если в системе включён prefers-reduced-motion — сетка просто появляется целиком.