Question 1

How to create a particle system with Phenomenon?

Accepted Answer

Import the library, create a renderer with a canvas element, and add an instance using .add() with custom vertex and fragment shaders. Check the CodePen demos linked in the README for step-by-step examples.

Question 2

Phenomenon vs Three.js for particle effects?

Accepted Answer

Phenomenon is lighter and more performant for pure particle-heavy scenes, but Three.js offers broader 3D features and a larger ecosystem. Choose Phenomenon if bundle size and GPU efficiency are top priorities.

Question 3

How to update particle attributes dynamically in Phenomenon?

Accepted Answer

Use the .prepareAttribute() function to override attribute data, but monitor performance since it runs on the CPU. For smooth updates, consider batching changes or using uniform variables instead.

Question 4

Does Phenomenon support WebGL 2.0?

Accepted Answer

Yes, set the contextType option to 'webgl2' when initializing the renderer, as documented in the API section, allowing access to newer WebGL features.

Question 5

How to handle resizing and responsiveness with Phenomenon?

Accepted Answer

Call the .resize() method when the window resizes to update canvas dimensions and internal values, ensuring visuals scale properly across devices.

Question 6

Can I use Phenomenon with React or Vue?

Accepted Answer

Yes, it's a vanilla JS library, so integrate it by managing the canvas lifecycle in framework hooks (e.g., useEffect in React), but be prepared to handle WebGL context manually.

Phenomenon

What is Phenomenon?

Overview

Use Cases

Best For

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions