An outlined word that fills with color from the bottom up behind a rolling wave surface. Drive it with a value or let it loop.
Syncing 3 of 8 workspaces
npx shadcn@latest add https://hyperblur.dev/r/loader-fill-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-fill-text.tsx.
import { LoaderFillText } from "@/components/hyperblur/loader-fill-text"
<LoaderFillText text="Fernhill" value={64} size={48} />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Loading" | The word to fill. Also the accessible name. |
| value | number | Progress from 0 to 100. Leave it out to run a looping demo animation. | |
| size | number | 56 | Font size in pixels. |
| color | string | "#2f7bff" | Fill color. The top of the fill is lightened automatically. |
| duration | number | 3.6 | Seconds for one fill cycle in the looping mode. |