Astra

Warp Text

WebGL warp that bends and refracts the text around the pointer.

Warp Text, a Astra component

Use Warp Text in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/WarpText-TS-TW
How to install Astra components

Related components

  • Text Pressure

    Characters scale / warp interactively based on pointer pressure zone.

  • ASCII Text

    Waving ASCII text that tilts toward the pointer, scrambles on hover and ripples on click.

  • Circular Text

    Layouts characters around a circle with optional rotation animation.