Code
1
Install with shadcn Beta
Terminal
npx shadcn@latest add "https://smoothui.dev/r/wave-text.json"
Or install the demo
Terminal
npx shadcn@latest add "https://smoothui.dev/r/wave-text-demo.json"
How to use
Demo.tsx
"use client"
import WaveText from "@/components/smoothui/ui/WaveText"
export default function WaveTextDemo() {
return (
<div className="relative max-w-md space-y-6">
<div>
<WaveText>Wave animation for your text!</WaveText>
<div>
<WaveText amplitude={16} className="text-brand text-lg font-bold">
Higher amplitude wave
</WaveText>
</div>
<div>
<WaveText speed={0.1} className="text-2xl font-semibold">
Faster wave speed
</WaveText>
</div>
</div>
</div>
)
}
Props
Prop | Type | Default |
---|---|---|
children | string | - |
amplitude? | number | 8 |
speed? | number | 0.3 |
className? | string | - |