Fuzzy Text

Overview

FuzzyText renders text on a Canvas element with per-scanline displacement, creating a fuzzy/distorted visual effect. Supports hover intensification, click bursts, auto-glitch mode, gradient fills, and touch interaction.

Features

• Canvas 2D rendering — pixel-level distortion control
• Hover interaction — intensifies fuzz on mouse over text
• Glitch mode — periodic automatic glitch bursts
• Click effect — burst distortion on click
• Gradient support — multi-color gradient text fill
• Direction control — horizontal, vertical, or both

Usage

import FuzzyText from '@/components/fuzzy-text'

<FuzzyText
  fontSize="clamp(2rem, 8vw, 6rem)"
  fontWeight={900}
  color="#fff"
  baseIntensity={0.18}
  hoverIntensity={0.5}
>
  FUZZY
</FuzzyText>