This document aims to assist domestic users learning Framer by translating the official blog content into Korean and adding practical information, addressing the scarcity of Korean resources. We hope this provides some help to Framer users.

Getting Started

First, draw stars to be used in the button. Set various sizes, then convert the frame into a component and create several Variants. In each Variant, configure one star to grow larger while another shrinks. After connecting the On Appear interaction, you'll have an animation that automatically cycles at designated time intervals.

Creating Auto-Play Animations

Similar to the stars, you can create a shimmering Shimmer animation.

• One goes from left to right

• Another goes from right to left

After making these two animations, place them at the top and bottom inside the button. Cover it with a purple background so that only the 2px top and bottom parts are visible, creating a natural shimmering effect.

Adding Details

To make the button even more special, add details. Here we use the popular particle component created by @benjaminnathan. You can get it from particles.page to create a scattering effect with small stars using the ✦ character.

Set it to switch to opacity 1 on Hover, so when you hover over it, a subtle starlight appears. Finally, overlay a circular gradient layer on top to ensure distant particles are not visible, completing a tidy finish.

See the button example and follow along→

This article is a translated and adapted version of Framer's official blog post ‘Creating an AI button with Framer’.