Vertical Image Stack for Framer
Vertical Image Stack is an immersive, 3D layered media showcase component for Framer. Featuring depth-based card transformations, touch drag gestures, mouse wheel navigation, keyboard support, and dynamic UI indicators, it provides a tactile and modern gallery experience.
3D Perspective Stack: Multi-layer depth layout utilizing dynamic scaling, opacity gradients, and 3D rotation transforms.
Multi-Modal Navigation: Seamlessly navigate cards using mouse wheel scrolling, vertical touch-drag gestures, keyboard arrow keys, or side navigation dots.
Interactive Hint Indicators: Configurable animated bounce arrows and custom text prompts to guide user interaction.
Dynamic Index Counter: Tabular-num active index tracking paired with total count indicators.
Canvas Optimization: Built-in safeguards and static renderer awareness to ensure smooth editing inside the Framer canvas.
Content
Images: Array list to add card images and individual accessibility alt text.
Dimensions & Style
Width: Custom width for individual cards (150px to 600px).
Height: Custom height for individual cards (200px to 800px).
Radius: Corner rounding configuration for cards (0px to 50px).
Cooldown: Minimum delay threshold between scroll and drag transitions (100ms to 1000ms).
UI Elements & Toggles
Show Dots: Toggle right-hand vertical navigation dots.
Show Counter: Toggle left-hand numerical index display.
Show Hints: Toggle scroll/drag directional hint container, with independent sub-controls for hint arrows and text.
Background: Container background color picker.
Text Color: Foreground color for typography and icons.
Aria Label: Accessibility description for screen readers.
For support, feedback, or feature requests:
X / Twitter: @Karim Saif
Email: karimsaif010@gmail.com
