Text Inertia

Cursor-driven words that kick aside and spring back.

Installation

npx shadcn@latest add @iconiq/text-inertia

File Structure

Usage

"use client";

import TextInertia from "@/components/ui/text-inertia";

export function KineticHeadline() {
  return (
    <TextInertia
      className="w-full max-w-4xl justify-start text-left text-lg leading-relaxed sm:text-xl"
      intensity={0.3}
      text="Crafting refined, pixel-perfect web experiences that balance design clarity with technical excellence. Every interaction should feel responsive, intentional, and calm enough to disappear into the work. Motion adds a quiet layer of feedback, helping people sense where they are and what just changed."
    />
  );
}

Props

Description

TextInertia

text

The phrase to render. The component splits it into words and keeps those word wrappers stable for hover-driven motion.

Type string·Default "Interfaces remember momentum"

intensity

Scales how strongly cursor velocity affects each hovered word. Values just above 1 feel more kinetic; lower values stay calmer.

Type number·Default 1

className

Merged onto the root word group for typography, color, alignment, and layout overrides.

Type string

wordClassName

Merged onto each animated word span when you need per-word styling without changing the root layout.

Type string

Pointer velocity behavior

Text Inertia uses Motion values and spring animations instead of a runtime DOM-splitting animation plugin.

Pointer movement over the root records x/y velocity, and entering a word maps that velocity to x, y, and rotation offsets.

Each word immediately settles back to x=0, y=0, and rotate=0 with a spring, which creates the inertial feel with only Motion.

The text is split with React during render, so there is no document query or third-party DOM splitting step.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.