# Updated: Scrambled Text

By Steven Van · 2026-10-13

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](<https://creatorstoolbox.com/resources/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](<https://reactbits.dev/text-animations/scrambled-text>) 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.

![React Bits](<https://reactbits.dev/favicon.ico>)

React Bits

An open-source collection of 200+ animated, interactive React components and micro-interactions.

[View React Bits →](<https://creatorstoolbox.com/resources/react-bits>)

Sources

[Original source](<https://reactbits.dev/text-animations/scrambled-text>)

[Read Updated: Scrambled Text on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-scrambled-text>)

---
Canonical source: https://creatorstoolbox.com/blog/react-bits-updated-scrambled-text