stripped out site. its better this way

site/app.vue

@@ -1,5 +1,6 @@
 <template>
   <NuxtLayout>
+    
     <NuxtPage />
   </NuxtLayout>
 </template>

site/assets/main.css

@@ -6,110 +6,65 @@ html, body, #__nuxt {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
-.caramel-wrapper {
+.stage {
   position: fixed;
   inset: 0;
-  display: grid;
-  place-items: center;
-}
-
-.caramel-stage {
-  background-color: black;
-  padding: 5px;
-  border-radius: 1.5rem;
-  filter:
-    drop-shadow(0 0 40px rgba(255, 255, 255, 0.1))
-    drop-shadow(0 0 80px rgba(255, 255, 255, 0.01))      
-}
-
-.caramel-video {
-  width: min(90vw, 90vh);
-  height: auto;
-  max-height: 90vh;
-  image-rendering: pixelated;
-  border-radius: 1.5rem;
-}
-
-body {
   background: #0b0b0b;
 }
 
-.audio-toggle {
+.video {
-  position: absolute;
+  width: 100%;
-  bottom: -1.8rem;
+  height: 100%;
-  right: 0.2rem;
+  object-fit: contain;
+  display: block;
+}
 
-  background: rgba(0, 0, 0, 0.6);
+.controls {
-  color: white;
+  position: fixed;
-  border: none;
+  bottom: 1rem;
+  left: 1rem;
+
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+
+  padding: 0.35rem 0.7rem 0.35rem 0.4rem;
   border-radius: 999px;
-  padding: 0.35rem 0.55rem;
+  background: rgba(0, 0, 0, 0.55);
 
-  font-size: 0.9rem;
+  opacity: 0.45;
-  cursor: pointer;
+  transition: opacity 0.2s ease;
-  opacity: 0.55;
-
-  transition:
-    opacity 0.2s ease,
-    transform 0.2s ease,
-    background 0.2s ease;
 }
 
-.audio-toggle:hover {
+.controls:hover,
+.controls:focus-within {
   opacity: 1;
-  transform: translateY(-2px);
-  background: rgba(0, 0, 0, 0.8);
 }
 
-.caramel-float-anchor {
+.audio-toggle {
-  position: relative;
+  background: none;
-  display: inline-block;
+  border: none;
+  color: white;
+  font-size: 1.1rem;
+  line-height: 1;
+  padding: 0.25rem 0.4rem;
+  cursor: pointer;
 }
 
-.uwu-floating {
+.volume {
-  position: absolute;
+  width: 7rem;
-  font-size: 25em;
+  accent-color: #fff;
-  opacity: 0.6;
+  cursor: pointer;
-  pointer-events: none;
+}
+
+.brand {
+  position: fixed;
+  bottom: 1rem;
+  right: 1.5rem;
+
+  color: #fff;
+  font-size: 0.75rem;
+  opacity: 0.4;
   user-select: none;
-  white-space: nowrap;
+  pointer-events: none;
-  animation: floaty 5.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
-  text-shadow:
-    0 0 8px rgba(92, 92, 92, 0.7),
-    0 0 16px rgba(11, 11, 11, 0.7);
-}
-
-@keyframes floaty {
-  0%, 100% { transform: translate(0, 0); }
-  50% { transform: translate(0, -0.1em); }
-}
-
-.uwu-floating[data-pos="top"] {
-  top: -2.4rem;
-  left: 50%;
-  top: 75%;
-  transform: translateX(-50%);
-  rotate: 0.25turn;
-}
-
-.uwu-floating[data-pos="bottom"] {
-  top: 50%;
-  left: 50%;
-  margin-top: 0.4rem;
-  transform: translateX(-50%);
-  rotate: 0.25turn;
-}
-
-.uwu-floating[data-pos="left"] {
-  left: -2.6rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.uwu-floating[data-pos="right"] {
-  left: 115%;
-  top: 0%;
-  margin-left: 0.6rem;
-  transform: translateY(-50%);
-
 }

site/nuxt.config.ts

@@ -6,7 +6,7 @@ export default defineNuxtConfig({
   },
   modules: [
     '@nuxt/ui',
-    '@nuxt/image'
+    '@nuxt/image',
   ],
 
   app: {

site/package-lock.json

@@ -10,12 +10,20 @@
         "@nuxt/image": "^2.0.0",
         "@nuxt/ui": "^4.4.0",
         "@nuxtjs/tailwindcss": "6.14.0",
+        "@tresjs/core": "^5.4.0",
+        "@tresjs/nuxt": "^5.2.0",
         "corepack": "0.34.6",
         "nuxt": "^4.3.0",
         "tailwindcss": "^4.1.18",
+        "three": "^0.182.0",
         "typescript": "^5.9.3",
         "vue": "^3.5.27",
         "vue-router": "^4.6.4"
+      },
+      "devDependencies": {
+        "@types/node": "^20.11.1",
+        "@types/three": "^0.182.0",
+        "@vue/compiler-sfc": "^3.5.27"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -551,6 +559,13 @@
         "postcss-selector-parser": "^7.0.0"
       }
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/@dxup/nuxt": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@dxup/nuxt/-/nuxt-0.3.2.tgz",
@@ -1637,9 +1652,9 @@
       }
     },
     "node_modules/@isaacs/brace-expansion": {
-      "version": "5.0.0",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.1.tgz",
-      "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
+      "integrity": "sha512-WMz71T1JS624nWj2n2fnYAuPovhv7EUhk69R6i9dsVyzxt5eM3bjwvgk9L+APE1TRscGysAVMANkB0jh0LQZrQ==",
       "license": "MIT",
       "dependencies": {
         "@isaacs/balanced-match": "^4.0.1"
@@ -4615,6 +4630,12 @@
         "node": ">=14"
       }
     },
+    "node_modules/@pmndrs/pointer-events": {
+      "version": "6.6.29",
+      "resolved": "https://registry.npmjs.org/@pmndrs/pointer-events/-/pointer-events-6.6.29.tgz",
+      "integrity": "sha512-o4YD6VfJgDYjFgde/YyAw2X5KY454tdmOXrHGOvKTWJBHzkL90B5vH4rqmexwRVvaDfT3YLvVh/Dm5cBbgZXMg==",
+      "license": "SEE LICENSE IN LICENSE"
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -6142,6 +6163,159 @@
         "yjs": "^13.5.38"
       }
     },
+    "node_modules/@tresjs/core": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@tresjs/core/-/core-5.4.0.tgz",
+      "integrity": "sha512-5yjX/WhdrkHVpkXWXswG2CgOO9jyEKToxd8TOSBZoWNbhJXBD6AVnIb/MSYIdE7OYZeuAIevUyA+6CVHUKeB4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@pmndrs/pointer-events": "^6.6.17",
+        "@vue/devtools-api": "^7.7.2",
+        "@vueuse/core": "^13.9.0",
+        "radashi": "^12.6.2"
+      },
+      "peerDependencies": {
+        "three": ">=0.133",
+        "vue": ">=3.4"
+      }
+    },
+    "node_modules/@tresjs/core/node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
+    "node_modules/@tresjs/core/node_modules/@vue/devtools-kit": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@tresjs/core/node_modules/@vue/devtools-shared": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/@tresjs/core/node_modules/@vueuse/core": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.9.0.tgz",
+      "integrity": "sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.9.0",
+        "@vueuse/shared": "13.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@tresjs/core/node_modules/@vueuse/metadata": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.9.0.tgz",
+      "integrity": "sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@tresjs/core/node_modules/@vueuse/shared": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.9.0.tgz",
+      "integrity": "sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@tresjs/core/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
+    "node_modules/@tresjs/nuxt": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@tresjs/nuxt/-/nuxt-5.2.0.tgz",
+      "integrity": "sha512-Q6if6yjEMnrOQQURRu8YWdEJwrVodxlqij6pUvQoV0SSx43lPiJh0UFhOV3LeJ617hXFWO+ryGTelEk5o5jTWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "4.1.2",
+        "@nuxt/ui": "^4.0.1",
+        "@tresjs/core": "5.4.0",
+        "defu": "^6.1.4",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pkg-types": "^2.3.0",
+        "sirv": "^3.0.2",
+        "vite-plugin-glsl": "^1.5.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.133"
+      }
+    },
+    "node_modules/@tresjs/nuxt/node_modules/@nuxt/kit": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.1.2.tgz",
+      "integrity": "sha512-P5q41xeEOa6ZQC0PvIP7TSBmOAMxXK4qihDcCbYIJq8RcVsEPbGZVlidmxE6EOw1ucSyodq9nbV31FAKwoL4NQ==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.2.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.5.1",
+        "klona": "^2.0.6",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "rc9": "^2.1.2",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.15",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "unimport": "^5.2.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -6180,6 +6354,16 @@
       "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "20.19.33",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.33.tgz",
