---
title: "Hoverlight — Free Framer component · Best of Framer"
description: "Free Framer component · by Magdalena Wołowiec · Text. Hoverlight — Spotlight Text Reveal Text that responds to light."
canonical: "https://framer.elliotli.dev/component/hoverlight"
---

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

# Hoverlight

Text that responds to light.

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

![Hoverlight preview image 1](https://framer.elliotli.dev/og/component/hoverlight/3e4f04094bd9c420/1600x1200.jpg)

## Summary

Hoverlight — Spotlight Text Reveal Text that responds to light.

## Description

**Hoverlight — Spotlight Text Reveal**

Text that responds to light. Move your cursor and a soft spotlight reveals each line in its highlight style — halftone dots, stripes, grid, checker, gradient, or solid.

Every line is styled independently. Mix a halftone headline with a striped second line and a solid closer. Offset lines, stretch them, layer patterns — build editorial type compositions that feel printed, then bring them to life on hover.

**Features**

-   6 fill styles per line: solid, halftone, stripes, grid, checker, gradient
    
-   Independent styling for every line — colors, pattern size, gap, angle, opacity, offset, width scale
    
-   Smooth spotlight with adjustable size, softness, and follow speed
    
-   Rest state options: hidden or centered glow
    
-   Works on touch devices — the light follows your finger
    
-   Text wrapping with manual line break support
    
-   Full typography control: any font, tracking, line height, negative line gap for tight stacked type
    
-   Auto and fill sizing supported
    

**Usage**

Drop it in, type your text (one line per row), then style each line in the Line Styles array. Set your spotlight size and softness, pick a rest state, done. No code needed.

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

-   All · #1873

## Details

- **Author**: Magdalena Wołowiec
- **Published**: 2026-08-03
- **Updated**: 2026-10-22
- **Added**: 2026-08-03
- **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