I built a rotating orbital carousel that arranges any set of cards in a 3D ring and expands any one of them into a full-screen, cinematic detail view.
Showcase anything — products, team members, case studies, portfolio pieces, events, plans, athletes. Cards float in a circular orbit that rotates automatically and reacts to scroll and touch. Click any card and it morphs from its orbit position into a full-viewport detail view with imagery, copy, stats, then collapses back on exit.
The FIFA 2026 MVP roster is just the reference demo I used to prove it out — the component itself is content-agnostic.
I honestly just wanted to see if I could build something awwwards like without knowing any line of code - to be honest its mindblowing what agents are capable of and how easy they are to use.
This component was built entirely through Framer 3.0’s AI agent workflow, using the Opus 4.8 agent. I described what I wanted and iterated with the agent — orbital math, the card-to-detail morph transition, portal-based top-layer rendering, scroll locking, and visual fixes like matching corner radii all came together through that back-and-forth. For the inner pages, I have designed them one by one manualy and fed them to the model as design references - using Framer's design pages.
Under the hood it’s a React + TypeScript Framer code component using react-dom portals and raw requestAnimationFrame animation (no animation library) for full control over motion and transition timing.
Thanks for taking a look and considering <3
I built a rotating orbital carousel that arranges any set of cards in a 3D ring and expands any one of them into a full-screen, cinematic detail view.
Showcase anything — products, team members, case studies, portfolio pieces, events, plans, athletes. Cards float in a circular orbit that rotates automatically and reacts to scroll and touch. Click any card and it morphs from its orbit position into a full-viewport detail view with imagery, copy, stats, then collapses back on exit.
The FIFA 2026 MVP roster is just the reference demo I used to prove it out — the component itself is content-agnostic.
I honestly just wanted to see if I could build something awwwards like without knowing any line of code - to be honest its mindblowing what agents are capable of and how easy they are to use.
This component was built entirely through Framer 3.0’s AI agent workflow, using the Opus 4.8 agent. I described what I wanted and iterated with the agent — orbital math, the card-to-detail morph transition, portal-based top-layer rendering, scroll locking, and visual fixes like matching corner radii all came together through that back-and-forth. For the inner pages, I have designed them one by one manualy and fed them to the model as design references - using Framer's design pages.
Under the hood it’s a React + TypeScript Framer code component using react-dom portals and raw requestAnimationFrame animation (no animation library) for full control over motion and transition timing.
Thanks for taking a look and considering <3
Ivan Ageev