Scramble Text

Text that decodes from random glyphs, left to right, on mount, when it scrolls into view or on hover. The layout never shifts.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/scramble-text

First time? Add the @portfolio-kit registry to components.json

components.json

{
  "registries": {
    "@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
  }
}

trigger="hover" replays the decode on pointer enter or keyboard focus. The link width stays fixed, so it suits mono nav links.

Stagger delay across a few mono lines for a boot-log intro, here on a panel forced to the dark palette.