# Updated: Warp Text

By Steven Van · 2026-10-13

Warp Text in React Bits gains a click shockwave, a lens that keeps moving after the cursor leaves, and smoother color fringing in light and dark mode.

Warp Text, the WebGL text effect in [React Bits](<https://creatorstoolbox.com/resources/react-bits>), now reacts to clicks. A click sends a shockwave through the text, and the lens can keep wandering across the words after the cursor leaves.

## Click shockwave and idle lens

Clicking triggers a shockwave that travels through the text. When the cursor moves away, the lens no longer stops: it can keep drifting across the words on its own.

## Glass-like color fringing

The lens now adds glass-like color fringing inside it. The [update](<https://reactbits.dev/text-animations/warp-text>) also smooths the fringe edges in both light and dark mode.

## Installing

The component is available in JavaScript or TypeScript, with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/WarpText-TS-TW.

![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/warp-text>)

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

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