Deck Carousel

Core Layout & Structure

- 8 configurable image slots with drag-and-drop CMS compatibility

- Dynamic aspect ratio control (1:1, 3:4, 4:3, 9:16, 16:9, 2:3, 3:2) per card or globally

- Fixed-width container system with flex-grow animations eliminates layout jitter during transitions

- 3D perspective engine with configurable depth, rotation, and vertical arc offset

Visual Design System

- 3 background type modes: Image fill, solid color, or gradient overlay

- Per-card button URLs — each slide links independently (up to 3 buttons per card)

- Hover effects with configurable scale, brightness, lift, and overlay intensity

- Dual shadow system: Independent active card and side card shadows with gradient support

- Card borders with adjustable width and color

Animation & Physics

- Spring-based physics engine with configurable stiffness, damping, and mass

- Reduced motion support: Automatically detects `prefers-reduced-motion` and softens all animations, disables 3D rotation, and removes hover/tap micro-interactions

- Configurable reduced motion physics for accessibility compliance

Responsive & Mobile-First

- Breakpoint-aware layout (default 768px) with fully independent mobile property controls

- Touch swipe gestures with velocity detection and configurable threshold horizontal swipe dominates, vertical scroll remains natural

- Mobile-optimized defaults:

- Larger cards with more overlap for peek-through navigation

- Nav arrows hidden (swipe is primary interaction)

- Larger dot indicators for touch targets

- 3D rotation disabled for clarity

- Subtle blur and dimming on side cards for depth

- Hover effects disabled (no false triggers on touch)

-Real-time viewport detection switches instantly on resize/rotation without state loss

Navigation & Interaction

- Left/right arrow navigation** with customizable icon styling (chevron, arrow, caret)

- Autoplay with configurable speed and hover pause

- Tap-to-navigate on any card

CMS & Content

- Image slot mapping for easy template reuse

- per-card independent button links (8 slots × 3 buttons)

Accessibility

- Respects `prefers-reduced-motion` system preference

- Large touch targets on mobile (dots, swipe area)

- No tap highlight flash on iOS

- Text selection and image drag disabled on carousel track