Fork UI - Modern UI Components for Fast Web Development

Interactive Card

The InteractiveCard component is a versatile UI element designed to showcase content in an engaging and modern way. It features smooth 3D tilt animations that respond to cursor movement, subtle hover effects, and dynamic scaling for images and text. Perfect for displaying quotes, product previews, or featured content, it adapts seamlessly to different screen sizes while maintaining an interactive, visually appealing experience.

lucide-reactframer-motion

Pablo

Everyone has a price, the important thing is to find it.

Installation

Install the required dependencies:

npm install lucide-react framer-motion

lib/utils.ts

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

components/ui/interactive-card.tsx

"use client";
import React from "react";
import { motion } from "framer-motion";

function Card3DTilt() {
  return (
    <div className="flex justify-center flex-wrap items-center">
      <motion.div
        whileHover={{ rotateX: 5, rotateY: 10 }}
        transition={{ type: "spring", stiffness: 300, damping: 20 }}
        className="w-full max-w-sm rounded-xl bg-white dark:bg-zinc-900 p-6 shadow-lg"
      >
        <h3 className="text-xl font-bold text-black dark:text-white mb-2">
          Tilted Project
        </h3>
        <p className="text-sm text-gray-600 dark:text-gray-300">
          Adds slight 3D effect on hover using Framer Motion.
        </p>
      </motion.div>

      <motion.div
        whileHover={{ rotateX: 3, rotateY: -3 }}
        transition={{ type: "spring", stiffness: 150, damping: 20 }}
        className="bg-white dark:bg-zinc-900 p-6 rounded-lg shadow-xl"
      >
        <h3 className="text-lg font-bold text-black dark:text-white">
          3D Tilt Card
        </h3>
        <p className="text-gray-600 dark:text-gray-300 mt-2">
          Adds depth and interactivity using rotation.
        </p>
      </motion.div>
    </div>
  );
}

export default Card3DTilt;

Usecase

Pablo

Everyone has a price, the important thing is to find it.

^*Interactive card example