Magnetic Pattern

Turn any frame into a living, responsive mosaic. Magnetic Pattern auto-fills its container with infinitely tiled shapes that subtly react to the pointer—rotating, scaling, fading, and even shifting position—then smoothly reset when the cursor leaves. Perfect for modern hero sections, product backdrops, or playful UI surfaces.

Highlights

• Auto-tiling grid that fills any container (Grid or Stagger layouts), now center-aligned.

• Pointer-reactive effects (toggle per effect):

  • Rotation (symmetry-aware steering)

  • Opacity “spotlight”

  • Scale falloff

  • Position offset (toward or away from cursor)

• Smooth reset on leave (eased animation back to idle).

• Trim edges toggle to clip or reveal shapes beyond bounds.

• Three shape modes: Square, Triangle, or Custom SVG path (Single-Path only acceptable).Like: <path d="M0 0 L10 0 L10 10 L0 10 Z" />

• Fine control over radius, strength, falloff curves, smoothing, and relaxation.

• Seeded randomness with jitter for organic layouts.

• Performance friendly with rAF throttling and event gating.

Controls (Property Panel)

• Layout & Size: Layout (Grid/Stagger), Gap X/Y, Item W/H, Background.

• Visuals: Fill, Stroke, Stroke Width.

• Shape: Square / Triangle / Custom Path + Custom Symmetry (None / 180° / 90°).

• Pointer / Motion: Track Pointer (master toggle), Base°, Jitter, Seed, Throttle ms.

• Influence (when tracking): Radius, Strength, Falloff (Linear/EaseOut/Gaussian), Smoothing, Min Weight, Relax.

• Effects (when tracking):

  • Rotate on

  • Opacity on + (Min/Max/Curve)

  • Scale on + (Min/Max/Curve)

  • Position on + (Max px / Curve / Invert)

• Overflow: Trim edges (clip vs. show overflow).

Tip: Turning Track Pointer off hides the pointer-related controls and renders a clean, neutral pattern (no dimming, no offsets) using your Base°.

Great for

• Hero/landing backdrops that feel premium but unobtrusive

• Section separators and full-bleed backgrounds

• Subtle motion on product or feature pages

• Interactive wallpapers for dashboards and apps

Design notes

• Symmetry-aware rotation means shapes “snap” their aim to the nearest valid orientation (e.g., 180° for squares/triangles) for satisfying, stable motion.

• The opacity spotlight and scale falloff are distance-based and curve-controlled for just the right softness.

• Position offset adds gentle parallax; invert it to push shapes away from the cursor for a “magnetic repulsion” feel.

Performance tips

• Use Throttle ms to cap pointer update frequency on heavy pages.

• Reduce Radius and Item W/H or increase Gap for weaker devices.

• Turn off effects you don’t need; each toggle removes that work.

Dev-friendly details

• Uses seeded RNG for stable jitter across reloads.

• Resizes with a ResizeObserver and re-centers automatically.

• All transforms are applied on a per-tile wrapper (transform + opacity), keeping paints efficient.

Refund Policy

• Refunds apply only if the component does not work as described or is proven to be defective.

• Refunds are not applicable for change of mind, design preference, or lack of technical knowledge.

• Before requesting a refund, please contact support so we can try to resolve the issue.

Accessibility

• Decorative by default; use it as a non-critical visual enhancement.

• For important content, layer text/components above and ensure sufficient contrast.