# Magnetic

> Add subtle pointer attraction to a child element.

Source: https://www.honestui.com/docs/animated/magnetic

```tsx
import { ArrowUpRight } from "honestui/icons";

import { Magnetic } from "@/registry/default/animated/magnetic";

export function MagneticDemo() {
  return (
    <Magnetic strength={0.35}>
      <button className="flex size-28 items-center justify-center gap-2 rounded-full bg-foreground text-sm font-medium text-background shadow-lg">
        Open story <ArrowUpRight className="size-4" />
      </button>
    </Magnetic>
  );
}

```

## Overview [#overview]

Magnetic is a decorative wrapper that moves toward a fine pointer while hovered. Use it sparingly for prominent actions where the attraction supports focus without changing layout.

## Installation [#installation]

<CliBlock commands="[&#x22;magnetic&#x22;]" />

## Usage [#usage]

```tsx
import { Magnetic } from "@/components/animated/magnetic"

<Magnetic strength={0.3}><button>Open story</button></Magnetic>
```

## Accessibility [#accessibility]

The effect disables itself for touch input and reduced motion. The child remains responsible for semantics, focus styling, accessible naming, and keyboard behavior.

## API Reference [#api-reference]


  ### `children`

type: `ReactNode`

Element that follows the pointer.

  ### `strength`

type: `number` · default: `0.35`

Fraction of the pointer offset applied to the child.

  ### `className`

type: `string`

Class for the motion wrapper.