Grid 3x2 CubeGallery

Overview

A unique 3D interactive gallery where fragmented cubes assemble into one. By clicking on each image, you can explore the details of the entire project and deliver a dynamic presentation.

Key Features

• Dynamic 3D Puzzle Interaction: When you click an image in the gallery, the cubes rotate in a staccato rhythm, assembling into one large image like a puzzle being put together.

• Intuitive No-Code Control: Although elaborately crafted with code, anyone can easily customize the design without any coding knowledge through Framer's right-side Property Controls.

• Customization: You can customize the cube's Size, Gap, and Border Radius directly within the Framer canvas.

• Detailed 3D Depth Expression: You can precisely adjust the color, opacity, and blur of the Drop Shadow and Inner Shadow to create a sense of depth that matches your project's mood.

• Optimized 3x2 Grid: This interaction is optimized for a 3x2 arrangement consisting of 6 cubes and supports up to 6 main images.

How to Use

• Upload up to 6 images in the Gallery Images property on the right panel of the component.

• Adjust the Property Controls below to change it to your desired scale and design.

  • Cube Size: Adjusts the size of a single visible cube. (Fixed 1:1 ratio)

  • Gap: Adjusts the spacing between the cubes.

  • Border Radius: Adjusts the roundness of the cube's corners.

  • Drop Shadow / Inner Shadow: Turn the toggle 'On' and adjust the X/Y position, Blur, Spread, Color, and Opacity to add a three-dimensional effect.

• Click the ← Back to Gallery button that appears after the puzzle is assembled to return to the original gallery state.

Recommended for

• Those who want to break away from monotonous layouts and create a stylish design portfolio.

• Those who want to present a more immersive preview of their work.

• Those building a landing page for a creative agency or studio.

• Those who want to deliver a strong visual impact to the Hero section of a website.