PRO

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.

Component

discover

page 001
20 ideas
10 notes
email now
check out
our office

connect

Discord

buy on

Opensea

us-en

2026

Install
npx shadcn@latest add https://ui.aryank.space/r/shuffle-panel-menu.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
itemsShufflePanelItem[]6 BLANK entriesLabel and meta per row. Plate widths are derived per item.
activeIndexnumber4Which row keeps its plate when nothing is hovered.
subItemsShufflePanelSubItem[]3 BLANK rowsTitle and content pairs along the bottom, each with its own sweep on hover.
Customize
activeColorcolor

Plate colour on the item highlighted at rest.

sectionTitletext

Label in the left column.

Dependencies
None.