Interaction
Spatial 3D Hero Section in Framer
This is a spatial frame created in Framer, taking inspiration from this website. For this recreation, I used 3D transform and for the 3D object interaction used this component (refer here). Feel free to remix the project to see how something like this is built in Framer.
About the resource
This spatial frame was created by taking the 10 images and converting them individually into components. The component is created to give the frames a hover effect by changing the opacity and scale, in the hover variant. In the mainframe, the 10 components and the text frame are added in a container frame.
The key thing here is to nail the 3D rotation along the x, y, z axes for the frames and to provide depth to certain frames to make it look like they’re further away in this spatial frame.
The 3D Look component is used to make the frame interact with the cursor movement. Connect the object to the component, and select the settings on the right panel to customize its behavior through the component properties.
About the resource
This spatial frame was created by taking the 10 images and converting them individually into components. The component is created to give the frames a hover effect by changing the opacity and scale, in the hover variant. In the mainframe, the 10 components and the text frame are added in a container frame.
The key thing here is to nail the 3D rotation along the x, y, z axes for the frames and to provide depth to certain frames to make it look like they’re further away in this spatial frame.
The 3D Look component is used to make the frame interact with the cursor movement. Connect the object to the component, and select the settings on the right panel to customize its behavior through the component properties.
About the resource
This spatial frame was created by taking the 10 images and converting them individually into components. The component is created to give the frames a hover effect by changing the opacity and scale, in the hover variant. In the mainframe, the 10 components and the text frame are added in a container frame.
The key thing here is to nail the 3D rotation along the x, y, z axes for the frames and to provide depth to certain frames to make it look like they’re further away in this spatial frame.
The 3D Look component is used to make the frame interact with the cursor movement. Connect the object to the component, and select the settings on the right panel to customize its behavior through the component properties.
The 3D look component in Framer.
The 3D look component in Framer.
The 3D look component in Framer.
