Card Stack Rotator brings an elegant, motion-driven card system to Framer. Cards automatically cycle forward on a set interval, animating with a smooth upward shift, scaling, and repositioning to create a layered stack effect. The animation loop is continuous and completely hands-off, making it ideal for testimonials or any form of rotating content.
Each card supports inline text highlighting using markdown-style formatting. Any word or phrase wrapped with double asterisks is automatically detected and highlighted with custom background and text colors—allowing you to draw attention to important statements without custom HTML.
The component is built entirely with Framer Motion for fluid, GPU-accelerated animation. You can freely customize card dimensions, spacing offset, scale reduction, rotation speed, typography, colors, and the highlight theme. The stacking logic automatically adjusts for any number of cards, ensuring a consistently smooth and polished animation.
Features
• Automatic looping card rotation• Smooth stacked-depth animation (offset + scale reduction)• Inline highlighting using markdown syntax• Custom highlight background + text color• Adjustable card width, height, spacing, scale factor, and speed• Per-element font controls for name, designation, and content• Fully responsive and pixel-sharp due to pure React + Motion• Supports unlimited custom cards via the Array control• Drop-in ready for testimonial sections, reviews, or team quotes
How to Use
Drag the component onto your canvas.
Under Cards, edit or add your testimonial or content cards.
Use double asterisks inside the Content field to highlight text.
Adjust Card Width and Card Height to fit your design.
Tweak Offset and Scale Factor to control stack spacing and depth.
Set Rotation Speed to define how often cards move to the front.
Customize fonts for Name, Designation, and Content.
Set your brand colors using the background, highlight, and text color controls.
The component begins rotating automatically—no setup required.
Launchly
