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.
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.
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°.
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
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.
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.
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.
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.
Decorative by default; use it as a non-critical visual enhancement.
For important content, layer text/components above and ensure sufficient contrast.
Ashraf Omran
