Magnetic Field

Installation

pnpm dlx shadcn@latest add @cleverui/magnetic-field

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { MagneticField } from '@/components/blocks/magnetic-field'

Exampletsx

import { MagneticField } from '@/components/blocks/magnetic-field'

export default function MagneticFieldDemo() {
  return (
    <MagneticField
      eyebrow="Lab · Coupled bodies"
      heading="Every link is a body in the field."
      items={[
        { label: 'Design tokens', href: '#tokens' },
        { label: 'Motion standards', href: '#motion' },
        { label: 'Registry', href: '#registry' },
        { label: 'Playground', href: '#playground' },
        { label: 'Spectacle tier', href: '#spectacle' },
        { label: 'Industry voices', href: '#industry' },
        { label: 'QA harness', href: '#qa' },
        { label: 'Theme presets', href: '#themes' },
        { label: 'Agent prompts', href: '#agents' },
        { label: 'Changelog', href: '#changelog' },
      ]}
    />
  )
}

API reference

MagneticField accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`	`string`	–	–
`items`*	`MagneticFieldItem[]`	–	6–16 link bodies forming the field
`strength`	`number`	`1`	attraction multiplier 0.5–1.5

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface MagneticFieldItem {
  label: string
  href: string
}

Related components

Physics Type

Cursor-repelled headline physics for React, every glyph is a body on a damped home spring fleeing an inverse-falloff pointer field; keyboard focus fires a designed ripple. Tailwind-themed.

Gooey Type

SVG metaball letterforms for React, a threshold filter fuses heavy glyphs into one liquid membrane; pointer proximity snaps them apart and they re-fuse on release. Tailwind-themed, zero deps.

ASCII Liquid Field

A monospace glyph grid flowing like liquid, a seeded scalar field advects through a curl flow, crests ink in the accent, pointer drags stir it. Self-idling React + Tailwind canvas background.

Context Morph Cursor

A page-level cursor companion for React, spring-morphs between caret, halo, grip, and crosshair postures from the element under the pointer. Never hides the native cursor. Tailwind tokens.

Kinetic Variable Hero

A hero headline set on a live variable-font weight field, the pointer blooms wght through the glyphs while scroll scrubs a crest across the line. React + Tailwind, zero dependencies.

Liquid Metal

A contained WebGL specimen cell (ogl) of raymarched liquid chrome: metaballs breathe and orbit, the pointer dents the surface, and the studio environment is derived live from theme tokens.

Frequently asked questions

How do I install the Magnetic Field component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/magnetic-field`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Magnetic Field require?

Magnetic Field has no npm dependencies beyond React and Tailwind CSS itself, so there is nothing extra to install or keep updated.

Can I theme Magnetic Field to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code