Wave Text

Renders a text with a wave animation effect. Each character moves up and down in a staggered sequence. Use it to add a dynamic visual effect to text elements.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/wave-text

npx layro-cli add @educlopez/wave-text

npx layro-cli add @educlopez/wave-text

bunx layro-cli add @educlopez/wave-text

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import { motion, useReducedMotion } from "motion/react";
import type React from "react";

export interface WaveTextProps {
  amplitude?: number;
  children: string;
  className?: string;
  duration?: number;
  staggerDelay?: number;
}

const WaveText: React.FC<WaveTextProps> = ({
  children,
  amplitude = 8,