Date Picker Open
The calendar unfolds from the field and the days arrive in a wave, today already marked.
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, useId, useRef, useState, type KeyboardEvent } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Date Picker Open
*
* The calendar unfolds from under the field and the days arrive in a
* wave that runs down the weeks, with today already marked and theAbout this pattern
Forty small numbers appearing at once is a wall; the same forty arriving in a wave that runs down the weeks and across each one gives the grid a reading order for free, and it costs only opacity and four pixels of travel. Nothing scales, because everything in a calendar is a numeral. The chosen day is a disc that springs in behind its number rather than under it, so the digit never rides the fill. Today keeps a marker of its own after another day is picked, and the grid is a real one: arrows walk it, crossing into the next month when they run off the edge, Page keys change month, Escape hands focus back to the field.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Calendar
A calendar that opens onto the current month with the day already marked.
Related patterns
- Signature Draw CaptureThe scrawl strokes on at hand speed and the baseline confirms once the pen lifts.
- Color Picker SwatchA ring grows around the chosen swatch and travels to the next one, while the preview eases to the new color.
- Currency Input FormatSeparators fade in where they belong as the amount groups itself, and the caret holds its place.