Sensitive Text

Interactive text that subtly compresses or stretches characters based on cursor proximity.

HOVER ME

Installation

npx shadcn@latest add https://scrollxui.dev/registry/sensitive-text.json

Usage

import SensitiveText from "@/components/ui/sensitive-text";

 <SensitiveText
      variant="compress"
      maxStretch={0.3}
      sensitivity={0.6}
      easing={12}
      className="md:text-6xl text-4xl font-black text-black dark:text-white"
    >
      HOVER ME
    </SensitiveText>

Examples

Stretch

HOVER ME

API Reference

Sensitive Text

Interactive text that subtly compresses or stretches characters based on cursor proximity.

Props

Property	Type	Default	Description
`children`	string	`required`	Text content that is split into characters and reacts to cursor movement.
`className`	string	`"optional"`	Class applied to each individual character span.
`containerClassName`	string	`"optional"`	Class applied to the outer container wrapping the text.
`maxStretch`	number	`0.5`	Maximum vertical scale amount applied to characters near the cursor.
`sensitivity`	number	`0.5`	Controls how far horizontally the cursor influences nearby characters.
`easing`	number	`10`	Smoothing factor for cursor-follow animation (higher = slower response).
`verticalRange`	number	`100`	Extra vertical distance below the text where cursor interaction remains active.
`falloffPower`	number	`2`	Exponent used to control how sharply the effect falls off with distance.
`variant`	"compress" \| "stretch"	`"compress"`	Determines whether characters compress inward or stretch outward near the cursor.
`style`	CSSProperties	`"optional"`	Inline styles applied to the outer text container.