Hover Text Effect
As users hover over text, it applies customizable transformations like font weight changes, scaling effects, and color transition
Make it with Workshop
Build your own component with AI
As users hover over text, it applies customizable transformations like font weight changes, scaling effects, and color transition
Make it with Workshop
Build your own component with AI
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 to see the full library
Copy and paste the component into your Framer project file.
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.
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.
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
For any queries and help setting up the component, contact hello@segmentui.com
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.
