MDX Ferris Wheel

Circular Navigation Engine

MDX_FerrisWheel is a premium circular navigation engine designed to replace traditional menus with an immersive, interaction-driven system. Transform your navigation into an immersive, interactive experience with 4 stunning visual effects, drag-to-position, and full keyboard accessibility. Elevate your navigation experience with MDX_FerrisWheel — where form meets function in perfect orbit. 🎡 ✨ At a Glance 🎡 Ferris Wheel Layout : Items orbit around a central hub in a natural, circular pattern✨ 4 Stunning Hub Effects: Supernova — high-energy radial pulse Angelic Halo — elegant premium glow Photon Rings — futuristic rotating layers Quantum Field — organic particle motion These are not decorative add-ons—they define the emotional tone of the interface. 🖱️ Drag-to-Position: Freely draggable hub with intelligent edge snapping 📂 Hierarchical Groups: Create nested menus with unlimited depth 🔄 Auto-Rotation: Wheel spins automatically when open (configurable speed) 🌓 Smart Theme System: Light/Dark/Auto modes with separate accent colors ⌨️ Full Keyboard Navigation: Complete accessibility for keyboard-only users 📱 Responsive Design: Automatically adapts to mobile screens (≤480px) 📳 Haptic Feedback: Subtle vibration on supported mobile devices 🚀 Quick Start (3 Minutes) Drag MDX_FerrisWheel onto your Framer canvas Add your menu items in the Items property panel Set your brand logo and accent colors in Brand and Theme Choose your favorite hub effect in Visual DNA → Hub Effect 🎮 Keyboard Navigation — No Mouse Needed Navigation ↑ Arrow Up → Open the menu ← Arrow Left → Cycle to previous item → Arrow Right → Cycle to next item ⏎ Enter / Space → Select current item ↓ Arrow Down → Close menu / Go back 🏠 Home Key → Return to root-menu instantly 📂 Creating Hierarchical Menus (The Right Way) Step 1 Add Top-Level Items (Products, Services, About) Add the first top-level item Products : isGroup: true Group ID: "Products" Parent ID: "root" Next add the second top-level item Services: isGroup: true Group ID: "Services" Parent ID: "root" Next add the third top-level item About isGroup: false Label: "About" Parent ID: "root" Step 2 Add Items Inside "Products" Add the first item Components isGroup: false Label: "Components" Parent ID: "Products" Add the second item Plugins isGroup: false Label: "Plugins" Parent ID: "Products" Step 3: Create Nested Group Inside "Products" Add the first item Software isGroup: true Group ID: "Software" Parent ID: "Products" Then add items inside " Software ": Add the first item Web Apps isGroup: false Label: "Web Apps" Parent ID: "Software" Add the second item Mobile Apps isGroup: false Label: "Mobile Apps" Parent ID: "Software" 🎬 How Navigation Works Action: Click Products (folder) Results: Wheel shows Components, Plugins, Software Action: Click Software (folder) Results: Wheel shows Web Apps, Mobile Apps Action: Click Central Hub button Results: Returns to previous level Action: Click Home Icon on Central Hub button Results: Returns to root-menu 📋 Complete Property Reference At its core is a draggable central hub with orbiting items that rotate smoothly, creating a natural exploration flow. Navigation becomes spatial and intuitive rather than linear. Circular orbit-based navigation Smooth rotational interaction model Central hub as interaction anchor Hierarchical Navigation System Build complex structures with unlimited nesting while maintaining clarity. Groups, sub-groups, and deep nesting Parent-child relationships via group IDs Supports both simple and complex architectures Interaction System Drag-to-position hub Local mode (within component) Global mode (viewport freedom) • Edge snapping for controlled placement • Optional auto-rotation with speed control • Haptic feedback on supported devices Keyboard Access↑ to open, ←/→ to cycle items, Enter/Space to select, ↓ to close/go back, Home to return to root Theme System Auto (system / Framer theme sync) • Manual Light & Dark modes Independent control of: Text colors Accent colors • Supports hex, RGB, and CSS variables Responsive Behavior Adaptive layout for mobile (≤480px) Scaled hub and orbit spacing Touch-optimized interactions Performance GPU-accelerated transforms Memoized rendering (useMemo / useCallback) requestAnimationFrame-driven motion Stable 60fps animation pipeline Accessibility Full keyboard navigation ARIA roles and labels Focus management and indicators Reduced motion support Screen reader compatibility Navigation Capabilities Each item supports: External links (URL) Section-based scrolling - Disabled due to Framer restrictions Smooth or instant scroll modes Open in new tab option Use Cases Portfolio navigation systems Product category explorers Interactive dashboards Brand-centric microsites Creative agency presentations Why It Matters MDX_FerrisWheel is not just a menu—it is a navigation experience. It transforms a functional requirement into a visual centerpiece that communicates brand quality, creativity, and interaction depth instantly.

Circular Navigation Engine