Magnetic Shapes

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.