Animated Feature Card

Features 126

About

Animated Feature Card A visually polished card component that uses framer-motion for a subtle load-in animation and hover effect. It's designed to be highly reusable for showcasing features or portfolio items.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Feature Card to your project and fits it to your theme.

Code

How Animated Feature Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { AnimatedFeatureCard } from '@/components/ui/animated-feature-card'; // Adjust the import path

/**
 * A demo component to showcase the AnimatedFeatureCard.
 */
const FeatureCardDemo = () => {
  return (
    <div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
      <AnimatedFeatureCard
        title="Generate a skeuomorphic isomorphic 3D icon of a modern coffee maker."
        description="Icons can be easily generated using AI. This lowers the barrier of entry."
        // A placeholder image that matches the style. Replace with your actual image URL.
        imageSrc="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-u1weJfn0wFuPr9VJ0wUijZy2DVdtph.png&w=320&q=75"
        featureNumber="05"
        handle="@ravikatiyar"
      />
    </div>
  );
};

export default FeatureCardDemo;