๐ก 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
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
โ 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
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"
Add the first item Components
isGroup: false
Label: "Components"
Parent ID: "Products"
Add the second item Plugins
isGroup: false
Label: "Plugins"
Parent ID: "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"
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
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
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
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
Auto (system / Framer theme sync) โข Manual Light & Dark modes Independent control of:
Text colors
Accent colors โข Supports hex, RGB, and CSS variables
Adaptive layout for mobile (โค480px)
Scaled hub and orbit spacing
Touch-optimized interactions
GPU-accelerated transforms
Memoized rendering (useMemo / useCallback)
requestAnimationFrame-driven motion
Stable 60fps animation pipeline
Full keyboard navigation
ARIA roles and labels
Focus management and indicators
Reduced motion support
Screen reader compatibility
Each item supports:
External links (URL)
Section-based scrolling - Disabled due to Framer restrictions
Smooth or instant scroll modes
Open in new tab option
Portfolio navigation systems
Product category explorers
Interactive dashboards
Brand-centric microsites
Creative agency presentations
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.