Bento-Morph 3D: Kinetic Grid Gallery
Bento-Morph 3D brings architectural weight and organic motion to the modern bento layout. Built for high-end agencies and product showcases, this engine deconstructs the traditional grid into a series of Physics-Enabled 3D Cells.
Each cell is governed by a Spring-Mass Solver, allowing it to "lift" toward the user's cursor with tactile inertia. While in its idle state, the entire grid undergoes a subtle Sine-Wave oscillation, giving the layout a "liquid" feel. When hovered, a custom Pinch-Morph Shader activates, elastically deforming the image around the cursor’s focal point—creating a "magnetic" pull that makes the media feel physically present.
✨ Key Highlights
Interactive Pinch-Morph Shader: Every image is a flexible coordinate mesh. Using a custom GLSL vertex shader, the component applies a "pinch" distortion that warps the image elastically toward the mouse, reacting to every micro-movement.
Elastic Z-Lift Physics: Cards don't just scale; they physically translate in 3D space ($Z$-axis). The spring-tension and damping controls allow you to define how "heavy" or "snappy" the lift feels.
Seamless Fullscreen Expansion: Clicking any cell triggers a high-performance transition where the 3D mesh expands to fill the viewport. This uses the same physics engine to ensure the "pop" into the lightbox is as smooth as the hover.
Ambient Idle Waves: The grid features a global Wave Amplitude setting. Even without interaction, your gallery breathes with a low-frequency wave, preventing the page from ever feeling static.
Smart Neighborhood Dimming: When a user focuses on a specific cell, the surrounding grid elastically fades to a customizable opacity, creating a "Spotlight" effect that keeps the focus on the content.
Gamma-Corrected Rendering: Built with
SRGBColorSpaceand a custom#include <colorspace_fragment>pass. This ensures your images retain their original vibrancy, preventing the "muddy/dark" look common in basic WebGL implementations.
⚙️ Professional Control Suite
Grid Geometry: Precisely control Columns, Rows, Gaps, and Cell Aspect Ratios.
Morph Lab: Adjust the "Warp Power" and "Morph Intensity" of the pinch shader.
Physics Tuning: Fine-tune the "Spring Tension" and "Damping" for that perfect $60\text{fps}$ feel.
Stage Optics: Control the background colors, shader-based corner rounding, and the UI of the integrated close button.
Share It On :
