Docs
Card Hover Effect

Card Hover Effect

Displays a beautiful Card Hover Effect.

OpenAI

An AI research and deployment company dedicated to ensuring artificial general intelligence benefits all of humanity.

Tesla

A company that designs and manufactures electric vehicles, battery energy storage, and renewable energy solutions.

SpaceX

An aerospace manufacturer and space transportation company revolutionizing space travel and exploration.

NVIDIA

A leader in AI computing, providing cutting-edge GPUs and AI-driven solutions for various industries.

Airbnb

An online marketplace that connects people looking for accommodation with hosts offering unique lodging experiences.

Shopify

An e-commerce platform that allows businesses of all sizes to create, manage, and scale online stores.

Installation

Install the following dependencies:

npm install framer-motion

Install the shadcn/ui dependencies:

You need to install shadcn components, like this:

npx shadcn@latest add card

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Event Calendar code into your project.

API Reference

Props

The HoverEffect component creates a grid of interactive cards with a hover effect.

PropTypeDescription
itemsArray<{ title: string, description: string, link: string }>An array of objects representing the cards to display.
classNamestringOptional custom class for the HoverEffect component.

Item Object Properties

Each item in the items array should have the following properties:

PropertyTypeDescription
titlestringThe title of the card.
descriptionstringThe description text for the card.
linkstringThe URL that the card should link to when clicked.

Usage

export default function Demo() {
  return (
    <div className="max-w-5xl mx-auto px-8">
      <HoverEffect items={projects} />
    </div>
  )
}
const projects = [
  {
    title: "OpenAI",
    description:
      "An AI research and deployment company dedicated to ensuring artificial general intelligence benefits all of humanity.",
    link: "#",
  },
  // ... more projects
]
Hover CardGallery Card