Shuffle Panel Menu
A side panel whose every label scrambles into place. Each character runs its own interval swapping in a random letter, and the interval is torn down on a per-character delay that grows by 150ms down the word, so the text resolves left to right rather than snapping back at once. The highlight plate behind a link is not a fixed width: each link is measured after mount and its plate sized to that width plus thirty, with the meta label parked just past it, so a long word and a short one both get a plate that fits. Items slide in from minus a hundred pixels on a fifty millisecond cascade, and hovering a row walks its meta text through a colour flip one character at a time.
npx shadcn@latest add @compronents/shuffle-panel-menuInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ShufflePanelItem[] | 6 BLANK entries | Label and meta per row. Plate widths are derived per item. |
| activeIndex | number | 4 | Which row keeps its plate when nothing is hovered. |
| subItems | ShufflePanelSubItem[] | 3 BLANK rows | Title and content pairs along the bottom, each with its own sweep on hover. |
activeColorcolorPlate colour on the item highlighted at rest.
sectionTitletextLabel in the left column.