From 33d0efe2fde2f8d43e4f63a4a6121bd00cf94418 Mon Sep 17 00:00:00 2001
From: Persephone Flores <34418758+hp0844182@users.noreply.github.com>
Date: Wed, 18 Dec 2024 21:26:31 +0800
Subject: [PATCH] chore: demo fix

---
 docs/components/content/ComponentPreview.vue | 1 +
 docs/components/demo/animate-frame/index.vue | 4 +++-
 docs/components/demo/shared-layout/index.vue | 3 ++-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/components/content/ComponentPreview.vue b/docs/components/content/ComponentPreview.vue
index b6f4be7..8eb59c3 100644
--- a/docs/components/content/ComponentPreview.vue
+++ b/docs/components/content/ComponentPreview.vue
@@ -23,6 +23,7 @@ const key = ref(0)
 <template>
   <div class="border rounded-lg mt-4 relative">
     <Motion
+      :key="key"
       :as-child="true"
       :initial="{ rotate: 0 }"
       :animate="{ rotate: 360 }"
diff --git a/docs/components/demo/animate-frame/index.vue b/docs/components/demo/animate-frame/index.vue
index c073bc8..e93e507 100644
--- a/docs/components/demo/animate-frame/index.vue
+++ b/docs/components/demo/animate-frame/index.vue
@@ -7,7 +7,9 @@ const cubeRef = ref<HTMLElement | null>(null)
 useAnimationFrame((t) => {
   const rotate = Math.sin(t / 10000) * 200
   const y = (1 + Math.sin(t / 1000)) * -50
-  cubeRef.value!.style.transform = `translateY(${y}px) rotateX(${rotate}deg) rotateY(${rotate}deg)`
+  if (cubeRef.value) {
+    cubeRef.value!.style.transform = `translateY(${y}px) rotateX(${rotate}deg) rotateY(${rotate}deg)`
+  }
 })
 </script>
 
diff --git a/docs/components/demo/shared-layout/index.vue b/docs/components/demo/shared-layout/index.vue
index ae372ea..eb50d8a 100644
--- a/docs/components/demo/shared-layout/index.vue
+++ b/docs/components/demo/shared-layout/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { initialTabs as tabs } from './ingredients.ts'
+import { initialTabs as tabs } from './ingredients'
 import { AnimatePresence, Motion } from 'motion-v'
 
 const selectedTab = ref(tabs[0])
@@ -47,6 +47,7 @@ const selectedTab = ref(tabs[0])
 .window {
   width: 480px;
   height: 360px;
+  max-width: 320px;
   border-radius: 10px;
   background: white;
   overflow: hidden;