React DayPicker already animates a month change; it just ships without a look. When the month changes it clones the old month, pins the clone over the new one with position: absolute, clips both with overflow: hidden and adds a class to each: an exit class on the clone's weeks and caption, an enter class on the new ones. GodUI fills those class names with its own keyframes.

The two months don't move as one strip. The old weeks leave first, fast and short: 150ms, 12% of their width. The new weeks start 20ms later from a quarter of the width away and settle on a spring in 260ms. Going forward both travel toward the start; RTL flips the sign. A quarter width keeps the direction readable without the page-turn blur of a full slide, and the exit, shorter and quicker than the enter, leaves room for the new month.

The exit fades on an ease-out quad rather than ease-out-expo. Expo empties the old month before the new one is there: the two together drop to 16% opacity for a few frames, which reads as a blink. On the quad they stay above 65%.

React DayPicker removes the clone, and strips the enter classes from the new month, when the old caption fires animationend. Whatever the weeks are doing at that moment gets cut. So the old caption's exit lasts exactly as long as the new weeks' delay plus their enter, and does all of its fading in the first 30%, then holds. It must be the only animation in the caption: a child's animationend would bubble up and trigger the cleanup early.

The caption is the depth cue. It drifts 14px where the grid drifts a quarter width, so it reads as a layer further back. And because two captions on top of each other are just jumbled text, it doesn't cross-fade the way the grid does: the old one is gone before the new one starts, 40ms after the weeks, and both end together.

With captionLayout="dropdown" the caption holds the month and year selects, which shouldn't fade or move with the page. The new caption shows at once and the old one is hidden for the same duration, so it still ends in the animationend the cleanup needs.

A picked day turns from dark text on nothing into light text on a dark fill. Colour can't animate on the GPU, and switching the number to the light colour at the start would show white text on a fill that hasn't arrived yet. So the fill is a layer over the day button that carries its own copy of the number in the light colour. It grows from 60% on a bouncy spring and fades in over its first third, while the button's own number under it keeps the unselected colour. When the pop ends, the layer drops under the number (still above the range's track), the copy goes and the number turns light: the same pixels, with the number in the DOM once. The copy is aria-hidden.

The day you leave lifts its layer back over the number with a copy for its exit: the fill shrinks to 85% while the layer fades out in 150ms, then it unmounts. If the animation never runs (your CSS cancels it), the layer settles at once. Only the fill shrinks, not the copy, so the copy never drifts out of line with the real number under it.

Nothing pops on first paint or when you page to a month: each day remembers what it last drew, and React DayPicker mounts every day of a newly shown month fresh. The clone of the old month copies the attributes too, so the animation is switched off inside it.

Each day button holds two half-cell strips of the range's accent: the half toward earlier days and the half toward later ones. The range's ends only have their inner half, under the pill. A strip grows across with scaleX, from the side the sweep comes from.

Only the new part of a range sweeps, outward from the part already drawn. Picking a second day sweeps away from the first, and pulling the start earlier sweeps backward. The strips run back to back, each linear over its own slice of one ease-out curve, so the front is a single edge that starts fast and slows into the day you picked. The slices are fractions of one sweep duration, so a three-day range and a three-week one, across the month boundary, both take 240ms. Strips that leave fade out.

The fade-out is a keyframe, not a transition. After an opacity transition on an element, Chrome won't composite a later opacity keyframe on that element, so a strip that faded out could never sweep back in on the GPU.

Once a range's first day is picked, the day under the pointer (or the focus) draws the range a click there would make. It asks React DayPicker's own range rules, so with min, max or excludeDisabled a day that would start the range over previews nothing. It's drawn with the same track halves and the same sweep as a picked range, on a quicker clock. Hairline edges in the ghost pill's colour outline a lighter tint, because in light mode the tint alone is too close to the range's accent to tell apart. As the pointer moves on, only the halves newly covered sweep out from the part already drawn, and the ones it leaves fade.

The end is a ghost pill. It pops in when the preview starts; along a row it glides from the previous end with the same duration and ease-out curve as the track's front, and the track runs on under the ghost's outer half, so the pill's leading edge rides the front. Across rows, and across the first day, it jumps: a slide over other weeks would read as a zip.

Clicking commits what's already drawn. The halves keep their classes and timing, so nothing sweeps again; the range's accent, a pseudo-element hidden under the preview's tint, fades in over the tint and its edges while the end pops. Leaving the grid fades the preview out where it is, after an 80ms grace in case the pointer is crossing to the other month. The hovered day lives in a small store outside React DayPicker, and every day carries its layers from the start, so a pointer crossing the grid re-renders the days and changes attributes, never the DOM. Chrome traces caught two layouts that came back: an absolute pseudo-element inside a sweeping half lays out every frame, and an opacity reaching 1 drops a paint layer, so the accent is an in-flow block with isolation: isolate.

The first day is picked. Move over the others to preview the range, click to commit it, then click its start to pick a new one. Page through the months; arrow keys preview from the focused day and move the focus ring without a fade.