Morph Shape
Organic blob carousel — the center card morphs between fluid border-radius shapes on each navigation, with side cards at slight angles.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | MorphItem[] | DEFAULT_ITEMS (5 items) | Array of items with id, image URL, and label. |
| defaultActive | number | 0 | Index of the initially active card. |
| eyebrow | string | "Convenient Setup" | Small uppercase label above the heading. |
| heading | string | "Hangtimes just got an upgrade." | Main heading text. |
| subheading | string | "Games can be hosted..." | Subtitle below the heading. |
| accentColor | string | #2d6a4f | Color for the eyebrow label. |
| autoPlayInterval | number | 2000 | Auto-advance interval in milliseconds. |
When to Use
Perfect for creative portfolios, art/design showcases, fashion lookbooks, and any brand identity that wants to communicate fluidity and organic creativity.
Best Practices
Use high-quality images with strong visual centers — the blob crop highlights the middle of each image. The purple default accent pairs well with nature and art photography.
Why This Component Matters
Organic blob shapes break the visual monotony of rectangular cards — the morphing animation creates a living, breathing feel that signals premium creative craft.
FAQ
QHow does the shape morphing work?
CSS border-radius with 8 values (e.g. '62% 38% 46% 54% / 60% 44% 56% 40%') creates organic shapes. Framer Motion animates between shapes using spring physics.
QCan I add my own blob shapes?
Yes — edit the BLOB_SHAPES array at the top of the component with any valid 8-value CSS border-radius string.
QWhat are the side cards?
The prev/next images render as smaller, tilted blob shapes (±4 deg rotation, 0.65 opacity) on either side of the center card. Clicking them navigates.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.