Inf. Morph Gallery

A highly immersive, WebGL-powered endless scrolling gallery for Framer. It features a responsive three-column masonry layout (1.5fr / 1fr / 1.5fr) and a stunning custom GLSL post-processing shader that creates a seamless "Liquid Glass" distortion effect at the edges of the component.

Key Features

• Liquid Glass Post-Processing: A custom fragment shader (via WebGLRenderTarget) applies a radial, lens-like refraction effect that beautifully distorts images as they scroll past the edges.

• True Infinite Scroll: Flawless modulo-based vertical looping. Images wrap around perfectly without resetting or jumping.

• Premium Interaction: Features an integrated hover-detection with a smoothed (lerped) deceleration effect, allowing users to comfortably inspect images on mouse-over.

• Fully Responsive & Retina Ready: Automatically recalculates aspect ratios and UV maps (object-fit: cover logic in WebGL) to perfectly span across any breakpoint.

Ideal Use Cases

• Creative Portfolios: Showcase photography, design case studies, or 3D artwork in a highly memorable, tactile way.

• Fashion & E-Commerce Lookbooks: Display seasonal collections or editorial shots with a high-end, editorial feel.

• Hero Sections: Use as an interactive background for landing pages to instantly grab user attention.

• Agency Websites: A perfect centerpiece to demonstrate technical capabilities and out-of-the-box thinking.

Feedback or a feature request?

Help make this component even better! If you have ideas, requests, or just want to show your support, feel free to reach out. 🤍