Webgl Generative Particles

"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.

✅ Fully Treeshakable (import from webgl-generative-particles/client/loader-container)

✅ Fully TypeScript Supported

✅ Leverages the power of React 18 Server components

✅ Compatible with all React 18 build systems/tools/frameworks

✅ Documented with Typedoc (Docs)

✅ Examples for Next.js, Vite, and Remix

Please consider starring this repository and sharing it with your friends.

Getting Started

Installation

$ pnpm add webgl-generative-particles

or

$ npm install webgl-generative-particles

or

$ yarn add webgl-generative-particles

Want Lite Version?

$ pnpm add webgl-generative-particles-lite

or

$ npm install webgl-generative-particles-lite

or

$ yarn add webgl-generative-particles-lite

You need r18gs as a peer-dependency

Import Styles

You can import styles globally or within specific components.

/* globals.css */
@import "webgl-generative-particles/dist";

// layout.tsx
import "webgl-generative-particles/dist/index.css";

For selective imports:

/* globals.css */
@import "webgl-generative-particles/dist/client"; /** required if you are using LoaderContainer */
@import "webgl-generative-particles/dist/server/bars/bars1";

Usage

Using loaders is straightforward.

import { Bars1 } from "webgl-generative-particles/dist/server/bars/bars1";

export default function MyComponent() {
  return someCondition ? <Bars1 /> : <>Something else...</>;
}

For detailed API and options, refer to the API documentation.

Using LoaderContainer

LoaderContainer is a fullscreen component. You can add this component directly in your layout and then use useLoader hook to toggle its visibility.

// layout.tsx
<LoaderContainer />
	 ...

// some other page or component
import { useLoader } from "webgl-generative-particles/dist/hooks";

export default MyComponent() {
	const { setLoading } = useLoader();
	useCallback(()=>{
		setLoading(true);
		...do some work
		setLoading(false);
	}, [])
	...
}

Creadits

I have learnt the concepts from the following blogs and tutorials.

• https://experiments.withgoogle.com/search?q=particles
• https://nullprogram.com/blog/2014/06/29/
• https://gpfault.net/posts/webgl2-particles.txt.html
• https://umbcgaim.wordpress.com/2010/07/01/gpu-random-numbers/
• https://www.youtube.com/playlist?list=PLjcVFFANLS5zH_PeKC6I8p0Pt1hzph_rt
• https://stackoverflow.com/q/15215968/23175171
• https://stackoverflow.com/q/71021772/23175171

License

This library is licensed under the MPL-2.0 open-source license.

Please consider enrolling in our courses or sponsoring our work.

---

with 💖 by Mayank Kumar Chaudhari