Distortion Text

Distortion Text is a high-performance, canvas-based text effect for Framer that adds a subtle fuzzy/shimmer look and ramps into glitch-style distortion on hover. Built with SSR-safe patterns and a resize-aware canvas, it renders cleanly in thumbnails and stays smooth at runtime—even on complex pages.

Perfect for headlines, hero tags, and attention-grabbing labels, ShimmerText offers four distortion modes (Horizontal, Vertical, Wave, Scatter) with intensity controls, alignment options, and full font customization via Framer’s Font control.

Why you’ll love it

• Cinematic feel, zero fuss: crisp base text that blooms into controlled distortion on hover.

• Production-ready: SSR-safe, no DOM access during static render, no per-frame React state churn.

• Responsive by default: smart canvas sizing with ResizeObserver; plays nicely in auto layout frames.

• Keyboard & pointer friendly: hover can be toggled; alignment and intensity are adjustable.

Key features

• Four distortion types: Horizontal, Vertical, Wave, Scatter

• Hover ramp: separate base vs. hover intensity for nuanced interaction

• Font control: size, weight, family through Framer’s native Font control

• Alignment: left / center / right

• Canvas fallback: shows clean text instantly while the effect initializes

• Lightweight: no heavy libraries; efficient RAF loop; single reusable temp canvas