Deck Carousel

deck carousel/mobile responsive/cms

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

deck carousel/mobile responsive/cms