Magnet
Let nearby content lean toward the pointer and settle back with a spring.
Field take 04
Wetland edge, just after rain
No cues marked in this take.
Add a cue when a sound changes. Each mark keeps its place in the take.
Move between the actions. The nearest one follows, then springs back.
Implementation
1"use client";2 3import { useEffect, useRef, type HTMLAttributes, type ReactNode } from "react";4 5export type MagnetAxis = "both" | "x" | "y";6export type MagnetSpring = {7 stiffness?: number;8 damping?: number;9 mass?: number;10};11 12export interface MagnetProps extends Omit<13 HTMLAttributes<HTMLDivElement>,14 "children"15> {16 children?: ReactNode;17 padding?: number;18 magnetStrength?: number;19 exclusive?: boolean;20 axis?: MagnetAxis;21 maxOffset?: number;22 tilt?: number;23 scale?: number;24 spring?: MagnetSpring;25 disabled?: boolean;26 onActiveChange?: (active: boolean) => void;27 wrapperClassName?: string;28 innerClassName?: string;