5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1-b7928ji0zgp.js","/creators-assets/_next/static/immutable/chunks/24u-mm0hygst1.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1xcqqseh8q_et.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/33vct7_koc9st.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/1tmy_9cuep5o7.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T1fce,

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

5a:[["$","$L5d",null,{"post":{"id":"019dd08e-7598-77dd-a79c-26524cf63262","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"1381a1da-b3be-4fec-b846-806fce7d8e9d","name":"MODAX","slug":"modax","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1381a1da-b3be-4fec-b846-806fce7d8e9d/pbf14fbi","followed":false,"followsYou":false},"media":[],"resources":[{"id":"sIkSrdHaLrTdujtoJRM1","resolved":true,"title":"MDX Ferris Wheel","body":"$5e","bodyJson":null,"introduction":"Circular Navigation Engine","slug":"mdx-ferris-wheel","author":{"framerUserId":"1381a1da-b3be-4fec-b846-806fce7d8e9d","name":"MODAX","slug":"modax","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1381a1da-b3be-4fec-b846-806fce7d8e9d/pbf14fbi","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/sIkSrdHaLrTdujtoJRM1/mdx-ferris-wheel-rqcGfs2VxsF15la09rpotZwc7RhIMm","metadata":{"tint":{"h":230,"s":86,"l":22},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-02T04:20:34.533Z","updatedAt":"2026-04-27T09:30:17.085Z","publishedAt":"2026-04-27T20:08:10.392Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://modax.framer.website/framer-preview/mdx-ferris-wheel","price":"19","paymentUrl":"https://buy.stripe.com/eVq9AS9kX07B2my9iT4ZG09","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"GwtNXRXREiHfSypQ1sDr","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T20:08:10.392Z","updatedAt":"2026-04-27T20:08:10.392Z","reported":false}}],"$L5f"]

Suggested for you