Creating an AI Button with Framer

Getting Started

To begin, I drew stars in Framer at different sizes and turned the frame into a component with a few variants. In each variant, one star was scaled up while another was scaled down. I then connected each variant with an On Appear interaction, which made them cycle automatically after a certain delay.

Creating Auto-Playing Animations

To create auto-playing animations, I applied the same technique used for the stars to create the shimmers. I created one fade that animates left to right and another that animates right to left. Then, I placed the shimmers inside the button, with one at the top and one in the bottom half. A purple fill placed on top covers most of them, leaving the animation visible just 2px above and below.

Adding More Details

Lastly, I added more stars using the famous particles component from @benjaminnathan, which can be grabbed from https://particles.page. The layer is set to display the ✦ character, and its layer simply goes to opacity 1 in the hover state. A circular gradient layer on top hides particles far away.