Text Shimmer Wave
Shimmer wave effect on text. Perfect for loaders.
Category
TextReact
CSS
Tailwind
Manual
Create a file and paste the following code into it.
src/index-demo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { TextShimmerWave } from "@/components/ui/text-shimmer-wave";
export default function Demo() {
return (
<div className="flex min-h-dvh items-center justify-center">
<TextShimmerWave
className="[--base-color:#0D74CE] [--base-gradient-color:#5EB1EF]"
duration={1}
spread={1}
zDistance={1}
scaleDistance={1.1}
rotateYDistance={20}
>
Loading Resources...
</TextShimmerWave>
</div>
);
}
Update the import paths to match your project setup.