docs/index.html
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Webgl Generative Particles</title><meta name="description" content="Documentation for Webgl Generative Particles"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">Webgl Generative Particles</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>Webgl Generative Particles</h1></div><div class="tsd-panel tsd-typography"><a id="md:webgl-generative-particles-" class="tsd-anchor"></a><h1 class="tsd-anchor-link">WebGL Generative Particles <img src="https://github.com/react18-tools/webgl-generative-particles/blob/main/popper.png?raw=true" style="height: 40px"/><a href="#md:webgl-generative-particles-" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1><blockquote>
<p>This library is a Work In Progress. Feel free to request features, report bugs, or contribute. We aim to keep the APIs stable, though some changes may occur.</p>
</blockquote>
<p><a href="https://github.com/react18-tools/webgl-generative-particles/actions/workflows/test.yml" target="_blank" class="external"><img src="https://github.com/react18-tools/webgl-generative-particles/actions/workflows/test.yml/badge.svg" alt="test"></a> <a href="https://codeclimate.com/github/react18-tools/webgl-generative-particles/maintainability" target="_blank" class="external"><img src="https://api.codeclimate.com/v1/badges/17e43ef7ca4593a18757/maintainability" alt="Maintainability"></a> <a href="https://codecov.io/gh/react18-tools/webgl-generative-particles" target="_blank" class="external"><img src="https://codecov.io/gh/react18-tools/webgl-generative-particles/graph/badge.svg" alt="codecov"></a> <a href="https://www.npmjs.com/package/webgl-generative-particles" target="_blank" class="external"><img src="https://img.shields.io/npm/v/webgl-generative-particles.svg?colorB=green" alt="Version"></a> <a href="https://www.npmjs.com/package/webgl-generative-particles" target="_blank" class="external"><img src="https://img.jsdelivr.com/img.shields.io/npm/d18m/webgl-generative-particles.svg" alt="Downloads"></a> <img src="https://img.shields.io/bundlephobia/minzip/webgl-generative-particles" alt="npm bundle size"> <a href="https://gitpod.io/from-referrer/" target="_blank" class="external"><img src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod" alt="Gitpod ready-to-code"></a></p>
<p>"webgl-generative-particles" is an efficient WebGL-based generative particle system simulator designed for both React and vanilla JS applications. This system follows the mouse pointer, providing interactive and dynamic visual effects. It offers seamless integration with React (including React 18 and beyond) and Next.js, making it an ideal choice for modern frontend development. The simulator is customizable, compatible with various frameworks, and delivers high performance and real-time rendering for progressive web development.</p>
<blockquote>
<p>Check out the live demo at - <a href="https://webgl-generative-particles.vercel.app/" target="_blank" class="external">https://webgl-generative-particles.vercel.app/</a></p>
</blockquote>
<a id="md:features" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Features<a href="#md:features" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>✅ Fully Treeshakable (import from <code>webgl-generative-particles/react</code>)</p>
<p>✅ Fully TypeScript Supported</p>
<p>✅ Leverages the power of React 18 Server components</p>
<p>✅ Compatible with all React 18 build systems/tools/frameworks</p>
<p>✅ Documented with <a href="https://react18-tools.github.io/webgl-generative-particles" target="_blank" class="external">Typedoc</a> (<a href="https://react18-tools.github.io/webgl-generative-particles" target="_blank" class="external">Docs</a>)</p>
<p>✅ Examples for Next.js, Vite, and Remix</p>
<blockquote>
<p><img src="https://github.com/react18-tools/webgl-generative-particles/blob/main/popper.png?raw=true" style="height: 20px"/> Please consider starring <a href="https://github.com/react18-tools/webgl-generative-particles" target="_blank" class="external">this repository</a> and sharing it with your friends.</p>
</blockquote>
<a id="md:getting-started" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Getting Started<a href="#md:getting-started" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="md:installation" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Installation<a href="#md:installation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Using pnpm:</p>
<pre><code class="bash"><span class="hl-0">$</span><span class="hl-1"> </span><span class="hl-2">pnpm</span><span class="hl-1"> </span><span class="hl-2">add</span><span class="hl-1"> </span><span class="hl-2">webgl-generative-particles</span>
</code><button type="button">Copy</button></pre>
<p>Using npm:</p>
<pre><code class="bash"><span class="hl-0">$</span><span class="hl-1"> </span><span class="hl-2">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-2">webgl-generative-particles</span>
</code><button type="button">Copy</button></pre>
<p>Using yarn:</p>
<pre><code class="bash"><span class="hl-0">$</span><span class="hl-1"> </span><span class="hl-2">yarn</span><span class="hl-1"> </span><span class="hl-2">add</span><span class="hl-1"> </span><span class="hl-2">webgl-generative-particles</span>
</code><button type="button">Copy</button></pre>
<a id="md:usage" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Usage<a href="#md:usage" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><pre><code class="ts"><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">Particles</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">"webgl-generative-particles/react"</span><span class="hl-1">;</span><br/><br/><span class="hl-1"><</span><span class="hl-4">Particles</span><br/><span class="hl-1"> </span><span class="hl-4">fullScreenOverlay</span><br/><span class="hl-1"> </span><span class="hl-4">options</span><span class="hl-1">={{</span><br/><span class="hl-1"> </span><span class="hl-5">rgba</span><span class="hl-1">: [</span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-6">1</span><span class="hl-1">, </span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-6">0.5</span><span class="hl-1">],</span><br/><span class="hl-1"> }}</span><br/><span class="hl-1">/></span>
</code><button type="button">Copy</button></pre>
<a id="md:simulator-options" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Simulator Options<a href="#md:simulator-options" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="ts"><span class="hl-3">export</span><span class="hl-1"> </span><span class="hl-7">interface</span><span class="hl-1"> </span><span class="hl-8">ParticlesOptions</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-9">/** Particle Color </span><span class="hl-7">@defaultValue</span><span class="hl-9"> [1, 0, 0, 1] -> red */</span><br/><span class="hl-1"> </span><span class="hl-4">rgba</span><span class="hl-1">?: [</span><span class="hl-8">number</span><span class="hl-1">, </span><span class="hl-8">number</span><span class="hl-1">, </span><span class="hl-8">number</span><span class="hl-1">, </span><span class="hl-8">number</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-9">/** Maximum number of particles </span><span class="hl-7">@defaultValue</span><span class="hl-9"> 100_000 */</span><br/><span class="hl-1"> </span><span class="hl-4">maxParticles</span><span class="hl-1">?: </span><span class="hl-8">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-9">/** Particle generation rate </span><span class="hl-7">@defaultValue</span><span class="hl-9"> 0.5 */</span><br/><span class="hl-1"> </span><span class="hl-4">generationRate</span><span class="hl-1">?: </span><span class="hl-8">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-9">/** Overlay mode </span><span class="hl-7">@defaultValue</span><span class="hl-9"> false */</span><br/><span class="hl-1"> </span><span class="hl-4">overlay</span><span class="hl-1">?: </span><span class="hl-8">boolean</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-9">/** Disable mouse interaction </span><span class="hl-7">@defaultValue</span><span class="hl-9"> false */</span><br/><span class="hl-1"> </span><span class="hl-4">mouseOff</span><span class="hl-1">?: </span><span class="hl-8">boolean</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-9">/** Min and max angles in radians </span><span class="hl-7">@defaultValue</span><span class="hl-9"> [-Math.PI, Math.PI] */</span><br/><span class="hl-1"> </span><span class="hl-4">angleRange</span><span class="hl-1">?: [</span><span class="hl-8">number</span><span class="hl-1">, </span><span class="hl-8">number</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-9">/** Min and max age of particles in seconds */</span><br/><span class="hl-1"> </span><span class="hl-4">ageRange</span><span class="hl-1">?: [</span><span class="hl-8">number</span><span class="hl-1">, </span><span class="hl-8">number</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-9">/** Speed range [minSpeed, maxSpeed] */</span><br/><span class="hl-1"> </span><span class="hl-4">speedRange</span><span class="hl-1">?: [</span><span class="hl-8">number</span><span class="hl-1">, </span><span class="hl-8">number</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-9">/** Initial origin, will update as per mouse position if mouseOff is not set </span><span class="hl-7">@defaultValue</span><span class="hl-9"> [0, 0] */</span><br/><span class="hl-1"> </span><span class="hl-4">origin</span><span class="hl-1">?: [</span><span class="hl-8">number</span><span class="hl-1">, </span><span class="hl-8">number</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-9">/** Constant force [fx, fy] or a force field texture (Work In Progress) */</span><br/><span class="hl-1"> </span><span class="hl-4">forceField</span><span class="hl-1">?: </span><span class="hl-8">Vector2D</span><span class="hl-1">; </span><span class="hl-9">//| Vector[][] | string;</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<a id="md:credits" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Credits<a href="#md:credits" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The concepts in this library were learned from the following blogs and tutorials:</p>
<ul>
<li><a href="https://experiments.withgoogle.com/search?q=particles" target="_blank" class="external">https://experiments.withgoogle.com/search?q=particles</a></li>
<li><a href="https://nullprogram.com/blog/2014/06/29/" target="_blank" class="external">https://nullprogram.com/blog/2014/06/29/</a></li>
<li><a href="https://gpfault.net/posts/webgl2-particles.txt.html" target="_blank" class="external">https://gpfault.net/posts/webgl2-particles.txt.html</a></li>
<li><a href="https://umbcgaim.wordpress.com/2010/07/01/gpu-random-numbers/" target="_blank" class="external">https://umbcgaim.wordpress.com/2010/07/01/gpu-random-numbers/</a></li>
<li><a href="https://www.youtube.com/playlist?list=PLjcVFFANLS5zH_PeKC6I8p0Pt1hzph_rt" target="_blank" class="external">https://www.youtube.com/playlist?list=PLjcVFFANLS5zH_PeKC6I8p0Pt1hzph_rt</a></li>
<li><a href="https://stackoverflow.com/q/15215968/23175171" target="_blank" class="external">https://stackoverflow.com/q/15215968/23175171</a></li>
<li><a href="https://stackoverflow.com/q/71021772/23175171" target="_blank" class="external">https://stackoverflow.com/q/71021772/23175171</a></li>
</ul>
<a id="md:license" class="tsd-anchor"></a><h2 class="tsd-anchor-link">License<a href="#md:license" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>This library is licensed under the MPL-2.0 open-source license.</p>
<blockquote>
<p><img src="https://github.com/react18-tools/webgl-generative-particles/blob/main/popper.png?raw=true" style="height: 20px"/> Please consider enrolling in <a href="https://mayank-chaudhari.vercel.app/courses" target="_blank" class="external">our courses</a> or <a href="https://github.com/sponsors/mayank1513" target="_blank" class="external">sponsoring</a> our work.</p>
</blockquote>
<hr />
<p align="center" style="text-align:center">with 💖 by <a href="https://mayank-chaudhari.vercel.app" target="_blank">Mayank Kumar Chaudhari</a></p></div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#md:webgl-generative-particles-"><span>WebGL <wbr/>Generative <wbr/>Particles <img src="https://github.com/react18-<wbr/>tools/webgl-<wbr/>generative-<wbr/>particles/blob/main/popper.png?raw=true" style="height: 40px"/></span></a><ul><li><a href="#md:features"><span>Features</span></a></li><li><a href="#md:getting-started"><span>Getting <wbr/>Started</span></a></li><li><ul><li><a href="#md:installation"><span>Installation</span></a></li></ul></li><li><a href="#md:usage"><span>Usage</span></a></li><li><ul><li><a href="#md:simulator-options"><span>Simulator <wbr/>Options</span></a></li></ul></li><li><a href="#md:credits"><span>Credits</span></a></li><li><a href="#md:license"><span>License</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-1"></use></svg><span>Webgl Generative Particles</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base="."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>