CircleCards

Circular 3D card ring with physics

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.

Circular 3D card ring with physics