Magnetic Repel

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/magnetic-repel

Usage

import { MagneticText } from "@reactbytes/magnetic-repel";

export default function Example() {
  return (
    <MagneticText />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | ELASTICITY | The text to repel away from the cursor. | | maxDistance | number | 140 | The activation distance for the repulsion physics. | | repelForce | number | 30 | The multiplier for the strength of the magnetic push. | | hoverColor | color | #c084fc | Color to apply when the character is deflected. | | color | color | #FFFFFF | The base color of the text letters. | | uppercase | boolean | true | Whether to force the text to uppercase. | | textClassName | string | text-5xl font-bold | Tailwind classes for text styling. |

Presets

This component includes the following design presets:

• Default Bounce (default)
• Intense Push (intense)

Credits & Inspiration

Component Source

• React Bytes - Collection

Open Source Libraries

• React - UI Framework
• Tailwind CSS - Styling

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Magnetic Repel.