V0.2 (#3)

* Rewrite animation loop and examples * Fix lints * Change all the things
kirkegaard · Mar 31, 2024 · ff65d02 · ff65d02
1 parent c2cb9ca
commit ff65d02
Show file tree

Hide file tree

Showing 23 changed files with 550 additions and 509 deletions.
diff --git a/example/app/(examples)/examples/page.js b/example/app/(examples)/examples/page.js
@@ -0,0 +1,40 @@
+import { Simple } from "components/examples/Simple";
+import { WebGL } from "components/examples/Webgl";
+import { Game } from "components/examples/Game";
+import { Confetti } from "components/examples/Confetti";
+import { BounceText } from "components/examples/BounceText";
+import { Math } from "components/examples/Math";
+
+import styles from "./page.module.css";
+
+const Examples = () => {
+  return (
+    <article className={styles.examples}>
+      <section>
+        <h3>Simple</h3>
+        <Simple />
+      </section>
+      <section>
+        <h3>Confetti</h3>
+        <Confetti />
+      </section>
+      <section>
+        <h3>Bouncing text</h3>
+        <BounceText />
+      </section>
+      <section>
+        <h3>WebGL</h3>
+        <WebGL />
+        <p>
+          <a href="https://www.instagram.com/p/C3Oh8Nwst0z/">Source</a>
+        </p>
+      </section>
+      <section>
+        <h3>Game</h3>
+        <Game />
+      </section>
+    </article>
+  );
+};
+
+export default Examples;
diff --git a/example/app/(examples)/examples/page.module.css b/example/app/(examples)/examples/page.module.css
@@ -0,0 +1,7 @@
+.examples {
+  display: block;
+}
+
+.examples section {
+  margin: 1rem 0;
+}
diff --git a/example/app/(home)/page.js b/example/app/(home)/page.js
@@ -0,0 +1,17 @@
+"use client";
+
+import Link from "next/link";
+
+import { WebGL } from "components/examples/Webgl";
+
+export default function Home() {
+  return (
+    <article>
+      <p>
+        A tiny hook that&apos;ll help you write neat canvas things. If
+        you&apos;re familiar with processing it might seem familiar.
+      </p>
+      <WebGL />
+    </article>
+  );
+}
diff --git a/example/app/01-simple.js b/example/app/01-simple.js
diff --git a/example/app/02-state.js b/example/app/02-state.js
diff --git a/example/app/03-props.js b/example/app/03-props.js
diff --git a/example/app/07-bounce-text.js b/example/app/07-bounce-text.js
diff --git a/example/app/favicon.ico b/example/app/favicon.ico
diff --git a/example/app/layout.js b/example/app/layout.js
@@ -1,5 +1,6 @@
+import Link from "next/link";
 import { Inter } from "next/font/google";
-import "./globals.css";
+import "styles/globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -11,7 +12,22 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <main>
+          <h1>useCanvas</h1>
+          <nav>
+            <ul>
+              <li>
+                <Link href="/">Home</Link>
+              </li>
+              <li>
+                <Link href="/examples">Examples</Link>
+              </li>
+            </ul>
+          </nav>
+          {children}
+        </main>
+      </body>
     </html>
   );
 }
diff --git a/example/app/page.js b/example/app/page.js
diff --git a/example/app/page.module.css b/example/app/page.module.css