Expanding Grid

Expanding Grid

Turn your images into an interactive visual experience with Expanding Grid, a dynamic portrait gallery for Framer.

Powered by Three.js and WebGL, this component transforms a collection of images into a beautiful tiled grid. Move your cursor across the gallery to create a smooth magnifying effect, where nearby tiles expand and respond naturally to your movement.

Click any image to open an immersive preview with its title and subtitle. Customize the grid layout, tile size, magnification strength, lens size, image saturation, animation speed, and more directly from the Framer property panel.

Features

• Interactive WebGL-powered image grid

• Smooth cursor-following magnification effect

• Six visual presets: Studio, Mosaic, Loupe, Wide, Colour, and Dots

• Customizable grid columns and tile sizes

• Adjustable magnification and lens size

• Smooth spring-based cursor movement

• Automatic cursor movement with adjustable autoplay speed

• Click-to-open image preview

• Animated image expansion and closing transitions

• Custom image uploads and image URLs

• Editable image titles and subtitles

• Adjustable image saturation and dimming

• Customizable background color

• Keyboard navigation and Escape-to-close support

• Responsive grid layout

• Reduced-motion support

• WebGL fallback with regular images

Perfect for

• Photography portfolios

• Creative studios

• Artist portfolios

• Fashion and editorial websites

• Personal portfolios

• Photography showcases

• Interactive landing pages

Give your images a more engaging presentation with a responsive grid, smooth interactions, and an immersive visual experience.