Crucible
One vessel per day, each filled to its value with molten metal.
$149 once · every Pro piece
The selected day is hot: its melt runs from deep red up through the accent to a bright surface and glows, while the other days hold cooled ash. A dashed level line runs from the selected surface across the row to a value pill in the accent, and the header rolls to the day’s value and its change on the day before. Scrub across the days with a pointer, a finger or the arrow keys and the heat moves with you; every change sets the melt’s surface wobbling, a meniscus that settles in about a second. Levels rise on a spring cascade.
Install
npx shadcn@latest add @obsyde/crucibleNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Crucible } from '@/components/obsyde/ember/crucible/Crucible';
export function Example() {
return (
<Crucible />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/crucible/Crucible.tsxcomponentember/crucible/crucible.cssstylesember/crucible/CrucibleDemo.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/demo.tsxsharedember/viz-kit/demo.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
pointsDays | number | 7 |
referenceLevel line | boolean | true |
valueLabelsValue labels | boolean | false |
patternPattern | 'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch' | 'none' |
liveLive | boolean | false |
heightHeight | number | 220 |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
seedSeed | number | 6 |