Motion+

Tilt card

A card that tilts based on pointer position using Motion for React's useSpring hook.

Time
5 min
Difficulty
Beginner
Access
Motion+
>Live exampleOpen in new tab

Introduction

The Tilt Card example shows how to create card tilts towards the user's cursor with a 3D effect.

With Motion, you can create these kinds of gesture-based UIs by combining a couple powerful APIs. In this tutorial, we'll learn to use:

  • The motion component to make elements animatable.
  • The useSpring hook to create smooth, physics-based animations using Motion's motion values.