diff --git a/404.html b/404.html
index 009ca00..65838f3 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":1676667111000}'),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.dc47062a.lean.js b/assets/guide_screen-from-assets.md.23516bf8.lean.js
similarity index 89%
rename from assets/guide_screen-from-assets.md.dc47062a.lean.js
rename to assets/guide_screen-from-assets.md.23516bf8.lean.js
index 3cb4aa4..7b8eb08 100644
--- a/assets/guide_screen-from-assets.md.dc47062a.lean.js
+++ b/assets/guide_screen-from-assets.md.23516bf8.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":1676666961000}'),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":1676667111000}'),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.20e55f57.js b/assets/guide_theming.md.20e55f57.js
deleted file mode 100644
index 99577f7..0000000
--- a/assets/guide_theming.md.20e55f57.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import{M as o}from"./chunks/Mockup.5c49fc9b.js";import{s as p}from"./chunks/screen.fc899083.js";import{r as b,o as e,c as d,a as s,g as c,u as r,f as l,t as f,_ as v,d as D,p as F,h as y}from"./app.06d4fed4.js";const i=t=>(F("data-v-6f8b1b4a"),t=t(),y(),t),C=i(()=>s("h1",{id:"theming",tabindex:"-1"},[l("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),u=D(`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":1676666961000}'),h={name:"guide/theming.md"},m=Object.assign(h,{setup(t){const a=b(!0);return(_,n)=>(e(),d("div",null,[C,s("p",null,[(e(),c(o,{style:{width:"100%",height:"400px"},screen:r(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]=A=>a.value=!a.value)}," Toggle theme "),l(" Theme: "+f(a.value?"dark":"light"),1)]),u]))}});var E=v(m,[["__scopeId","data-v-6f8b1b4a"]]);export{x as __pageData,E as default};
diff --git a/assets/guide_theming.md.20e55f57.lean.js b/assets/guide_theming.md.20e55f57.lean.js
deleted file mode 100644
index 5cc7566..0000000
--- a/assets/guide_theming.md.20e55f57.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{M as o}from"./chunks/Mockup.5c49fc9b.js";import{s as p}from"./chunks/screen.fc899083.js";import{r as b,o as e,c as d,a as s,g as c,u as r,f as l,t as f,_ as v,d as D,p as F,h as y}from"./app.06d4fed4.js";const i=t=>(F("data-v-6f8b1b4a"),t=t(),y(),t),C=i(()=>s("h1",{id:"theming",tabindex:"-1"},[l("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),u=D("",3),x=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1676666961000}'),h={name:"guide/theming.md"},m=Object.assign(h,{setup(t){const a=b(!0);return(_,n)=>(e(),d("div",null,[C,s("p",null,[(e(),c(o,{style:{width:"100%",height:"400px"},screen:r(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]=A=>a.value=!a.value)}," Toggle theme "),l(" Theme: "+f(a.value?"dark":"light"),1)]),u]))}});var E=v(m,[["__scopeId","data-v-6f8b1b4a"]]);export{x as __pageData,E as default};
diff --git a/assets/guide_theming.md.867cf905.js b/assets/guide_theming.md.867cf905.js
new file mode 100644
index 0000000..21e3656
--- /dev/null
+++ b/assets/guide_theming.md.867cf905.js
@@ -0,0 +1,15 @@
+import{M as o}from"./chunks/Mockup.5c49fc9b.js";import{s as p}from"./chunks/screen.fc899083.js";import{r as f,o as n,c as d,a as e,g as c,u as r,f as l,t as v,_ as D,d as F,p as y,h as i}from"./app.06d4fed4.js";const C=s=>(y("data-v-0e1f301f"),s=s(),i(),s),u=C(()=>e("h1",{id:"theming",tabindex:"-1"},[l("Theming "),e("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),E=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1676667111000}'),m={name:"guide/theming.md"},_=Object.assign(m,{setup(s){const a=f(!0);return(A,t)=>(n(),d("div",null,[u,e("p",null,[(n(),c(o,{style:{width:"100%",height:"400px"},screen:r(p),phoneClr:a.value?"#fff":"#222",key:a.value},null,8,["screen","phoneClr"]))]),e("div",null,[e("button",{class:"button",onClick:t[0]||(t[0]=g=>a.value=!a.value)}," Toggle theme "),l(" Theme: "+v(a.value?"dark":"light"),1)]),h]))}});var S=D(_,[["__scopeId","data-v-0e1f301f"]]);export{E as __pageData,S as default};
diff --git a/assets/guide_theming.md.867cf905.lean.js b/assets/guide_theming.md.867cf905.lean.js
new file mode 100644
index 0000000..38d0c5a
--- /dev/null
+++ b/assets/guide_theming.md.867cf905.lean.js
@@ -0,0 +1 @@
+import{M as o}from"./chunks/Mockup.5c49fc9b.js";import{s as p}from"./chunks/screen.fc899083.js";import{r as f,o as n,c as d,a as e,g as c,u as r,f as l,t as v,_ as D,d as F,p as y,h as i}from"./app.06d4fed4.js";const C=s=>(y("data-v-0e1f301f"),s=s(),i(),s),u=C(()=>e("h1",{id:"theming",tabindex:"-1"},[l("Theming "),e("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),h=F("",3),E=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1676667111000}'),m={name:"guide/theming.md"},_=Object.assign(m,{setup(s){const a=f(!0);return(A,t)=>(n(),d("div",null,[u,e("p",null,[(n(),c(o,{style:{width:"100%",height:"400px"},screen:r(p),phoneClr:a.value?"#fff":"#222",key:a.value},null,8,["screen","phoneClr"]))]),e("div",null,[e("button",{class:"button",onClick:t[0]||(t[0]=g=>a.value=!a.value)}," Toggle theme "),l(" Theme: "+v(a.value?"dark":"light"),1)]),h]))}});var S=D(_,[["__scopeId","data-v-0e1f301f"]]);export{E as __pageData,S as default};
diff --git a/assets/guide_video-as-screen.md.e6ce2840.js b/assets/guide_video-as-screen.md.f76daff7.js
similarity index 99%
rename from assets/guide_video-as-screen.md.e6ce2840.js
rename to assets/guide_video-as-screen.md.f76daff7.js
index 6c58c75..8b2a125 100644
--- a/assets/guide_video-as-screen.md.e6ce2840.js
+++ b/assets/guide_video-as-screen.md.f76daff7.js
@@ -29,4 +29,4 @@ import{M as p}from"./chunks/Mockup.5c49fc9b.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":1676666961000}'),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":1676667111000}'),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.e6ce2840.lean.js b/assets/guide_video-as-screen.md.f76daff7.lean.js
similarity index 94%
rename from assets/guide_video-as-screen.md.e6ce2840.lean.js
rename to assets/guide_video-as-screen.md.f76daff7.lean.js
index 0daf6f2..0ab2ea2 100644
--- a/assets/guide_video-as-screen.md.e6ce2840.lean.js
+++ b/assets/guide_video-as-screen.md.f76daff7.lean.js
@@ -1 +1 @@
-import{M as p}from"./chunks/Mockup.5c49fc9b.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":1676666961000}'),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.5c49fc9b.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":1676667111000}'),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.22f881e8.js b/assets/index.md.22f881e8.js
new file mode 100644
index 0000000..662e4e4
--- /dev/null
+++ b/assets/index.md.22f881e8.js
@@ -0,0 +1 @@
+import{M as e}from"./chunks/Mockup.5c49fc9b.js";import{s as a}from"./chunks/screen.fc899083.js";import{o as t,c as s,a as _,b as o,u as c,_ as n,d as r}from"./app.06d4fed4.js";const d=r(' Create interactive 3D mockups with ease.
Create interactive 3D mockups with ease.