Skip to content

component

MagneticBlobMenu

By Olamide Badusi

Details

Summary

mesmerizing interactive navigation menu

Description

Key Features Magnetic Pull Effect : Blobs smoothly track cursor position with customizable attraction strength and distance-based influence calculations Gooey Morphing : SVG filter creates seamless blob merging effect with adjustable intensity for that liquid, organic aesthetic Spring Physics : Buttery-smooth animations powered by Framer Motion's spring system with configurable stiffness and damping Performance Optimized : Event-driven updates instead of RAF loops - handles 10+ items without lag or frame drops Full Customization : Control blob size, spacing, colors, magnetic strength, hover scale, and gooey intensity via property panel Interactive States : Hover effects with scale, glow, and shadow transitions plus tap feedback for tactile user experience Accessible : Full keyboard navigation support (Enter/Space), ARIA labels, semantic roles, and proper focus management Click Handlers : Built-in callback function returns clicked item name and index for easy integration with navigation logic Responsive Design : Adapts to any container size while maintaining smooth interactions and proper hit areas Perfect for: Creative Agencies SaaS Startups E-commerce Sites Personal Portfolios Marketing Campaigns Design Studios Tech Companies Entertainment Sites : Gaming, music, or media platforms where playful interactions enhance brand personality

Introduction

mesmerizing interactive navigation menu

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600172448/148/228/309/79/15
  • All · #7073