Solid.js Particle Destruction

Particle Destruction adalah modul animasi partikel menggunakan Three.js dan Solid.js. Modul ini memungkinkan Anda untuk menampilkan animasi disintegrasi partikel dengan berbagai opsi kustomisasi seperti kecepatan partikel (velocity), posisi kamera (cameraZ), dan kelas CSS untuk styling (className).

Fitur

• Menggunakan Three.js untuk rendering 3D partikel.
• Menggunakan Solid.js untuk pengelolaan komponen UI.
• Opsi kustomisasi untuk mengubah kecepatan partikel di sumbu X, Y, dan Z.
• Mengatur posisi kamera secara dinamis dengan opsi cameraZ.
• Kustomisasi kelas CSS pada elemen container animasi.

Instalasi

Untuk menginstal modul ini, jalankan perintah berikut:

npm install particle-destruction

Penggunaan

Anda dapat menggunakan ParticleDestruction sebagai komponen di proyek Solid.js Anda. Berikut adalah contoh cara penggunaannya:

Contoh Penggunaan Dasar:

import ParticleDestruction from "particle-destruction";

function App() {
  return (
    <div>
      <ParticleDestruction
        url="https://example.com/image.jpg" // URL gambar untuk dijadikan partikel
        onClick={() => console.log("Particles destroyed")} // Event handler untuk klik
      />
    </div>
  );
}

export default App;

Contoh Penggunaan dengan Kustomisasi:

import ParticleDestruction from "particle-destruction";

function App() {
  return (
    <div>
      <ParticleDestruction
        url="https://example.com/image.jpg" // URL gambar yang akan dijadikan partikel
        onClick={() => console.log("Particles destroyed")} // Event handler untuk klik
        className="custom-particle-container" // Kelas CSS kustom untuk container
        cameraZ={500} // Menyesuaikan posisi kamera di sumbu Z
        velocityConfig={{ x: 2, y: 8, z: 1 }} // Menyesuaikan kecepatan partikel di sumbu X, Y, dan Z
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------------------|---------------------|-------------------------------|-----------------------------------------------------------------------------| | url | string | null | URL gambar yang akan dihancurkan menjadi partikel. | | onClick | function | null | Fungsi yang akan dipanggil ketika partikel dihancurkan (pada klik). | | className | string | "default-particle-container" | Kelas CSS kustom untuk container elemen animasi. | | cameraZ | number | container.offsetWidth - container.offsetHeight | Posisi kamera di sumbu Z (jarak dari partikel). | | velocityConfig | object | { x: 1, y: 6, z: 0 } | Kustomisasi kecepatan partikel di sumbu X, Y, dan Z. |

Penjelasan Props:

• url: Mengatur URL gambar yang ingin dijadikan partikel.
• onClick: Event handler yang akan dipanggil ketika elemen ParticleDestruction di klik.
• className: Kelas CSS kustom yang akan diterapkan pada elemen div yang membungkus partikel.
• cameraZ: Posisi kamera dalam sumbu Z, yang menentukan seberapa jauh atau dekat kamera dari partikel.
• velocityConfig: Opsi untuk mengatur kecepatan partikel dalam tiga sumbu:
  • x: Mengatur kecepatan pergerakan partikel secara horizontal (sumbu X).
  • y: Mengatur kecepatan pergerakan partikel secara vertikal (sumbu Y).
  • z: Mengatur kecepatan pergerakan partikel secara kedalaman (sumbu Z).

CSS Kustomisasi

Anda dapat menambahkan gaya kustom dengan menggunakan kelas CSS yang diberikan melalui prop className. Contoh:

.custom-particle-container {
  border: 2px solid #000;
  background-color: rgba(255, 255, 255, 0.1);
}

Contoh Kode Lengkap

Berikut adalah contoh kode lengkap dari penggunaan ParticleDestruction:

import ParticleDestruction from "particle-destruction";

function App() {
  return (
    <div>
      <ParticleDestruction
        url="https://example.com/image.jpg"
        onClick={() => console.log("Particles destroyed")}
        className="custom-particle-container"
        cameraZ={400}
        velocityConfig={{ x: 3, y: 5, z: 2 }}
      />
    </div>
  );
}

export default App;

License

MIT License