Curve Arc
Wide 3D arc carousel — 5 cards arranged on a curved plane with depth-fading side cards and a CTA action button.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | CurveItem[] | DEFAULT_ITEMS (7 items) | Array of items with id, image URL, title, and optional subtitle. |
| defaultActive | number | 3 | Index of the initially active card. |
| heading | string | "Choose Your Piece" | Main heading above the carousel. |
| subheading | string | "Explore our curated collection" | Subtitle below the heading. |
| ctaLabel | string | "Add To Cart" | Label for the action button. |
| accentColor | string | #166534 | Color for heading and CTA button border. |
When to Use
Ideal for full-width product showcases, plant/lifestyle shops, and any collection that benefits from showing multiple cards simultaneously on a dramatic curved arc.
Best Practices
Use portrait images for best card proportions. Keep 6-8 items for a rich arc with enough depth falloff. The arc is most visible on wider viewports.
Why This Component Matters
The curved arc layout creates genuine spatial depth with 5 visible cards — far more context than a standard 3-card carousel while maintaining clear center focus.
FAQ
QHow does the arc curve work?
Each card gets a rotateY angle and z-offset based on distance from active. Cards at distance 1 rotate ±52deg at z:-100; distance 2 rotate ±68deg at z:-260.
QCan I click side cards to jump?
Yes — clicking distance-1 cards advances one step; clicking distance-2 cards jumps two steps.
QHow does the heart button work?
It's local liked state — wire to your wishlist/favorites system as needed.
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.