Magnetic Wrapper

An elastic magnetic wrapper that creates an interactive attraction effect on hover. Elements within smoothly follow the cursor with a spring-like physics animation.

Installation

npx shadcn@latest add https://atomixui.mihircodes.in/registry/magnetic-wrapper

How to use

'use client';
import Image from 'next/image';
import MagneticWrapper from '@/components/atomixui/magnetic-wrapper';

export default function MagneticWrapperImageDemo() {
    return (
        <div className="flex items-center gap-4 px-4 py-2 outline-none">
            <div className="border-neutral-600 border rounded-2xl p-1">
                <MagneticWrapper>
                    <Image
                        src="/images/girl.png"
                        alt="hero"
                        width={100}
                        height={100}
                        className="w-40 sm:w-52 h-auto object-cover"
                    />
                </MagneticWrapper>
            </div>
        </div>
    );
}