atropos works on remote ?

app/app.vue

@@ -1,6 +1,6 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage />
+  <div>
     <NuxtRouteAnnouncer />
-  </NuxtLayout>
+    <NuxtTemplate />
+  </div>
 </template>

app/components/atropos.vue

@@ -1,8 +0,0 @@
-<template>
-  <div class="flex items-center justify-center min-h-screen">
-    <atropos-component class="h-72 w-60" active-offset="80" shadow-scale="1.05">
-      <img src="/logo.svg">
-      <img src="/ES01A/object.png">
-    </atropos-component>
-  </div>
-</template>

app/components/nuxt-template.vue

@@ -0,0 +1,7 @@
+<template>
+  <h1 class="flex items-center justify-center min-h-screen">
+    <atropos-component class="my-atropos" active-offset="80" shadow-scale="1.05">
+      <img src="/logo.svg" />
+    </atropos-component>
+  </h1>
+</template>

app/pages/index.vue

@@ -1,96 +0,0 @@
-<template>
-  <div>
-    <div class="background fixed w-full h-full">
-      <video class="animation screen" loop autoplay muted ref="animation">
-        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm">
-        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
-          media="all and (max-width: 640px)">
-      </video>
-    </div>
-    <section class="splash-screen flex items-center flex-col">
-      <figure class="ui">
-        <img class="logo" src="/logo.svg">
-      </figure>
-    </section>
-  </div>
-</template>
-
-<style scoped>
-body {
-  margin: 0;
-  overflow-x: hidden;
-}
-
-.logo,
-.button,
-.shadow,
-.animation,
-.mix {
-  transition: .7s opacity;
-}
-
-.screen {
-  position: absolute;
-  height: 100vh;
-  min-width: 100%;
-  max-width: 100%;
-}
-
-.splash-screen {
-  position: relative;
-  height: 100vh;
-  box-shadow: inset black 0px 1px 800px 200px;
-}
-
-.animation {
-  z-index: 1;
-  object-fit: cover;
-  opacity: .8;
-  /* opacity: 0; */
-}
-
-.mix {
-  z-index: 4;
-  position: fixed;
-}
-
-.shadow {
-  z-index: 3;
-  box-shadow: rgb(0, 0, 0) 0px 0px 170px 70px inset;
-  opacity: .9;
-}
-
-.ui {
-  z-index: 4;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  max-width: 80%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.logo {
-  filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
-}
-
-.mixPlayer {
-  background: black;
-  max-height: 70vh;
-}
-
-.hide {
-  opacity: 0;
-  z-index: 0;
-}
-
-.show {
-  opacity: 1;
-}
-
-.text-shadow {
-  text-shadow: 3px 2px 8px black;
-}
-</style>

app/pages/wait.vue

@@ -1,3 +0,0 @@
-<template>
-  <atropos />
-</template>

nuxt.config.ts

@@ -2,10 +2,5 @@
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
-  modules: ['@nuxt/eslint', '@nuxtjs/tailwindcss', '@pinia/nuxt'],
-  vue: {
-    compilerOptions: {
-      isCustomElement: (tag) => ['atropos-component'].includes(tag)
-    }
-  }
+  modules: ['@nuxt/eslint', '@nuxtjs/tailwindcss']
 })

package.json

@@ -12,17 +12,14 @@
   "dependencies": {
     "@nuxt/eslint": "1.9.0",
     "@nuxtjs/tailwindcss": "6.14.0",
-    "atropos": "^2.0.2",
     "eslint": "^9.33.0",
     "nuxt": "^4.0.3",
     "vue": "^3.5.18",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "atropos": "^2.0.2"
   },
   "engines": {
     "pnpm": ">=10 <11"
   },
-  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748",
-  "devDependencies": {
-    "@pinia/nuxt": "^0.11.2"
-  }
+  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748"
 }

pnpm-lock.yaml

@@ -29,10 +29,6 @@ importers:
       vue-router:
         specifier: ^4.5.1
         version: 4.5.1(vue@3.5.18(typescript@5.9.2))
-    devDependencies:
-      '@pinia/nuxt':
-        specifier: ^0.11.2
-        version: 0.11.2(magicast@0.3.5)(pinia@3.0.3(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2)))
 
 packages:
 
@@ -1146,11 +1142,6 @@ packages:
     resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
     engines: {node: '>= 10.0.0'}
 
-  '@pinia/nuxt@0.11.2':
-    resolution: {integrity: sha512-CgvSWpbktxxWBV7ModhAcsExsQZqpPq6vMYEe9DexmmY6959ev8ukL4iFhr/qov2Nb9cQAWd7niFDnaWkN+FHg==}
-    peerDependencies:
-      pinia: ^3.0.3
-
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1617,9 +1608,6 @@ packages:
   '@vue/devtools-api@6.6.4':
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
-  '@vue/devtools-api@7.7.7':
-    resolution: {integrity: sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==}
-
   '@vue/devtools-core@7.7.7':
     resolution: {integrity: sha512-9z9TLbfC+AjAi1PQyWX+OErjIaJmdFlbDHcD+cAMYKY6Bh5VlsAtCeGyRMrXwIlMEQPukvnWt3gZBLwTAIMKzQ==}
     peerDependencies:
@@ -3702,15 +3690,6 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
-  pinia@3.0.3:
-    resolution: {integrity: sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==}
-    peerDependencies:
-      typescript: '>=4.4.4'
-      vue: ^2.7.0 || ^3.5.11
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   pirates@4.0.7:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
@@ -6127,13 +6106,6 @@ snapshots:
       '@parcel/watcher-win32-ia32': 2.5.1
       '@parcel/watcher-win32-x64': 2.5.1
 
