Hoverlight

Show Preview
Hoverlight

About Hoverlight

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.