RevealCard

import React from 'react';
import { motion } from 'framer-motion';

interface RevealCardProps {
  title: string;
  description: string;
}

const RevealCard: React.FC<RevealCardProps> = ({ title, description }) => {
  return (
    <motion.div
      initial={{ y: '100%' }}
      whileHover={{ y: 0 }}
      transition={{ type: 'spring', stiffness: 100, damping: 15 }}
      className="h-48 w-64 bg-black text-white p-4 rounded">
      <h2 className="text-lg font-bold mb-2">{title}</h2>
      <motion.p
        initial={{ opacity: 0 }}
        whileHover={{ opacity: 1 }}
        transition={{ delay: 0.2 }}
        className="text-sm"
      >
        {description}
      </motion.p>
    </motion.div>
  );
};

export default RevealCard;

Component info

Dependencies

About

RevealCard is a premium React component that features a hover effect, sliding up content from the bottom to reveal a hidden description. Utilizing a smooth spring animation, this component is perfect for adding an extra layer of engagement to your website. With a dark background color of #0A0A0A, this component will surely make your content stand out. Built with TypeScript and using the latest React 18, this component is both modern and robust. The RevealCard component is ideal for displaying important information, such as product details, testimonials, or calls-to-action. By incorporating this component into your design, you can create a more interactive and immersive user experience. The smooth spring animation ensures a seamless transition, making it easy to reveal and hide content. With its versatility and ease of use, the RevealCard component is a valuable addition to any website or application.