build

astro.config.ts

@@ -7,9 +7,9 @@ import { defineConfig } from 'astro/config'
 // https://astro.build/config
 export default defineConfig({
   site: 'https://playground.shiftbrain.com/',
-  base: '/post/template',
+  base: '/post/hover-to-drop-text',
   server: {
-    open: '/post/template',
+    open: '/post/hover-to-drop-text',
   },
   prefetch: true,
   integrations: [

package.json

@@ -26,6 +26,7 @@
     "@tailwindcss/container-queries": "0.1.1",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
     "@types/alpinejs": "3.13.10",
+    "@types/lodash": "4.17.18",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "alpinejs": "3.14.1",
@@ -37,7 +38,10 @@
     "eslint-plugin-astro": "1.1.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-tailwindcss": "3.15.1",
+    "gsap": "3.13.0",
     "leva": "0.9.35",
+    "lil-gui": "0.20.0",
+    "lodash": "4.17.21",
     "postcss-fluid-sizing-function": "0.0.2",
     "prettier": "3.2.5",
     "prettier-plugin-astro": "0.14.1",

src/meta.json

@@ -0,0 +1,11 @@
+{
+  "slug": "hover-to-drop-text",
+  "title": "Hover-to-Drop Text",
+  "author": "komakine",
+  "tags": [
+    "audio",
+    "animation",
+    "hover"
+  ],
+  "device": "pc"
+}

src/pages/index.astro

@@ -1,17 +1,41 @@
 ---
-import Layout from '../layouts/Layout.astro'
-import { title, slug } from '../meta.json'
+import Layout from '@/layouts/Layout.astro'
+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="dropText"
+      class="flex h-lvh w-screen items-center justify-center overflow-clip pb-[10vh]"
+      @pointermove="onPointermove"
+    >
+      <div class="relative w-max text-center">
+        <div
+          class="pointer-events-none mx-20 break-all text-[7vw] leading-[1.15] opacity-10"
+          x-ref="staticText"
+        >
+        </div>
+        <div
+          class="absolute inset-0 mx-20 break-all text-[7vw] leading-[1.15]"
+          x-ref="hoverText"
+          :style="{ 'color': guiParams.textColor }"
+        >
+        </div>
+      </div>
     </div>
+    <p class="absolute bottom-0 left-0 px-20 pb-15 text-black-primary/80">
+      Sound effects: <a href="https://snd.dev/" target="_blank" class="underline hover:no-underline"
+        >https://snd.dev/</a
+      >
+    </p>
     {/* contents end */}
   </main>
 </Layout>
+
+<style>
+  [x-ref='hoverText'] > div {
+    will-change: transform;
+  }
+</style>