component
Magnify Strip
By Abdul Sami
Details
- Abdul SamiAuthor
- componentType
- 2026-06-06Published
- 2026-08-26Updated
- 2026-05-20Added
- EffectsCategories
Summary
Magnify Strip bypasses this limitation entirely.
Description
Magnify Strip: The Impossible Magnetic Effect for Framer 🔥 Now available as a FREE remix! 🚀 Framer's native hover states are strictly binary—you can only scale the exact item you hover over. Magnify Strip bypasses this limitation entirely. By calculating the exact pixel distance between your cursor and every item simultaneously, it drives a buttery-smooth 60fps magnification wave that Framer simply cannot achieve natively. Core Mechanics As your cursor moves across the strip, a wave of interaction follows. The closest item scales up and lifts towards the cursor, while neighboring items gently recede based on proximity. This creates a highly tactile, magnetic pull effect driven by premium spring physics. Key Features: 🧲 Proximity-Based Physics: Continuous distance mapping eliminates rigid, binary hover states. ⚡ 60fps Performance: Engineered for zero React re-render overhead to ensure flawless motion. 🌊 Premium Spring Animations: Fully tunable stiffness and damping for that signature elastic snap-back. 🧊 Frosted Glass Container: Optional glassmorphism platform that dynamically houses your items. 💬 Proximity Tooltips: Labels fade in dynamically based on exact cursor distance, not just binary hover. 📱 Omni-Responsive: Automatically swaps to a seamless, infinite-scroll ticker on mobile screens (810px and below) for perfect touch interaction. 🎨 Deeply Configurable: Total control over magnet radius, max scale, lift amount, item sizes, gaps, and border radii. Need help customizing or setting this up? Feel free to reach out!
Introduction
Cursor-Tracking Magnetic Showcase
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #5123