# 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
```bash
npx shadcn@latest add @componentry/text-repel
```
**Dependencies:** framer-motion clsx tailwind-merge
## Source Code
```tsx
"use client";
import { cn } from "@/lib/utils";
import {
motion,
useMotionValue,
useSpring,
useTransform,
type MotionValue,
} from "framer-motion";
import { useEffect, useRef } from "react";
interface TextRepelProps {
/** The text to display */
text: string;
/** Additional CSS classes for the container */
className?: string;
/** CSS classes applied to each letter */
letterClassName?: string;
/** Cursor influence radius in pixels */
radius?: number;
/** Maximum displacement strength in pixels */
strength?: number;
/** Interaction mode — push letters away or pull them toward the cursor */
mode?: "repel" | "attract";
/** Spring stiffness — higher = snappier return */
stiffness?: number;
/** Spring damping — lower = bouncier return */
damping?: number;
/** Spring mass — higher = heavier feel */
mass?: number;
}
function RepelLetter({
letter,
mouseX,
mouseY,
radius,
strength,
mode,
stiffness,
damping,
mass,
className,
}: {
letter: string;
mouseX: MotionValueK Black Design Portfolio — Sisters of the Valley# 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
```bash
npx shadcn@latest add @componentry/text-repel
```
**Dependencies:** framer-motion clsx tailwind-merge
## Source Code
```tsx
"use client";
import { cn } from "@/lib/utils";
import {
motion,
useMotionValue,
useSpring,
useTransform,
type MotionValue,
} from "framer-motion";
import { useEffect, useRef } from "react";
interface TextRepelProps {
/** The text to display */
text: string;
/** Additional CSS classes for the container */
className?: string;
/** CSS classes applied to each letter */
letterClassName?: string;
/** Cursor influence radius in pixels */
radius?: number;
/** Maximum displacement strength in pixels */
strength?: number;
/** Interaction mode — push letters away or pull them toward the cursor */
mode?: "repel" | "attract";
/** Spring stiffness — higher = snappier return */
stiffness?: number;
/** Spring damping — lower = bouncier return */
damping?: number;
/** Spring mass — higher = heavier feel */
mass?: number;
}
function RepelLetter({
letter,
mouseX,
mouseY,
radius,
strength,
mode,
stiffness,
damping,
mass,
className,
}: {
letter: string;
mouseX: MotionValue# 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
```bash
npx shadcn@latest add @componentry/text-repel
```
**Dependencies:** framer-motion clsx tailwind-merge
## Source Code
```tsx
"use client";
import { cn } from "@/lib/utils";
import {
motion,
useMotionValue,
useSpring,
useTransform,
type MotionValue,
} from "framer-motion";
import { useEffect, useRef } from "react";
interface TextRepelProps {
/** The text to display */
text: string;
/** Additional CSS classes for the container */
className?: string;
/** CSS classes applied to each letter */
letterClassName?: string;
/** Cursor influence radius in pixels */
radius?: number;
/** Maximum displacement strength in pixels */
strength?: number;
/** Interaction mode — push letters away or pull them toward the cursor */
mode?: "repel" | "attract";
/** Spring stiffness — higher = snappier return */
stiffness?: number;
/** Spring damping — lower = bouncier return */
damping?: number;
/** Spring mass — higher = heavier feel */
mass?: number;
}
function RepelLetter({
letter,
mouseX,
mouseY,
radius,
strength,
mode,
stiffness,
damping,
mass,
className,
}: {
letter: string;
mouseX: MotionValue