The interaction is quite simply created with a single component that has a variant and a hover state. In the hover state, we change the width of the absolutely positioned circle to achieve this pleasing animation.
The component is fully customizable, so you can just copy and paste it into your Framer project and customize it using the component properties on the right panel.
Step / 01
Remix the project.
Step / 02
See how the component is built.
Step / 03
Try recreating it for practice or just copy and paste it into your Framer project.