Calendar Month Fill
A month grid sweeping up on a diagonal, then events dropping onto their days one at a time.
SceneScenes
$ npx remotion-ui@latest add calendar-month-fillThe empty grid fades up on a diagonal sweep and then the events land, each chip dropping onto its day rather than fading in place — so a filling month reads as things being scheduled instead of as a page loading.
The month is laid out from daysInMonth and startWeekday rather than from a
date, and there is no date library involved. A scene needs a month that looks
right, not one that is correct for a particular year, and this keeps the
component free of both a dependency and a timezone bug waiting to happen. Set
startWeekday to the column the 1st falls in, counting from Monday.
todayDay rings one date in the accent colour. Pass -1 when the month is a
plan rather than a present-tense calendar.
Events are keyed by day number, one chip per day — the cell has room for the day number and a single chip at 1080p. If two things happen on one day, say so in the label rather than stacking chips.
The month comes from daysInMonth and startWeekday rather than from a date — a scene needs a month that looks right, not one correct for a particular year, and this keeps the component free of a date library and a timezone bug. Chips drop onto their day rather than fading in place, so a filling month reads as things being scheduled. One chip per day is the ceiling at 1080p.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/calendar-month-fill- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: month, year, daysInMonth, startWeekday, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { CalendarMonthFill } from "@/remotion/scenes/calendar-month-fill";
<CalendarMonthFill
month="August"
year="2026"
daysInMonth={31}
startWeekday={5}
todayDay={15}
events={[
{ day: 4, label: "Kickoff", color: "#7DD3E8" },
{ day: 15, label: "Render day", color: "#9BD4A0" },
]}
holdSeconds={3.4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| month | string | "August" | Month name in the header. |
| year | string | "2026" | Year beside the month. |
| daysInMonth | number | 31 | How many day cells the month has. |
| startWeekday | number | 5 | Column the 1st falls in, counting from Monday as 0. |
| todayDay | number | 15 | Day given the accent ring. Pass -1 when the month is a plan. |
| events | CalendarEvent[] | 7 sample events | Day number, label and chip colour. One chip per day. |
| weekdayLabels | string[] | Mon–Sun | Column headings; their count sets the grid width. |
| gridAtSeconds | number | 0.3 | Second the empty grid starts sweeping up. |
| eventsAtSeconds | number | 0.95 | Second the first event drops. |
| staggerSeconds | number | 0.2 | Seconds between events. |
| holdSeconds | number | - | Seconds the filled month holds before it retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Today's ring, and the fallback chip colour. |
| backgroundColor | string | - | Page behind the card. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |