MDX_CineStage

🎬 MDX_CineStage is a cinematic image presentation system built for designers who want more than a conventional carousel.

Create immersive galleries, product showcases, editorials, portfolios, hospitality experiences, and visual storytelling layouts with a presentation engine that adapts intelligently to the content.

✨ 8 Curated Transitions Cinematic Dissolve, Mask Reveal, Kinetic Frame, Aperture Bloom, Diorama Depth, Split Blinds, Origami Fold, and Pixel Dissolve.

🖼️ Flexible Image Presentation Choose Fill, Fit, or Blurred Fill with multiple stage ratios including 16:9, 3:2, 4:3, 1:1, 9:16, and Custom.

🎯 Smart Crop Focus When using Fill, choose which area of each image should remain visually important—or define a custom focus point.

📝 Adaptive Info Panels Add titles and descriptions with Left, Center, or Right positioning, RTL support, global typography, and optional per-scene typography overrides.

🔘 Adaptive Pagination Pagination stays anchored to the bottom-center of the visible image and intelligently adapts for larger image sets.

⚡ Designed for Interaction Auto-Play, swipe gestures, keyboard navigation, arrows, looping, hover pause, and interaction-aware playback.

🎥 Theater + Fullscreen Expand the experience beyond the page while preserving responsive image, control, and information layouts.

♿ Accessibility Built In Keyboard controls, ARIA labeling, reduced-motion support, meaningful alt text, visible focus states, and screen-reader announcements.

🚀 Cinematic by design. Responsive by default.

🌐 Live Demo + Complete Documentation

Explore the full CineStage experience, detailed properties, behavior, responsive layouts, transitions, accessibility, and implementation guidance on the MODAX website:https://modax.framer.website/mdx-components/mdx-cine-stage