---
title: "Split Text Hover — Free Framer component · Best of Framer"
description: "Free Framer component · by Igor Reif · Text. Split Text Hover turns standard static typography into an engaging, interactive moment that elevates your site's overall polish."
canonical: "https://framer.elliotli.dev/component/split-text-hover"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Split Text Hover

# Split Text Hover

Interactive staggered hover effect

[View on Framer](https://framer.com/marketplace/components/split-text-hover/?via=elliot-li)

![Split Text Hover preview image 1](https://framer.elliotli.dev/og/component/split-text-hover/2b00fa40e9738a56/1600x1200.jpg)

## Summary

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

## Description

## 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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #2123

## Details

- **Author**: Igor Reif
- **Published**: 2026-07-24
- **Updated**: 2026-07-28
- **Added**: 2026-07-24
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos