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/
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/
