React Tilt With React JS and Tailwind CSS

React Tilt is a cool tool that adds movement and animation to elements on your website. It makes things look more interesting by giving them a floating and tilting effect. It’s easy to use and brings a touch of magic to your apps.

Getting Started

Create new react app using vite and add tailwind css. As the next step add react tilt:

npm i react-tilt

React Tilt Options

Here are configuration options for React tilt package:

1. Reverse: Determines whether the tilt direction is reversed or not.
2. Max: Sets the maximum tilt rotation in degrees. • perspective: Adjusts the transform perspective, influencing the intensity of the tilt effect.
3. Scale: Specifies the scale of the elements, allowing them to appear larger or smaller.
4. Speed: Controls the speed of the enter/exit transition, determining how quickly the tilt effect occurs.
5. Transition: Enables or disables smooth transitions on enter/exit.
6. Axis: Defines which axis (X or Y) should be disabled for tilting.
7. Reset: Determines whether the tilt effect should be reset on exit or persist.
8. Easing: Specifies the easing function for enter/exit transitions, influencing the smoothness of the animation.

Tilt options

In card.jsx file, define some options for the card component to work with react tilt. For this tutorial we will be using the default options but feel free to checkout the custom ones or to create new ones on your own.

import { Tilt } from 'react-tilt'

  const defaultOptions = {
    reverse: false,
    max: 35,
    perspective: 1000,
    scale: 1.1,
    speed: 1000,
    transition: true,
    axis: null,
    reset: true,
    easing: "cubic-bezier (.03,.98,.52,.99)",
  }

  const customOptions = {
    reverse: true,
    max: 45,
    perspective: 1500,
    scale: 1.2,
    speed: 2000,
    transition: true,
    axis: "X",
    reset: false,
    easing: "cubic-bezier(.2, .8, .3, 1)"
  }

Card JSX

Now let's take a look a the card component itself. It uses Tilt component as a wrapper from react tilt and receives props: image, title, description from the App component.

const Card = {{image, title, description}) => { return (
  <Tilt options={defaultOptions)>
    <div className="relative w-64 h-80 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg shadow-md rounded-xl overflow-hidden"> <img src=(image) alt={title}
    className="w-full h-48 object-cover" /> 
      <div className="absolute bottom-0 left-0 right-0 p-4
      text-white">
        <h2 className="text-xl font-bold mb-2">
        {title}</h2>
        <p className="text-gray-200">
        {description}</p>
      </div>
    </div>
  </Tilt>
}
export default Card;

App JSX

Finally let's have a look at the App component
code:

import bg from './assets/bg.png' import Card from './components/card'

function App() {
  return (
    <div className="w-full h-screen flex justify-center items-center bg-gradient-to-r Ofrom-slate-950 Oto-slate-900">
      <Card image=(bg) title="hello world" description="some description" />
    </div>
  )
}
export default App

I hope you learned something new from this. If you've used React Tilt before, i want to see your lovely tilt card, share them with me in the description below. Check out these awesome coding materials