atropos v1

components/atropos.vue

@@ -0,0 +1,33 @@
+<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" />
+    </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;
+}
+</style>

pages/atropos.vue

@@ -0,0 +1,5 @@
+<template>
+  <section>
+    <atropos></atropos>
+  </section>
+</template>

plugins/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);
+    });
+  }
+});