diff --git a/404.html b/404.html
index 261d2bf..009ca00 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":1676666961000}'),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.c3495c6d.lean.js b/assets/guide_screen-from-assets.md.dc47062a.lean.js
similarity index 89%
rename from assets/guide_screen-from-assets.md.c3495c6d.lean.js
rename to assets/guide_screen-from-assets.md.dc47062a.lean.js
index 1d782c4..3cb4aa4 100644
--- a/assets/guide_screen-from-assets.md.c3495c6d.lean.js
+++ b/assets/guide_screen-from-assets.md.dc47062a.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":1676666925000}'),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":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};
diff --git a/assets/guide_theming.md.20e55f57.js b/assets/guide_theming.md.20e55f57.js
new file mode 100644
index 0000000..99577f7
--- /dev/null
+++ b/assets/guide_theming.md.20e55f57.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 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
new file mode 100644
index 0000000..5cc7566
--- /dev/null
+++ b/assets/guide_theming.md.20e55f57.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 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.ed654303.js b/assets/guide_theming.md.ed654303.js
deleted file mode 100644
index a98762b..0000000
--- a/assets/guide_theming.md.ed654303.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import{M as l}from"./chunks/Mockup.5c49fc9b.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 f,f as e,t as v,_ as b,d as D,p as F,h as y}from"./app.06d4fed4.js";const i=t=>(F("data-v-06f8abd3"),t=t(),y(),t),C=i(()=>s("h1",{id:"theming",tabindex:"-1"},[e("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":1676666925000}'),h={name:"guide/theming.md"},m=Object.assign(h,{setup(t){const a=p(!0);return(_,n)=>(d(),c("div",null,[C,s("p",null,[(d(),r(l,{style:{width:"100%",height:"400px"},screen:f(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]=A=>a.value=!a.value)}," Toggle theme "),e(" Theme: "+v(a.value?"dark":"light"),1)]),u]))}});var E=b(m,[["__scopeId","data-v-06f8abd3"]]);export{x as __pageData,E as default};
diff --git a/assets/guide_theming.md.ed654303.lean.js b/assets/guide_theming.md.ed654303.lean.js
deleted file mode 100644
index 35016be..0000000
--- a/assets/guide_theming.md.ed654303.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{M as l}from"./chunks/Mockup.5c49fc9b.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 f,f as e,t as v,_ as b,d as D,p as F,h as y}from"./app.06d4fed4.js";const i=t=>(F("data-v-06f8abd3"),t=t(),y(),t),C=i(()=>s("h1",{id:"theming",tabindex:"-1"},[e("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":1676666925000}'),h={name:"guide/theming.md"},m=Object.assign(h,{setup(t){const a=p(!0);return(_,n)=>(d(),c("div",null,[C,s("p",null,[(d(),r(l,{style:{width:"100%",height:"400px"},screen:f(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]=A=>a.value=!a.value)}," Toggle theme "),e(" Theme: "+v(a.value?"dark":"light"),1)]),u]))}});var E=b(m,[["__scopeId","data-v-06f8abd3"]]);export{x as __pageData,E as default};
diff --git a/assets/guide_video-as-screen.md.8e8290b1.js b/assets/guide_video-as-screen.md.e6ce2840.js
similarity index 99%
rename from assets/guide_video-as-screen.md.8e8290b1.js
rename to assets/guide_video-as-screen.md.e6ce2840.js
index 9a98127..6c58c75 100644
--- a/assets/guide_video-as-screen.md.8e8290b1.js
+++ b/assets/guide_video-as-screen.md.e6ce2840.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":1676666925000}'),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":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};
diff --git a/assets/guide_video-as-screen.md.8e8290b1.lean.js b/assets/guide_video-as-screen.md.e6ce2840.lean.js
similarity index 94%
rename from assets/guide_video-as-screen.md.8e8290b1.lean.js
rename to assets/guide_video-as-screen.md.e6ce2840.lean.js
index 84c0829..0daf6f2 100644
--- a/assets/guide_video-as-screen.md.8e8290b1.lean.js
+++ b/assets/guide_video-as-screen.md.e6ce2840.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":1676666925000}'),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":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};
diff --git a/assets/index.md.4e8a773e.js b/assets/index.md.4e8a773e.js
deleted file mode 100644
index 10fd079..0000000
--- a/assets/index.md.4e8a773e.js
+++ /dev/null
@@ -1 +0,0 @@
-import{M as e}from"./chunks/Mockup.5c49fc9b.js";import{s as t}from"./chunks/screen.fc899083.js";import{o as a,c as s,a as _,b as c,u as o,_ as d,d as n}from"./app.06d4fed4.js";const r=n(' Create interactive 3D mockups with ease.
Create interactive 3D mockups with ease.