Animated Card

Cards 2

About

animated card 3D card

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

Code

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

Usage.tsx

"use client";

import { useState } from "react";
import { GlowCard } from "@/components/ui/animated-card";

export default function DemoOne() {
  const [selectedColor, setSelectedColor] = useState<"violet" | "pink" | "emerald" | "blue" | "fuchsia">("violet");

  const colors = [
    { value: "violet", hex: "#7C3AED" },
    { value: "pink", hex: "#EC4899" },
    { value: "emerald", hex: "#10B981" },
    { value: "blue", hex: "#3B82F6" },
    { value: "fuchsia", hex: "#D946EF" },
  ];

  return (
    <div className= "flex flex-col items-center gap-13" >
    {/* Color Selector */ }
    < div className = "flex gap-3 flex-wrap justify-center z-10" >
    {
      colors.map((color) => (
        <button
            key= { color.value }
            onClick = {() => setSelectedColor(color.value as any)}
  className = {`w-8 h-8 rounded-full border-2 transition-transform duration-200 cursor-pointer
              ${selectedColor === color.value ? "border-white scale-110" : "border-transparent"}`
}
style = {{ backgroundColor: color.hex }}
/>
        ))}
</div>
  < GlowCard color ={selectedColor} >
    <h3 className="text-lg font-semibold" > Pro Plan < /h3>
      < p className = "text-sm text-gray-400" >
        Everything you need to scale your workflow.
  < /p>
          < /GlowCard>
          < /div>
  );
}