Text Shimmer

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Sweep a theme-aware highlight through a short text label.

text-shimmer-demo

Overview

Text Shimmer is a lightweight CSS effect for short, temporary states such as generation or loading labels. It inherits theme colors and does not require Motion.

Installation

npx honestui@latest add text-shimmer

Usage

import { TextShimmer } from "@/components/animated/text-shimmer"

<TextShimmer>Generating your preview…</TextShimmer>

Accessibility

Use direct status text and pair ongoing work with aria-busy on the affected region when appropriate. The shimmer stops for reduced-motion preferences.

API Reference

PropTypeDefaultDescription
children*ReactNodeText content.
asElementType"span"Rendered element.
durationnumber2.5Sweep duration in seconds.
classNamestringText and layout classes.