Build Interactive 3D Hover Cards in React with Almost No Effort

#webdev #javascript #react #frontend

Try it yourself

You can see the live demo and copy the code here: https://mosaicui.com/components/tilt-3d/

Why I built this component

There are plenty of 3D tilt libraries out there, but many are difficult to customize or don't fit well into modern React projects.

The goal with this component was to keep things simple.

It uses Tailwind CSS for styling and Motion for smooth animations.

Instead of installing another UI library, you can simply:

Copy the component
Paste it into your project
Customize it however you like

You own the code, so you can change the animation, styling, or behavior to match your design.

Two Components, More Control

The effect is built using two components:

`Tilt3D`

Tilt3D is the parent component.

Wrap your card or any content inside it, and it handles the 3D tilt effect.

`Tilt3DElement`

Use Tilt3DElement for the parts you want to stand out.

For example:

Product image
Title
Button
Badge
Icon

These elements move slightly closer to the user, creating a layered 3D effect instead of everything moving together.

This gives your cards a more realistic and interactive feel while keeping the API simple.

How it works behind the scenes

The component listens to the mouse position inside the Tilt3D container.

As the cursor moves, it calculates how far the mouse is from the center of the card and updates the rotation using CSS rotateX and rotateY transforms.

To create depth, Tilt3DElement uses the CSS translateZ property. Elements with a higher translateZ value appear closer to the user, making them stand out from the rest of the card.

The animations are powered by Motion, which keeps the movement smooth, while Tailwind CSS handles the styling.