Components
Loading preview...
Shimmer wave effect on text. Easily adjust the wave effect, spread, duration, and more. You can use the [--base-color] and [--base-gradient-color] CSS variables to customize the color of the shimmer effect.
@motion-primitives
npx shadcn@latest add https://21st.dev/r/ibelick/text-shimmer-waveimport { TextShimmerWave } from '@/components/ui/text-shimmer-wave';
export function TextShimmerWaveColor() {
return (
<TextShimmerWave
className='[--base-color:#0D74CE] [--base-gradient-color:#5EB1EF]'
duration={1}
spread={1}
zDistance={1}
scaleDistance={1.1}
rotateYDistance={20}
>
Creating the perfect dish...
</TextShimmerWave>
);
}