Skip to content

No.238 · Stats

Streak Field Stats

A year of days as a field of squares with the streaks pulled out beside it. Touch a day and a ripple spreads out from it through the field; pick a streak and its days light up one after another.

The prompt

The design brief behind this component — reuse it to regenerate, remix, or explain it.

Build an activity calendar with streak stats. Left: an eyebrow, the year's total (2.5rem), active days, and two toggle buttons — Longest streak and Current streak — each with its length and date range, computed from the data. Right: 52 weeks × 7 days of 10px squares with 3px gaps in a CSS grid (weeks as columns, Monday first), five levels of one hue, month labels over the column where each month starts and Mon/Wed/Fri down the side. Each day is a real button with a full date and value as its name, inside a role="grid" with role="row" wrappers (display: contents) and a roving tabindex: arrows move by day and week, Home/End jump. Hover or focus a day: set its column and row as --oc/--or on the field and flip a data-wave attribute between two identical keyframes so the animation restarts. Each square computes --d = hypot(c − oc, r − or), waits --d × 28ms and lifts and brightens by a factor that falls off to nothing about 11 squares out — a ripple from the day you touched, which never reaches the whole year. Throttle new ripples to one per 220ms. A small dark tooltip shows '9 km Tue 16 Sep', kept inside the frame at the edges. Pressing a streak dims every other day to 30% and lights its run in order, 40ms per day, ending with a thin accent ring around each. The field scrolls horizontally inside itself on narrow screens, opened at the latest weeks (direction: rtl on the scroller). Paper (greens) and Night (frost blues).

Notes

Interaction
Hover or arrow through the days to send a ripple from each; press a streak to light up its run.
Motion
Ripple 520ms per square, delayed 28ms per square of distance and fading by 11 squares; streak cells light 460ms, 40ms apart.
Accessibility
Every day is a button named with its full date and value, in a grid with roving tabindex and arrow-key movement. The streak toggles use aria-pressed. The tooltip and labels are visual; the same facts are in the buttons' names. Reduced motion turns off the ripple and the sequence and keeps the dimming.
Responsive
Two columns above 760px; stacked below, with the field scrolling sideways inside its card and the streaks side by side.
On touch
Tap a day to ripple and show its value; streak buttons work the same.

Featured

01Glassbreak ButtonA solid plate that fractures from one impact point, cracks racing outward as the shards drift apart.04Liquid GlassA capsule of glass that bends what's behind it, carries a specular highlight around its rim toward your pointer, and squashes like a drop of liquid when pressed.07Phosphor Glass ButtonA liquid-glass pill that senses you coming: its rim light turns to face the cursor and the pill leans in to meet it.08Iris ShutterAn async button with a camera iris for a status light — blades close and turn while it works, then open onto the result.
81Atmosphere CardSmoked-glass link cards: colour pooled in the corners, slow contour currents underneath, a field that leans toward you.93Eclipse Event CardAn editorial event plate with an oversized date and an orbital eclipse bleeding in from the right, alive with slow drift.94Specimen CardAn object mounted under glass: hover lifts the pane with a sweep of reflection and swings out a paper catalogue tag.
95Silk FieldDomain-warped light that pours like liquid silk, with an optional glass lens that refracts the flow under your cursor.106IsobarA living weather map — contour lines traced over a drifting pressure field, with your cursor as a system of its own.
151Prompt ComposerA chat composer where attached files tuck into its top edge like tabs in a folder — they rise from behind it when added and sink back when removed. Send turns into stop while the reply streams.157Aura FieldA writing field where colour only exists while the AI is touching your text: the edge becomes a turning band of light and the words are rewritten in place, one by one, out of a soft blur.
205Halftone CTAA tall CTA banner where slow gold paint drifts beneath a fixed halftone grid, visible only through the dots.
212Nocturne Sign-inA single quiet column on near-black with a breathing seam of frost light behind it — email, password, magic link, nothing more.222Sigil Sign-inA split sign-in whose left half grows a geometric mark from your email — the same address always draws the same sigil.
275Voices CarouselA testimonial exhibition: one large quote at a time on frosted glass, crossfading between voices without ever resizing.
279Feral TitleA brutal condensed wordmark — heartbeat in the dark, letters slam in, a gash tears through and the word bleeds.
301 components