Ember Dust
A density scatter without bins. Every point is a faint speck of light added onto a canvas, so overlaps accumulate luminance and the dense regions glow on their own, from ash through bone; only the densest region in view crosses into the accent.
$149 once · every Pro piece
On entry the field ignites and the hot core catches last. The pointer leaves an afterglow that cools over about a second while a panel reads the points nearby and the density, and a caret rides the density legend. Zoom with the wheel or a pinch, drag to pan, double-click or press 0 to reset: the view travels on springs and re-normalises so the hottest region in view is always the one that burns. Arrows pan and +/- zoom from the keyboard.
Install
npx shadcn@latest add @obsyde/dustNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { EmberDust } from '@/components/obsyde/ember/dust/EmberDust';
export function Example() {
return (
<EmberDust />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/dust/EmberDust.tsxcomponentember/dust/ember-dust.cssstylesember/dust/EmberDustDemo.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/state-messages.tsxsharedember/viz-kit/Legend.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
pointsPoints | number | 6000 |
speckSpeck size | number | 1.4 |
afterglowAfterglow | boolean | true |
zoomZoom | boolean | true |
legendLegend | 'gradient' | 'none' | 'gradient' |
tooltipTooltip | 'panel' | 'none' | 'panel' |
backgroundBackground | 'grid' | 'dots' | 'none' | 'grid' |
revealReveal | 'ignite' | 'none' | 'ignite' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
heightHeight | number | 340 |
seedSeed | number | 7 |