Apa itu Generator Efek Partikel?

Desain dan pratinjau animasi partikel untuk situs web atau aplikasi Anda. Konfigurasikan jumlah partikel, kecepatan, ukuran, warna, bentuk, perilaku interaksi, dan fisika untuk membuat efek seperti salju, confetti, kunang-kunang, atau pola galaksi. Ekspor konfigurasi sebagai kode siap pakai.

Mesin di baliknya adalah tsParticles, jadi JSON yang kamu salin bisa langsung ditempel ke proyek React, Vue, atau JavaScript biasa. Interaksi mouse dan klik (repulse, grab, bubble, push, remove), fade opasitas, dan animasi warna (hue) sudah aktif dari awal, dan ekspor HTML membawa seluruh mesin di dalam berkasnya, sehingga halaman yang kamu unduh langsung berjalan offline begitu dibuka — tanpa proses build dan tanpa mengambil apa pun dari pihak lain. Pratinjau juga bisa dilebarkan ke layar penuh atau direkam sebagai GIF animasi untuk membagikan efeknya di mana saja.

Cara menggunakan

1. Pilih preset efek (salju, confetti, kunang-kunang, gelembung, galaksi, jaringan, kembang api, api, asap) atau mulai dari nol.
2. Atur detail properti partikel: jumlah, kecepatan, rentang ukuran, warna, bentuk, opasitas, serta fisika seperti gravitasi dan pantulan.
3. Pratinjau animasi secara langsung, lalu salin konfigurasi JSON tsParticles, ekspor sebagai cuplikan HTML mandiri, atau rekam pratinjau sebagai GIF animasi.

Kapan menggunakan

• Menambahkan lapisan salju atau konfeti di landing page kampanye musiman atau peluncuran produk.
• Membuat prototipe latar bagian hero situs SaaS sebelum diserahkan ke desainer.
• Membuat latar bertema galaksi atau kunang-kunang untuk portofolio atau menu game.

Hasil

Seorang web developer memilih preset salju, meningkatkan jumlah partikel menjadi 200, menambahkan sedikit efek angin, dan menyalin JSON konfigurasi untuk menambahkan efek musim dingin ke halaman landing liburan mereka.

FAQ

Apakah JSON yang diekspor bisa dipakai di framework apa pun?

Bisa. Konfigurasinya kompatibel dengan tsParticles, yang punya binding resmi untuk React, Vue, Svelte, Angular, dan JS biasa. Pasang wrapper-nya, oper JSON sebagai prop options, dan efeknya tampil persis seperti di preview ini.

Berapa partikel sampai mulai patah-patah?

Di laptop modern, 200 sampai 400 partikel jalan mulus di 60 fps. Lebih dari 500, HP kelas menengah mulai ngelag. Bentuk bintang dan poligon lebih berat dari lingkaran karena render path. Untuk mobile, tahan di 100 sampai 150 dengan interaksi minim.

Kenapa animasinya beda setelah diekspor ke HTML?

Halaman hasil ekspor memenuhi seluruh layar, sedangkan pratinjau di sini hanya sebilah pita. Jumlah partikel yang sama tersebar di area jauh lebih luas tentu terlihat lebih renggang — naikkan jumlahnya bila ingin kerapatan seperti di pratinjau. Selebihnya tidak berubah: kecepatan, ukuran, warna, dan fisika sampai persis seperti yang Anda atur.

Bisa pakai gambar sendiri sebagai bentuk partikel?

Lewat antarmuka tidak bisa, tapi mesinnya mendukung. Ekspor JSON-nya, lalu ubah shape.options.image menjadi PNG atau SVG milikmu. Gambarnya dirender mengikuti ukuran dan opasitas yang diberikan simulasi ke tiap partikel.

Apakah animasi ini menurunkan skor performa halaman?

Mesinnya menambah sekitar 30 sampai 80 KB gzipped, ditambah kanvas yang terus dirender ulang. Untuk menjaga Lighthouse, kurangi partikel dan matikan interaksi di mobile. Memuat mesinnya secara lazy setelah hero terlihat menjaga LCP tetap bersih.

Alat terkait