Wavy Word

A wavy text effect with staggered transitions, perfect for captivating headlines or dynamic displays.

Wavy Word
Text Effect
Hover Effect
HOME
ABOUT
WORK
PORTFOLIO
CONTACT
Note

When using the WavyWord component, be sure to specify a height in the className to ensure the wavy effect displays correctly.

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-word.tsx
import { cn } from "@/lib/utils";

export const WavyWord = ({
  value,
  delay,
  className,
}: {
  value: string;
  delay?: number;
  className?: string;
}) => {
  delay = delay || 30;
  const characters = value.split("");
  return (
    <div
      className={cn(
        "group px-4 py-2 flex h-[5rem] text-5xl font-semibold cursor-default overflow-hidden",
        className
      )}
    >
      <span className="inline-flex overflow-hidden">
        {characters.map((char, index) => {
          return (
            <span
              key={index}
              data-char={char}
              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`}
            >
              {char}
            </span>
          );
        })}
      </span>
    </div>
  );
};