Text Distortion
NewPremiumCanvas-based text that warps and distorts on hover with horizontal slice displacement.
effectstextdistortioncanvashover
Installation
Terminalbash
npx motioncraft add text-distortionUsage
text-distortion.tsxtsx
import { TextDistortion } from "@/components/effects/text-distortion";
<TextDistortion text="DISTORT ME" intensity={30} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | — | Text to display |
| intensity | number | 20 | Distortion intensity in pixels |
| speed | number | 0.02 | Animation speed |
| className | string | — | Additional CSS classes |
Related Components
Magnetic Button
Button that magnetically attracts toward the cursor on hover.
Reveal on Hover
NewText that reveals an image on hover, following the cursor position with spring animations.
Animated Input
Input field with animated label, focus ring, and validation states.
Audio Reactive
NewElements that pulse and react to audio input from the microphone. Includes visualizer bars and scale effects.