Updated: Warp Text
By Steven Van ·
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, 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 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.