Kinetic Text — React Text Effect

Letters lift into a soft wave as your cursor passes through.

Starting live preview

Usage

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

export function Headline() {
  return <h1><KineticText text="Feel something." strength={32}
    {...{
      text: "Feel something.",
      strength: 32,
      spread: 0.28
    }}
  /></h1>;
}

Implementation notes & API

Accepts text, strength, spread, disabled, className and style. Wrap in a heading for heading semantics. Text has one accessible label; individual letters are hidden from screen readers. Respects reduced motion; no GPU dependency.

Property	Type	Notes / default
`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