atropos v2

components/zero-a.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="container mx-auto p-4 inline-flex">
+    <atropos-component ref="atropos" class="my-atropos" active-offset="80" shadow-scale="1.05">
+      <img src="/zero/sky-a.jpg" data-atropos-offset="-8" />
+      <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>
+    </atropos-component>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const atropos = ref(null);
+
+onMounted(() => {
+  atropos.value.addEventListener('enter', () => {
+    console.log('Entered');
+  });
+  atropos.value.addEventListener('leave', () => {
+    console.log('Left');
+  });
+  atropos.value.addEventListener('rotate', (event) => {
+    console.log('Rotate', event.detail);
+  });
+});
+</script>
+
+<style scoped>
+/* .my-atropos {
+  width: 320px;
+  height: 160px;
+} */
+.logo {
+  filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.8));
+  left: 14%;
+  top: 10%;
+}
+</style>

components/zero-b.vue

@@ -1,8 +1,10 @@
 <template>
-  <div class="container mx-auto p-4">
-    <atropos-component ref="atropos" class="my-atropos" active-offset="40" shadow-scale="1.05">
-      <img src="https://files.erudi.fr/screenshit/41684f3ebccdde7352339aa0ae79bc43d50a2b79.jpg" data-atropos-offset="-5" alt="3D Image 2" />
-      <img src="/logo.svg" alt="3D Image" data-atropos-offset="0" class="absolute inset-0 w-full h-full object-cover" />
+  <div class="container mx-auto p-4 inline-flex">
+    <atropos-component ref="atropos" class="my-atropos" active-offset="80" shadow-scale="1.05">
+      <img src="/zero/sky-b.jpg" data-atropos-offset="-8" />
+      <img src="/zero/propeller-b.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
+      <img src="/zero/zero-b.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" />
     </atropos-component>
   </div>
 </template>
@@ -26,8 +28,13 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.my-atropos {
+/* .my-atropos {
   width: 320px;
   height: 160px;
-}
+} */
+.logo {
+    filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.8));
+    left: 14%;
+    top: 10%;
+  }
 </style>

pages/atropos.vue

@@ -1,5 +1,6 @@
 <template>
   <section>
-    <atropos></atropos>
+    <zero-a></zero-a>
+    <zero-b></zero-b>
   </section>
 </template>