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.
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.
Vaibhav Khulbe