+      "integrity": "sha512-Rs1bVAIdBs5gbTIKza/tgpMuG1k3U/UMJLWecIMxNdJFDMzcM5LOiLVRYh3PilWEYDIeUDv7bpiHPLPsbydGcw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
     "node_modules/@types/parse-path": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/@types/parse-path/-/parse-path-7.0.3.tgz",
@@ -6192,12 +6376,42 @@
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
       "license": "MIT"
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.182.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.182.0.tgz",
+      "integrity": "sha512-WByN9V3Sbwbe2OkWuSGyoqQO8Du6yhYaXtXLoA5FkKTUJorZ+yOHBZ35zUUPQXlAKABZmbYp5oAqpA4RBjtJ/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.22.0"
+      }
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.21",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
       "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
       "license": "MIT"
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@unhead/vue": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.1.2.tgz",
@@ -6680,6 +6894,13 @@
         "vue": "^3.5.0"
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.69",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.69.tgz",
+      "integrity": "sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/abbrev": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.1.tgz",
@@ -8680,6 +8901,13 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -10554,6 +10782,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.22.0.tgz",
+      "integrity": "sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -12952,6 +13187,15 @@
       ],
       "license": "MIT"
     },
+    "node_modules/radashi": {
+      "version": "12.7.1",
+      "resolved": "https://registry.npmjs.org/radashi/-/radashi-12.7.1.tgz",
+      "integrity": "sha512-rwxcGY3oKMQJ+ojhS4MlxyVWqdXPVJSxg3ZjXDYYz26DYRuAAs+7XBM406/GYzPEBbjSJqdKfHDpBRfjWn34RQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/radix3": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
@@ -13490,9 +13734,9 @@
       "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "7.7.3",
+      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -14101,9 +14345,9 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.5.6",
+      "version": "7.5.7",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.6.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.7.tgz",
-      "integrity": "sha512-xqUeu2JAIJpXyvskvU3uvQW8PAmHrtXp2KDuMJwQqW8Sqq0CaZBAQ+dKS3RBXVhU4wC5NjAdKrmh84241gO9cA==",
+      "integrity": "sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==",
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",
@@ -14190,6 +14434,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.182.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
+      "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
+      "license": "MIT"
+    },
     "node_modules/tiny-inflate": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
