Components/Text Animations
Shimmer Text Flip
A sequence of texts cycles through fliping transition with shimmer glow effect.
flipshimmerblur
Preview
Installation
npx shadcn@latest add @grootstudio/shimmer-text-flipUsage
1
Import the component
2
Use like this
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | React.ReactNode[] | undefined | Array of children to cycle through. | |
| as | MotionElement | motion.p | Motion element to render. | |
| glowColor | string | text-muted-foreground | Color of the shimmer glow effect. | |
| interval | number | 2 | Time in seconds between each flip. | |
| play | boolean | true | Controls whether the flip animation runs. | |
| className | string | - | Additional Tailwind classes for custom styling. | |
| variants | Variants | undefined | Motion variants for enter/exit animations. | |
| transition | Transition | undefined | Transition configuration for the flip animation. | |
| onIndexChange | () => void | undefined | Callback function called with the new index after each flip. |
Dependencies
motion
shadcn