Year Pulse Grid

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<YearPulseGrid/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/year-pulse-grid.en.json

Usage

Pass a whole year of day data through days, each entry carrying date (YYYY-MM-DD), value (intensity), and optional events. Dates you do not list are filled in as empty cells automatically. The selected date can be managed by the built-in sidebar, or driven in controlled mode through selectedDate / onSelectDate.

import {
  YearPulseGrid,
  type YearPulseDay,
} from "@/components/ui/year-pulse-grid";

const days: YearPulseDay[] = [
  { date: "2025-01-06", value: 6, events: [{ id: "e1", title: "v1.0 released" }] },
  { date: "2025-01-07", value: 2 },
  { date: "2025-01-08", value: 0 },
  // …a whole year
];

<YearPulseGrid days={days} year={2025} weekStartsOn={1} />

Props

YearPulseDay

YearPulseEvent

Animation details

• Load wave: each cell's reveal delay is decided by col + row × rowWeight, so the wave sweeps diagonally from the top left to the bottom right, with each cell scaling up and fading in to its intensity color. Adjust the speed with waveStagger and the per-cell duration with waveDuration; setting animateOnLoad={false} presents the final state directly.
• Floating event card: hovering or keyboard-focusing a day floats an event card above that cell (below it when close to the top), fading and scaling in to show the date, the intensity, and the first few events. The card is marked pointer-events-none and its coordinates are computed from a live getBoundingClientRect, so it positions correctly even under horizontal scrolling.
• Selection linking: clicking a day cell toggles the selection (clicking again clears it), the selected cell lifts and takes a focus ring, and the sidebar filters in sync to that day's events; with nothing selected, the sidebar lists the whole year's events, and clicking a list item selects the matching date again.

Accessibility

• When the user has "reduce motion" enabled at the system level, the wave and the floating card position instantly (only the animation parameters are disabled — the DOM structure is unchanged)
• The cell wall is role="group" with an aria-label; each day cell is a button with an aria-label carrying the full date, intensity, and event count, and marks its selected state with aria-pressed
• It uses a roving tabindex: arrow keys navigate between cells, Home / End jump to the start / end of the year, Enter / Space selects, and Esc clears the selection and the event card
• The sidebar title announces selection changes through aria-live="polite"; the month and weekday labels and the decorative dots are all marked aria-hidden, and every focusable element has a focus-visible outline