Streak Advance
The connector reaches today's cell, the cell fills, and the streak count rolls over.
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 { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Streak Counter Advance
*
* The day the streak grows by one. The connector reaches today's cell,
* the cell fills, and only then does the count roll over — so theAbout this pattern
A streak is a chain, so the motion builds it as one: the segment between yesterday and today extends, today's marker fills on an over-damped spring, and only after that does the number roll from twelve to thirteen. Ordering it this way makes the count a consequence rather than an announcement. Only the digits that actually change are re-keyed, so twelve to thirteen rolls the trailing digit and leaves the leading one perfectly still — the trick that separates a real odometer from a whole number flipping over. Digits translate and crossfade inside a fixed slot and never scale, because a figure that swells while it counts stops reading as a quantity.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Activity summary
Week strip with today's marker filling, then the streak count advancing.