⚡ 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.
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.
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
⚡ 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.
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.
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
