UI FORGE.ORIGINAL EFFECTS
REACT + TYPESCRIPT
EXPERIMENTALTry effects ↗
Menu
EFFECT FACTORY / LIVE PLAYGROUND

Magnetic Focus

A button with a little gravity. Bounded pointer movement, a soft pool of light, and reliable keyboard and touch behavior.

↗ORIGINAL REACT STUDIESDOM · CSS · MOTIONREUSABLE SOURCE INCLUDED
01 EFFECT SELECTOR
02 LIVE CONTROLS
Reduced-motion preference overrides visual movement. Controls affect this preview only.
LIVE STAGE / MAGNETIC FOCUS INTERACTIVE PREVIEW
F/01 — INTERACTION
Pointer / keyboard / touch
TYPE / EXPERIMENT 001 ORIGINAL SOURCE
Magnetic FocusA button with a little gravity. Bounded pointer movement, a soft pool of light, and reliable keyboard and touch behavior.
SOURCE INCLUDED
03 SOURCE CONTRACT

A little source.
A lot of possibility.

Each effect is a React component with a scoped CSS Module. Copy the required files below, preserve their relative imports, and adjust the example to your interface. Keyboard support and motion preferences come with it.

MAGNETIC FOCUS / REQUIRED FILESLOCAL PROOF
01components/forge-factory-01/magnetic-focus.tsxTS/CSS
02components/forge-factory-01/magnetic-focus.module.cssTS/CSS
03components/forge-factory-01/use-reduced-motion.tsTS/CSS
Local review source. The component package and registry release remain unpublished.

03 / CODE & INSTALLATION

Take it from here.

REACT + CSS MODULES

Copy each source file into components/forge-factory-01/. Keep the filenames and their relative imports together. Then use the example below. Use the runtime and file types listed on this effect’s usage notes. The example uses the common @/ import alias; use a relative import if your project has no alias.

In your React component
import { MagneticFocus } from "@/components/forge-factory-01/magnetic-focus";

export function MyInterface() {
  return <MagneticFocus label={"ENTER THE FIELD"} intensity={0.68} paused={false} onClick={() => console.log("Activated")} />;
}

The source above powers this preview. Local review build; no published package required.

DISCOVERY NOTE / APPROVED / SOURCE INCLUDED

Magnetic Focus in practice.

Magnetic Focus is a small React interaction: a button leans toward the pointer inside a bounded field, then returns cleanly when the pointer leaves.

Use it for

  • Primary calls to action that should feel tactile without moving off-target.
  • Playful navigation or footer actions that reward a closer look.
  • Keyboard and touch interfaces that need the same effect with a safe fallback.

Limits

  • The pull is intentionally bounded; this is not a drag or physics simulation.
  • Reduced-motion preference disables the visible attraction instead of hiding the control.
  • The effect expects a browser with modern pointer and focus support.

Use the source

  1. 01

    Copy magnetic-focus.tsx, magnetic-focus.module.css and use-reduced-motion.ts into components/forge-factory-01/.

  2. 02

    Import MagneticFocus and pass a label plus an optional intensity; the usage example on this page compiles as shown.

  3. 03

    Keep the CSS Module beside the component and verify focus, Enter/Space and reduced-motion behavior.

Code & media rights

Application code is MIT-licensed. This study uses no third-party media.

Compare the collection