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 https://ui.aryank.space/r/shuffle-panel-menu.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| 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.