---
title: "CircleCards — Free Framer component · Best of Framer"
description: "Free Framer component · by BuiltByKern · Cards. Circular 3D card ring with physics"
canonical: "https://framer.elliotli.dev/component/circlecards"
---

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

# CircleCards

Circular 3D card ring with physics

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

![CircleCards preview image 1](https://framer.elliotli.dev/og/component/circlecards/e0c7a36fc2bcd127/1600x1200.jpg)

## Summary

Circular 3D card ring with physics

## Description

Circular galleries in no-code tools rarely feel dimensional—most are flat carousels with basic hover. Circle Cards gives you a ring layout with real depth, proximity-driven card rotation, and ambient auto-roll that respects interaction.

Each card sits on a polar ring. Pointer distance drives flip strength; optional fluid motion adds a second spring layer for organic movement. Auto-roll runs on your published site, pauses when hovering a card, and resumes when interaction ends—empty areas keep spinning so the composition stays alive.

WHAT YOU GET

• Circular 3D layout — ring size, card size, corner radius, 6–48 cards

• Pointer physics — stage tilt, card flip toward cursor, depth lift on proximity

• Auto-rotation — clockwise, counterclockwise, or oscillate; speed + ring scale controls

• Showcase on click — center a card for hero moments; timed return after hover-out

• Media — image + video slots, optional link per card, alt text on images

• Responsive — desktop / tablet / mobile multipliers; safe at 320px width

• Visual polish — film grain, vignette, glare, optional chromatic fringe

• Accessible — region + card labels, keyboard arrows, focus outline

• Production-safe — canvas static preview, reduced-motion fallback, no extra npm packages

QUICK START

1\. Drop the component and set frame height (min height default 520px on desktop).

2\. Replace Media with your images or videos; match Card Count to your set.

3\. Tune Layout, enable Auto-Rotation if wanted, Showcase on Click for portfolio focus.

4\. Preview on the published URL to see auto-roll and pointer physics (not only the editor).

FAQ

• Auto-roll does not run on the Framer canvas or when Reduce Motion is on—use publish/preview.

• Auto-roll pauses on card hover only, not on empty background.

• Video: MP4, WebM, MOV — muted autoplay on live site; static on canvas/reduced motion.

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

-   All · #1760

## Details

- **Author**: BuiltByKern
- **Published**: 2026-06-12
- **Updated**: 2026-09-11
- **Added**: 2026-05-17
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator