---
title: "Rotate Cards — Free Framer component · Best of Framer"
description: "Free Framer component · by Refinery Studio · Cards. Rotate Cards is designed to create a dynamic visual presentation where content cards rotate continuously or respond to user interaction."
canonical: "https://framer.elliotli.dev/component/rotate-cards"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Rotate Cards

# Rotate Cards

Interactive rotating card display

[View on Framer](https://framer.com/marketplace/components/rotate-cards/?via=elliot-li)

![Rotate Cards preview image 1](https://framer.elliotli.dev/og/component/rotate-cards/463c8da4244f9952/1600x1200.jpg)

## Summary

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

## Description

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**](mailto:alipoejules@gmail.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #3741

## Details

- **Author**: Refinery Studio
- **Published**: 2026-03-23
- **Updated**: 2026-03-23
- **Added**: 2026-03-08
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards