Magnetic Gallery
NewPremiumImage gallery where items are attracted to and repelled by the cursor with spring physics.
effectsgallerymagneticimagesinteractive
Installation
Terminalbash
npx motioncraft add magnetic-galleryUsage
magnetic-gallery.tsxtsx
import { MagneticGallery } from "@/components/effects/magnetic-gallery";
<MagneticGallery items={[
{ id: 1, src: "/img1.jpg", alt: "Image 1" },
{ id: 2, src: "/img2.jpg", alt: "Image 2" },
]} strength={40} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | GalleryItem[] | — | Array of image items |
| strength | number | 30 | Magnetic pull strength |
| gap | number | 16 | Gap between items in pixels |
| className | string | — | Additional CSS classes |
Related Components
Magnetic Button
Button that magnetically attracts toward the cursor on hover.
Animated Input
Input field with animated label, focus ring, and validation states.
Audio Reactive
NewElements that pulse and react to audio input from the microphone. Includes visualizer bars and scale effects.
Custom Cursor
Custom cursor replacement with smooth trailing and hover state changes.