atropos v3

components/zero-a.vue

@@ -5,8 +5,7 @@
       <img src="/zero/propeller-a.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
       <img src="/zero/zero-a.png" data-atropos-offset="0" class="absolute inset-0 object-cover" />
       <img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
-      <a href="#" data-atropos-offset="0"
-        class="absolute w-10 h-5 p-4 bg-red-700 text-center inset-0 rounded-full hover:bg-opacity-70 duration-200">play</a>
+      <slot class="absolute" ></slot>
     </atropos-component>
   </div>
 </template>

pages/index.vue

@@ -18,12 +18,14 @@
     <div class="shadow screen" />
     <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)">
+      <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
+        media="all and (max-width: 640px)">
     </video>
     <div class="mix screen hide">
       <video class="mixPlayer screen" controls ref="mixPlayer">
         <source src="https://files.erudi.fr/evilspins/zero-a-hd.mp4" type="video/mp4">
-          <source src="https://files.erudi.fr/evilspins/zero-a-sd.mp4" type="video/webm" media="all and (max-width: 640px)">
+        <source src="https://files.erudi.fr/evilspins/zero-a-sd.mp4" type="video/webm"
+          media="all and (max-width: 640px)">
       </video>
       <button class="button button--close flex justify-center items-center" @click="closePlayer()">
         <svg width="40px" height="30px">
@@ -33,6 +35,16 @@
       </button>
     </div>
   </section>
+  <section class="flex">
+    <zero-a>
+      <button class="button flex justify-center items-center" @click="play()">
+        <svg width="40px" height="30px">
+          <polygon points="0,0 0,30 30,15" />
+        </svg>
+      </button>
+    </zero-a>
+    <zero-b></zero-b>
+  </section>
 </template>
 <script setup lang="ts">
 // SEO
@@ -88,7 +100,11 @@
   margin: 0;
 }
 
-  .logo, .button, .shadow, .animation, .mix {
+.logo,
+.button,
+.shadow,
+.animation,
+.mix {
   transition: .7s opacity;
 }
 
@@ -155,14 +171,17 @@
   color: #fdec50ff;
   font-size: 26px;
   background-color: #ffffff59;
+
   &:hover {
     background-color: #fdec50ff;
     color: black;
   }
+
   &:active {
     top: 64px;
     box-shadow: 0 0 0 0 black;
   }
+
   &--close {
     right: 24px;
     padding-top: 10px;
@@ -174,8 +193,8 @@
   opacity: 0;
   z-index: 0;
 }
+
 .show {
   opacity: 1;
 }
 </style>
-