Sensitive Text

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

Installation

npx shadcn@latest add @scrollxui/sensitive-text

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

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.