Skip to content
Get Pro
Radial

Radial Clock

A day wrapped round a dial. Each time bin is a column of dots on concentric rows that glow brighter toward the rim, stacked by series, inside an instrument tick ring that hugs the hole.

$149 once · every Pro piece

Customize

Bins after now are yesterday’s ghost, smaller and faint, or a hatched forecast. The current bin burns in the accent and the bins behind it cool back to grey, the busy ones more slowly. Point at a bin, or Tab in and step with the arrow keys: a spoke springs round to it, the other bins step back and the centre rewrites itself as a sentence with rolling digits, against yesterday. The legend isolates a series across every layer and clicking it restacks the dots. Also as five rows of big patterned dots, or as stacked radial bars.

Install

npx shadcn@latest add @obsyde/radial-clock

Needs your licence key · Get Pro

Usage

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

import { RadialClock } from '@/components/obsyde/ember/radial-clock/RadialClock';

export function Example() {
  return (
    <RadialClock variant="dots" />
  );
}

Files

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

  • ember/radial-clock/RadialClock.tsxcomponent
  • ember/radial-clock/radial-clock.cssstyles
  • ember/radial-clock/RadialClockDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/state-messages.tsxshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/radial.tsxshared
  • ember/viz-kit/radial.cssshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/Grid.tsxshared
  • ember/viz-kit/chart.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/Axis.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
variantVariant'dots' | 'patterned' | 'bars''dots'
datasetData'activity' | 'hourly' | 'energy''activity'
binsBins'24' | '48' | '96''96'
nowNow (hour)number17.25
heatFurnace heatbooleantrue
annotationsNotesbooleantrue
legendLegend'row' | 'none''row'
crosshairCrosshair'solid' | 'dashed' | 'gradient' | 'none''solid'
patternPattern'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
statusStatus'ready' | 'loading' | 'empty''ready'
sizeSizenumber440
seedSeednumber1