Gradient Wave Text

Renders animated gradient text with a wave effect. It moves smoothly and can be paused or delayed. Use it for eye-catching text in modern UIs.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/gradient-wave-text

npx layro-cli add @xxtomm/gradient-wave-text

npx layro-cli add @xxtomm/gradient-wave-text

bunx layro-cli add @xxtomm/gradient-wave-text

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

Code

Demo

"use client";

import { useRef, useEffect, useMemo, useCallback, useState } from "react";
import { cn } from "@/lib/utils";

type Align = "left" | "center" | "right";

const defaultColors = ["#8d6869", "#5a8ea6", "#b9c96e", "#c7c571", "#cb706f", "#7e5e5f"];

interface GradientWaveTextProps {
  children?: React.ReactNode;
  align?: Align;
  className?: string;