Spotlight Text for Vue

Spotlight Text shines a round beam on the text under the pointer. While the pointer is over it, the rest of the line dims and the letters under the beam stay bright; the beam glides after the pointer, and when the pointer leaves, the light comes back up everywhere. At rest the text is fully lit, so it always reads.

Use it for a hero line or a tagline that invites the pointer to explore it, like a torch sweeping a dark wall. To show a different message under the pointer, use Xray Text; to thicken the letters near it instead, Variable Proximity; for a coloured light on an outline, Text Hover Effect. The beam is a CSS mask, a radial gradient centred on two registered CSS properties that each move of the pointer writes and a transition eases, with no animation library and no frame loop.

Installation

Usage

<script setup lang="ts">
import { SpotlightText } from "@/components/ui/spotlight-text";
</script>

<template>
  <h2>
    <SpotlightText text="Every detail deserves the spotlight" />
  </h2>
</template>

Demos

Edge

edge is the beam's edge: soft, the default, feathers it into the dark like a torch through fog; hard cuts a crisp disc, like a stage light.

Ambient

ambient is how much of the text outside the beam still shows while the pointer is over it, from 0, dark, to 1, no dimming; 0.15 by default. radius is the beam's radius in pixels: by default it's twice the text's size, so give body text a smaller one, and the beam reads a few words at a time.

Accessibility

Screen readers read the text once, from a visually hidden copy. The text is fully lit whenever the pointer isn't over it, so keyboard users, and anyone who never hovers, read it whole. On a touch screen, a touch lights the spot under the finger, and the light comes back up when it lifts. With reduced motion the beam follows the pointer without gliding; the dimming still fades.

FAQ

API Reference