Shimmering Text
Smooth, light-sweeping shimmer animation for text.
Recommended alternative
The Shimmering Text component uses JS-based animations. For better performance, consider using the CSS-based shadcn/ui shimmer utilities instead.
Using an adapted version of your Shimmer here @iamncdai
Matt, Creator of ui.bklit.com
- Dependencies (1)
Use cases
- Thinking or generating status in an AI chat.
- Loading labels while content is on the way.
- Hint text such as slide to unlock.
Installation
pnpm dlx shadcn@latest add @ncdai/shimmering-text
Usage
import { ShimmeringText } from "@/components/shimmering-text"<ShimmeringText text="slide to unlock" />API reference
ShimmeringText
Prop
Type
Examples
Custom color
CSS Variables explanation:
--color: Base text color (the default/resting state of characters)--shimmering-color: Peak highlight color (the bright color characters transition to during the shimmer effect)
License and usage
- Free to use and modify in both personal and commercial projects.
- Attribution is appreciated but not required.
- Released under the MIT License.