Wobble Card
Card with elastic wobble animation on mouse interaction.
Preview
Wobble Card
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Playful feature sections and interactive showcases.
Why this component matters
The wobble adds personality. Use where the brand voice is more conversational and less formal.
Usage guidance
Best for secondary features or playful content. Avoid in data-heavy or formal contexts. Limit wobble intensity for professional tone.
Installation
bash
npx shadcn@latest add @aceternity/wobble-cardUsage
example.tsxtsx
import { WobbleCard } from "@/components/ui/wobble-card";
export default function Example() {
return (
<WobbleCard>
{/* Your content here */}
</WobbleCard>
);
}Source
wobble-card.tsx
components/ui/wobble-card.tsx