Shimmer Button
A pill CTA whose surface catches a sweeping band of light.
Shimmer Button is the call to action for hero sections: a band of light sweeps across the ink surface on a slow loop and pauses while hovered, so the button stays lively without becoming restless. Presses ping in the signal color.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/shimmer-button.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/shimmer-button.
Builds on: motion
Usage
import { ShimmerButton } from "@/components/ui/shimmer-button";
<ShimmerButton>Start building</ShimmerButton>Motion
A repeating GSAP timeline sweeps the light band; hovering pauses it.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
ShimmerButton
Extends native <button> props.
| Prop | Type | Default | Description |
|---|---|---|---|
| interval | number | 2.6 | Seconds between sweeps. |
| asChild | boolean | false | Render a link. |
Accessibility
- Native button semantics and a visible focus ring.
- With reduced motion or --cl-motion: 0 the effect stays still and the content remains fully usable.
FAQ
Also searched as: shimmer button · animated button react · shiny button · cta button animation · magic ui shimmer button alternative