AutoCover is a word-level hover interaction component that allows you to highlight a single word inside any text. It adds a smooth animated cover, subtle beams, particles, and decorative dots, without affecting layout, spacing, or typography.
The component is lightweight, responsive, and designed to work seamlessly with Framer’s typography system.
You provide a full text string
Specify one word to highlight
On hover, that word reveals an animated cover with beams and particles
The rest of the text remains completely untouched
If no highlight word is provided, AutoCover automatically highlights the last word in the text.This ensures the component always works out of the box without extra setup.
Inline single-word hover interaction
Smooth animated cover on hover
Animated beam effects across the cover
Floating particle effects on hover
Decorative corner dots in idle state
Preserved text flow and typography
Responsive by default across screen sizes
Text – Full text content
Highlight Word – Word to apply the effect (optional)
Text Align – Left, center, or right alignment
Highlight Text Color – Text color of the highlighted word
Cover Color – Default background cover color
Hover Cover Color – Cover color on hover
Beam Color – Beam animation color
Hover Beam Color – Beam color on hover
Count – Number of particles
Size – Particle size
Color – Particle color
Size – Corner dot size
Color – Dot color
Font family
Font size
Font weight
Line height
Letter spacing
AutoCover comes with carefully chosen defaults that work instantly:
If Highlight Word is empty → the last word is highlighted
Neutral cover and beam colors
Balanced particle density
Clean typography settings
You can use the component as-is or fully customize it to match your design system.
Drop AutoCover into your canvas
Add your text
(Optional) Set the word you want to highlight
Adjust colors or typography if needed
Hover the word to see the interaction
Hero headlines
Feature highlights
Product callouts
Landing pages
SaaS, startup, and modern websites
AutoCover gives you a focused, word-level interaction that enhances your content without overpowering it, clean, flexible, and built specifically for Framer.
AutoCover is a word-level hover interaction component that allows you to highlight a single word inside any text. It adds a smooth animated cover, subtle beams, particles, and decorative dots, without affecting layout, spacing, or typography.
The component is lightweight, responsive, and designed to work seamlessly with Framer’s typography system.
You provide a full text string
Specify one word to highlight
On hover, that word reveals an animated cover with beams and particles
The rest of the text remains completely untouched
If no highlight word is provided, AutoCover automatically highlights the last word in the text.This ensures the component always works out of the box without extra setup.
Inline single-word hover interaction
Smooth animated cover on hover
Animated beam effects across the cover
Floating particle effects on hover
Decorative corner dots in idle state
Preserved text flow and typography
Responsive by default across screen sizes
Text – Full text content
Highlight Word – Word to apply the effect (optional)
Text Align – Left, center, or right alignment
Highlight Text Color – Text color of the highlighted word
Cover Color – Default background cover color
Hover Cover Color – Cover color on hover
Beam Color – Beam animation color
Hover Beam Color – Beam color on hover
Count – Number of particles
Size – Particle size
Color – Particle color
Size – Corner dot size
Color – Dot color
Font family
Font size
Font weight
Line height
Letter spacing
AutoCover comes with carefully chosen defaults that work instantly:
If Highlight Word is empty → the last word is highlighted
Neutral cover and beam colors
Balanced particle density
Clean typography settings
You can use the component as-is or fully customize it to match your design system.
Drop AutoCover into your canvas
Add your text
(Optional) Set the word you want to highlight
Adjust colors or typography if needed
Hover the word to see the interaction
Hero headlines
Feature highlights
Product callouts
Landing pages
SaaS, startup, and modern websites
AutoCover gives you a focused, word-level interaction that enhances your content without overpowering it, clean, flexible, and built specifically for Framer.
