proNew86 lines · framer-motion

Text Wave Letters

A ripple runs through every word. A full-width section where each letter of the headline bobs on its own phase offset of a shared sine wave, so the whole line ripples gently and continuously.

Use it for: A playful, friendly brand moment — a tagline or small statement that should feel alive without any scroll or hover trigger.
Themes: Light + dark
License: Commercial use

Live

Always a little restless

Lettersthatneversitflat

A shared wave runs through the whole line; each letter just carries a different slice of it.

tsx

"use client";

import * as React from "react";
import { useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width kinetic text section: every letter of the headline bobs on its
 * own phase of a shared sine wave, so the whole line ripples continuously.
 * Pure CSS, so it always looks alive, scrolled into view or not.
 */

export interface TextWaveLettersProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Every non-space character gets a negative animation-delay proportional to its index, so one shared CSS keyframe plays out as a travelling wave across the line.
→Runs on pure CSS animation (no JS per frame), so it costs nothing to keep looping indefinitely.
→amplitude and speed map straight to CSS custom properties consumed by the keyframe, so they update live without remounting.
→Word spacing is preserved with a fixed-width spacer so the wave doesn't visually collapse gaps between words.
→prefers-reduced-motion removes the per-letter animation and renders a flat, static line.

Accessibility

✓Letters are split for visual effect only; the heading's accessible text matches the plain headline string.
✓Dot-grid backdrop is aria-hidden.
✓Honours prefers-reduced-motion by disabling the wave.
✓Honours prefers-reduced-motion.