Component
Interactive 3D Game Boxes in Framer
This is an interactive 3D games box component recreated in Framer, original work by Joe Russel. Feel free to remix the project to see how it's built or copy the component into your own project and customize it.
About the resource
There are two components that we need for interactive 3D box shelf: a 3D box component that has two variants—inactive and active—and a box shelf component that wraps multiple box components.
To create the 3D effect of the active and inactive state of the box component, I simply used 3D transforms to project the box in 3D space.
About the resource
There are two components that we need for interactive 3D box shelf: a 3D box component that has two variants—inactive and active—and a box shelf component that wraps multiple box components.
To create the 3D effect of the active and inactive state of the box component, I simply used 3D transforms to project the box in 3D space.
About the resource
There are two components that we need for interactive 3D box shelf: a 3D box component that has two variants—inactive and active—and a box shelf component that wraps multiple box components.
To create the 3D effect of the active and inactive state of the box component, I simply used 3D transforms to project the box in 3D space.
3D game box component variants (inactive and active) in Framer.
3D game box component variants (inactive and active) in Framer.
3D game box component variants (inactive and active) in Framer.
Within the box shelf component, which wraps six box components, I created six variants. In each variant, a different box is activated. These variants are linked to mouse enter interactions, so when you hover over a box, it switches to the variant where that box is active. On mouse leave, all the boxes return to their default, inactive state.
Within the box shelf component, which wraps six box components, I created six variants. In each variant, a different box is activated. These variants are linked to mouse enter interactions, so when you hover over a box, it switches to the variant where that box is active. On mouse leave, all the boxes return to their default, inactive state.
Within the box shelf component, which wraps six box components, I created six variants. In each variant, a different box is activated. These variants are linked to mouse enter interactions, so when you hover over a box, it switches to the variant where that box is active. On mouse leave, all the boxes return to their default, inactive state.
3D box shelf component variants.
3D box shelf component variants.
3D box shelf component variants.
