The MorphingCard component creates an engaging, interactive card that smoothly transitions between different shapes and content. It features elegant 3D rotations, customizable gradients, and a clean design that's perfect for showcasing key information or features in a visually striking manner.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/morphing-card.jsonEverything Morphing Card accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| width | string | '300px' | Width of the morphing card |
| height | string | '300px' | Height of the morphing card |
| contents (required) | Array<{ shape: 'rectangle' | 'circle' | 'hexagon'; title: string; description: string; }> | No default | Array of content objects for each state of the card |
| colorScheme | { from: string; to: string; } | { from: 'var(--brand)', to: 'var(--accent-pink)' } | Gradient color scheme for the card background |
| autoPlay | boolean | true | Whether the card should automatically cycle through shapes |
| interval | number | 3000 | Time interval (in milliseconds) between shape transitions when autoPlay is true |
Required.
Explore our innovative features that redefine user experience.