Skip to content
MIZU.

WaveText

Kinetic text that answers the cursor — each letter lifts, scales and warms as you pass over it.

Live — this one is real

Text

Move across the word — each letter answers

Usage

import { WaveText } from "mizu-ui";

export function Title() {
  return (
    <WaveText
      text="Mizu"
      as="h1"
      radius={120}
      colorFrom="#f4f0e8"
      colorTo="#ff4d1c"
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect type/WaveText.tsx

Source is included in the npm package under src/type/WaveText.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
textstring—The word or phrase.
radiusnumber120Pointer influence radius in px.
colorFrom / colorTostring"var(--mizu-paper)" / "var(--mizu-accent)"Resting and active letter colors.
as"span" | "h1" | "h2" | "p" | "div""span"Semantic element to render.

Accessibility

Letters are aria-hidden; the container carries the full text as its accessible name.

Motion

Direct motion values with smoothstep falloff. Reduced motion removes pointer listeners and keeps letters at rest.

Works alongside

SpecimenSoftTypeGhostWord