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 memuat mesinnya lewat CDN, tinggal tempel ke halaman statis tanpa proses build. Kamu juga bisa merekam pratinjau langsung 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?

Cuplikan HTML meregangkan kanvas mengikuti ukuran kontainer induk. Kalau ditempel di div kecil, partikel jadi berdesakan. Beri wrapper tinggi tetap (misalnya 100vh atau 400px) supaya kanvas menyesuaikan.

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