Skip to content
Premium & Brand

Magnetic

Wrapper whose content is gently pulled toward the cursor.

Import

tsx
import { Magnetic } from "@cronus-ui/ui";
bash
npx cronus-ui add magnetic

Examples

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard
default.cronus
app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component MagneticDefault layout:inline style:magnetic {
  label "Pull"
}

page "/audit/magnetic/default" type:custom {
  use MagneticDefault
}

API Reference

Generated from the component's exported types.

MagneticProps

Extends HTMLAttributes<HTMLDivElement>

Skip MagneticProps props table
PropTypeDefaultDescription
strength
numberDEFAULT_STRENGTHHow 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
numberDEFAULT_RADIUSRadius 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.
className
string—Additional class names merged onto the root.
children
ReactNode—Contents of the component.
id
string—DOM id of the root element.