initial commit

astro.config.ts

@@ -3,13 +3,14 @@ import react from '@astrojs/react'
 import tailwind from '@astrojs/tailwind'
 import icon from 'astro-icon'
 import { defineConfig } from 'astro/config'
+import glsl from 'vite-plugin-glsl'
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://playground.shiftbrain.com/',
-  base: '/post/template',
+  base: '/post/particle-clock',
   server: {
-    open: '/post/template',
+    open: '/post/particle-clock/',
   },
   prefetch: true,
   integrations: [
@@ -21,6 +22,7 @@ export default defineConfig({
     react(),
   ],
   vite: {
+    plugins: [glsl()],
     define: {
       'import.meta.vitest': 'undefined',
     },

package.json

@@ -37,7 +37,9 @@
     "eslint-plugin-astro": "1.1.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-tailwindcss": "3.15.1",
+    "gsap": "3.12.7",
     "leva": "0.9.35",
+    "lil-gui": "0.20.0",
     "postcss-fluid-sizing-function": "0.0.2",
     "prettier": "3.2.5",
     "prettier-plugin-astro": "0.14.1",
@@ -47,6 +49,8 @@
     "react-device-detect": "2.2.3",
     "react-dom": "18.3.1",
     "rollup-plugin-visualizer": "5.12.0",
+    "stats-gl": "3.6.0",
+    "three": "0.173.0",
     "tiny-invariant": "1.3.3",
     "vitest": "1.5.3"
   },
@@ -62,7 +66,8 @@
     "inquirer": "9.3.2",
     "postcss-preset-env": "10.0.5",
     "tsx": "4.7.2",
-    "typescript-eslint": "8.8.0"
+    "typescript-eslint": "8.8.0",
+    "vite-plugin-glsl": "1.3.1"
   },
   "overrides": {
     "leva": {

src/meta.json

@@ -0,0 +1,12 @@
+{
+  "slug": "particle-clock",
+  "title": "Particle Clock",
+  "author": "komakine",
+  "tags": [
+    "three",
+    "animation",
+    "glsl",
+    "particle"
+  ],
+  "device": "all"
+}

src/pages/index.astro

@@ -6,11 +6,8 @@ import { title, slug } from '../meta.json'
 <Layout {title} repoUrl={`https://github.com/devjam/playground-${slug}`}>
   <main>
     {/* contents start */}
-    <div class="relative flex min-h-svh flex-col items-center justify-center text-30">
-      <ul class="list-disc">
-        <li>Alpine example　→　_alpine-example.astro</li>
-        <li>React example　→　_react-example.astro</li>
-      </ul>
+    <div x-data="particleClock" class="h-lvh w-screen">
+      <div class="absolute inset-0 size-full" x-ref="container"></div>
     </div>
     {/* contents end */}
   </main>