A mechanical grid of interactive SVG lines/needles that act as magnetic nodes pointing directly at your cursor, emitting elastic spring waves on clicks.
A mechanical grid of interactive SVG lines/needles that act as magnetic nodes pointing directly at your cursor, emitting elastic spring waves on clicks.
GSAPSVGElastic
Choose Installation Method
Select how you want to add this component to your project
Feed this prompt to Claude, ChatGPT, or Gemini to quickly write custom integrations, layouts, or configure props for this component on your system.
I want to integrate the MelonUI "Kinetic Magnet" component into my React/Next.js project.
Component description: "A mechanical grid of interactive SVG lines/needles that act as magnetic nodes pointing directly at your cursor, emitting elastic spring waves on clicks."
CLI Installation command: `npx @melonui-dev/cli add kinetic-magnet`
Tags/Technologies used: GSAP, SVG, Elastic
Please write a premium, responsive React page component in Next.js that:
1. Imports `KineticMagnet` from `@/components/kinetic-magnet`.
2. Places it inside a visually stunning layout matching a dark-mode, glassmorphism design system.
3. Outlines its props and options with clean code structure and comments.
