Skip to content

component

Orrery Animation

By Troy Miller

Details

Summary

Spinning Concentric circles Image

Description

Orrery Animated Image brings a striking visual effect to your Framer projects. Inspired by the Mao Kun map, an ancient Chinese navigational chart made of rotating panels, this component takes any image and breaks it into three concentric circular layers that each spin independently, temporarily distorting the image before snapping back into perfect alignment. At rest, the three circles form one seamless image. On trigger, each ring rotates at its own angle and speed, creating a fluid, mechanical distortion that feels both organic and precise. It's the kind of detail that makes a page feel alive without being overwhelming. Fully customizable through Framer's property panel, you can control the size and ratio of each circle, how far each one spins and in which direction, the timing and stagger of the animation, and whether it loops automatically or fires on click. Drop in any image through the native image picker and it just works. Perfect for hero sections, about pages, or anywhere you want a moment of visual surprise. IMPORTANT: Due to the nature of digital code components, all sales are final and non-refundable . Once purchased, you receive immediate access to the complete component code, which cannot be returned. Before purchasing, please: Review the component demo and documentation carefully Check the feature list to ensure it meets your needs Contact us at troy@fireislanddesign.com with any pre-purchase questions For design work, questions, or help, please reach out at https://www.fireislanddesign.com/

Introduction

Spinning Concentric circles Image

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600169218/148/228/309/79/15
  • All · #6921