diff --git a/404.html b/404.html
index 8c5409a..78ac990 100644
--- a/404.html
+++ b/404.html
@@ -5,14 +5,14 @@
Color of the light as a CSS-style string.
Color of the phone as a CSS-style string.
The position of the phone. Can also be an array if multiple screens specified.
The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.
Color of the light as a CSS-style string.
Color of the phone as a CSS-style string.
The position of the phone. Can also be an array if multiple screens specified.
The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.
<template>
+import{_ as s,o as a,c as n,d as e}from"./app.06d4fed4.js";const u=JSON.parse('{"title":"Screen image from assets folder","description":"","frontmatter":{},"headers":[{"level":2,"title":"In Vite powered projects","slug":"in-vite-powered-projects"},{"level":2,"title":"In Vue CLI powered projects","slug":"in-vue-cli-powered-projects"}],"relativePath":"guide/screen-from-assets.md","lastUpdated":1658677066000}'),p={name:"guide/screen-from-assets.md"},l=e(`Screen image from assets folder
In Vite powered projects
<template>
<Mockup :screen="screenImage" />
</template>
diff --git a/assets/guide_screen-from-assets.md.132f12ad.lean.js b/assets/guide_screen-from-assets.md.d8d2acd1.lean.js
similarity index 89%
rename from assets/guide_screen-from-assets.md.132f12ad.lean.js
rename to assets/guide_screen-from-assets.md.d8d2acd1.lean.js
index 7990b8c..8929317 100644
--- a/assets/guide_screen-from-assets.md.132f12ad.lean.js
+++ b/assets/guide_screen-from-assets.md.d8d2acd1.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,d as e}from"./app.06d4fed4.js";const u=JSON.parse('{"title":"Screen image from assets folder","description":"","frontmatter":{},"headers":[{"level":2,"title":"In Vite powered projects","slug":"in-vite-powered-projects"},{"level":2,"title":"In Vue CLI powered projects","slug":"in-vue-cli-powered-projects"}],"relativePath":"guide/screen-from-assets.md","lastUpdated":1658676489000}'),p={name:"guide/screen-from-assets.md"},l=e("",5),o=[l];function t(r,c,D,F,i,y){return a(),n("div",null,o)}var C=s(p,[["render",t]]);export{u as __pageData,C as default};
+import{_ as s,o as a,c as n,d as e}from"./app.06d4fed4.js";const u=JSON.parse('{"title":"Screen image from assets folder","description":"","frontmatter":{},"headers":[{"level":2,"title":"In Vite powered projects","slug":"in-vite-powered-projects"},{"level":2,"title":"In Vue CLI powered projects","slug":"in-vue-cli-powered-projects"}],"relativePath":"guide/screen-from-assets.md","lastUpdated":1658677066000}'),p={name:"guide/screen-from-assets.md"},l=e("",5),o=[l];function t(r,c,D,F,i,y){return a(),n("div",null,o)}var C=s(p,[["render",t]]);export{u as __pageData,C as default};
diff --git a/assets/guide_theming.md.063681cb.js b/assets/guide_theming.md.063681cb.js
deleted file mode 100644
index 46c37f9..0000000
--- a/assets/guide_theming.md.063681cb.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import{M as l}from"./chunks/Mockup.ce849057.js";import{s as o}from"./chunks/screen.fc899083.js";import{r as p,o as d,c,a as s,g as r,u as v,f as e,t as b,_ as D,d as F,p as y,h as i}from"./app.06d4fed4.js";const C=t=>(y("data-v-d89b4156"),t=t(),i(),t),u=C(()=>s("h1",{id:"theming",tabindex:"-1"},[e("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),h=F(`The phoneClr and lightClr props are not reactive, and are intended to be set when the component is mounted. But if you want to you still can force a rerender by giving the Mockup a key.
Code example
<template>
- <Mockup
- screen="screen.png"
- :phoneClr="darkTheme ? '#fff' : '#222'"
- :key="darkTheme"
- />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import Mockup from 'vue-three-d-mockup';
-
-const darkTheme = ref(true);
-</script>
-
`,3),x=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1658676489000}'),m={name:"guide/theming.md"},_=Object.assign(m,{setup(t){const a=p(!0);return(A,n)=>(d(),c("div",null,[u,s("p",null,[(d(),r(l,{style:{width:"100%",height:"400px"},screen:v(o),phoneClr:a.value?"#fff":"#222",key:a.value},null,8,["screen","phoneClr"]))]),s("div",null,[s("button",{class:"button",onClick:n[0]||(n[0]=g=>a.value=!a.value)}," Toggle theme "),e(" Theme: "+b(a.value?"dark":"light"),1)]),h]))}});var E=D(_,[["__scopeId","data-v-d89b4156"]]);export{x as __pageData,E as default};
diff --git a/assets/guide_theming.md.063681cb.lean.js b/assets/guide_theming.md.063681cb.lean.js
deleted file mode 100644
index ea1c3e2..0000000
--- a/assets/guide_theming.md.063681cb.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{M as l}from"./chunks/Mockup.ce849057.js";import{s as o}from"./chunks/screen.fc899083.js";import{r as p,o as d,c,a as s,g as r,u as v,f as e,t as b,_ as D,d as F,p as y,h as i}from"./app.06d4fed4.js";const C=t=>(y("data-v-d89b4156"),t=t(),i(),t),u=C(()=>s("h1",{id:"theming",tabindex:"-1"},[e("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),h=F("",3),x=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1658676489000}'),m={name:"guide/theming.md"},_=Object.assign(m,{setup(t){const a=p(!0);return(A,n)=>(d(),c("div",null,[u,s("p",null,[(d(),r(l,{style:{width:"100%",height:"400px"},screen:v(o),phoneClr:a.value?"#fff":"#222",key:a.value},null,8,["screen","phoneClr"]))]),s("div",null,[s("button",{class:"button",onClick:n[0]||(n[0]=g=>a.value=!a.value)}," Toggle theme "),e(" Theme: "+b(a.value?"dark":"light"),1)]),h]))}});var E=D(_,[["__scopeId","data-v-d89b4156"]]);export{x as __pageData,E as default};
diff --git a/assets/guide_theming.md.139da6a3.js b/assets/guide_theming.md.139da6a3.js
new file mode 100644
index 0000000..e44ea6d
--- /dev/null
+++ b/assets/guide_theming.md.139da6a3.js
@@ -0,0 +1,15 @@
+import{M as o}from"./chunks/Mockup.ce849057.js";import{s as p}from"./chunks/screen.fc899083.js";import{r as d,o as e,c,a as s,g as r,u as v,f as l,t as b,_ as D,d as F,p as y,h as i}from"./app.06d4fed4.js";const C=t=>(y("data-v-4512b10a"),t=t(),i(),t),u=C(()=>s("h1",{id:"theming",tabindex:"-1"},[l("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),h=F(`The phoneClr and lightClr props are not reactive, and are intended to be set when the component is mounted. But if you want to you still can force a rerender by giving the Mockup a key.
Code example
<template>
+ <Mockup
+ screen="screen.png"
+ :phoneClr="darkTheme ? '#fff' : '#222'"
+ :key="darkTheme"
+ />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Mockup from 'vue-three-d-mockup';
+
+const darkTheme = ref(true);
+</script>
+
`,3),x=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1658677066000}'),m={name:"guide/theming.md"},_=Object.assign(m,{setup(t){const a=d(!0);return(A,n)=>(e(),c("div",null,[u,s("p",null,[(e(),r(o,{style:{width:"100%",height:"400px"},screen:v(p),phoneClr:a.value?"#fff":"#222",key:a.value},null,8,["screen","phoneClr"]))]),s("div",null,[s("button",{class:"button",onClick:n[0]||(n[0]=g=>a.value=!a.value)}," Toggle theme "),l(" Theme: "+b(a.value?"dark":"light"),1)]),h]))}});var E=D(_,[["__scopeId","data-v-4512b10a"]]);export{x as __pageData,E as default};
diff --git a/assets/guide_theming.md.139da6a3.lean.js b/assets/guide_theming.md.139da6a3.lean.js
new file mode 100644
index 0000000..fab629c
--- /dev/null
+++ b/assets/guide_theming.md.139da6a3.lean.js
@@ -0,0 +1 @@
+import{M as o}from"./chunks/Mockup.ce849057.js";import{s as p}from"./chunks/screen.fc899083.js";import{r as d,o as e,c,a as s,g as r,u as v,f as l,t as b,_ as D,d as F,p as y,h as i}from"./app.06d4fed4.js";const C=t=>(y("data-v-4512b10a"),t=t(),i(),t),u=C(()=>s("h1",{id:"theming",tabindex:"-1"},[l("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),h=F("",3),x=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1658677066000}'),m={name:"guide/theming.md"},_=Object.assign(m,{setup(t){const a=d(!0);return(A,n)=>(e(),c("div",null,[u,s("p",null,[(e(),r(o,{style:{width:"100%",height:"400px"},screen:v(p),phoneClr:a.value?"#fff":"#222",key:a.value},null,8,["screen","phoneClr"]))]),s("div",null,[s("button",{class:"button",onClick:n[0]||(n[0]=g=>a.value=!a.value)}," Toggle theme "),l(" Theme: "+b(a.value?"dark":"light"),1)]),h]))}});var E=D(_,[["__scopeId","data-v-4512b10a"]]);export{x as __pageData,E as default};
diff --git a/assets/guide_video-as-screen.md.26864a15.js b/assets/guide_video-as-screen.md.a1b1b910.js
similarity index 99%
rename from assets/guide_video-as-screen.md.26864a15.js
rename to assets/guide_video-as-screen.md.a1b1b910.js
index 17a737d..f4aa5f0 100644
--- a/assets/guide_video-as-screen.md.26864a15.js
+++ b/assets/guide_video-as-screen.md.a1b1b910.js
@@ -29,4 +29,4 @@ import{M as p}from"./chunks/Mockup.ce849057.js";import{r as o,o as l,c as t,a as
const videoElement = ref(null);
const vidReady = ref(false);
</script>
-
`,6),_=JSON.parse('{"title":"Video as screen","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/video-as-screen.md","lastUpdated":1658676489000}'),u={name:"guide/video-as-screen.md"},g=Object.assign(u,{setup(m){const n=o(null),a=o(!1);return(v,e)=>(l(),t("div",null,[d,s("p",null,[a.value?(l(),c(p,{key:0,style:{width:"100%",height:"400px"},screen:n.value},null,8,["screen"])):r("",!0)]),s("div",null,[s("video",{src:i(F),ref_key:"videoElement",ref:n,onCanplay:e[0]||(e[0]=f=>a.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",opacity:"0","pointer-events":"none"}},null,40,C)]),A]))}});export{_ as __pageData,g as default};
+
`,6),_=JSON.parse('{"title":"Video as screen","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/video-as-screen.md","lastUpdated":1658677066000}'),u={name:"guide/video-as-screen.md"},g=Object.assign(u,{setup(m){const n=o(null),a=o(!1);return(v,e)=>(l(),t("div",null,[d,s("p",null,[a.value?(l(),c(p,{key:0,style:{width:"100%",height:"400px"},screen:n.value},null,8,["screen"])):r("",!0)]),s("div",null,[s("video",{src:i(F),ref_key:"videoElement",ref:n,onCanplay:e[0]||(e[0]=f=>a.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",opacity:"0","pointer-events":"none"}},null,40,C)]),A]))}});export{_ as __pageData,g as default};
diff --git a/assets/guide_video-as-screen.md.26864a15.lean.js b/assets/guide_video-as-screen.md.a1b1b910.lean.js
similarity index 94%
rename from assets/guide_video-as-screen.md.26864a15.lean.js
rename to assets/guide_video-as-screen.md.a1b1b910.lean.js
index ca8e422..751f14a 100644
--- a/assets/guide_video-as-screen.md.26864a15.lean.js
+++ b/assets/guide_video-as-screen.md.a1b1b910.lean.js
@@ -1 +1 @@
-import{M as p}from"./chunks/Mockup.ce849057.js";import{r as o,o as l,c as t,a as s,g as c,i as r,u as i,f as D,d as y}from"./app.06d4fed4.js";var F="/vue-three-d-mockup/assets/screen.273a9703.mp4";const d=s("h1",{id:"video-as-screen",tabindex:"-1"},[D("Video as screen "),s("a",{class:"header-anchor",href:"#video-as-screen","aria-hidden":"true"},"#")],-1),C=["src"],A=y("",6),_=JSON.parse('{"title":"Video as screen","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/video-as-screen.md","lastUpdated":1658676489000}'),u={name:"guide/video-as-screen.md"},g=Object.assign(u,{setup(m){const n=o(null),a=o(!1);return(v,e)=>(l(),t("div",null,[d,s("p",null,[a.value?(l(),c(p,{key:0,style:{width:"100%",height:"400px"},screen:n.value},null,8,["screen"])):r("",!0)]),s("div",null,[s("video",{src:i(F),ref_key:"videoElement",ref:n,onCanplay:e[0]||(e[0]=f=>a.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",opacity:"0","pointer-events":"none"}},null,40,C)]),A]))}});export{_ as __pageData,g as default};
+import{M as p}from"./chunks/Mockup.ce849057.js";import{r as o,o as l,c as t,a as s,g as c,i as r,u as i,f as D,d as y}from"./app.06d4fed4.js";var F="/vue-three-d-mockup/assets/screen.273a9703.mp4";const d=s("h1",{id:"video-as-screen",tabindex:"-1"},[D("Video as screen "),s("a",{class:"header-anchor",href:"#video-as-screen","aria-hidden":"true"},"#")],-1),C=["src"],A=y("",6),_=JSON.parse('{"title":"Video as screen","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/video-as-screen.md","lastUpdated":1658677066000}'),u={name:"guide/video-as-screen.md"},g=Object.assign(u,{setup(m){const n=o(null),a=o(!1);return(v,e)=>(l(),t("div",null,[d,s("p",null,[a.value?(l(),c(p,{key:0,style:{width:"100%",height:"400px"},screen:n.value},null,8,["screen"])):r("",!0)]),s("div",null,[s("video",{src:i(F),ref_key:"videoElement",ref:n,onCanplay:e[0]||(e[0]=f=>a.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",opacity:"0","pointer-events":"none"}},null,40,C)]),A]))}});export{_ as __pageData,g as default};
diff --git a/assets/index.md.731a7e0e.js b/assets/index.md.731a7e0e.js
deleted file mode 100644
index 7ebaf69..0000000
--- a/assets/index.md.731a7e0e.js
+++ /dev/null
@@ -1 +0,0 @@
-import{M as e}from"./chunks/Mockup.ce849057.js";import{s as t}from"./chunks/screen.fc899083.js";import{o as a,c as d,a as s,b as _,u as c,_ as o,d as n}from"./app.06d4fed4.js";const r=n(' Create interactive 3D mockups with ease.
Create interactive 3D mockups with ease.