Skip to content

Commit 563d1ca

Browse files
mayank1513mayank1513
committed
Update Readme and examples
1 parent c50ae46 commit 563d1ca

File tree

5 files changed

+53
-173
lines changed

5 files changed

+53
-173
lines changed

‎.tkb‎

Lines changed: 1 addition & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -6,61 +6,16 @@
66
"description": "🌟 Enable [private vulnerability reporting](https://github.com/react18-tools/webgl-generative-particles/security) (For public repo - do this after updating visibility to public)",
77
"columnId": "column-todo"
88
},
9-
"MLLUsAhCKaKxvEXFY0HSq": {
10-
"id": "MLLUsAhCKaKxvEXFY0HSq",
11-
"description": "Set up `CodeClimate`\n - Visit CodeClimate and set up your repo\n - Create [repository secret] for `CC_TEST_REPORTER_ID`\n - Add `*.test.*` to ignore patterns on the website\n - Update Code Climate badge",
12-
"columnId": "column-todo"
13-
},
149
"gMYfaAh2RABMP8uZRQgNx": {
1510
"id": "gMYfaAh2RABMP8uZRQgNx",
1611
"description": "Add `NPM_AUTH_TOKEN` to repository secrets to automate package publishing\n - Log in to your [`npm` account](https://www.npmjs.com/login) and create an automation token\n - Create a new repository secret `NPM_AUTH_TOKEN`",
1712
"columnId": "column-todo"
1813
},
19-
"dC7QDBLH8BmHUfaYmIt81": {
20-
"id": "dC7QDBLH8BmHUfaYmIt81",
21-
"description": "(Optional) Add Repo Stats by visiting and setting up [repobeats](https://repobeats.axiom.co/)",
22-
"columnId": "column-todo"
23-
},
24-
"P_NrSJQ8m91Odgz8E1fS6": {
25-
"id": "P_NrSJQ8m91Odgz8E1fS6",
26-
"description": "Create your library and update examples",
27-
"columnId": "column-todo"
28-
},
2914
"1dRWJhy45E1Rq5wZAmPHt": {
3015
"id": "1dRWJhy45E1Rq5wZAmPHt",
3116
"description": "Update README as required",
3217
"columnId": "column-todo"
3318
},
34-
"5vS1JNXoMhDl5IBljwh2v": {
35-
"id": "5vS1JNXoMhDl5IBljwh2v",
36-
"description": "Set up GitHub pages to deploy docs\n - Go to [repo settings](https://github.com/react18-tools/webgl-generative-particles/settings/pages) -> pages (On the left panel); Select deploy from a branch; Then Select `main` and `/docs`",
37-
"columnId": "column-todo"
38-
},
39-
"55DAZwduwTvlaxaJC8hlX": {
40-
"id": "55DAZwduwTvlaxaJC8hlX",
41-
"description": "(Optional) Set up [Deepsource](https://app.deepsource.com/login) for static code analysis",
42-
"columnId": "column-todo"
43-
},
44-
"FDFqCQvLm2mUlnTJ3Gna5": {
45-
"id": "FDFqCQvLm2mUlnTJ3Gna5",
46-
"description": "Push your changes/Create PR and see your library being automatically tested and published",
47-
"columnId": "column-todo"
48-
},
49-
"O1qAByMoxhHOR-a_guL91": {
50-
"id": "O1qAByMoxhHOR-a_guL91",
51-
"description": "Optionally deploy your examples to Vercel.",
52-
"columnId": "column-todo"
53-
},
54-
"0499BqWDwJ5cxqtC9Nr82": {
55-
"id": "0499BqWDwJ5cxqtC9Nr82",
56-
"description": "Feel free to star this template, contribute, and/or sponsor the [`terborepo-template`](https://github.com/react18-tools/turborepo-template) project or my [other open-source work](https://github.com/sponsors/mayank1513)",
57-
"columnId": "column-todo"
58-
},
59-
"IjuAtNquJ4-Ut874rHKIW": {
60-
"id": "IjuAtNquJ4-Ut874rHKIW",
61-
"description": "You can also fork the [`terborepo-template`](https://github.com/react18-tools/turborepo-template/fork) and add your package to `scripts/featured.json`\n - If approved, your package will be automatically added to FEATURED.md and also published on the home page of this repo.",
62-
"columnId": "column-todo"
63-
},
6419
"9-0sxOV9Cw-jVjngwbWKm": {
6520
"id": "9-0sxOV9Cw-jVjngwbWKm",
6621
"description": "Add multiple colors",
@@ -73,17 +28,8 @@
7328
"title": "To do",
7429
"tasksIds": [
7530
"RX4J5v4y5IOe_ucf8pMRT",
76-
"MLLUsAhCKaKxvEXFY0HSq",
7731
"gMYfaAh2RABMP8uZRQgNx",
78-
"dC7QDBLH8BmHUfaYmIt81",
79-
"P_NrSJQ8m91Odgz8E1fS6",
80-
"1dRWJhy45E1Rq5wZAmPHt",
81-
"5vS1JNXoMhDl5IBljwh2v",
82-
"55DAZwduwTvlaxaJC8hlX",
83-
"FDFqCQvLm2mUlnTJ3Gna5",
84-
"O1qAByMoxhHOR-a_guL91",
85-
"0499BqWDwJ5cxqtC9Nr82",
86-
"IjuAtNquJ4-Ut874rHKIW"
32+
"1dRWJhy45E1Rq5wZAmPHt"
8733
]
8834
},
8935
{

‎README.md‎

Lines changed: 40 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
# Webgl Generative Particles <img src="https://github.com/react18-tools/webgl-generative-particles/blob/main/popper.png?raw=true" style="height: 40px"/>
22

3+
> This library is a Work In Progress... Feel free to request features, report bugs or contribute.
4+
> We will try to keep the APIs stable, however, some APIs might change.
5+
36
[![test](https://github.com/react18-tools/webgl-generative-particles/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/webgl-generative-particles/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/17e43ef7ca4593a18757/maintainability)](https://codeclimate.com/github/react18-tools/webgl-generative-particles/maintainability) [![codecov](https://codecov.io/gh/react18-tools/webgl-generative-particles/graph/badge.svg)](https://codecov.io/gh/react18-tools/webgl-generative-particles) [![Version](https://img.shields.io/npm/v/webgl-generative-particles.svg?colorB=green)](https://www.npmjs.com/package/webgl-generative-particles) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/webgl-generative-particles.svg)](https://www.npmjs.com/package/webgl-generative-particles) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/webgl-generative-particles) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
47

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

7-
✅ Fully Treeshakable (import from `webgl-generative-particles/client/loader-container`)
10+
✅ Fully Treeshakable (import from `webgl-generative-particles/react`)
811

912
✅ Fully TypeScript Supported
1013

@@ -38,84 +41,46 @@ $ npm install webgl-generative-particles
3841
$ yarn add webgl-generative-particles
3942
```
4043

41-
## Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/webgl-generative-particles-lite)](https://www.npmjs.com/package/webgl-generative-particles-lite) [![Version](https://img.shields.io/npm/v/webgl-generative-particles-lite.svg?colorB=green)](https://www.npmjs.com/package/webgl-generative-particles-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/webgl-generative-particles-lite.svg)](https://www.npmjs.com/package/webgl-generative-particles-lite)
42-
43-
```bash
44-
$ pnpm add webgl-generative-particles-lite
45-
```
46-
47-
**or**
48-
49-
```bash
50-
$ npm install webgl-generative-particles-lite
51-
```
52-
53-
**or**
54-
55-
```bash
56-
$ yarn add webgl-generative-particles-lite
57-
```
58-
59-
> You need `r18gs` as a peer-dependency
60-
61-
### Import Styles
62-
63-
You can import styles globally or within specific components.
64-
65-
```css
66-
/* globals.css */
67-
@import "webgl-generative-particles/dist";
68-
```
69-
70-
```tsx
71-
// layout.tsx
72-
import "webgl-generative-particles/dist/index.css";
73-
```
74-
75-
For selective imports:
76-
77-
```css
78-
/* globals.css */
79-
@import "webgl-generative-particles/dist/client"; /** required if you are using LoaderContainer */
80-
@import "webgl-generative-particles/dist/server/bars/bars1";
81-
```
82-
83-
### Usage
84-
85-
Using loaders is straightforward.
86-
87-
```tsx
88-
import { Bars1 } from "webgl-generative-particles/dist/server/bars/bars1";
89-
90-
export default function MyComponent() {
91-
return someCondition ? <Bars1 /> : <>Something else...</>;
92-
}
93-
```
94-
95-
For detailed API and options, refer to [the API documentation](https://react18-tools.github.io/webgl-generative-particles).
96-
97-
**Using LoaderContainer**
44+
## Usage
9845

99-
`LoaderContainer` is a fullscreen component. You can add this component directly in your layout and then use `useLoader` hook to toggle its visibility.
46+
```ts
47+
import { Particles } from "webgl-generative-particles/react";
10048

101-
```tsx
102-
// layout.tsx
103-
<LoaderContainer />
104-
...
49+
<Particles
50+
fullScreenOverlay
51+
options={{
52+
rgba: [0, 1, 0, 0.5],
53+
}}
54+
/>
10555
```
10656

107-
```tsx
108-
// some other page or component
109-
import { useLoader } from "webgl-generative-particles/dist/hooks";
110-
111-
export default MyComponent() {
112-
const { setLoading } = useLoader();
113-
useCallback(()=>{
114-
setLoading(true);
115-
...do some work
116-
setLoading(false);
117-
}, [])
118-
...
57+
### Simulator Options
58+
59+
```ts
60+
export interface ParticlesOptions {
61+
/** particle Color @defaultValue [1, 0, 0, 1] -> red */
62+
rgba?: [number, number, number, number];
63+
/** @defaultValue 100_000 */
64+
maxParticles?: number;
65+
/** @defaultValue 0.5 */
66+
generationRate?: number;
67+
/** @defaultValue false */
68+
overlay?: boolean;
69+
/** @defaultValue false */
70+
mouseOff?: boolean;
71+
/** min and max Angles in radians: @defaultValue [-Math.PI, Math.PI] */
72+
angleRage?: [number, number];
73+
/** min and max age of particles in seconds */
74+
ageRange?: [number, number];
75+
/** [minSpeed, maxSpeed] */
76+
speedRange?: [number, number];
77+
/** Initial origin -> Will update as per mouse position when mouse moved if mouseOff is not set.
78+
* @defaultValue [0, 0]
79+
*/
80+
origin?: [number, number];
81+
/** todo */
82+
/** todo: WIP constant force [fx, fy] or a force field texture */
83+
forceField?: Vector2D; //| Vector[][] | string;
11984
}
12085
```
12186

‎examples/nextjs/src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Layout } from "@repo/shared/dist/server";
55
import { GlobalLoader, Header } from "@repo/shared";
66
import { Inter } from "next/font/google";
77
import Link from "next/link";
8-
import { Particles } from "webgl-generative-particles/dist/react";
8+
import { Particles } from "webgl-generative-particles/react";
99

1010
const inter = Inter({ subsets: ["latin"] });
1111

‎packages/shared/src/client/demo/demo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Particles } from "webgl-generative-particles/dist/react";
77
const code = `
88
// WIP - caution work in progress!
99
<div className="${styles.center}">
10-
<Particles options={{mouseOff: true}} />
10+
<Particles options={{mouseOff: true, maxParticles: 10_000, speedRange: [0.6, 1.2]}} />
1111
</div>
1212
`;
1313

0 commit comments

Comments
 (0)