Add mouse trails

examples/pages-router/package.json

@@ -22,6 +22,7 @@
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "react-webgl-trails": "^0.0.2",
     "typescript": "^5.5.2"
   }
 }

examples/pages-router/src/pages/_app.tsx

@@ -1,15 +1,14 @@
 import * as React from "react";
 import { AppProps } from "next/app";
 import { ColorSchemeType, ThemeSwitcher } from "nextjs-themes";
-import { CardProps, Layout } from "@repo/shared/dist/server";
 import "../styles/global.css";
 import { Inter } from "next/font/google";
-import { Header } from "@repo/shared";
 import Link from "next/link";
-import { Card, Cards, LandingPage } from "@repo/shared/dist/server";
-import { ThemeController, PageNavigatorCard } from "@repo/shared";
+import { Card, Cards, LandingPage, Layout, type CardProps } from "@repo/shared/dist/server";
+import { ThemeController, PageNavigatorCard, Header } from "@repo/shared";
 import { ColorSwitch } from "nextjs-themes/color-switch";
 import { ScopedThemes } from "@repo/shared/dist/client/scoped-themes";
+import { MouseTrail } from "react-webgl-trails";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -48,6 +47,7 @@ export default function App({ Component, pageProps }: _AppProps) {
           </Cards>
         </LandingPage>
       </Layout>
+      <MouseTrail />
     </div>
   );
 }

examples/pages-router/src/styles/global.css

@@ -1,6 +1,7 @@
 @import "nextjs-themes/css";
 @import "@repo/shared/dist/global.css";
 @import "@repo/shared/dist";
+@import "react-webgl-trails/dist";
 
 html {
   -webkit-text-size-adjust: 100%;