Text Shimmer

Shimmer effect on text. Easily adjust the duration and the spread of the shimmer effect.

Shimmer effect on text. Easily adjust the duration and the spread of the shimmer effect.

Examples

Generating code...

You can use the [--base-color] and [--base-gradient-color] CSS variables to customize the color of the shimmer effect.

Hi, how are you?

npx shadcn@latest add "https://components.dylanwlim.com/c/text-shimmer.json"

Prop	Type	Default	Description
children	string		The text content.
as	keyof JSX.IntrinsicElements	'p'	The HTML tag to render, defaults to paragraph.
className	string	undefined	Optional CSS class for styling the component.
duration	number	2	The duration of the shimmer effect.
spread	number	2	The spread of the shimmer effect.

Inspired by JohnPhamous for the idea of the shimmer effect that scales with the content length.

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.