This document aims to help domestic users learning Framer who face challenges due to a lack of Korean materials. We've translated content from the official blog into Korean and added practical information. We hope this will be of some help to those using Framer.

Getting Started

First, draw stars to be used on the button. Set various sizes, then convert the frame into a component and create multiple Variants. In each Variant, make one star grow while another shrinks. When you connect the On Appear interaction, an animation that automatically cycles at specified intervals is completed.

Creating Auto-Play Animation

You can also create a shimmering Shimmer animation using a similar method.

• One from left to right

• And another from right to left

After creating these two animations, position them at the top and bottom within the button. Then, overlay a purple background, leaving only 2px visible at the top and bottom for a natural shimmer effect.

Adding Details

To make the button even more special, try adding details. Here, we use a famous particle component created by @benjaminnathan. You can get it from particles.page to create an effect where small stars seem to scatter, utilizing the ✦ character.

Set it to transition to opacity 1 on hover to reveal a subtle starlight when hovering over. Finally, place a circular gradient layer on top to hide particles at a distance, keeping it tidy.

See and follow the button example→

This article is a translated and adapted content from Framer's official blog, ‘Creating an AI button with Framer’.