MODAX

MODAX SYSTEM

MDX_FerrisWheel

v1.0.0

A cinematic circular navigation engine where content orbits a draggable hub, transforming menus into immersive interaction systems.

01 Overview

MDX_FerrisWheel is a premium circular navigation system designed to replace traditional menus with a spatial, interaction-driven experience. Items orbit around a central hub, enabling intuitive exploration instead of linear navigation.

It supports deeply nested structures, advanced visual effects, and dynamic interaction models making it suitable for both simple navigation and complex UI systems.

Navigation

Portfolio Navigation

Showcase projects in an orbit-based interactive layout.

Product Explorer

Present categories and subcategories with hierarchy.

Interface

Dashboard Navigation

Replace sidebars with a central hub system.

Branding

Microsites

Place brand identity at the center with orbiting sections.

02 Key Features

🎡

Circular Navigation Engine

Orbit-based interaction replaces traditional menus.

03 Properties

"LOCAL"DEFAULT: "Global"

placementMode

Local

04 User Guide

Add Component: Insert MDX_FerrisWheel into your canvas.

Transform Navigation Into Experience

Replace static menus with a premium interactive system designed for modern interfaces and high-impact user journeys.

Production-ready performance and smooth animations.

Fully customizable visual and interaction system.

Built for real-world Framer projects and scalability.

Technical Notes

React-based component optimized with useMemo, useCallback, and requestAnimationFrame. GPU-accelerated transforms ensure smooth 60fps animations. Supports reduced motion preferences and full keyboard interaction.

MODAX SYSTEM

MDX_BeforeAfterSlider

v1.0.0

MDX Before / After Slider is a premium drag-to-reveal image comparison component for Framer featuring dual-axis orientation, swipe momentum physics, scroll-triggered reveal animation, content layers, handle styles, badge labels, and automatic dark mode.

01 Overview

MDX Before / After Slider is a production-ready drag-to-reveal image comparison component built exclusively for Framer. It is the only comparison slider on the Framer marketplace that supports dual-axis orientation — vertical (left/right drag) and horizontal (top/bottom drag).

The component was designed for agencies, freelancers, studios, and product teams that need a complete presentation system rather than a basic image comparison widget. It includes configurable content layers, scroll-triggered reveal animation, swipe momentum physics, badge labels, handle style options, dark mode support, and keyboard accessibility.

Every capability is configurable directly through the Framer property panel without touching code.

Semantic correctness is enforced throughout the component:

0% = Before image fully visible  
100% = After image fully visible

The slider rail thumb and the image split line remain perfectly synchronized in both orientations.

Creative Agencies

Portfolio Comparison Card

Show before/after design transformations, branding refreshes, or visual retouching results with a cinematic drag-to-reveal interaction.

Photography & Retouching

Image Editing Showcase

Demonstrate color grading, skin retouching, restoration work, and editing improvements with precise visual comparison.

Product Marketing

Feature Transformation Demo

Compare product upgrades, UI redesigns, or new feature states within landing pages.

Architecture & Interior Design

Space Transformation Visualizer

Compare architectural renders, renovation outcomes, or interior design transformations.

E-Commerce

Product Enhancement Viewer

Display product condition differences, upgrades, or customization variations interactively.

02 Key Features

↔↕

Dual Orientation

Toggle between vertical (left/right drag) and horizontal (top/bottom drag). All drag logic, keyboard input, reveal animation, and momentum physics adapt automatically.

03 Properties

ENUMDEFAULT: upload

beforeSource

Input type for Before image: upload or url

04 User Guide

Add Component: Drag MDX_BeforeAfterSlider into your Framer canvas.

Technical Notes

The component uses pointer capture to maintain drag interaction even when the cursor leaves the component boundary.

A dual pointer handler system separates rail dragging and image dragging logic while synchronizing both through a shared percentage motion value.

Theme and shadow styles are injected through a shared CSS style tag to ensure multiple instances share the same styling rules.

IntersectionObserver powers the reveal animation without requiring scroll listeners.

GPU acceleration is enabled using clip-path and transform compositor promotion.

---

Changelog

v3.0.0 — Major Release  
Dual orientation support, pointer handler system redesign, semantic correctness fixes, and keyboard orientation adaptation.

v2.8.x — Dark Mode  
Auto, Light, and Dark theme support using CSS class injection.

v2.7.0 — Badge Labels  
Plain text and badge label styles.

v2.6.0 — Handle Styles  
Pill, Circle, and Arrow handle styles.

v2.5.0 — Swipe Momentum  
Velocity tracking and spring deceleration for flick gestures.

v2.4.x — Reveal Animation  
Scroll-triggered reveal animation with IntersectionObserver.

v2.3.x — QA & Accessibility  
Accessibility improvements and cross-browser compatibility validation.

Get MDX_FerrisWheel