Gloss Text for React

Gloss Text makes a word look like glossy plastic or hard candy: one bright colour with a wet sheen over the top of the letters, a darker belly, a lighter bottom edge and a soft glow underneath. A bright highlight sits near the top like a light above; move the pointer over the text and it follows, gliding across the letters, then drifts back when the pointer leaves.

Use it for a playful, tactile word: a consumer product, a sweet shop, a call to action, a retro hero. For neutral metal that shines by itself, use Chrome Text; for a rainbow finish, Foil Text; for a flat flowing gradient, Gradient Text. Every layer is a background clipped to the letters; the pointer writes the highlight's place into two registered CSS properties and a transition eases it there, with no animation library.

Installation

Usage

import { GlossText } from "@/components/ui/gloss-text";

<h2>
  <GlossText text="Sweet!" />
</h2>

Demos

Colors

baseColor is the plastic's colour, any CSS colour, including your theme's variables such as var(--primary); the sheen, the darker belly, the bottom edge and the glow are all mixed from it.

Intensity

intensity is how shiny it is: subtle for satin, medium by default, strong for wet lacquer.

Accessibility

The text stays real text, read by screen readers and selectable. Choose a baseColor that contrasts with the page: the sheen lightens the top of the letters, so a mid-tone reads best. In forced-colors mode, where backgrounds are removed, the text falls back to the system's text colour. The highlight only moves when the pointer does.

FAQ

API Reference