Magnetic CTA

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add magnetic-cta

Usage$

MagneticCTA wraps a Button and applies a pointer-driven CSS translate offset whenever the cursor enters the magnetic radius. The button itself remains fully accessible — the attraction is a decorative layer applied to the wrapper.

Basic$

1import { MagneticCTA } from "@glinui/ui"
2
3export function MagneticCTADemo() {
4return <MagneticCTA variant="glass">Book a demo</MagneticCTA>
5}

Examples$

Custom Offset and Radius$

Increase maxOffset for a stronger pull and magnetRadius to activate the effect from further away.

import { MagneticCTA } from "@glinui/ui"
export function MagneticCTAStrongDemo() {
return (

1import { MagneticCTA } from "@glinui/ui"
2
3export function MagneticCTAStrongDemo() {
4return (
5  <div className="flex flex-wrap gap-6">
6    <MagneticCTA variant="liquid" maxOffset={14} magnetRadius={180}>
7      Strong pull
8    </MagneticCTA>
9    <MagneticCTA variant="glass" maxOffset={4} magnetRadius={80}>
10      Subtle pull
11    </MagneticCTA>
12  </div>
13)
14}

Container Class$

Use containerClassName to control the layout or dimensions of the magnetic wrapper element.

import { MagneticCTA } from "@glinui/ui"
export function MagneticCTAContainerDemo() {
return (

1import { MagneticCTA } from "@glinui/ui"
2
3export function MagneticCTAContainerDemo() {
4return (
5  <MagneticCTA
6    variant="liquid"
7    containerClassName="flex justify-center w-full"
8  >
9    Centered CTA
10  </MagneticCTA>
11)
12}

Accessibility$

• The magnetic cursor-follow effect is purely decorative and applied to an outer wrapper <div>.
• The inner <button> element retains all native semantics, focus management, and keyboard interactions.
• The focus ring is rendered on the button element and is not obscured by the transform offset.
• Screen readers receive no indication of the motion layer.

Reduced Motion$

When prefers-reduced-motion is active, the magnetic translation is reset to translate(0, 0) and the transition is removed entirely.

API Reference$

Source$

1import { MagneticCTA } from "@glinui/ui"