Skip to content
Get Pro
Calendars

Punch Card

Day by hour as a grid of dots sized, and optionally shaded up the grey ladder, by value, so the busy hours of the week read at a glance and empty slots stay as pinpricks.

$149 once · every Pro piece

Customize

The current hour is live: its dot burns in the accent inside a slow pilot-light ring, the one hot value on the card. Hover any dot and its row and column rise as soft filled bands that fade at both ends, their labels brighten, the dot lifts on a spring and the rest of the week steps back; the panel compares the hour with that day's average. Tab in and the arrows walk the grid. Dots ripple in diagonally; loading is a shimmering lattice.

Install

npx shadcn@latest add @obsyde/punch-card

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { PunchCard } from '@/components/obsyde/ember/punch-card/PunchCard';

export function Example() {
  return (
    <PunchCard encode="size-shade" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/punch-card/PunchCard.tsxcomponent
  • ember/punch-card/punch-card.cssstyles
  • ember/punch-card/PunchCardDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/state-messages.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
shapeShape'circle' | 'square''circle'
encodeEncode'size-shade' | 'size''size-shade'
crosshairHover bands'band' | 'none''band'
nowLive hourbooleantrue
legendLegend'size' | 'none''size'
tooltipTooltip'panel' | 'none''panel'
revealReveal'wave' | 'none''wave'
statusStatus'ready' | 'loading' | 'empty''ready'
seedSeednumber4