@@ -14388,6 +14638,13 @@
         "unplugin": "^2.3.11"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/unenv": {
       "version": "2.0.0-rc.24",
       "resolved": "https://registry.npmjs.org/unenv/-/unenv-2.0.0-rc.24.tgz",
@@ -15255,6 +15512,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/vite-plugin-glsl": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/vite-plugin-glsl/-/vite-plugin-glsl-1.5.5.tgz",
+      "integrity": "sha512-6NM2P4JkM+1hNSqMhM4eagX03bmhEoTyrOrk68y3Q6KXfdF73QIuCb6BmRZvwLPgXTCOBM3Zc8gL1WxctYnrUQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.17.0",
+        "npm": ">= 10.8.3"
+      },
+      "peerDependencies": {
+        "@rollup/pluginutils": "^5.x",
+        "esbuild": ">= 0.25",
+        "vite": ">= 3.x"
+      },
+      "peerDependenciesMeta": {
+        "@rollup/pluginutils": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vite-plugin-inspect": {
       "version": "11.3.3",
       "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-11.3.3.tgz",

site/package.json

@@ -13,11 +13,19 @@
     "@nuxt/image": "^2.0.0",
     "@nuxt/ui": "^4.4.0",
     "@nuxtjs/tailwindcss": "6.14.0",
+    "@tresjs/nuxt": "^5.2.0",
+    "@tresjs/core": "^5.4.0",
+    "three": "^0.182.0",
+    "corepack": "0.34.6",
     "nuxt": "^4.3.0",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "vue": "^3.5.27",
-    "vue-router": "^4.6.4",
+    "vue-router": "^4.6.4"
-    "corepack": "0.34.6"
+  },
+  "devDependencies": {
+      "@types/node": "^20.11.1",
+      "@types/three": "^0.182.0",
+      "@vue/compiler-sfc": "^3.5.27"
   }
 }

