gh-nathanonn-claude-skills-ai-elements-claude-skills-ai-elements/docs/components/shimmer.md

Shimmer

URL: /components/shimmer

---

title: Shimmer description: An animated text shimmer component for creating eye-catching loading states and progressive reveal effects. path: elements/components/shimmer

---

The Shimmer component provides an animated shimmer effect that sweeps across text, perfect for indicating loading states, progressive reveals, or drawing attention to dynamic content in AI applications.

Installation

Usage

import { Shimmer } from "@/components/ai-elements/shimmer";

<Shimmer>Loading your response...</Shimmer>

Features

• Smooth animated shimmer effect using CSS gradients and Framer Motion
• Customizable animation duration and spread
• Polymorphic component - render as any HTML element via the as prop
• Automatic spread calculation based on text length
• Theme-aware styling using CSS custom properties
• Infinite looping animation with linear easing
• TypeScript support with proper type definitions
• Memoized for optimal performance
• Responsive and accessible design
• Uses text-transparent with background-clip for crisp text rendering

Examples

Different Durations

Custom Elements

Props

<Shimmer />

<TypeTable type={{ children: { description: 'The text content to apply the shimmer effect to.', type: 'string', }, as: { description: 'The HTML element or React component to render.', type: 'ElementType', default: '"p"', }, className: { description: 'Additional CSS classes to apply to the component.', type: 'string', }, duration: { description: 'The duration of the shimmer animation in seconds.', type: 'number', default: '2', }, spread: { description: 'The spread multiplier for the shimmer gradient, multiplied by text length.', type: 'number', default: '2', }, }} />