Memulai

Pertama, gambar bintang yang akan digunakan dalam tombol. Atur ukurannya secara bervariasi, kemudian konversi frame tersebut menjadi komponen dan buat beberapa Variant. Pada setiap Variant, atur satu bintang untuk membesar dan yang lainnya untuk mengecil. Setelah itu, sambungkan interaksi On Appear agar animasi berputar otomatis dalam interval waktu yang telah ditentukan.

Membuat Animasi Putar Otomatis

Anda juga dapat membuat animasi Shimmer yang berkilau dengan cara yang sama seperti bintang.

• Satu bergerak dari kiri ke kanan

• Satu lagi dari kanan ke kiri

Setelah membuat dua animasi ini, tempatkan masing-masing di bagian atas dan bawah dalam tombol. Dengan menutupi latar belakang ungu sehingga hanya tampak bagian atas dan bawah 2px, akan tercipta efek berkilau yang natural.

Menambahkan Detail

Untuk membuat tombol lebih istimewa, coba tambahkan detail. Di sini kita memanfaatkan komponen partikel terkenal yang dibuat oleh @benjaminnathan. Anda dapat mengunduhnya dari particles.page dan gunakan karakter ✦ untuk menciptakan efek partikel yang bertebaran seperti bintang kecil.

Atur menjadi opacity 1 saat dalam kondisi Hover, sehingga bintang-bintang lembut terlihat saat mouse diarahkan. Terakhir, tambahkan layer gradasi melingkar di atas agar partikel jauh tidak terlihat untuk hasil akhir yang bersih.

Lihat contoh tombol dan coba tiru→

Artikel ini adalah adaptasi dan terjemahan dari konten blog resmi Framer, ‘Creating an AI button with Framer’.