New
New
New
Component
3D Block Hover Interaction in Framer
This is a Framer recreation of the 3D block hover interaction from Joao Paulot's work. Feel free to remix the project and see how you can pull off something like this in framer, without writing any code.
Created by
About the resource
To build this hover interaction, I started with the center image. It’s made using two 3D blocks—one for the top and one for the left side. I wrapped them together to create that cube-like look. The left side is rotated 90° on the top block and -90° on the bottom one, so it gives a proper 3D fold effect. Last step—I added mouse enter and leave interactions on the wrapper to trigger the smooth hover flip.
Once the component was ready, I stacked three of them inside a scroll container and set each one to sticky, so they stay locked in place as you scroll.
About the resource
To build this hover interaction, I started with the center image. It’s made using two 3D blocks—one for the top and one for the left side. I wrapped them together to create that cube-like look. The left side is rotated 90° on the top block and -90° on the bottom one, so it gives a proper 3D fold effect. Last step—I added mouse enter and leave interactions on the wrapper to trigger the smooth hover flip.
Once the component was ready, I stacked three of them inside a scroll container and set each one to sticky, so they stay locked in place as you scroll.
About the resource
To build this hover interaction, I started with the center image. It’s made using two 3D blocks—one for the top and one for the left side. I wrapped them together to create that cube-like look. The left side is rotated 90° on the top block and -90° on the bottom one, so it gives a proper 3D fold effect. Last step—I added mouse enter and leave interactions on the wrapper to trigger the smooth hover flip.
Once the component was ready, I stacked three of them inside a scroll container and set each one to sticky, so they stay locked in place as you scroll.
The two variants of the 3D block component.
The two variants of the 3D block component.
The two variants of the 3D block component.
