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
Davidson Raphael Ani
