Updated: Scrambled Text
By Steven Van ·
Cursor-near letters can now rise, blur or swell, and a click triggers a scramble wave, in any typeface without layout shift.
Scrambled Text in React Bits now lets letters near the cursor rise, blur or swell like a lens, and a click sends a scramble wave through the text. The updated component works with any typeface without the layout jumping.
What the component does
Scrambled Text detects the cursor position and applies a distortion effect to the text. The new rise, blur and lens-style swell effects apply to letters near the cursor, and a click triggers the scramble wave.
Installing it
The component page offers JavaScript or TypeScript, with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/ScrambledText-TS-TW. The interactive preview, customization controls and source tabs need JavaScript enabled.