Tilt card

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.

Get started

First, let's set up the basic component markup to display an image and caption.

import { useRef } from "react"

export default function TiltCard({ maxTilt = 15, src, alt, caption }) {
    return (
        <div style={styles.card}>
            <img src={src} alt={alt} style={styles.image} />
            <div style={styles.gradientOverlay} />
            <div style={styles.caption}>{caption}</div>
        </div>
    )
}

// Copy styles from example source code