---
title: "TestimonialDeck — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Hamim Reza · Carousels. Staggered rotated testimonial carousel"
canonical: "https://framer.elliotli.dev/component/testimonialdeck"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/TestimonialDeck

# TestimonialDeck

Staggered rotated testimonial carousel

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

![TestimonialDeck preview image 1](https://framer.elliotli.dev/og/component/testimonialdeck/66b26191e3889a42/1600x1200.jpg)

## Summary

Staggered rotated testimonial carousel

## Description

A staggered testimonial carousel where cards are arranged horizontally with alternating vertical offsets and rotations. The center card elevates with a drop shadow and primary color background. Click any card to bring it to focus or use arrow navigation. Built for landing pages, hero sections, and testimonial showcases that need a visually dynamic social proof section.

## Features

-   Staggered horizontal card layout with alternating vertical offsets (±15px)
    
-   Inactive cards have subtle rotations (±2.5 degrees) for dynamic depth
    
-   Center card elevated with drop shadow and primary color background
    
-   Clipped polygon card shape with 50px chamfered corner design
    
-   Diagonal accent line in top-right corner of each card
    
-   Click any card to bring it to center focus instantly
    
-   Left and right arrow navigation at the bottom
    
-   Smooth 500ms transitions on all card movements and transformations
    
-   Unlimited testimonials via array control
    
-   Each testimonial — text, author attribution and image upload
    
-   48×56px portrait image crop with top alignment
    
-   Responsive — reduces to 290px minimum card width below 640px
    
-   Font sizes scale appropriately with card dimensions
    
-   Configurable card size (250–500px)
    
-   Full color controls — primary, background, border, text, muted text
    
-   No dependencies
    

## Property Controls

**Content**

-   Testimonials — unlimited items · text, author name, title, image per item
    

**Layout**

-   Card Size — width of each card (250–500px)
    

**Colors**

-   Primary — center card background and accent color
    
-   Background — card background color
    
-   Border — card border color
    
-   Text Color — testimonial text color
    
-   Muted Text — author attribution color
    

## Technical Details

-   React useState for active card index tracking
    
-   startTransition for smooth non-blocking state updates
    
-   CSS transforms for card positioning, rotation and offset
    
-   Window resize listener for responsive breakpoint detection
    
-   Responsive at 640px breakpoint — minimum 290px card width
    
-   Proper cleanup of resize event listeners on unmount
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-xq1fytcw-ydwVZKsUuLXXPExRKelLwr68lEZh5I)

## Default Settings

-   6 pre-configured testimonials with portrait images
    
-   1200×600px default canvas
    
-   Smooth 500ms card transition duration
    

## Use Cases

Landing pages · Hero testimonial sections · SaaS homepages · Agency websites · Product review showcases · Client testimonial displays · E-commerce social proof sections · Portfolio client feedback

**SEO Keywords**

framer testimonial carousel · framer staggered cards · framer testimonial component · framer card carousel · framer social proof · framer review carousel · framer testimonial deck · framer animated testimonials · framer customer reviews · framer testimonial design · framer card stack · framer quote carousel · framer landing page component · framer code component · framer testimonial slider

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

-   All · #5982

## Details

- **Author**: Hamim Reza
- **Price**: $12.00
- **Published**: 2026-04-28
- **Updated**: 2026-05-12
- **Added**: 2026-04-17
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow