install atropos (demo on /wait)

app/app.vue

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

app/components/atropos.vue

@@ -0,0 +1,8 @@
+<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/pages/index.vue

@@ -0,0 +1,96 @@
+<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

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

app/plugins/01.atropos.ts

@@ -0,0 +1,9 @@
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('atropos/element').then(({ default: AtroposComponent }) => {
+      customElements.define('atropos-component', AtroposComponent)
+    })
+  }
+})