# Magnetic

> A generic wrapper that pulls its child toward the pointer once it enters an activation field larger than the child's own box, and springs back to rest the instant the pointer leaves — a fine-pointer affordance with no touch or keyboard equivalent.

- Package: `fancy-ui-react` (React 18/19 + Tailwind CSS v4)
- Category: Effects
- Tags: pointer, hover, cursor, magnetic, micro-interaction
- Types: `MagneticProps`
- Docs: https://fancy-ui.rama.app/docs/components/magnetic
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/react/src/components/magnetic

## Import

```tsx
import { Magnetic } from 'fancy-ui-react';
```

Setup (once per project): `npm install fancy-ui-react`, then put these lines in your main CSS file (the stylesheet import goes right after `@import "tailwindcss";`):

```css
@import "tailwindcss";
@import "fancy-ui-react/tailwind.css";
```

and import the component styles once in the app entry: `import "fancy-ui-react/styles.css";`. Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in React; when one differs from the Svelte name, the Svelte name follows in parentheses. `class` becomes `className`, a callback takes the name the React port declares (`onclick` becomes `onClick`), snippets become `ReactNode` props (render functions when they take arguments) and the default snippet is `children`. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/react#divergences-from-the-svelte-api

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `strength` | `number` | `0.35` | Pull multiplier applied to the pointer's offset from the child's centre. |
| `radius` | `number` | `40` | Pixels the activation field extends beyond the outer element's own box, on every side. Also sizes the (transparent by default) `::before` halo. |
| `max` | `number` | `24` | Per-axis clamp (px) on the translated offset — a hard travel cap independent of element geometry, radius, or strength. |
| `disabled` | `boolean` | `false` | Disables the pull: no listeners are attached at all, and both translation vars are pinned at `0px`. Never touches the wrapped child's own `disabled` state. |
| `className` (Svelte `class`) | `string` | — | Additional CSS classes, merged onto the static outer wrapper. |
| `ref` | `HTMLDivElement \| null` | `null` | Bindable reference to the outer (static, untransformed) wrapper element. |

## Node props

| Prop | Description |
| --- | --- |
| `children` | The single wrapped element — a button, icon link, or card. |

## Example

No React example is published for this component yet: start from the import above and the props table. The full examples are Svelte-only, on https://fancy-ui.rama.app/docs/components/magnetic.md.