Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

WarpText

Text gently undulates at rest and bends beneath a moving pointer lens.

AnimationsText@gaudi/design-system/animations/WarpTextView in StorybookSource

Hover magnifies a local area, adds a soft ripple and optional RGB refraction, then eases back on exit.

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { WarpText } from '@gaudi/design-system/animations/WarpText';

Usage

import { WarpText } from '@gaudi/design-system/animations/WarpText';
<div style={{ fontSize: 96, fontWeight: 700 }}>  <WarpText text="Bend the moment" /></div>

Examples

Playground

Storybook

Hover lens

Storybook

Multiline refraction

Storybook

API

10 props

Accessibility

The full text is exposed once. The canvas is decorative and does not change the accessible text. Paused and reduced-motion states are undistorted. Touch does not latch hover, and no extra keyboard stop is added for a decorative effect. Provide a pause control for continuous motion.

Notes

  • Typography and color come from the host. The text texture fits its container and refreshes when fonts or themes change.
  • WebGL unavailable or lost: the readable HTML text remains visible. Forced colors uses the HTML fallback.
  • Visual behavior inspired by Warp Text from React Bits. Independently implemented for Gaudi; no upstream source or assets are included.
PointerA pointer effect scoped to its container, with direct, spring and lazy tracking, hover feedback, and native input fallbacks.CipherRevealScrambled characters resolve progressively into readable text on view, hover or focus.GlyphInspectorInspect animated letter outlines with a gliding frame, floating square particles, measurement guides and a live readout. Hover to take control; drag and release a letter to return it to its slot.PhraseCycleA sequence of phrases rotates vertically in a stable space, without moving the surrounding line.TypewriterTypes, pauses and deletes a sequence of phrases while reserving space for the longest one.WordSpotlightA moving set of corner marks brings one word into focus while the surrounding words soften.