MDX Ferris Wheel

MDX_FerrisWheel is a premium circular navigation engine designed to replace traditional menus with an immersive, interaction-driven system.

✨ At a Glance

🎡 Ferris Wheel Layout: Items orbit around a central hub in a natural, circular pattern✨ 4 Stunning Hub Effects:

1. Supernova — high-energy radial pulse

2. Angelic Halo — elegant premium glow

3. Photon Rings — futuristic rotating layers

4. 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:

  1. isGroup: true

  2. Group ID: "Products"

  3. Parent ID: "root"

• Next add the second top-level item Services:

  1. isGroup: true

  2. Group ID: "Services"

  3. Parent ID: "root"

• Next add the third top-level item About

  1. isGroup: false

  2. Label: "About"

  3. Parent ID: "root"

Step 2 Add Items Inside "Products"

• Add the first item Components

  1. isGroup: false

  2. Label: "Components"

  3. Parent ID: "Products"

• Add the second item Plugins

  1. isGroup: false

  2. Label: "Plugins"

  3. Parent ID: "Products"

Step 3: Create Nested Group Inside "Products"

• Add the first item Software

  1. isGroup: true

  2. Group ID: "Software"

  3. Parent ID: "Products"

Then add items inside "Software":

• Add the first item Web Apps

  1. isGroup: false

  2. Label: "Web Apps"

  3. Parent ID: "Software"

• Add the second item Mobile Apps

  1. isGroup: false

  2. Label: "Mobile Apps"

  3. 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.