Create interactive grids of magnetic shapes that respond to the cursor, auto-rotate, or animate with particle effects. Fully customizable with colors, gradients, hover and emojis.
Make it with Workshop
Build your own component with AI
Magnetic Shapes brings interactive, playful visuals to your Framer projects with fully customizable motion-driven grids of lines or emojis. Perfect for adding modern interaction, depth, and energy to your websites.
Check out the extensive features list:
Grid-based layout — create responsive grids with customizable rows and columns.
Two content modes:
Lines mode with single-color or gradient-colored shapes.
Emoji mode with a fallback emoji or custom emoji set, randomly assigned with a seed for deterministic layouts.
Shape customization (Lines mode):
Adjustable width, height, and corner radius.
Single-color or gradient coloring with seed-based hue randomness.
Emoji customization (Emoji mode):
Single fallback emoji or entire emoji sets.
Adjustable emoji size and opacity.
Seed control for repeatable random distribution.
Motion controls:
Lines and emojis rotate smoothly toward the cursor.
Adjustable base angle for initial orientation.
Transition timing controls with easing.
Magnet Strength control — fine-tune how snappy or smooth the rotation feels.
Auto-rotation (virtual pointer mode):
Off, Always, or When Idle modes.
Configurable speed (rotations per minute).
Adjustable radius for the rotation path.
Idle delay (ms) before auto-rotation activates, even with cursor resting inside.
Particle mode effects:
Repel or attract elements to the cursor like magnetic particles.
Adjustable influence radius.
Max offset distance per element.
Strength and falloff curve controls for natural motion.
Hover focus effects:
Highlight the hovered item with customizable scale.
Fade all other items with adjustable opacity.
Connector lines (Lines mode only):
Draw live preview lines when aiming between items.
Smooth, animated connector lines when a connection is completed.
Adjustable color, thickness, opacity, and animation duration.
Advanced animation settings:
Fully controllable transition durations for rotation, scaling, and opacity.
Smooth stroke-draw animations for connector lines.
Accessibility support:
ARIA labels for emoji mode.
Non-interfering with pointer events.
Magnetic Shapes is designed for maximum flexibility. Whether you’re building a sleek portfolio, playful landing page, or immersive interactive section, you can fine-tune every detail — from emoji distribution to motion physics — without writing a single line of code.
