Magnetic Field

A MagneticField component renders animated elements that respond to pointer movement. It applies forces like attract, repel, or orbit based on position and settings. Use it to create dynamic, interactive visual effects in a UI.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/magnetic-field

npx layro-cli add @educlopez/magnetic-field

npx layro-cli add @educlopez/magnetic-field

bunx layro-cli add @educlopez/magnetic-field

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import {
  type MotionValue,
  motion,
  motionValue,
  useReducedMotion,
} from "motion/react";
import type { ReactElement, ReactNode } from "react";
import { useEffect, useRef, useState } from "react";

export type MagneticFieldMode = "attract" | "repel" | "orbit";