Docs
3d Wrapper
3d Wrapper
This component transforms any content into an immersive, interactive 3D experience. It tracks cursor movements to animate a smooth rotation, creating a captivating depth effect.
Create project
Deploy your new project in one-click.
Installation
pnpm dlx shadcn@latest add https://badtz-ui.com/r/wrapper-3d.json
Usage
import { Wrapper3D } from "@/components/ui/wrapper-3d";<Wrapper3D>
{content}
</Wrapper3D>Props
Wrapper3D props.
| Prop | Type | Description | Default |
|---|---|---|---|
children | ReactNode | The elements to be wrapped with the 3D effect. | - |
damping | number | Controls the damping of the animation, affecting how quickly it settles. | 20 |
swiftness | number | Controls the speed of the animation. | 80 |
mass | number | Affects the virtual mass of the animation, influencing its behavior. | 1.5 |
maxRotation | number | The maximum rotation in degrees that the element can achieve. | 100 |
translateZ | number | The depth of translation in pixels for the 3D effect. | 75 |
perspective | boolean | Enables or disables the 3D perspective (1000px if enabled). | true |
className | string | Additional CSS classes to apply to the main container. | - |