"use client"; import React, { useRef, useState, useEffect } from "react"; import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"; export interface MagneticCardProps { title?: string; subtitle?: string; stickerText?: string; primaryColor?: string; accentColor?: string; bg?: string; width?: number | string; height?: number | string; className?: string; style?: React.CSSProperties; } export function MagneticCard({ title = "HYPER", subtitle = "MAGNETIC STICKER", stickerText = "100% PURE", primaryColor = "#7fff5e", accentColor = "#ff5c71", bg = "#050505", width = 340, height = 420, className = "", style, }: MagneticCardProps) { const containerRef = useRef(null); const [isHovered, setIsHovered] = useState(false); const [mounted, setMounted] = useState(false); useEffect(() => { const t = setTimeout(() => setMounted(true), 0); return () => clearTimeout(t); }, []); const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const springConfig = { damping: 20, stiffness: 150, mass: 0.5 }; const smoothX = useSpring(mouseX, springConfig); const smoothY = useSpring(mouseY, springConfig); const stickerX = useSpring(mouseX, { damping: 12, stiffness: 200, mass: 0.8 }); const stickerY = useSpring(mouseY, { damping: 12, stiffness: 200, mass: 0.8 }); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const { left, top, width, height } = containerRef.current.getBoundingClientRect(); const x = (e.clientX - left) / width - 0.5; const y = (e.clientY - top) / height - 0.5; mouseX.set(x); mouseY.set(y); }; const handleMouseLeave = () => { setIsHovered(false); mouseX.set(0); mouseY.set(0); }; const handleMouseEnter = () => setIsHovered(true); const stickerTranslateX = useTransform(stickerX, [-0.5, 0.5], [-120, 120]); const stickerTranslateY = useTransform(stickerY, [-0.5, 0.5], [-120, 120]); const stickerRotate = useTransform(stickerX, [-0.5, 0.5], [-20, 20]); const ambientGlow = useTransform( [smoothX, smoothY], ([x, y]: number[]) => `radial-gradient(circle at ${(x + 0.5) * 100}% ${(y + 0.5) * 100}%, ${primaryColor}40, transparent 60%)` ); const sheenPosition = useTransform(stickerX, [-0.5, 0.5], ["100% 0", "0 0"]); if (!mounted) return

; return (

{title}

{subtitle}

{stickerText}

SYS_REQ: VALID

); }

Component Showcase

Choose Installation Method

AI Automation Agent Prompt