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.
Ian Lee
