Magnetic Effect
磁気効果
Magnetic effect with Tailwind CSS and Framer Motion
Hover me
Magnettic button
Installation
Before start please make sure you follow instructions1
Install the following dependencies:2
npm install framer-motionCopy and paste the following code into a new component file:3
import { useRef, useState, MouseEvent, ReactNode } from 'react'
import { motion } from 'framer-motion';
type MagneticEffectProps = {
children: ReactNode
}
export function MagneticEffect({children}: MagneticBtnProps) {
const ref = useRef<HTMLDivElement>(null);
const [position, setPosition] = useState({x:0,y:0});
How to use it4
"use client"
import { MagneticEffect } from "@/components/magneticeffect"
export default function Page() {
return(
<MagneticEffect>
<p className="border border-[#111111] px-5 py-3 rounded-full
</MagneticEffect>
)