Pop Text splits a heading into individual letters that swell in weight and size as the cursor passes over them. The hovered letter is boldest and the effect falls off across its neighbors, so the type ripples under the pointer like a physical surface. The font weight range is a prop. Built with React and Tailwind CSS. A small detail that makes hero headings, section titles, and portfolio names feel alive without adding visual noise.
Installation
Usage
import { PopText } from "@/components/ui/pop-text";<PopText text="Binge the whole season" />Examples
Custom Color
Pass color and hoverColor to pick your own palette, plus className for size and weight.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | Required | The string to render, split into letters. |
color | string | "#a5b4fc" | Base text color (any CSS color). |
hoverColor | string | "#e0e7ff" | Color of the hovered letter. |
className | string | "" | Extra classes on the wrapping heading element. |