Wavy Line

A wavy Line effect with staggered transitions, perfect for captivating Headlines, Quotes or dynamic displays.

Wavy Line
Text Effect
Hover Effect
"Wordsare,ofcourse,themostpowerfuldrugusedbymankind."
ā€” Rudyard Kipling
Note

To achieve the best effect, make sure to set an appropriate height in the className to accommodate the animated movement of the words.

Installation

1

Install dependencies

npm i clsx tailwind-merge
2

Add util file

Add this code to your util file.

import { ClassValue, clsx } from "clsx";
  import { twMerge } from "tailwind-merge";
  
  export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
  }
3

Copy the source code

components/ui/wavy-line.tsx
import { cn } from "@/lib/utils";

export const WavyLine = ({
    value,
    delay,
    className,
  }: {
    value: string;
    delay?: number;
    className?: string;
  }) => {
    delay = delay || 30;
    const paragraph = value.split(" ");
    return (
      <div
        className={cn(
          "group px-4 py-2 flex h-[2.7rem] text-lg font-semibold cursor-default overflow-hidden",
          className
        )}
      >
        <span className="inline-flex gap-1 overflow-hidden">
          {paragraph.map((word, index) => {
            return (
              <span
                key={index}
                data-char={word}
                style={{
                  transitionDelay: `calc(${delay}ms * ${index})`,
                }}
                className={`inline-block relative transition-transform duration-500 group-hover:translate-y-full before:content-[attr(data-char)] before:left-0 before:absolute before:-top-full`}
              >
                {word}
              </span>
            );
          })}
        </span>
      </div>
    );
  };