Hyper Text

Scrambles through letters and resolves into the real text.

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/hyper-text.json

Adds components/velora/hyper-text.tsx.

Prop	Type	Default
`children*`	`string`	`—`
`frame` Milliseconds between scramble frames	`number`	`40`
`onHover` Scramble on hover instead of on mount	`boolean`	`false`
`className`	`string`	`—`

Reduced motion: No scramble runs, on mount or on hover; the text renders as-is.
Keyboard: Decorative — nothing to operate.
Screen readers: The real text is in an sr-only span and the scrambling visual copy is aria-hidden, so assistive tech never reads random letters.

Scrambles through letters and resolves into the real text.

pnpm dlx shadcn@latest add https://paulkeys.org/r/hyper-text.json

Adds components/velora/hyper-text.tsx.

Prop	Type	Default
`children*`	`string`	`—`
`frame` Milliseconds between scramble frames	`number`	`40`
`onHover` Scramble on hover instead of on mount	`boolean`	`false`
`className`	`string`	`—`

Reduced motion: No scramble runs, on mount or on hover; the text renders as-is.
Keyboard: Decorative — nothing to operate.
Screen readers: The real text is in an sr-only span and the scrambling visual copy is aria-hidden, so assistive tech never reads random letters.