3D Perspective
3D Y-axis rotation carousel — side cards fold back in perspective with a CTA button for the active card.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | PerspectiveItem[] | DEFAULT_ITEMS (5 items) | Array of items with id, image URL, title, and optional subtitle. |
| defaultActive | number | 2 | Index of the initially active card. |
| heading | string | "Choose Your Piece" | Main heading displayed above the carousel. |
| subheading | string | "Explore our curated collection" | Subtitle below the heading. |
| ctaLabel | string | "Add To Cart" | Label for the action button below the active card. |
| accentColor | string | #166534 | Color for the CTA button border and text. |
| bgColor | string | #f0f0f6 | Background color of the container. |
When to Use
Perfect for product carousels, collection showcases, and portfolio features where the 3D depth effect communicates premium presentation quality.
Best Practices
Use square or portrait images for best card proportions. Ensure headings clearly describe the collection. The CTA button drives conversion — make the label action-oriented.
Why This Component Matters
Y-axis rotation creates a genuine sense of spatial depth that flat carousels cannot replicate. It makes the center item feel definitively 'selected' and worth acting on.
FAQ
QHow does the Y-rotation work?
Side cards use rotateY(±42deg) with transformOrigin set to the inner edge, creating a hinge effect. The CSS perspective: 1000px on the parent enables 3D space.
QCan I click side cards to navigate?
Yes — clicking either side card navigates in that direction, just like a standard carousel.
QHow does the heart/like button work?
It's local state (useState) — wire it to your actual wishlist/favorites logic 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.