---
title: "AutoCover — Free Framer component · Best of Framer"
description: "Free Framer component · by Kmax Design · Text. AutoCover is a word-level hover interaction component that allows you to highlight a single word inside any text."
canonical: "https://framer.elliotli.dev/component/autocover"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/AutoCover

# AutoCover

Highlight a word on hover

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

![AutoCover preview image 1](https://framer.elliotli.dev/og/component/autocover/a73eee62bdf5436c/1600x1200.jpg)

## Summary

AutoCover is a word-level hover interaction component that allows you to highlight a single word inside any text.

## Description

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.

## How it works

-   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
    

### Smart default behavior

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.

## What you get

-   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
    

## Customizable Properties

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

### Content & Layout

-   **Text** – Full text content
    
-   **Highlight Word** – Word to apply the effect (optional)
    
-   **Text Align** – Left, center, or right alignment
    

### Colors

-   **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
    

### Particles

-   **Count** – Number of particles
    
-   **Size** – Particle size
    
-   **Color** – Particle color
    

### Dots

-   **Size** – Corner dot size
    
-   **Color** – Dot color
    

### Typography

-   **Font family**
    
-   **Font size**
    
-   **Font weight**
    
-   **Line height**
    
-   **Letter spacing**
    

## Default Values

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.

## How to use

1.  Drop **AutoCover** into your canvas
    
2.  Add your text
    
3.  (Optional) Set the word you want to highlight
    
4.  Adjust colors or typography if needed
    
5.  Hover the word to see the interaction
    

## Best used for

-   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.

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

-   All · #2086

## Details

- **Author**: Kmax Design
- **Published**: 2026-01-31
- **Updated**: 2026-02-18
- **Added**: 2026-01-22
- **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