site/pages/index.vue

@@ -1,88 +1,73 @@
 <template>
-  <div class="caramel-wrapper">
+  <div class="stage">
-    <div class="caramel-stage">
-      <div class="caramel-float-anchor">
     <video
       ref="videoEl"
-          class="caramel-video"
+      class="video"
+      src="/caramelldansen.webm"
       autoplay
       loop
-          muted
       playsinline
       preload="auto"
-        >
+      muted
-          <source src="~/assets/caramelldansen.webm" type="video/webm" />
+    />
-        </video>
 
+    <div class="controls">
       <button
         class="audio-toggle"
-          @click="toggleAudio"
         :aria-label="muted ? 'Unmute video' : 'Mute video'"
+        @click="toggleMute"
       >
-          {{ muted ? '🔇' : '🔊' }}
+        {{ muted || volume === 0 ? '🔇' : '🔊' }}
       </button>
 
-        <div
+      <input
-          class="uwu-floating"
+        v-model.number="volume"
-          :data-pos="position"
+        class="volume"
-        >
+        type="range"
-          :3
+        min="0"
-        </div>
+        max="1"
-      </div>
+        step="0.01"
-    </div>
+        aria-label="Volume"
+      />
     </div>
 
-  <div class="fixed bottom-4 right-6 opacity-40 text-xs select-none">
+    <div class="brand">gimme.pet</div>
-    gimme.pet
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 
 const videoEl = ref<HTMLVideoElement | null>(null)
 const muted = ref(true)
+const volume = ref(0.8)
 
-function toggleAudio() {
+// Browsers only allow autoplay while muted, so we start muted and let the
-  if (!videoEl.value) return
+// first user gesture turn the sound on.
-
+function toggleMute() {
   muted.value = !muted.value
-  videoEl.value.muted = muted.value
 
   if (!muted.value) {
-    videoEl.value.volume = 0.8
+    if (volume.value === 0) volume.value = 0.8
-    videoEl.value.play().catch(() => {})
+    videoEl.value?.play().catch(() => {})
   }
 }
 
-const position = ref<'top' | 'bottom' | 'left' | 'right'>('top')
+watch([muted, volume], ([isMuted, vol]) => {
+  if (!videoEl.value) return
+  videoEl.value.muted = isMuted
+  videoEl.value.volume = vol
+})
 
-function updatePosition() {
+watch(volume, (vol, prev) => {
-  const vw = window.innerWidth
+  if (vol > 0 && prev === 0) muted.value = false
-  const vh = window.innerHeight
+  if (vol === 0) muted.value = true
-
+})
-  // prioritize not colliding with short screens
-  if (vh < 520) {
-    position.value = 'bottom'
-  } else if (vw < 480) {
-    position.value = 'left'
-  } else if (vw > 1200) {
-    position.value = 'right'
-  } else {
-    position.value = 'top'
-  }
-}
 
 onMounted(() => {
-   if (videoEl.value) {
+  if (!videoEl.value) return
-    videoEl.value.muted = true
+  videoEl.value.muted = muted.value
-  }
+  videoEl.value.volume = volume.value
-  
+  videoEl.value.play().catch(() => {})
-  updatePosition()
-  window.addEventListener('resize', updatePosition)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', updatePosition)
 })
 </script>