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.
import { 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> ); }
Part of Motion Primitives — browse the full library on 21st.dev.