Radial Line
Today as an open line round a 24-hour dial, ending in a pulsing dot at now, against yesterday’s dashed full loop on the same scale, inside an instrument tick ring and faint value rings.
$149 once · every Pro piece
The line draws on clockwise, and its last stretch runs hot: what just happened glows, older data has cooled to bone. Point anywhere round the dial or step with the arrow keys: a gradient spoke springs to the hour, a marker rides the curve on its own spring, the line steps back to half strength while a short window round the marker is re-stroked at full, and the centre rewrites itself as a sentence with rolling digits. An optional seam fills the gap between the loops, hot only where today runs ahead.
Install
npx shadcn@latest add @obsyde/radial-lineNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { RadialLine } from '@/components/obsyde/ember/radial-line/RadialLine';
export function Example() {
return (
<RadialLine />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/radial-line/RadialLine.tsxcomponentember/radial-line/radial-line.cssstylesember/radial-line/RadialLineDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/state-messages.tsxsharedember/viz-kit/size.tssharedember/viz-kit/shape.tssharedember/viz-kit/scale.tssharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/radial.tsxsharedember/viz-kit/radial.csssharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/motion.tssharedember/viz-kit/focus.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/Legend.tsxsharedember/viz-kit/Grid.tsxsharedember/viz-kit/chart.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.csssharedember/viz-kit/Axis.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
pointsPoints | number | 96 |
nowNow (hour) | number | 17.25 |
seamSeam | boolean | false |
heatHeat by recency | boolean | true |
ringsValue rings | boolean | true |
legendLegend | 'row' | 'none' | 'row' |
crosshairCrosshair | 'solid' | 'dashed' | 'gradient' | 'none' | 'gradient' |
dotsDots | 'halo' | 'ring' | 'none' | 'halo' |
curveCurve | 'catmull' | 'linear' | 'catmull' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
sizeSize | number | 440 |
seedSeed | number | 3 |