Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/animated-card-options"use client";
import { AnimatedCardOptions, CardOption } from "@/components/ui/animated-card-options";
export default function Demo() {
const cardOptions: CardOption[] = [
{
id: "1",
icon: "🎵",
name: "Music Generation"
},
{
id: "2",
icon: "🎙️",
name: "Voice Synthesis"
},
{
id: "3",
icon: "🎧",
name: "Audio Enhancement"
},
{
id: "4",
icon: "🎼",
name: "Music Composition"
},
{
id: "5",
icon: "🎤",
name: "Voice Cloning"
},
{
id: "6",
icon: "🔊",
name: "Sound Effects"
},
{
id: "7",
icon: "🎶",
name: "Melody Creator"
},
{
id: "8",
icon: "🎚️",
name: "Audio Mixing"
},
{
id: "9",
icon: "🎹",
name: "Instrument Synthesis"
},
{
id: "10",
icon: "🎸",
name: "Guitar Effects"
},
{
id: "11",
icon: "🥁",
name: "Drum Programming"
},
{
id: "12",
icon: "🎺",
name: "Orchestral Arrangement"
},
{
id: "13",
icon: "🎻",
name: "String Section"
},
{
id: "14",
icon: "🎪",
name: "Circus Music"
},
{
id: "15",
icon: "🎭",
name: "Theatrical Scores"
},
{
id: "16",
icon: "🎬",
name: "Film Scoring"
}
];
const handleCardSelect = (option: CardOption) => {
console.log("Selected:", option.name);
};
return (
<div className="min-h-screen p-8 bg-background text-foreground">
<div className="container mx-auto py-12">
<div className="text-center mb-12">
<h1 className="text-4xl font-bold text-primary mb-4">
AI Audio Tools
</h1>
<p className="text-muted-foreground text-lg">
Choose from our collection of powerful AI-powered audio tools
</p>
</div>
<AnimatedCardOptions
options={cardOptions}
columns={4}
onSelect={handleCardSelect}
/>
</div>
</div>
);
}