Text Shimmer

A text component with an animated shimmer effect, perfect for indicating AI thinking or loading states

Installation

Copy and paste the following code into your project.

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/p/text-shimmer.json

Processing your request...

Analyzing data with custom styling

Customize the animation with duration (in seconds) and spread (5-45) props.

Fast shimmer with wide spread Slow shimmer with narrow spread

Prop	Type	Default	Description
`children`	`Snippet`	-	Content to display with shimmer effect
`as`	`keyof HTMLElementTagNameMap`	`"span"`	HTML element to render as
`duration`	`number`	`4`	Animation duration in seconds
`spread`	`number`	`20`	Spread of shimmer highlight (5-45)
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLElement>`	-	All other element props are supported