Waffle
A hundred small cells showing a share of 100.
$149 once · every Pro piece
Cells fill in reading order with a fast white-hot flash that cools through the accent to bone, and a new value fills or empties only the difference. Split into two or three parts it reads in grey steps; point at a part in the grid, the legend or with the arrow keys and it lifts to bone while the rest recede. Options on the viz-kit: squircle, dot or honeycomb cells, a 20 × 5 strip, a hatched remainder, a legend that hides a part (its cells empty out) and locks on hold, a tooltip panel, an opt-in accent hover, and loading and empty states.
Install
npx shadcn@latest add @obsyde/waffleNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Waffle } from '@/components/obsyde/ember/waffle/Waffle';
export function Example() {
return (
<Waffle />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/waffle/Waffle.tsxcomponentember/waffle/waffle.cssstylesember/waffle/WaffleDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/Tooltip.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/scale.tssharedember/viz-kit/motion.tssharedember/viz-kit/chart.tsxsharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/size.tssharedember/viz-kit/Legend.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
valueValue | number | 64 |
categoriesParts | number | 1 |
changingChanging | boolean | false |
shapeShape | 'square' | 'squircle' | 'dot' | 'hex' | 'square' |
layoutLayout | 'square' | 'strip' | 'square' |
emptyEmpty cells | 'faint' | 'hatch' | 'faint' |
hoverHover | 'soft' | 'hot' | 'soft' |
tooltipTooltip | 'none' | 'panel' | 'none' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
cellCell size | number | 22 |
gapGap | number | 4 |