Component
3D Look Component for Framer
This is a component that turns any element in Framer into an interactive 3D object. You can simply copy and paste it into your Framer project, connect any element to it, customize it through component properties, and watch the magic happen.
About the resource
To use this component, just drop it on the canvas and connect it to any frame. For example, you can set up a 3D scene with 3D transforms in Framer and connect it to this component.
About the resource
To use this component, just drop it on the canvas and connect it to any frame. For example, you can set up a 3D scene with 3D transforms in Framer and connect it to this component.
About the resource
To use this component, just drop it on the canvas and connect it to any frame. For example, you can set up a 3D scene with 3D transforms in Framer and connect it to this component.
Connecting a frame to the 3D look component.
Connecting a frame to the 3D look component.
Connecting a frame to the 3D look component.
Once the element is connected to the component, you can head over to the right panel and customize its behavior through the component properties.
Once the element is connected to the component, you can head over to the right panel and customize its behavior through the component properties.
Once the element is connected to the component, you can head over to the right panel and customize its behavior through the component properties.
The properties of the 3D look component.
The properties of the 3D look component.
The properties of the 3D look component.
For example, you can enable or disable dragging. By default, this is disabled, so the element will just look at the cursor in 3D space. One example where I used the component this way is in the Linktree hero recreation, where the phone mockup animation follows the cursor.
For example, you can enable or disable dragging. By default, this is disabled, so the element will just look at the cursor in 3D space. One example where I used the component this way is in the Linktree hero recreation, where the phone mockup animation follows the cursor.
For example, you can enable or disable dragging. By default, this is disabled, so the element will just look at the cursor in 3D space. One example where I used the component this way is in the Linktree hero recreation, where the phone mockup animation follows the cursor.
Linktree hero animation recreation.
Linktree hero animation recreation.
Linktree hero animation recreation.
Another useful property is the rotation limit. Let's say you want to create a 3D carousel that can only be rotated to the left and right, and the rotation along the X axis is completely disabled by setting the limit to 0.
Another useful property is the rotation limit. Let's say you want to create a 3D carousel that can only be rotated to the left and right, and the rotation along the X axis is completely disabled by setting the limit to 0.
Another useful property is the rotation limit. Let's say you want to create a 3D carousel that can only be rotated to the left and right, and the rotation along the X axis is completely disabled by setting the limit to 0.
3D carousel with a rotation limit.
3D carousel with a rotation limit.
3D carousel with a rotation limit.
Important
If you're connecting a component to the 3D look, make sure you go into the component and apply this override to the primary variant to ensure everything continues to work smoothly. This is needed so that the component you're connecting will have the preserve 3D style.
Important
If you're connecting a component to the 3D look, make sure you go into the component and apply this override to the primary variant to ensure everything continues to work smoothly. This is needed so that the component you're connecting will have the preserve 3D style.
Important
If you're connecting a component to the 3D look, make sure you go into the component and apply this override to the primary variant to ensure everything continues to work smoothly. This is needed so that the component you're connecting will have the preserve 3D style.
import { useState, useEffect, ComponentType } from "react"
export function withPreserve3d(Component): ComponentType {
return (props) => {
return (
<Component {...props} style={{ transformStyle: "preserve-3d" }} />
)
}
}import { useState, useEffect, ComponentType } from "react"
export function withPreserve3d(Component): ComponentType {
return (props) => {
return (
<Component {...props} style={{ transformStyle: "preserve-3d" }} />
)
}
}import { useState, useEffect, ComponentType } from "react"
export function withPreserve3d(Component): ComponentType {
return (props) => {
return (
<Component {...props} style={{ transformStyle: "preserve-3d" }} />
)
}
}
