Magnetic Shapes

Magnetic Shapes brings interactive, playful visuals to your Framer projects with fully customizable motion-driven grids of lines or emojis.

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. ✨ Features: 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.