Split Text Hover

An interactive text component that creates smooth, staggered letter animations on hover. Perfect for hero titles, buttons, and navigation links where you want to add subtle high-end motion.

FEATURES

⚡ Smooth motion powered by Framer Motion.

♿ Full screen reader accessibility out of the box.

🧱 Flexible HTML tags from H1-H6 to Span for clean SEO.

🎨 Custom dual-color states for default and hover.

⏳ Fine control over animation duration and stagger delays.

↕ Adjustable letter travel distance and offsets.

🎯 Integrated icon slot with left and right placement.

📐 Built-in padding and layout spacing controls.

📱 Optimized pointer events for flicker-free mobile and desktop interactions.

OVERVIEW

Split Text Hover turns standard static typography into an engaging, interactive moment that elevates your site's overall polish.

Recreating custom text hover effects usually requires manual layout setup or complex custom code, which often leads to broken text wrapping or poor screen reader accessibility. This component solves that problem by packaging complex motion logic into a single element that respects your typography styles.

TECHNICAL DETAILS

• Lightweight & dependency-free

• Native Framer property controls

• Production ready

• Optimized rendering using React transitions

• Full accessibility and screen reader support

• Supports multiple instances on a single page

• Fully responsive canvas support