Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/animated-feature-cardimport 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;