Tilt

3D tilt effect that responds to mouse movement, enhancing UI elements with a dynamic depth effect, customizable rotation factors and spring options.

3D tilt effect that responds to mouse movement, enhancing UI elements with a dynamic depth effect, customizable rotation factors and spring options.

Examples

Kôkaku kidôtai

Example of the Spotlight component used with the Tilt component.

Stanley Kubrick

npx shadcn@latest add "https://components.dylanwlim.com/c/tilt.json"

Prop	Type	Default	Description
className	string		Additional CSS classes for styling the tilt.
style	MotionStyle		Additional CSS classes for styling the tilt.
rotationFactor	number	15	Controls the maximum rotation angle in degrees.
isRevese	boolean	false	Reverses the tilt effect's rotation direction.
springOptions	SpringOptions		Spring options for the tilt effect.

Initiated by @AFPedreros

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.