RandomLetterSwap
1.0.0Horizontal marketing navigation whose link labels shuffle glyphs in a random vertical swap on hover.
npx jabkit add random-letter-swapComponent Data
- ID
- random-letter-swap
- Category
- marketing
- Version
- 1.0.0
- Added
- 2026-09-07
- Type
- block
- Keyboard nav
- Yes
- Reduced motion
- Yes
navbarmarketingnavigationheaderkinetictypographyhovertext
Dependencies
- clsx
- tailwind-merge
Examples
Default
<div className="min-h-80 bg-background text-foreground">
<RandomLetterSwap {...randomLetterSwapMocks.default} />
</div>Variants
<div className="min-h-80 bg-background text-foreground">
<RandomLetterSwap {...randomLetterSwapMocks.alternate} />
</div>