Habit Calendar Fill
Today's square fills in the month grid and the run it belongs to draws itself underneath.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Habit Calendar Fill
*
* Today's square filling in a month of squares, and the run it belongs
* to drawing itself underneath. Two small events, in order: the day isAbout this pattern
Two small events in the right order: the day is logged, then the consequence of logging it is shown. Today's cell fills from just over half size on an over-damped spring, and a hairline underline extends beneath the current run to today's column. Everything else in the month is deliberately inert — those days happened before now and have no business moving — and that stillness is what leaves the one filling square somewhere to be noticed. The underline geometry is computed from the grid's own cell and gap sizes rather than positioned by hand, so it stays correct at any cell size. The whole thing is tuned calm: this is a surface someone looks at every day for months.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Activity summary
Month grid marking today and showing the run it continues.