Premium & Brand

Magnetic

Wrapper whose content is gently pulled toward the cursor.

Import

tsx

import { Magnetic } from "@cooud-ui/ui";

bash

npx cooud-ui add magnetic

Examples

Magnetic call-to-action

Wrap a hero CTA so it leans into the cursor before the pointer even lands. Pad the wrapper (`p-10`) to give the field room beyond the button — the attraction only acts where the wrapper is hovered. The pull is lerped straight onto the child's transform inside one rAF (zero re-renders) and the whole effect switches off under prefers-reduced-motion and on touch.

Installation

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cooud-ui add magnetic

tsx

<Magnetic className="p-10">
  <Button size="lg" className="rounded-full px-8 shadow-glow">
    Começar agora
    <ArrowRight className="size-4" aria-hidden="true" />
  </Button>
</Magnetic>

Icon row

A row of independently magnetic icon buttons — each has its own small field, so only the nearest icon drifts toward the pointer while its neighbours stay at rest. Keep `strength` low for chrome that should feel alive but not needy.

tsx

<div className="flex items-center gap-1">
  {[
    { label: "GitHub", icon: Github },
    { label: "LinkedIn", icon: Linkedin },
    { label: "Compartilhar", icon: Share2 },
  ].map(({ label, icon: Icon }) => (
    <Magnetic key={label} strength={0.25} radius={60} className="p-3">
      <Button variant="ghost" size="icon" aria-label={label} className="rounded-full">
        <Icon className="size-4" aria-hidden="true" />
      </Button>
    </Magnetic>
  ))}
</div>

Strength & radius

`strength` (0–1) scales how far the content chases the pointer; `radius` sets where the field dissolves back to zero — the falloff eases to nothing at the edge, so there is never a pop. Tune both per surface: subtle for dense UI, sticky for hero moments.

strength 0.15 · radius 80

strength 0.6 · radius 160

tsx

<div className="flex flex-wrap items-end justify-center gap-8">
  <div className="flex flex-col items-center gap-2">
    <Magnetic strength={0.15} radius={80} className="p-8">
      <Button variant="outline" className="rounded-full">Sutil</Button>
    </Magnetic>
    <span className="font-mono text-xs text-fg-tertiary tabular-nums">strength 0.15 · radius 80</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <Magnetic strength={0.6} radius={160} className="p-8">
      <Button variant="outline" className="rounded-full">Grudento</Button>
    </Magnetic>
    <span className="font-mono text-xs text-fg-tertiary tabular-nums">strength 0.6 · radius 160</span>
  </div>
</div>

API Reference

Generated from the component's exported types.

MagneticProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`strength`	`number`	`DEFAULT_STRENGTH`	How strongly the content is pulled toward the pointer, as a fraction of the pointer's offset from the wrapper's center. `0` is inert, `1` glues the content to the cursor. Values outside `0–1` are clamped.
`radius`	`number`	`DEFAULT_RADIUS`	Radius of the magnetic field in pixels, measured from the wrapper's center. The pull is strongest near the center and eases back to zero at this distance, so crossing the field's edge never pops. Pad the wrapper (e.g. `className="p-10"`) to give the field room beyond the content's own box — the attraction can only be felt where the wrapper is hovered.

Magnetic call-to-action

Installation

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cooud-ui add magnetic

tsx

<Magnetic className="p-10">
  <Button size="lg" className="rounded-full px-8 shadow-glow">
    Começar agora
    <ArrowRight className="size-4" aria-hidden="true" />
  </Button>
</Magnetic>

Icon row

tsx

<div className="flex items-center gap-1">
  {[
    { label: "GitHub", icon: Github },
    { label: "LinkedIn", icon: Linkedin },
    { label: "Compartilhar", icon: Share2 },
  ].map(({ label, icon: Icon }) => (
    <Magnetic key={label} strength={0.25} radius={60} className="p-3">
      <Button variant="ghost" size="icon" aria-label={label} className="rounded-full">
        <Icon className="size-4" aria-hidden="true" />
      </Button>
    </Magnetic>
  ))}
</div>

Strength & radius

strength 0.15 · radius 80

strength 0.6 · radius 160

tsx

<div className="flex flex-wrap items-end justify-center gap-8">
  <div className="flex flex-col items-center gap-2">
    <Magnetic strength={0.15} radius={80} className="p-8">
      <Button variant="outline" className="rounded-full">Sutil</Button>
    </Magnetic>
    <span className="font-mono text-xs text-fg-tertiary tabular-nums">strength 0.15 · radius 80</span>
  </div>
  <div className="flex flex-col items-center gap-2">
    <Magnetic strength={0.6} radius={160} className="p-8">
      <Button variant="outline" className="rounded-full">Grudento</Button>
    </Magnetic>
    <span className="font-mono text-xs text-fg-tertiary tabular-nums">strength 0.6 · radius 160</span>
  </div>
</div>