Text Shimmer Wave

Installation

Usage

import { TextShimmerWave } from '@/components/odysseyui/text-shimmer-wave';

export default function Page() {
  return (
    <TextShimmerWave
      color="#a1a1aa"
      shimmerColor="#ffffff"
      duration={1}
      spread={1}
      className="text-4xl font-semibold"
    >
      Odyssey UI
    </TextShimmerWave>
  );
}

How It Works

• Each character is wrapped in an individual motion.span that animates on its own staggered delay.
• The wave is created by offsetting each character's animation start by (i * duration) / (text.length * spread).
• spread controls how many wave cycles fit across the full text at once — higher values compress the wave.
• zDistance, xDistance, and yDistance define the 3D translation peak at the top of each character's wave.
• scaleDistance briefly scales up the character at the shimmer peak.
• rotateYDistance tilts the character on its Y axis for a 3D flip feel.
• The color and shimmerColor animate between base and highlight at the same cadence.

API Reference

TextShimmerWave