MODAX

MDX_BentoGrid

Fluid Media, Intelligent Motion.

Get MDX_BentoGrid

Key Features & Capabilities

✦

Fluid 24-Column System

Identical layout on desktop, tablet, and mobile -- no breakpoints, no collapsing, no reflow

Fully configurable columns (1-24), row height, gap, and corner radius

Each tile independently controls its column span and row span

On hover: cell lifts via elevated box-shadow and a glassmorphic caption pill fades in with the tile title and expand icon

✦

Smart Pulse Director

An intelligent Pulse Director automatically spotlights one video tile at a time, creating a living editorial feel without any user interaction.This adds "life" to the UI without overwhelming the browser's hardware acceleration. Fair shuffle queue -- every visible video plays exactly once before any tile repeats

✦

Performance Optimization

Uses IntersectionObserver to ensure only visible tiles are processed by the Pulse Director, preventing CPU spikes.

Queue rebuilds dynamically as the user scrolls new tiles into view

Active tile: hue-rotating rainbow gradient border, visible on any background colour.

Inactive video tiles dim behind a subtle rounded scrim to spotlight the active one

Pulse pauses automatically when the fullscreen modal is open

GPU-composited only -- transform and opacity, zero layout or paint cost

✦

Fullscreen Modal

Glassmorphism overlay

Drag-to-dismiss with spring physics -- swipe more than 100px to close

Escape key closes the modal on desktop

Scroll lock on document.body while modal is open

dragY and isMuted reset on every open for a perfectly consistent experience

✦

Drag-to-Dismiss

Physics-based closing with a 100px velocity/distance threshold.

✦

Unified Media Guard

Automatic detection and rendering of images vs. videos simultaneously in the same grid

Source modes: URL (CDN, R2, S3) or direct file upload

Shimmer skeleton while media loads, fades in smoothly on ready

9 configurable focus points per tile for smart cropping

Video formats: mp4, webm, ogg, mov, m4v -- loops silently in grid, audio in modal

✦

Action Stack

Integrated 30px compact buttons for Instant Copy (descriptions/prompts), Direct Download, and Mute/Unmute toggles.

✦

Glassmorphic Visual DNA

Utilizes heavy background blurs and high saturation to create a premium "floating" feel.

✦

Zero-Opaque Architecture

By using transparent backgrounds and backdrop-filter, the component absorbs the brand colors of the underlying website, making it feel "native" to any project it is dropped into.

✦

Universal Browser Support

Built-in support for MP4 and WebM (VP9) ensures high-quality playback across Chrome, Edge, and modern Safari/iOS devices.

✦

Hook Stability

Engineered to avoid Framer's common Error 300/310 by maintaining stable hook order even during complex layout transitions.

One Component. Infinite Possibilities.

Explore how MDX_BentoGrid adapts to every industry.

Kinetic Art & AI Portfolio

Leveraging the Smart Pulse logic to bring static galleries to life. By automatically cycling through video highlights every 8 seconds, this use case transforms a standard portfolio into a "living" exhibit that captures attention without manual interaction.

Product Capability Explainer

Utilizing the 24-column fluid grid to create a hierarchical display of features. Flagship features occupy large spans (e.g., 8×4), while supporting technical specs sit in smaller, peripheral cells, allowing users to absorb complex product information at a glance.

Interactive Resource Hub

A dedicated hub for downloadable assets where the Action Stack (Copy & Download) becomes the primary interaction. Users can preview media in high-fidelity glassmorphic modals and instantly copy metadata, prompts, or code snippets to their clipboard.

Dynamic User-Generated Content (UGC)

Organizing customer testimonials and video reviews into a high-density, "Bento" style wall. The Fluid Architecture ensures the wall looks premium whether it’s viewed on a widescreen desktop or a vertical mobile feed, without losing the grid's integrity.

Immersive Brand Moodboard

A deep-dive visual experience using the Drag-to-Dismiss modal system. This allows creative directors and brand managers to present high-resolution "mood" assets (video and image) in an environment that feels tactile and immersive.

The Future of Fluid Curation

In a digital landscape where attention is the ultimate currency, the MDX_BentoGrid serves as your most powerful asset for engagement. By blending fluid, breakpoint-free architecture with an intelligent motion director, it transforms a static gallery into a living, breathing experience that feels native to the touch and premium to the eye.

Whether you are building a high-octane portfolio or a sophisticated product showcase, this component eliminates the friction between complex design and technical performance. Elevate your project with the MODAX standard of glassmorphism and tactile physics—where every tile tells a story and every interaction feels like the future.

Get MDX_BentoGrid