# 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-vue` (Vue 3.5+ + 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/vue/src/components/magnetic

## Import

```vue
<script setup lang="ts">
import { Magnetic } from 'fancy-ui-vue';
</script>
```

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

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

Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in a Vue template; when one differs from the Svelte name, the Svelte name follows in parentheses. Snippets become named slots (`#default` is the default snippet), a prop the Vue port declares as a model is a `v-model:<name>` (except `ref`, exposed via `defineExpose({ ref })`: put a template ref on the component and read `.ref`) and callbacks are listeners (`onclick` is `@click`). Every component sets `inheritAttrs: false`: `class` is a declared prop, merged where the Svelte component applies it (not always the root element), and only when the props table below lists it; other attributes do not fall through unless the package README lists the component as forwarding native attributes. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/vue#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. |
| `class` | `string` | — | Additional CSS classes, merged onto the static outer wrapper. |
| `ref` | `HTMLDivElement \| null` | `null` | Bindable reference to the outer (static, untransformed) wrapper element. |

## Slots

| Slot | Description |
| --- | --- |
| `#default` (Svelte `children`) | The single wrapped element — a button, icon link, or card. |

## Example

No Vue 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.