Cursor Repel Text
Interactive headline where each glyph scatters away from the pointer and springs back, with coupled rotation and scale. Dependency-free vanilla rAF physics: every letter is a point, proximity becomes a repulsion force via a quadratic falloff, and a single frame loop eases each letter toward its target (transforms only). Ships with faked named 'multiplayer' cursors that loop on sine paths and drive the same repulsion. Configurable radius, ease, strength, rotation, scale, and falloff (linear/quadratic/inverse/gaussian). Respects prefers-reduced-motion and exposes the text to screen readers via aria-label.
Preview
Motionet intentions
I'm a web designer who blends design & engineering to build sites that feel premium, tell your story, and elevate your brand beyond what's thought possible.
Source
'use client';
import CursorRepelText from './index.jsx';
export default function CursorRepelTextDemo() {
return (
<CursorRepelText
lines={['Motion', 'et intentions']}
subtitle="I'm a web designer who blends design & engineering to build sites that feel premium, tell your story, and elevate your brand beyond what's thought possible."
cursors={[{ name: 'Designer', color: '#2563eb' }]}
you={{ name: 'Dev', color: '#228b22' }}
strength={0.8}
maxAngle={10}
scale={0.06}
/>
);
}
Related Components
