Loading…

Shimmer Text

beta

Text with a light band sweeping across it on a loop, or a blur-and-glide entrance as it arrives.

Effects & motion
1 file
1 npm package
Accessibility notes

Playground

Shipping soon

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add shimmer-text

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { ShimmerText } from "@/components/ui/shimmer-text";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Once
Colours
On View

API

Generated from the component's own types, so a prop cannot appear here without existing.

<ShimmerText>

Prop	Type	Default
`as` The element to render.	`ShimmerTextElement`	`"span"`
`baseColor` Shine only: the text colour outside the band. Any CSS colour; use a token.	`string`	`"var(--color-muted-foreground)"`
`delay` Delay before the first pass, in milliseconds.	`number`	`0`
`duration` One pass, in milliseconds. Defaults to 2500 for shine, 850 for sweep.	`number`	—
`ref`	`Ref<HTMLElement>`	—
`repeat` `loop` (shine's default) repeats forever; `once` plays a single pass. Sweep always plays once.	`"loop" \| "once"`	`"loop"`
`repeatDelay` Shine only: the pause between sweeps, in milliseconds.	`number`	`600`
`shineColor` Shine only: the colour of the band. Any CSS colour; use a token.	`string`	`"var(--color-foreground)"`
`triggerOnView` Wait until the text scrolls into view before playing.	`boolean`	`false`
`variant`	`"shine" \| "sweep"`	`"shine"`

Plus every attribute of <span> except ref.

Accessibility

The text is never split, so it reads as one run and copies cleanly. The effect is decoration: under reduced motion the shine becomes plain text in the base colour and the entrance settles at once to its visible end state. In forced-colours mode the clipped gradient is dropped so the text takes the system colour. Pick base and shine colours that both meet contrast against the background.

Quality

Measured from the source and its tests at build time.

All scores

7/7

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

as

The element to render.

ShimmerTextElement

"span"

baseColor

Shine only: the text colour outside the band. Any CSS colour; use a token.

string

"var(--color-muted-foreground)"

delay

Delay before the first pass, in milliseconds.

number

0

duration

One pass, in milliseconds. Defaults to 2500 for shine, 850 for sweep.

number

—

ref

Ref<HTMLElement>

—

repeat

loop (shine's default) repeats forever; once plays a single pass. Sweep always plays once.

"loop" | "once"

"loop"

repeatDelay

Shine only: the pause between sweeps, in milliseconds.

number

600

shineColor

Shine only: the colour of the band. Any CSS colour; use a token.

string

"var(--color-foreground)"

triggerOnView

Wait until the text scrolls into view before playing.

boolean

false

variant

"shine" | "sweep"

"shine"