Vanilla Tilt Card

The Vanilla Tilt Card component is a card component that uses the Vanilla Tilt library to create a 3D tilt effect.

John Lennon

Usage

Follow the steps below to add the Vanilla Tilt Card Component to your project.

Add the import statement for the component

import {VanillaTiltCard} from "@/components/elixir-ui/vanilla-tilt-card";

Import the component in your project and use it

<div className="flex h-full w-full items-center justify-center">
  <VanillaTiltCard className="flex w-fit flex-col">
    <Image
      src="/components/john-lennon.jpg"
      alt="John Lennon"
      width={1000}
      height={1000}
      className="aspect-auto h-60 w-60 rounded-lg border object-cover"
    />
    <h1 className="mt-2 rounded-lg bg-black p-2 text-center text-xl font-semibold text-white uppercase dark:bg-white/5 dark:text-white">
      John Lennon
    </h1>
  </VanillaTiltCard>
</div>

Props

Prop	Type	Default	Description
options	object	-	The options for the Vanilla Tilt Card
options.max	number	5	The maximum tilt intensity
options.speed	number	300	The speed of the tilt
options.glare	boolean	true	Whether to enable glare
options.scale	number	1.1	The scale of the tilt
options['max-glare']	number	0.6	The maximum glare intensity
children	React.ReactNode	-	The children to be displayed
className	string	-	Additional CSS classes