Loading
Text Hover Expand
An interactive text effect that expands short words or labels on hover for editorial links, playful navigation, and desktop brand moments.
Published On: February 10, 2026
Last Updated: August 17, 2026
GSAP
Overview
Text Hover Expand helps important words arrive with intent: hover expands the word without replacing it.
Best on short, high-emphasis text: headlines, launch lines, section openers, proof points. Avoid it on body copy, errors, legal text, or instructions, where legibility cannot be negotiable.
The risk in production is the text disappearing into the effect. Ship the final phrase as genuine HTML, keep per-character motion out of the accessibility tree, and serve the settled, legible text immediately when motion is reduced.
Install Command
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Usage Code
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Component Code
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Example Production Use Case
Use this as text-animation implementation guidance. Verify the shipped component API, splitting strategy, accessible text exposure, duplicated span handling, layout reservation, and reduced-motion behavior before relying on exact props, defaults, imports, or installation steps.
Best Used For
- Optional hover labels, nav accents, or editorial links where expansion adds exploration.
- Desktop moments that still keep the word readable without hover.
- Text Hover Expand makes a short phrase arrive with timing while keeping the final text readable and indexable.
Not For
Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight.
Performance Budget
Move only the words that carry weight, pre-reserve their space to avoid shift, and skip costly filters on large text blocks.
Accessibility and Mobile
Assistive technology should hear the phrase once, not character by character; visually split fragments are hidden from the accessibility tree with aria-hidden.
Common Mistakes
- Using Text Hover Expand on long body copy.
- Removing the readable text from the DOM.
- Letting split text cause layout shift.
Changelog
v1.0.1
Jul 30, 2026Added reduced-motion support and reworked the props API (textColor, hoverColor, duration), fixing the default hover color and centering the hover frame.
v1.0.0
Feb 10, 2026Initial release
Props
| Prop | Type | Default | Description |
|---|---|---|---|
bgColor | string | #0a0a0a | Section background color. |
textColor | string | #ffffff | Inactive text and description color. |
hoverColor | string | #ffffff | Active text and corner-frame color. |
duration | number | 0.35 | Hover frame animation duration in seconds. |
Frequently Asked Questions
When should I use Text Hover Expand?
Use it when an interactive heading needs hover to expand a word without replacing it.
How do I keep Text Hover Expand accessible?
Keep the resolved phrase in the DOM, exposed once; mark any duplicated animated fragments hidden from assistive technology.
Does Text Hover Expand affect SEO?
Not as long as the resolved text is genuine HTML and never trapped in canvas or client-only animation.
How do I avoid layout shift with Text Hover Expand?
Hold the finished text's footprint so wrapping does not jump between breakpoints.
What should reduced motion do for Text Hover Expand?
Land directly on the finished, readable text: no character scramble, no stagger, no loop.
Request a Custom Text Animation
Need a custom effect? Tell us what to create.