-  '@pinia/nuxt@0.11.2(magicast@0.3.5)(pinia@3.0.3(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2)))':
-    dependencies:
-      '@nuxt/kit': 3.18.1(magicast@0.3.5)
-      pinia: 3.0.3(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2))
-    transitivePeerDependencies:
-      - magicast
-
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -6599,10 +6571,6 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-api@7.7.7':
-    dependencies:
-      '@vue/devtools-kit': 7.7.7
-
   '@vue/devtools-core@7.7.7(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2))':
     dependencies:
       '@vue/devtools-kit': 7.7.7
@@ -8955,13 +8923,6 @@ snapshots:
 
   pify@2.3.0: {}
 
-  pinia@3.0.3(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2)):
-    dependencies:
-      '@vue/devtools-api': 7.7.7
-      vue: 3.5.18(typescript@5.9.2)
-    optionalDependencies:
-      typescript: 5.9.2
-
   pirates@4.0.7: {}
 
   pkg-types@1.3.1:

public/play.svg

@@ -1,50 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-
-<svg
-   fill="#000000"
-   height="800px"
-   width="800px"
-   version="1.1"
-   id="Capa_1"
-   viewBox="0 0 60 60"
-   xml:space="preserve"
-   sodipodi:docname="play.svg"
-   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-   id="defs2">
-	
-	
-</defs><sodipodi:namedview
-   id="namedview2"
-   pagecolor="#505050"
-   bordercolor="#eeeeee"
-   borderopacity="1"
-   inkscape:showpageshadow="0"
-   inkscape:pageopacity="0"
-   inkscape:pagecheckerboard="0"
-   inkscape:deskcolor="#505050"
-   inkscape:zoom="0.94997202"
-   inkscape:cx="340.01001"
-   inkscape:cy="397.38012"
-   inkscape:window-width="1920"
-   inkscape:window-height="1132"
-   inkscape:window-x="0"
-   inkscape:window-y="0"
-   inkscape:window-maximized="1"
-   inkscape:current-layer="path4" />
-
-<g
-   id="g4"
-   transform="translate(9.7969913,-22.06049)"><g
-     id="path4"
-     inkscape:transform-center-x="-3.1076416"
-     inkscape:transform-center-y="0.031482236"
-     style="opacity:1"
-     transform="matrix(0.16696126,-0.60372499,0.52316491,0.19267096,25.039308,35.922386)"><path
-       id="path1"
-       style="baseline-shift:baseline;display:inline;overflow:visible;vector-effect:none;fill:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2.3;paint-order:fill markers stroke;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
-       d="m -9.5847112,-19.414681 a 2.4868138,2.4868138 0 0 0 -3.1047968,-1.516874 l -18.788944,6.087811 -18.791084,6.0858648 a 2.4868138,2.4868138 0 0 0 -0.900333,4.2129952 L -36.501957,8.6836742 -21.835903,21.91414 a 2.4868138,2.4868138 0 0 0 4.097569,-1.326305 l 4.124976,-19.3182854 4.1231169,-19.3163776 a 2.4868138,2.4868138 0 0 0 -0.09447,-1.367853 z m -0.7440438,70.809953 a 54.628808,47.339229 72.300195 0 1 -61.707096,-37.65028 54.628808,47.339229 72.300195 0 1 28.489522,-66.435356 54.628808,47.339229 72.300195 0 1 61.707096,37.650281 54.628808,47.339229 72.300195 0 1 -28.489522,66.435355 z" /></g></g></svg>

public/youtube.svg

@@ -1,57 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   version="1.1"
-   id="svg1"
-   sodipodi:docname="youtube.svg"
-   width="25.177818"
-   height="17.624441"
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1" />
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:zoom="13.548512"
-     inkscape:cx="13.322496"
-     inkscape:cy="8.6725392"
-     inkscape:window-width="1920"
-     inkscape:window-height="1011"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg1" />
-  <g
-     id="Page-1"
-     stroke="none"
-     stroke-width="1"
-     fill="none"
-     fill-rule="evenodd"
-     style="fill:#ff0000"
-     transform="matrix(1.2588908,0,0,1.2588908,3.6299617e-6,-3.1302942e-5)">
-    <g
-       id="Dribbble-Light-Preview"
-       transform="translate(-300,-7442)"
-       fill="#000000"
-       style="fill:#ff0000">
-      <g
-         id="icons"
-         transform="translate(56,160)"
-         style="fill:#ff0000">
-        <path
-           d="m 251.98843,7291.5859 v -5.6117 c 1.99221,0.9375 3.53517,1.843 5.36003,2.8193 -1.50511,0.8347 -3.36782,1.7712 -5.36003,2.7924 m 11.10257,-8.403 c -0.34366,-0.4528 -0.92937,-0.8048 -1.55293,-0.9215 -1.83283,-0.348 -13.2671,-0.349 -15.09893,0 -0.50004,0.094 -0.9453,0.3201 -1.32781,0.6722 -1.61169,1.4959 -1.10667,9.5179 -0.71819,10.8174 0.16336,0.5624 0.37454,0.9683 0.6405,1.2346 0.34266,0.352 0.81182,0.5943 1.35071,0.703 1.5091,0.3122 9.28369,0.4867 15.12185,0.047 0.53789,-0.094 1.01403,-0.344 1.38956,-0.711 1.49017,-1.49 1.38857,-9.9628 0.19524,-11.8416"
-           id="youtube-[#168]"
-           style="fill:#ff0000" />
-      </g>
-    </g>
-  </g>
-</svg>