---
title: "Hover Text Effect — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Nabeel · Text. About This component creates a hover effect on individual characters."
canonical: "https://framer.elliotli.dev/component/hover-text-effect"
---

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

# Hover Text Effect

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

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

## Summary

About This component creates a hover effect on individual characters.

## Description

## About

This component creates a hover effect on individual characters. As users hover over text, it applies customizable transformations like font weight changes, scaling effects, and color transitions that gracefully taper off across nearby characters, creating a smooth, engaging animation.

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click [here](https://segmentui.com/uikit) to see the full library

## Instructions

1.  Copy and paste the component into your Framer project file.
    
2.  Customize all appearance settings through the property controls panel - adjust the text content, font properties, hover effects (weight, scale, color), taper distance, word spacing, and animation speed all in one step.
    
3.  Test your hover effects in preview mode to see how the interactive animation feels, then adjust the taper distance and transition duration to fine-tune the smoothness of the effect.
    

## How It Works

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

The property controls offer customization via the property controls:

-   Text: The content to display with the hover effect
    
-   Font: Complete typography controls including size, weight, family, and alignment
    
-   Default/Hover Colors: Colors for normal state and hover state
    
-   Hover Weight: Font weight when characters are hovered (100-900)
    
-   Hover Scale: Size increase percentage on hover (100-200%)
    
-   Taper Distance: How many characters around the hovered character are affected
    
-   Word Spacing: Controls spacing between words
    
-   Transition Duration: Animation speed in seconds
    

## Support

For any queries and help setting up the component, contact [hello@segmentui.com](mailto:hello@segmentui.com)

## Refund Policy

If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.

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

-   All · #6253

## Details

- **Author**: Nabeel
- **Price**: $4.00
- **Published**: 2025-09-26
- **Updated**: 2025-09-26
- **Added**: 2025-09-17
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing