DocsText Repel

Text Repel

A physics-based text animation where each letter reacts to cursor proximity. Letters are pushed away (or attracted) in real-time with spring dynamics, creating an interactive magnetic force-field effect.

Installation

pnpm dlx shadcn@latest add @componentry/text-repel

Dependencies: framer-motion clsx tailwind-merge

Usage

API Reference

PropTypeDefault
textstring

The text content to display.

—
radiusnumber

Cursor influence radius in pixels — letters within this distance react.

120
strengthnumber

Maximum displacement in pixels at closest proximity.

45
mode"repel" | "attract"

Whether letters are pushed away from or pulled toward the cursor.

"repel"
stiffnessnumber

Spring stiffness — higher values make letters snap back faster.

180
dampingnumber

Spring damping — lower values produce bouncier motion.

14
massnumber

Spring mass — higher values make letters feel heavier.

0.4
classNamestring

Additional CSS classes for the container.

—
letterClassNamestring

CSS classes applied to each individual letter.

—

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousText MorphNextVelocity Scroll
Move your cursor here
Move your cursor over the text
import { TextRepel } from "@/components/ui/text-repel"
 
<TextRepel
  text="Move your cursor here"
  className="text-4xl font-bold"
/>