Rotate Cards

Rotate Cards is designed to create a dynamic visual presentation where content cards rotate continuously or respond to user interaction.

Rotate Cards is designed to create a dynamic visual presentation where content cards rotate continuously or respond to user interaction. Instead of static grids or sliders, the component arranges items in a rotating stack that brings different cards into focus over time. Each card can contain structured content including an image, title, description, metadata, and an optional call-to-action button with a link. As the cards rotate, the focused card becomes the primary visual element while other cards remain visible in the background. The component includes multiple interaction triggers that allow the rotation to behave differently depending on the desired user experience. Cards can rotate automatically or respond to actions such as scrolling, hovering, clicking, or dragging. Additional layout controls allow designers to adjust card orientation, rotation direction, text positioning, and scaling. Out-of-focus cards can also be clipped or masked to maintain visual focus on the active card. This component works well for showcasing products, featured content, case studies, or interactive portfolios. How It Works 1. Add Card Content Inside the settings panel, you can create cards by adding: Image Title Description Meta information Button text Button link Each entry becomes an individual rotating card. 2. Choose Rotation Trigger The rotation behavior can be controlled using different triggers: None – cards remain static Auto – cards rotate automatically Click – rotation changes when clicked Scroll – cards rotate based on page scroll Hover – rotation responds to cursor hover Drag – users can manually drag through cards 3. Customize Card Layout You can control how content appears within each card by adjusting the text position : Center Left Right Top Bottom 4. Control Rotation Behavior The component includes rotation controls such as: Rotation direction Clockwise Anti-clockwise Start position Set the initial card position Angle mode Angled layout Upright layout 5. Visual Styling Options Additional styling options allow you to refine the presentation: Adjust card scale Enable clipping for out-of-focus cards Control spacing and visual hierarchy within the card stack Use Cases Product showcases Portfolio highlights Featured case studies Service highlights Interactive landing sections Creative content galleries Need help with this component or looking for custom components? Feel free to reach out for support, customization, or new builds . alipoejules@gmail.com

Interactive rotating card display