Image Waterfall

Waterfall Image Gallery – Animated Masonry Grid with Smart In-View Effects

A beautifully engineered waterfall/masonry image gallery built for high-end visual storytelling. This component uses real Intersection Observer magic, dynamic scaling, lazy loading, and a polished full-screen pop-up viewer to create an immersive browsing experience.

Ideal for portfolios, creative studios, photo galleries, product showcases, and visual landing pages that need depth, motion, and effortless performance.

⭐ Key Features

• 🖼️ True Waterfall/Masonry LayoutAuto-spanning columns with natural visual rhythm.

• 🎯 Smart In-View AnimationsIntersection Observer highlights images and dims inactive ones.

• 🌀 Cinematic Hover EffectsSmooth scaling, brightness shifts, and subtle glow borders.

• 📸 Fullscreen Popup ViewerWith a modern close button, keyboard support, and click-to-close.

• ⚡ Lazy Loading + Infinite ScrollLoads images in batches for performance on large galleries.

• 🎛️ Highly CustomizableBorder, radius, scaling, blur, brightness, close button, spacing, etc.

• 🎨 Responsive & Smooth on FramerWorks beautifully in any layout—no coding needed.

• 🧩 Framer-Native ControlsBuilt with complete property controls to tweak every visual detail.

🎯 Best For

• 📸 Photography portfolios

• 🎨 Designers & studios

• 🛍️ Product showcases

• 🖼️ Moodboards / inspiration walls

• 🧳 Travel + lifestyle blogs

• 🏙️ Architecture & interior portfolios

• 🎬 Film, art, editorial, and showcase landing pages

🚀 How to Use

1. Drop the component onto your Framer canvas

2. Go to Properties → Images and upload your gallery

3. Adjust:

   • Column width

   • Gaps & layout spacing

   • Border & radius

   • Blur, brightness, scale values

   • Popup close button styling

4. Hit Preview to see live intersection animations

5. Add more images—lazy loading handles the rest automatically