Add particle simulation to page

Author: mayank1513

.vscode/settings.json

@@ -15,6 +15,6 @@
 	"editor.formatOnSaveMode": "file",
 	"mayank1513.trello-kanban.Workspace.filePath": ".tkb",
 	"[glsl]": {
-		"editor.defaultFormatter": "circledev.glsl-canvas"
+		"editor.defaultFormatter": "raczzalan.webgl-glsl-editor"
 	}
 }

examples/nextjs/src/app/page.tsx

@@ -1,15 +1,30 @@
 import MyButton from "./button";
 import { LandingPage } from "@repo/shared/dist/server";
 import { Demo } from "@repo/shared";
+import { Particles } from "webgl-generative-particles/dist/react";
 
 export const metadata = {
   title: "Webgl Generative Particles",
 };
 
 /** next.js landing page */
 export default function Page(): JSX.Element {
+  const theta = Math.PI / 6;
   return (
     <LandingPage title="Next.js Example">
+      <Particles
+        style={{ height: "300px", width: "100vw", position: "absolute", left: 0, top: 0 }}
+        options={{
+          maxParticles: 100_000,
+          generationRate: 0.5,
+          ageRange: [1.01, 1.15],
+          angleRage: [Math.PI / 2.0 - theta, Math.PI / 2.0 + theta],
+          speedRange: [0.6, 1.2],
+          forceField: [0, -0.5],
+          mouseOff: true,
+          origin: [0, -1],
+        }}
+      />
       <Demo />
       <MyButton />
     </LandingPage>

packages/shared/src/server/landing-page/landing-page.tsx

@@ -41,7 +41,7 @@ export function LandingPage({ title, children }: LandingPageProps) {
     <main className={styles.main}>
       <h1 className={styles.title}>{title}</h1>
       <div className={[styles.center, styles.hero].join(" ")}>
-        <h2>Craft your next amazing library using</h2>
+        <h2>Craft your next amazing project using</h2>
         <Logo href={`https://github.com/${owner}/${repo}`} />
         <strong>Harness the full potential of React 18 Server Components!</strong>
       </div>