Ripple Text — React Text Effect

Type you can touch: a click (or tap) drops a ripple that travels outward through the letters, and a resting pointer leaves a soft dimple.

View source

Starting live preview

Usage

import { RippleText } from "@/components/RippleText";

export function Headline() {
  return <h1><RippleText text="Drop a stone." amplitude={15}
    {...{
      text: "Drop a stone.",
      amplitude: 15,
      speed: 0.9
    }}
  /></h1>;
}

Implementation notes & API

Accepts text, amplitude, speed, width, disabled, className and style. The words remain one accessible label; reduced-motion readers get still, plain text. No GPU dependency.

Property	Type	Notes / default
`children`	`ReactNode`	Your own content; the default is a demonstration
`disabled`	`boolean`	false; motion also respects system preferences
`className / style`	`string / CSSProperties`	Applied to the outer container

View source on GitHubFree for commercial projects · MIT