---
title: "Text Hover Effects — Free Framer component · Best of Framer"
description: "Free Framer component · by Ali Themes · Text. Per-character hover animations"
canonical: "https://framer.elliotli.dev/component/text-hover-effects"
---

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

# Text Hover Effects

Per-character hover animations

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

![Text Hover Effects preview image 1](https://framer.elliotli.dev/og/component/text-hover-effects/dc733151a95feb7a/1600x1200.jpg)

## Summary

Per-character hover animations

## Description

### 5 HOVER PRESETS

-   Bounce — letters spring upward with physics-based overshoot (default)
    
-   Scale — classic scaleY stretch with neighbor wave
    
-   Jelly — vertical stretch + horizontal squish for an elastic rubber feel
    
-   Tilt — italic skewX lean that flows to adjacent letters
    
-   Magnetic — neighboring letters are pulled toward the hovered character
    

### COLOR RIPPLE

Toggle on to make the hovered letter switch to a custom accent color. Works as an optional layer on top of any preset.

### FULLY CUSTOMIZABLE

-   Ripple Width — control how many neighbors react (1–5 letters)
    
-   Center Scale & Neighbor Scale — fine-tune the intensity falloff
    
-   Duration & easing — or switch to spring physics with Bounce
    
-   Full font control: family, weight, size, spacing, case
    
-   HTML Tag: H1–H6, P, DIV, SPAN for correct semantics
    

### PERFORMANCE

Optimized for speed, these animations run directly on elements without heavy re-renders. Only the active characters are updated, ensuring a buttery-smooth experience that won't slow down your website.

### HOW TO USE

1.  Drop the component onto your canvas
    
2.  Type your heading text in the Content field
    
3.  Pick an Effect preset
    
4.  Adjust scale, ripple width, and duration to taste
    
5.  Optionally enable Color Ripple and set an accent color
    

OPTIONS

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-yxgqbtpd-DiPdWW9EMKglGgklDv6LbpoQfR0E1W)

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

-   All · #1970

## Details

- **Author**: Ali Themes
- **Published**: 2026-04-01
- **Updated**: 2026-04-01
- **Added**: 2026-03-16
- **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