Components
Animated Card Options
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.
"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>
);
}