Animated Card Options

Cards 73

About

An interactive animated card selector that uses Framer Motion to smoothly reveal a chosen option while fading out the others with randomized stagger effects. Perfect for onboarding flows, preference pickers, or feature selection UIs where visual engagement and clarity are key.

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

Code

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

Usage.tsx

"use client";

import {
  AnimatedCardOptions,
  type CardOption,
} from "@/components/ui/animated-card-options";

const settings = {
  stiffness: 500,
  damping: 25,
  scale: 1.05,
  y: 20,
  columns: 4,
};

const options: CardOption[] = [
  { id: "chat", icon: "💬", name: "Chat" },
  { id: "image", icon: "🖼️", name: "Image" },
  { id: "code", icon: "💻", name: "Code" },
  { id: "voice", icon: "🎙️", name: "Voice" },
  { id: "search", icon: "🔍", name: "Search" },
  { id: "docs", icon: "📄", name: "Docs" },
  { id: "music", icon: "🎵", name: "Music" },
  { id: "video", icon: "🎬", name: "Video" },
];

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen flex items-center justify-center p-8">
      <AnimatedCardOptions
        options={options}
        columns={s.columns}
        stiffness={s.stiffness}
        damping={s.damping}
        scale={s.scale}
        y={s.y}
      />
    </div>
  );
}