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>