Component
Smooth Circle Hover Interaction in Framer
This is a smooth circle hover interaction in Framer, recreated from PROPAGANDE’s work for the Inkwell website. Remix the project to explore how it’s built—all without a single line of code.
Created by
About the resource
To create this circle hover interaction, I started by building an image component with six variants. In the default variant, the image sits inside a 3D space layer. On the up variant, I shifted the image upward, and on the down variant, I returned it back to its original position. I then repeated the same three variants in the opposite direction, so when triggered, all images move outward to form the circular effect. These variants were connected through a mouse enter interaction, with the transition flowing from up to down using an appear interaction.
Once the component was ready, I constructed the circle using the arms technique, where each arm holds two images positioned on its edges. A text layer was placed in the center, and everything was wrapped inside a circle wrapper. To finish, I added a custom cursor, completing the smooth circle hover interaction.
About the resource
To create this circle hover interaction, I started by building an image component with six variants. In the default variant, the image sits inside a 3D space layer. On the up variant, I shifted the image upward, and on the down variant, I returned it back to its original position. I then repeated the same three variants in the opposite direction, so when triggered, all images move outward to form the circular effect. These variants were connected through a mouse enter interaction, with the transition flowing from up to down using an appear interaction.
Once the component was ready, I constructed the circle using the arms technique, where each arm holds two images positioned on its edges. A text layer was placed in the center, and everything was wrapped inside a circle wrapper. To finish, I added a custom cursor, completing the smooth circle hover interaction.
About the resource
To create this circle hover interaction, I started by building an image component with six variants. In the default variant, the image sits inside a 3D space layer. On the up variant, I shifted the image upward, and on the down variant, I returned it back to its original position. I then repeated the same three variants in the opposite direction, so when triggered, all images move outward to form the circular effect. These variants were connected through a mouse enter interaction, with the transition flowing from up to down using an appear interaction.
Once the component was ready, I constructed the circle using the arms technique, where each arm holds two images positioned on its edges. A text layer was placed in the center, and everything was wrapped inside a circle wrapper. To finish, I added a custom cursor, completing the smooth circle hover interaction.
The six variants of the image component in Framer.
The six variants of the image component in Framer.
The six variants of the image component in Framer.
