Sunburst

Point at a segment and every arc on the path from the centre out to it grows outward a few pixels, cumulatively, while the segment heats to the accent and unrelated branches step back to a quarter (or keep the quieter heat mode, where the path warms in place). Click a segment with parts and it becomes the centre: the angular window and the ring depth run on springs, so every arc morphs into place; click the centre or a breadcrumb pill to go back up. The centre rolls on per-digit mass and reads as a sentence (“24% of Beta · 3 parts”). Options: a legend of the current level that follows the drill and highlights both ways, a hatch per top-level branch, loading and empty states. Arrow keys walk the rings, Enter zooms in, Backspace zooms out.

npx shadcn@latest add @obsyde/sunburst

import { Sunburst } from '@/components/obsyde/ember/sunburst/Sunburst';

export function Example() {
  return (
    <Sunburst />
  );
}