43 lines
1012 B
TypeScript
43 lines
1012 B
TypeScript
interface AnimatedWaveProps {
|
|
text: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function AnimatedWave({ text, className = "" }: AnimatedWaveProps) {
|
|
const characters = text.split("");
|
|
|
|
return (
|
|
<>
|
|
<style>{`
|
|
@keyframes wave {
|
|
0%, 100% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-4px);
|
|
}
|
|
}
|
|
.animate-wave {
|
|
animation-name: wave;
|
|
}
|
|
`}</style>
|
|
<span className={`inline-flex ${className}`}>
|
|
{characters.map((char, index) => (
|
|
<span
|
|
key={index}
|
|
className="animate-wave inline-block"
|
|
style={{
|
|
animationDelay: `${index * 0.1}s`,
|
|
animationDuration: "1.3s",
|
|
animationIterationCount: "infinite",
|
|
animationTimingFunction: "ease-in-out",
|
|
}}
|
|
>
|
|
{char === " " ? "\u00A0" : char}
|
|
</span>
|
|
))}
|
|
</span>
|
|
</>
|
|
);
|
|
}
|