diff --git a/.compare-output/headless.html b/.compare-output/headless.html
new file mode 100644
index 0000000..487bf37
--- /dev/null
+++ b/.compare-output/headless.html
@@ -0,0 +1 @@
+<div class="voxcss-floor-z" style="pointer-events: none; --voxcss-floor-base: rgb(182, 182, 197); --voxcss-grid-x: 50px; --voxcss-grid-y: 50px; --voxcss-floor-grid: url(&quot;blob:http://localhost:5199/ce3522ea-c561-4351-a967-1f22c739a03e&quot;);"><div class="voxcss-layer" style="transform: translateZ(0px);"><div class="voxcss-south voxcss-spike" style="grid-area: 7 / 7 / 8 / 8;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(2, 153, 221)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(0, 137, 205)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-east voxcss-ramp" style="grid-area: 6 / 7 / 7 / 8;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(208, 44, 125);"></div></div><div class="voxcss-east voxcss-ramp" style="grid-area: 5 / 7 / 6 / 8;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(221, 87, 0);"></div></div><div class="voxcss-east voxcss-spike" style="grid-area: 4 / 7 / 5 / 8;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(222, 176, 0)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(238, 192, 9)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-south voxcss-ramp" style="grid-area: 7 / 6 / 8 / 7;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(4, 173, 117);"></div></div><div class="voxcss-cube" style="grid-area: 6 / 6 / 7 / 7; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(148, 163, 184);"></div></div><div class="voxcss-cube" style="grid-area: 5 / 6 / 6 / 7; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(14, 165, 233);"></div></div><div class="voxcss-north voxcss-ramp" style="grid-area: 4 / 6 / 5 / 7;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(224, 60, 141);"></div></div><div class="voxcss-south voxcss-ramp" style="grid-area: 7 / 5 / 8 / 6;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(237, 103, 10);"></div></div><div class="voxcss-cube" style="grid-area: 6 / 5 / 7 / 6; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(250, 204, 21);"></div></div><div class="voxcss-cube" style="grid-area: 5 / 5 / 6 / 6; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(16, 185, 129);"></div></div><div class="voxcss-east voxcss-spike" style="grid-area: 2 / 5 / 3 / 6;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(120, 135, 156)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(136, 151, 172)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-south voxcss-ramp" style="grid-area: 7 / 4 / 8 / 5;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(2, 153, 221);"></div></div><div class="voxcss-cube" style="grid-area: 6 / 4 / 7 / 5; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(236, 72, 153);"></div></div><div style="display: none;"></div><div style="display: none;"></div><div style="display: none;"></div><div class="voxcss-east voxcss-ramp" style="grid-area: 3 / 5 / 4 / 6;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(120, 135, 156);"></div></div><div class="voxcss-south voxcss-ramp" style="grid-area: 7 / 3 / 8 / 4;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(2, 153, 221);"></div></div><div class="voxcss-cube" style="grid-area: 6 / 3 / 7 / 4; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(236, 72, 153);"></div></div><div style="display: none;"></div><div style="display: none;"></div><div style="display: none;"></div><div class="voxcss-north voxcss-ramp" style="grid-area: 2 / 3 / 3 / 4;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(136, 151, 172);"></div></div><div class="voxcss-west voxcss-spike" style="grid-area: 7 / 2 / 8 / 3;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(22, 173, 241)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(2, 153, 221)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 6 / 2 / 7 / 3;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(244, 80, 161);"></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 5 / 2 / 6 / 3;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(255, 123, 30);"></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 4 / 2 / 5 / 3;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(255, 212, 29);"></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 3 / 2 / 4 / 3;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(24, 193, 137);"></div></div><div class="voxcss-north voxcss-spike" style="grid-area: 2 / 2 / 3 / 3;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(136, 151, 172)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(156, 171, 192)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-north voxcss-ramp" style="grid-area: 2 / 4 / 3 / 5;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(2, 153, 221);"></div></div><div class="voxcss-east voxcss-wedge" style="grid-area: 4 / 5 / 5 / 6;"><div class="voxcss-wedge-slope voxcss-wedge-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L480 0 L0 480 Z" fill="rgb(208, 44, 125)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-wedge-slope voxcss-wedge-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 480 L0 480 L480 0 Z" fill="rgb(224, 60, 141)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div><div class="voxcss-layer" style="transform: translateZ(50px);"><div class="voxcss-east voxcss-ramp" style="grid-area: 4 / 4 / 5 / 5;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(221, 87, 0);"></div></div><div class="voxcss-east voxcss-spike" style="grid-area: 3 / 4 / 4 / 5;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(222, 176, 0)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(238, 192, 9)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 4 / 3 / 5 / 4;"><div class="voxcss-ramp-slope" style="background-size: 70px 50px; background-color: rgb(24, 193, 137);"></div></div><div class="voxcss-north voxcss-spike" style="grid-area: 3 / 3 / 4 / 4;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(136, 151, 172)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(156, 171, 192)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-west voxcss-spike" style="grid-area: 5 / 3 / 6 / 4;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(22, 173, 241)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(2, 153, 221)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-south voxcss-spike" style="grid-area: 5 / 4 / 6 / 5;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(224, 60, 141)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(208, 44, 125)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div></div><div class="voxcss-wall voxcss-wall--backRight" style="width: 400px; height: 300px; transform: rotateX(90deg) translateZ(150px) translateY(150px); background-color: rgb(92, 92, 107); --voxcss-wall-grid: url(&quot;blob:http://localhost:5199/b02f55b5-babb-4258-b8ff-aa353d98e8ea&quot;);"></div><div class="voxcss-wall voxcss-wall--backLeft" style="width: 300px; height: 400px; transform: rotateY(-90deg) translateZ(150px) translateX(150px); background-color: rgb(102, 102, 117); --voxcss-wall-grid: url(&quot;blob:http://localhost:5199/b02f55b5-babb-4258-b8ff-aa353d98e8ea&quot;);"></div>
\ No newline at end of file
diff --git a/.compare-output/headless.png b/.compare-output/headless.png
new file mode 100644
index 0000000..cdb7a09
Binary files /dev/null and b/.compare-output/headless.png differ
diff --git a/.compare-output/react.html b/.compare-output/react.html
new file mode 100644
index 0000000..51526e9
--- /dev/null
+++ b/.compare-output/react.html
@@ -0,0 +1 @@
+<div class="voxcss-floor-z" style="--voxcss-floor-base: rgb(182, 182, 197); --voxcss-grid-x: 50px; --voxcss-grid-y: 50px; --voxcss-floor-grid: url(&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2250%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20fill-opacity%3D%220.12%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2250%22%20height%3D%221%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20fill-opacity%3D%220.12%22%2F%3E%3C%2Fsvg%3E&quot;); pointer-events: none;"><div class="voxcss-layer" style="transform: translateZ(0px);"><div class="voxcss-shape-inner voxcss-south" style="grid-area: 7 / 7 / 8 / 8;"><div class="voxcss-spike"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(2, 153, 221)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(0, 137, 205)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div><div class="voxcss-shape-inner voxcss-east" style="grid-area: 6 / 7 / 7 / 8;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(208, 44, 125); background-size: 70px 50px;"></div></div></div><div class="voxcss-shape-inner voxcss-east" style="grid-area: 5 / 7 / 6 / 8;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(221, 87, 0); background-size: 70px 50px;"></div></div></div><div class="voxcss-shape-inner voxcss-east" style="grid-area: 4 / 7 / 5 / 8;"><div class="voxcss-spike"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(222, 176, 0)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(238, 192, 9)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div><div class="voxcss-shape-inner voxcss-south" style="grid-area: 7 / 6 / 8 / 7;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(4, 173, 117); background-size: 70px 50px;"></div></div></div><div class="voxcss-cube" style="grid-area: 6 / 6 / 7 / 7; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(148, 163, 184);"></div></div><div class="voxcss-cube" style="grid-area: 5 / 6 / 6 / 7; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(14, 165, 233);"></div></div><div class="voxcss-shape-inner voxcss-north" style="grid-area: 4 / 6 / 5 / 7;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(224, 60, 141); background-size: 70px 50px;"></div></div></div><div class="voxcss-shape-inner voxcss-south" style="grid-area: 7 / 5 / 8 / 6;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(237, 103, 10); background-size: 70px 50px;"></div></div></div><div class="voxcss-cube" style="grid-area: 6 / 5 / 7 / 6; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(250, 204, 21);"></div></div><div class="voxcss-cube" style="grid-area: 5 / 5 / 6 / 6; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(16, 185, 129);"></div></div><div class="voxcss-shape-inner voxcss-east" style="grid-area: 2 / 5 / 3 / 6;"><div class="voxcss-spike"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(120, 135, 156)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(136, 151, 172)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div><div class="voxcss-shape-inner voxcss-south" style="grid-area: 7 / 4 / 8 / 5;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(2, 153, 221); background-size: 70px 50px;"></div></div></div><div class="voxcss-cube" style="grid-area: 6 / 4 / 7 / 5; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(236, 72, 153);"></div></div><div class="voxcss-shape-inner voxcss-east" style="grid-area: 3 / 5 / 4 / 6;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(120, 135, 156); background-size: 70px 50px;"></div></div></div><div class="voxcss-shape-inner voxcss-south" style="grid-area: 7 / 3 / 8 / 4;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(2, 153, 221); background-size: 70px 50px;"></div></div></div><div class="voxcss-cube" style="grid-area: 6 / 3 / 7 / 4; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(236, 72, 153);"></div></div><div class="voxcss-shape-inner voxcss-north" style="grid-area: 2 / 3 / 3 / 4;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(136, 151, 172); background-size: 70px 50px;"></div></div></div><div class="voxcss-shape-inner voxcss-west" style="grid-area: 7 / 2 / 8 / 3;"><div class="voxcss-spike"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(22, 173, 241)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(2, 153, 221)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div><div class="voxcss-shape-inner voxcss-west" style="grid-area: 6 / 2 / 7 / 3;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(244, 80, 161); background-size: 70px 50px;"></div></div></div><div class="voxcss-shape-inner voxcss-west" style="grid-area: 5 / 2 / 6 / 3;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(255, 123, 30); background-size: 70px 50px;"></div></div></div><div class="voxcss-shape-inner voxcss-west" style="grid-area: 4 / 2 / 5 / 3;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(255, 212, 29); background-size: 70px 50px;"></div></div></div><div class="voxcss-shape-inner voxcss-west" style="grid-area: 3 / 2 / 4 / 3;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(24, 193, 137); background-size: 70px 50px;"></div></div></div><div class="voxcss-shape-inner voxcss-north" style="grid-area: 2 / 2 / 3 / 3;"><div class="voxcss-spike"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(136, 151, 172)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(156, 171, 192)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div><div class="voxcss-shape-inner voxcss-north" style="grid-area: 2 / 4 / 3 / 5;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(2, 153, 221); background-size: 70px 50px;"></div></div></div><div class="voxcss-shape-inner voxcss-east" style="grid-area: 4 / 5 / 5 / 6;"><div class="voxcss-wedge"><div class="voxcss-wedge-slope voxcss-wedge-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L480 0 L0 480 Z" fill="rgb(208, 44, 125)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-wedge-slope voxcss-wedge-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 480 L0 480 L480 0 Z" fill="rgb(224, 60, 141)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div></div><div class="voxcss-layer" style="transform: translateZ(50px);"><div class="voxcss-shape-inner voxcss-east" style="grid-area: 4 / 4 / 5 / 5;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(221, 87, 0); background-size: 70px 50px;"></div></div></div><div class="voxcss-shape-inner voxcss-east" style="grid-area: 3 / 4 / 4 / 5;"><div class="voxcss-spike"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(222, 176, 0)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(238, 192, 9)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div><div class="voxcss-shape-inner voxcss-west" style="grid-area: 4 / 3 / 5 / 4;"><div class="voxcss-ramp"><div class="voxcss-ramp-slope" style="background-color: rgb(24, 193, 137); background-size: 70px 50px;"></div></div></div><div class="voxcss-shape-inner voxcss-north" style="grid-area: 3 / 3 / 4 / 4;"><div class="voxcss-spike"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(136, 151, 172)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(156, 171, 192)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div><div class="voxcss-shape-inner voxcss-west" style="grid-area: 5 / 3 / 6 / 4;"><div class="voxcss-spike"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(22, 173, 241)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(2, 153, 221)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div><div class="voxcss-shape-inner voxcss-south" style="grid-area: 5 / 4 / 6 / 5;"><div class="voxcss-spike"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M480 0 L480 480 L0 480 Z" fill="rgb(224, 60, 141)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><path d="M0 0 L0 480 L480 0 Z" fill="rgb(208, 44, 125)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div></div><div class="voxcss-layer" style="transform: translateZ(100px);"></div><div class="voxcss-layer" style="transform: translateZ(150px);"></div><div class="voxcss-layer" style="transform: translateZ(200px);"></div><div class="voxcss-layer" style="transform: translateZ(250px);"></div></div><div class="voxcss-wall voxcss-wall--backLeft" style="width: 300px; height: 400px; transform: rotateY(-90deg) translateZ(150px) translateX(150px); background-color: rgb(102, 102, 117); --voxcss-wall-grid: url(&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2250%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20fill-opacity%3D%220.1%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2250%22%20height%3D%221%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20fill-opacity%3D%220.1%22%2F%3E%3C%2Fsvg%3E&quot;);"></div><div class="voxcss-wall voxcss-wall--backRight" style="width: 400px; height: 300px; transform: rotateX(90deg) translateZ(150px) translateY(150px); background-color: rgb(92, 92, 107); --voxcss-wall-grid: url(&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2250%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20fill-opacity%3D%220.1%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2250%22%20height%3D%221%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20fill-opacity%3D%220.1%22%2F%3E%3C%2Fsvg%3E&quot;);"></div>
\ No newline at end of file
diff --git a/.compare-output/react.png b/.compare-output/react.png
new file mode 100644
index 0000000..7dcda00
Binary files /dev/null and b/.compare-output/react.png differ
diff --git a/.compare-output/vue.html b/.compare-output/vue.html
new file mode 100644
index 0000000..e15a91f
--- /dev/null
+++ b/.compare-output/vue.html
@@ -0,0 +1 @@
+<div class="voxcss-floor-z" style="--voxcss-floor-base: rgb(182, 182, 197); --voxcss-grid-x: 50px; --voxcss-grid-y: 50px; --voxcss-floor-grid: url(&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2250%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20fill-opacity%3D%220.12%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2250%22%20height%3D%221%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20fill-opacity%3D%220.12%22%2F%3E%3C%2Fsvg%3E&quot;); pointer-events: none;"><div class="voxcss-layer" style="transform: translateZ(0px);"><div class="voxcss-south voxcss-spike" style="grid-area: 7 / 7 / 8 / 8;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M480 0 L480 480 L0 480 Z" fill="rgb(2, 153, 221)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M0 0 L0 480 L480 0 Z" fill="rgb(0, 137, 205)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-east voxcss-ramp" style="grid-area: 6 / 7 / 7 / 8;"><div class="voxcss-ramp-slope" style="background-color: rgb(208, 44, 125); background-size: 70px 50px;"></div></div><div class="voxcss-east voxcss-ramp" style="grid-area: 5 / 7 / 6 / 8;"><div class="voxcss-ramp-slope" style="background-color: rgb(221, 87, 0); background-size: 70px 50px;"></div></div><div class="voxcss-east voxcss-spike" style="grid-area: 4 / 7 / 5 / 8;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M480 0 L480 480 L0 480 Z" fill="rgb(222, 176, 0)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M0 0 L0 480 L480 0 Z" fill="rgb(238, 192, 9)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-south voxcss-ramp" style="grid-area: 7 / 6 / 8 / 7;"><div class="voxcss-ramp-slope" style="background-color: rgb(4, 173, 117); background-size: 70px 50px;"></div></div><div class="voxcss-cube" style="grid-area: 6 / 6 / 7 / 7; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(148, 163, 184);"></div></div><div class="voxcss-cube" style="grid-area: 5 / 6 / 6 / 7; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(14, 165, 233);"></div></div><div class="voxcss-north voxcss-ramp" style="grid-area: 4 / 6 / 5 / 7;"><div class="voxcss-ramp-slope" style="background-color: rgb(224, 60, 141); background-size: 70px 50px;"></div></div><div class="voxcss-south voxcss-ramp" style="grid-area: 7 / 5 / 8 / 6;"><div class="voxcss-ramp-slope" style="background-color: rgb(237, 103, 10); background-size: 70px 50px;"></div></div><div class="voxcss-cube" style="grid-area: 6 / 5 / 7 / 6; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(250, 204, 21);"></div></div><div class="voxcss-cube" style="grid-area: 5 / 5 / 6 / 6; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(16, 185, 129);"></div></div><div class="voxcss-east voxcss-spike" style="grid-area: 2 / 5 / 3 / 6;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M480 0 L480 480 L0 480 Z" fill="rgb(120, 135, 156)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M0 0 L0 480 L480 0 Z" fill="rgb(136, 151, 172)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-south voxcss-ramp" style="grid-area: 7 / 4 / 8 / 5;"><div class="voxcss-ramp-slope" style="background-color: rgb(2, 153, 221); background-size: 70px 50px;"></div></div><div class="voxcss-cube" style="grid-area: 6 / 4 / 7 / 5; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(236, 72, 153);"></div></div><!----><!----><!----><div class="voxcss-east voxcss-ramp" style="grid-area: 3 / 5 / 4 / 6;"><div class="voxcss-ramp-slope" style="background-color: rgb(120, 135, 156); background-size: 70px 50px;"></div></div><div class="voxcss-south voxcss-ramp" style="grid-area: 7 / 3 / 8 / 4;"><div class="voxcss-ramp-slope" style="background-color: rgb(2, 153, 221); background-size: 70px 50px;"></div></div><div class="voxcss-cube" style="grid-area: 6 / 3 / 7 / 4; --voxcss-side-offset-x: 25px; --voxcss-side-offset-y: 25px; --voxcss-fr-offset: 50px;"><div class="voxcss-cube-face voxcss-cube-face--t" style="background-color: rgb(236, 72, 153);"></div></div><!----><!----><!----><div class="voxcss-north voxcss-ramp" style="grid-area: 2 / 3 / 3 / 4;"><div class="voxcss-ramp-slope" style="background-color: rgb(136, 151, 172); background-size: 70px 50px;"></div></div><div class="voxcss-west voxcss-spike" style="grid-area: 7 / 2 / 8 / 3;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M480 0 L480 480 L0 480 Z" fill="rgb(22, 173, 241)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M0 0 L0 480 L480 0 Z" fill="rgb(2, 153, 221)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 6 / 2 / 7 / 3;"><div class="voxcss-ramp-slope" style="background-color: rgb(244, 80, 161); background-size: 70px 50px;"></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 5 / 2 / 6 / 3;"><div class="voxcss-ramp-slope" style="background-color: rgb(255, 123, 30); background-size: 70px 50px;"></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 4 / 2 / 5 / 3;"><div class="voxcss-ramp-slope" style="background-color: rgb(255, 212, 29); background-size: 70px 50px;"></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 3 / 2 / 4 / 3;"><div class="voxcss-ramp-slope" style="background-color: rgb(24, 193, 137); background-size: 70px 50px;"></div></div><div class="voxcss-north voxcss-spike" style="grid-area: 2 / 2 / 3 / 3;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M480 0 L480 480 L0 480 Z" fill="rgb(136, 151, 172)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M0 0 L0 480 L480 0 Z" fill="rgb(156, 171, 192)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-north voxcss-ramp" style="grid-area: 2 / 4 / 3 / 5;"><div class="voxcss-ramp-slope" style="background-color: rgb(2, 153, 221); background-size: 70px 50px;"></div></div><div class="voxcss-east voxcss-wedge" style="grid-area: 4 / 5 / 5 / 6;"><div class="voxcss-wedge-slope voxcss-wedge-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M0 0 L480 0 L0 480 Z" fill="rgb(208, 44, 125)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-wedge-slope voxcss-wedge-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M480 480 L0 480 L480 0 Z" fill="rgb(224, 60, 141)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div><div class="voxcss-layer" style="transform: translateZ(50px);"><div class="voxcss-east voxcss-ramp" style="grid-area: 4 / 4 / 5 / 5;"><div class="voxcss-ramp-slope" style="background-color: rgb(221, 87, 0); background-size: 70px 50px;"></div></div><div class="voxcss-east voxcss-spike" style="grid-area: 3 / 4 / 4 / 5;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M480 0 L480 480 L0 480 Z" fill="rgb(222, 176, 0)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M0 0 L0 480 L480 0 Z" fill="rgb(238, 192, 9)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-west voxcss-ramp" style="grid-area: 4 / 3 / 5 / 4;"><div class="voxcss-ramp-slope" style="background-color: rgb(24, 193, 137); background-size: 70px 50px;"></div></div><div class="voxcss-north voxcss-spike" style="grid-area: 3 / 3 / 4 / 4;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M480 0 L480 480 L0 480 Z" fill="rgb(136, 151, 172)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M0 0 L0 480 L480 0 Z" fill="rgb(156, 171, 192)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-west voxcss-spike" style="grid-area: 5 / 3 / 6 / 4;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M480 0 L480 480 L0 480 Z" fill="rgb(22, 173, 241)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M0 0 L0 480 L480 0 Z" fill="rgb(2, 153, 221)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div><div class="voxcss-south voxcss-spike" style="grid-area: 5 / 4 / 6 / 5;"><div class="voxcss-spike-slope voxcss-spike-slope--primary"><svg viewBox="0 0 480 480" width="56" height="50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M480 0 L480 480 L0 480 Z" fill="rgb(224, 60, 141)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div><div class="voxcss-spike-slope voxcss-spike-slope--secondary"><svg viewBox="0 0 480 480" width="50" height="56" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block; pointer-events: none;"><!----><path d="M0 0 L0 480 L480 0 Z" fill="rgb(208, 44, 125)" stroke="rgba(0, 0, 0, 0.1)" stroke-width="1" vector-effect="non-scaling-stroke"></path></svg></div></div></div><div class="voxcss-layer" style="transform: translateZ(100px);"></div><div class="voxcss-layer" style="transform: translateZ(150px);"></div><div class="voxcss-layer" style="transform: translateZ(200px);"></div><div class="voxcss-layer" style="transform: translateZ(250px);"></div></div><div class="voxcss-wall voxcss-wall--backLeft" style="width: 300px; height: 400px; transform: rotateY(-90deg) translateZ(150px) translateX(150px); background-color: rgb(102, 102, 117); --voxcss-wall-grid: url(&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2250%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20fill-opacity%3D%220.1%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2250%22%20height%3D%221%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20fill-opacity%3D%220.1%22%2F%3E%3C%2Fsvg%3E&quot;);"></div><div class="voxcss-wall voxcss-wall--backRight" style="width: 400px; height: 300px; transform: rotateX(90deg) translateZ(150px) translateY(150px); background-color: rgb(92, 92, 107); --voxcss-wall-grid: url(&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2250%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20fill-opacity%3D%220.1%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2250%22%20height%3D%221%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20fill-opacity%3D%220.1%22%2F%3E%3C%2Fsvg%3E&quot;);"></div>
\ No newline at end of file
diff --git a/.compare-output/vue.png b/.compare-output/vue.png
new file mode 100644
index 0000000..7dcda00
Binary files /dev/null and b/.compare-output/vue.png differ
diff --git a/examples/test-renderer.html b/examples/test-renderer.html
new file mode 100644
index 0000000..e3ba8e8
--- /dev/null
+++ b/examples/test-renderer.html
@@ -0,0 +1,187 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>VoxCSS Renderer Test</title>
+  <meta name="viewport" content="width=800, initial-scale=1" />
+  <script type="importmap">
+    {
+      "imports": {
+        "react": "https://esm.sh/react@18.2.0",
+        "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime",
+        "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
+        "vue": "https://unpkg.com/vue@3.5.12/dist/vue.esm-browser.prod.js"
+      }
+    }
+  </script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { background: #1a1a2e; overflow: hidden; }
+    #scene { width: 800px; height: 600px; display: flex; align-items: center; justify-content: center; position: relative; }
+  </style>
+</head>
+<body>
+  <div id="scene"></div>
+  <script type="module">
+    const params = new URLSearchParams(location.search);
+    const renderer = params.get("renderer") || "headless";
+    const zoom = Number(params.get("zoom")) || 1.4;
+    const rotX = Number(params.get("rotX")) || 65;
+    const rotY = Number(params.get("rotY")) || 45;
+    const pan = Number(params.get("pan")) || 0;
+    const tilt = Number(params.get("tilt")) || 0;
+    const rows = Number(params.get("rows")) || 8;
+    const cols = Number(params.get("cols")) || 8;
+    const depth = Number(params.get("depth")) || 6;
+    const showFloor = params.get("showFloor") !== "false";
+    const showWalls = params.get("showWalls") !== "false";
+    const projection = params.get("projection") || "cubic";
+    const merge = params.get("merge") || "off";
+    const model = params.get("model") || "base";
+
+    const baseVoxels = [
+      { shape: "spike", x: 7, y: 7, z: 0, rot: 90 },
+      { shape: "ramp", x: 6, y: 7, z: 0 },
+      { shape: "ramp", x: 5, y: 7, z: 0 },
+      { shape: "spike", x: 4, y: 7, z: 0 },
+      { shape: "ramp", x: 7, y: 6, z: 0, rot: 90 },
+      { shape: "cube", x: 6, y: 6, z: 0 },
+      { shape: "cube", x: 5, y: 6, z: 0 },
+      { shape: "ramp", x: 4, y: 6, z: 0, rot: 270 },
+      { shape: "ramp", x: 7, y: 5, z: 0, rot: 90 },
+      { shape: "cube", x: 6, y: 5, z: 0 },
+      { shape: "cube", x: 5, y: 5, z: 0 },
+      { shape: "spike", x: 2, y: 5, z: 0 },
+      { shape: "ramp", x: 7, y: 4, z: 0, rot: 90 },
+      { shape: "cube", x: 6, y: 4, z: 0 },
+      { shape: "cube", x: 5, y: 4, z: 0 },
+      { shape: "cube", x: 4, y: 4, z: 0 },
+      { shape: "cube", x: 3, y: 4, z: 0 },
+      { shape: "ramp", x: 3, y: 5, z: 0 },
+      { shape: "ramp", x: 7, y: 3, z: 0, rot: 90 },
+      { shape: "cube", x: 6, y: 3, z: 0 },
+      { shape: "cube", x: 5, y: 3, z: 0 },
+      { shape: "cube", x: 4, y: 3, z: 0 },
+      { shape: "cube", x: 3, y: 3, z: 0 },
+      { shape: "ramp", x: 2, y: 3, z: 0, rot: 270 },
+      { shape: "spike", x: 7, y: 2, z: 0, rot: 180 },
+      { shape: "ramp", x: 6, y: 2, z: 0, rot: 180 },
+      { shape: "ramp", x: 5, y: 2, z: 0, rot: 180 },
+      { shape: "ramp", x: 4, y: 2, z: 0, rot: 180 },
+      { shape: "ramp", x: 3, y: 2, z: 0, rot: 180 },
+      { shape: "spike", x: 2, y: 2, z: 0, rot: 270 },
+      { shape: "ramp", x: 2, y: 4, z: 0, rot: 270 },
+      { shape: "wedge", x: 4, y: 5, z: 0 },
+      { shape: "ramp", x: 4, y: 4, z: 1 },
+      { shape: "spike", x: 3, y: 4, z: 1 },
+      { shape: "ramp", x: 4, y: 3, z: 1, rot: 180 },
+      { shape: "spike", x: 3, y: 3, z: 1, rot: 270 },
+      { shape: "spike", x: 5, y: 3, z: 1, rot: 180 },
+      { shape: "spike", x: 5, y: 4, z: 1, rot: 90 },
+    ];
+
+    const palette = ["#0ea5e9", "#ec4899", "#f97316", "#facc15", "#10b981", "#94a3b8"];
+
+    function getVoxels() {
+      if (model === "palette") {
+        return baseVoxels.map((v, i) => ({ ...v, color: palette[i % palette.length] }));
+      }
+      return baseVoxels;
+    }
+
+    const mergeOption = merge === "2d" ? "2d" : merge === "3d" ? "3d" : false;
+    const voxels = getVoxels();
+
+    const cameraProps = { zoom, rotX, rotY, pan, tilt, interactive: true, perspective: false };
+    const sceneProps = { voxels, rows, cols, depth, showFloor, showWalls, projection, mergeVoxels: mergeOption };
+
+    const el = document.getElementById("scene");
+
+    function reportResult(extra = {}) {
+      const sceneEl = document.querySelector(".voxcss-scene");
+      const cameraEl = document.querySelector(".voxcss-camera");
+      const styleEl = document.getElementById("voxcss-base-styles");
+      window.__voxcssResult = {
+        hasCamera: !!cameraEl,
+        cameraRect: cameraEl ? cameraEl.getBoundingClientRect() : null,
+        cameraStyle: cameraEl ? cameraEl.style.cssText : "",
+        cameraComputed: cameraEl ? { height: getComputedStyle(cameraEl).height, width: getComputedStyle(cameraEl).width, overflow: getComputedStyle(cameraEl).overflow } : null,
+        sceneRect: sceneEl ? sceneEl.getBoundingClientRect() : null,
+        hasBaseStyles: !!styleEl,
+        renderer,
+        ready: true,
+        sceneFound: !!sceneEl,
+        sceneTransform: sceneEl?.style.transform || "",
+        sceneWidth: sceneEl?.style.width || "",
+        sceneHeight: sceneEl?.style.height || "",
+        elementCount: sceneEl ? sceneEl.querySelectorAll("*").length : 0,
+        cubes: sceneEl ? sceneEl.querySelectorAll(".voxcss-cube").length : 0,
+        faces: sceneEl ? sceneEl.querySelectorAll(".voxcss-cube-face").length : 0,
+        layers: sceneEl ? sceneEl.querySelectorAll(".voxcss-layer").length : 0,
+        walls: sceneEl ? sceneEl.querySelectorAll(".voxcss-wall").length : 0,
+        brushes: sceneEl ? sceneEl.querySelectorAll(".voxcss-brush").length : 0,
+        ramps: sceneEl ? sceneEl.querySelectorAll(".voxcss-ramp").length : 0,
+        wedges: sceneEl ? sceneEl.querySelectorAll(".voxcss-wedge").length : 0,
+        spikes: sceneEl ? sceneEl.querySelectorAll(".voxcss-spike").length : 0,
+        sceneHTML: sceneEl ? sceneEl.innerHTML : "",
+        firstFace: sceneEl ? (() => { const f = sceneEl.querySelector(".voxcss-cube-face"); return f ? { class: f.className, style: f.style.cssText, computed: { bg: getComputedStyle(f).backgroundColor, display: getComputedStyle(f).display } } : null; })() : null,
+        firstCube: sceneEl ? (() => { const c = sceneEl.querySelector(".voxcss-cube"); return c ? { style: c.style.cssText } : null; })() : null,
+        firstLayer: sceneEl ? (() => { const l = sceneEl.querySelector(".voxcss-layer"); return l ? { style: l.style.cssText, computed: { display: getComputedStyle(l).display, position: getComputedStyle(l).position } } : null; })() : null,
+        ...extra,
+      };
+    }
+
+    async function renderHeadless() {
+      const { renderScene } = await import("../packages/voxcss/dist/index.js");
+      renderScene({ element: el, camera: cameraProps, scene: sceneProps });
+      await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+      reportResult();
+    }
+
+    async function renderReact() {
+      const [React, ReactDOM, vox] = await Promise.all([
+        import("https://esm.sh/react@18.2.0"),
+        import("https://esm.sh/react-dom@18.2.0/client"),
+        import("../packages/voxcss/dist/react/index.js"),
+      ]);
+      const root = ReactDOM.createRoot(el);
+      root.render(
+        (React.default ?? React).createElement(
+          vox.VoxCamera, cameraProps,
+          (React.default ?? React).createElement(vox.VoxScene, sceneProps)
+        )
+      );
+      // Wait for React to commit + compositing
+      await new Promise(r => setTimeout(r, 3000));
+      reportResult();
+    }
+
+    async function renderVue() {
+      const [vue, vox] = await Promise.all([
+        import("https://unpkg.com/vue@3.5.12/dist/vue.esm-browser.prod.js"),
+        import("../packages/voxcss/dist/vue/index.js"),
+      ]);
+      const state = vue.reactive({ camera: { ...cameraProps }, scene: { ...sceneProps } });
+      const app = vue.createApp({
+        setup() {
+          return () => vue.h(vox.VoxCamera, state.camera, {
+            default: () => vue.h(vox.VoxScene, state.scene)
+          });
+        }
+      });
+      app.mount(el);
+      // Wait for Vue to render + compositing
+      await new Promise(r => setTimeout(r, 3000));
+      reportResult();
+    }
+
+    try {
+      if (renderer === "react") await renderReact();
+      else if (renderer === "vue") await renderVue();
+      else await renderHeadless();
+    } catch (err) {
+      window.__voxcssResult = { renderer, ready: true, error: err.message };
+    }
+  </script>
+</body>
+</html>
diff --git a/examples/vue/index.html b/examples/vue/index.html
index 6b8c34d..2dd0835 100644
--- a/examples/vue/index.html
+++ b/examples/vue/index.html
@@ -28,26 +28,25 @@
 <body>
   <div id="app"></div>
   <script type="module">
-    import { createApp } from "vue";
+    import { createApp, h } from "vue";
     import { VoxCamera, VoxScene } from "../../packages/voxcss/dist/vue/index.js";
 
     const voxels = [{ x: 3, y: 3, z: 0, color: "#4ADE80" }];
 
     const app = createApp({
-      data: () => ({ voxels, rows: 8, cols: 8, depth: 6 }),
-      components: { VoxCamera, VoxScene },
-      template: `
-          <VoxCamera interactive :zoom="1.5">
-            <VoxScene
-              :voxels="voxels"
-              :rows="rows"
-              :cols="cols"
-              :depth="depth"
-              show-walls
-              show-floor
-            />
-          </VoxCamera>
-        `
+      setup() {
+        return () =>
+          h(VoxCamera, { interactive: true, zoom: 1.5 }, {
+            default: () => h(VoxScene, {
+              voxels,
+              rows: 8,
+              cols: 8,
+              depth: 6,
+              showWalls: true,
+              showFloor: true,
+            })
+          });
+      }
     });
 
     app.mount("#app");
diff --git a/package.json b/package.json
index b52ff4c..e56afc1 100644
--- a/package.json
+++ b/package.json
@@ -24,5 +24,8 @@
     "onlyBuiltDependencies": [
       "esbuild"
     ]
+  },
+  "devDependencies": {
+    "playwright": "^1.58.2"
   }
 }
\ No newline at end of file
diff --git a/packages/voxcss/package.json b/packages/voxcss/package.json
index e0c016f..fe6ad7a 100644
--- a/packages/voxcss/package.json
+++ b/packages/voxcss/package.json
@@ -68,7 +68,8 @@
     "@layoutit/voxcss-html": "workspace:^"
   },
   "optionalDependencies": {
-    "@layoutit/voxcss-react": "workspace:^"
+    "@layoutit/voxcss-react": "workspace:^",
+    "@layoutit/voxcss-vue": "workspace:^"
   },
   "peerDependencies": {
     "react": "^18.0.0",
diff --git a/packages/voxcss/tsup.config.ts b/packages/voxcss/tsup.config.ts
index c6ed239..30879e8 100644
--- a/packages/voxcss/tsup.config.ts
+++ b/packages/voxcss/tsup.config.ts
@@ -27,6 +27,6 @@ export default defineConfig({
   target: "es2020",
   tsconfig: "tsconfig.json",
   external: ["vue", "react", "react-dom", "svelte"],
-  noExternal: ["@layoutit/voxcss-core", "@layoutit/voxcss-html", "@layoutit/voxcss-react"],
+  noExternal: ["@layoutit/voxcss-core", "@layoutit/voxcss-html", "@layoutit/voxcss-react", "@layoutit/voxcss-vue"],
   esbuildPlugins: [externalSveltePlugin]
 });
diff --git a/packages/voxcss/vue/VoxCamera.ts b/packages/voxcss/vue/VoxCamera.ts
deleted file mode 100644
index 248d5c7..0000000
--- a/packages/voxcss/vue/VoxCamera.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { defineComponent, h, computed, onBeforeUnmount, ref, watch, provide } from "vue";
-import type { AutoRotateOption } from "@layoutit/voxcss-core";
-import {
-  CAMERA_HOST_CLASS,
-  ensureCameraController,
-  type CameraSlotProps
-} from "@layoutit/voxcss-html";
-import { mountCameraBinding } from "@layoutit/voxcss-html";
-import { controllerKey } from "./context";
-
-const cameraPropOptions = {
-  zoom: { type: Number },
-  pan: { type: Number },
-  tilt: { type: Number },
-  rotX: { type: Number },
-  rotY: { type: Number },
-  invert: { type: [Boolean, Number] as import("vue").PropType<boolean | number> },
-  perspective: { type: [Number, Boolean] as import("vue").PropType<number | boolean> },
-  interactive: { type: Boolean },
-  animate: { type: [Boolean, Number, Object] as import("vue").PropType<AutoRotateOption | false> }
-} as const;
-
-export default defineComponent({
-  name: "VoxCamera",
-  props: cameraPropOptions,
-  setup(props, { slots, expose }) {
-    const slotProps = ref<CameraSlotProps | null>(null);
-    const cursor = ref("default");
-    const controllerRef = ref<CameraSlotProps["controller"] | null>(null);
-    provide(controllerKey, controllerRef);
-    const elementRef = ref<HTMLElement | null>(null);
-    let teardown: ReturnType<typeof mountCameraBinding> | null = null;
-
-    const mountBinding = () => {
-      teardown?.destroy();
-      teardown = null;
-      const element = elementRef.value;
-      if (!element) return;
-      teardown = mountCameraBinding(
-        element,
-        props,
-        (snapshot) => {
-          slotProps.value = snapshot;
-          controllerRef.value = snapshot?.controller ?? null;
-          cursor.value = snapshot?.cursor ?? "default";
-        },
-        (nextCursor) => {
-          cursor.value = nextCursor;
-        }
-      );
-    };
-
-    watch(elementRef, () => mountBinding(), { immediate: true });
-    watch(
-      () => props,
-      (next) => {
-        teardown?.update(next);
-      },
-      { deep: true }
-    );
-
-    onBeforeUnmount(() => {
-      teardown?.destroy();
-      teardown = null;
-      slotProps.value = null;
-      controllerRef.value = null;
-      cursor.value = "default";
-    });
-
-    const cursorStyle = computed(() => cursor.value ?? "default");
-
-    expose({
-      get controller() {
-        return ensureCameraController(slotProps.value?.controller ?? null);
-      },
-      startAutoRotate(config?: AutoRotateOption) {
-        teardown?.startAutoRotate(config);
-      },
-      stopAutoRotate() {
-        teardown?.stopAutoRotate();
-      }
-    });
-
-    return () => {
-      const slotPayload = slotProps.value;
-      const children =
-        slotPayload && slotProps.value?.controller && slots.default
-          ? slots.default(slotPayload)
-          : undefined;
-
-      return h(
-        "div",
-        {
-          class: CAMERA_HOST_CLASS,
-          ref: elementRef,
-          style: { cursor: cursorStyle.value }
-        },
-        children
-      );
-    };
-  }
-});
diff --git a/packages/voxcss/vue/VoxScene.ts b/packages/voxcss/vue/VoxScene.ts
deleted file mode 100644
index 6d74d5d..0000000
--- a/packages/voxcss/vue/VoxScene.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { defineComponent, h, onBeforeUnmount, ref, watch, computed, inject } from "vue";
-import { mountScene, normalizeSceneState, SCENE_HOST_CLASS, type SceneState } from "@layoutit/voxcss-html";
-import type { SceneController } from "@layoutit/voxcss-core";
-import { normalizeMergeVoxelsOption, type MergeVoxelsOption } from "@layoutit/voxcss-core";
-import { controllerKey } from "./context";
-
-const scenePropOptions = {
-  controller: { type: Object as import("vue").PropType<SceneController> },
-  voxels: { type: Array as import("vue").PropType<import("@layoutit/voxcss-core").VoxelGrid | undefined> },
-  rows: { type: Number },
-  cols: { type: Number },
-  depth: { type: Number },
-  showWalls: { type: Boolean as import("vue").PropType<boolean | undefined> },
-  showFloor: { type: Boolean as import("vue").PropType<boolean | undefined> },
-  projection: { type: String as import("vue").PropType<import("@layoutit/voxcss-core").ProjectionMode | undefined> },
-  mergeVoxels: {
-    type: [String, Boolean] as import("vue").PropType<MergeVoxelsOption>,
-    default: false,
-    validator: (value: unknown) => value === false || value === "2d" || value === "3d"
-  }
-} as const;
-
-export default defineComponent({
-  name: "VoxScene",
-  props: scenePropOptions,
-  setup(props) {
-    const hostElement = ref<HTMLElement | null>(null);
-    let binding: ReturnType<typeof mountScene> | null = null;
-    const injectedController = inject(controllerKey, null);
-    const resolvedController = computed<SceneController | null>(() => props.controller ?? injectedController?.value ?? null);
-
-    const mountBinding = () => {
-      binding?.destroy();
-      binding = null;
-      const element = hostElement.value;
-      const controller = resolvedController.value;
-      if (!element || !controller) return;
-      const rawVoxels = props.voxels ?? [];
-      const mergeOption = normalizeMergeVoxelsOption(props.mergeVoxels);
-      const options: SceneState & { controller: SceneController } = {
-        controller,
-        ...normalizeSceneState({
-          voxels: rawVoxels,
-          rows: props.rows,
-          cols: props.cols,
-          depth: props.depth,
-          showWalls: props.showWalls,
-          showFloor: props.showFloor,
-          projection: props.projection,
-          mergeVoxels: mergeOption
-        })
-      };
-      binding = mountScene({ ...options, element });
-    };
-
-    watch(hostElement, () => mountBinding(), { immediate: true });
-    watch(resolvedController, () => mountBinding());
-    watch(
-      () => props.controller,
-      (next, prev) => {
-        if (next === prev) return;
-        binding?.destroy();
-        binding = null;
-        mountBinding();
-      }
-    );
-    watch(
-      () => [
-        props.voxels,
-        props.rows,
-        props.cols,
-        props.depth,
-        props.showWalls,
-        props.showFloor,
-        props.projection,
-        props.mergeVoxels
-      ],
-      () => {
-        if (!binding) {
-          mountBinding();
-          return;
-        }
-        const rawVoxels = props.voxels ?? [];
-        const mergeOption = normalizeMergeVoxelsOption(props.mergeVoxels);
-        binding.update(
-          normalizeSceneState({
-            voxels: rawVoxels,
-            rows: props.rows,
-            cols: props.cols,
-            depth: props.depth,
-            showWalls: props.showWalls,
-            showFloor: props.showFloor,
-            projection: props.projection,
-            mergeVoxels: mergeOption
-          })
-        );
-      },
-      { deep: true }
-    );
-
-    onBeforeUnmount(() => {
-      binding?.destroy();
-      binding = null;
-    });
-
-    return () =>
-      h("div", {
-        class: SCENE_HOST_CLASS,
-        ref: hostElement
-      });
-  }
-});
diff --git a/packages/voxcss/vue/context.ts b/packages/voxcss/vue/context.ts
deleted file mode 100644
index f4c44a0..0000000
--- a/packages/voxcss/vue/context.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import type { InjectionKey, Ref } from "vue";
-import type { SceneController } from "@layoutit/voxcss-core";
-
-export const controllerKey: InjectionKey<Ref<SceneController | null>> = Symbol("voxcss-controller");
diff --git a/packages/voxcss/vue/index.ts b/packages/voxcss/vue/index.ts
index 56c689d..7ea1cf9 100644
--- a/packages/voxcss/vue/index.ts
+++ b/packages/voxcss/vue/index.ts
@@ -1,2 +1 @@
-export { default as VoxCamera } from "./VoxCamera";
-export { default as VoxScene } from "./VoxScene";
+export * from "@layoutit/voxcss-vue";
diff --git a/packages/vue/package.json b/packages/vue/package.json
new file mode 100644
index 0000000..877e354
--- /dev/null
+++ b/packages/vue/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@layoutit/voxcss-vue",
+  "version": "0.1.8",
+  "description": "Native Vue 3 components for CSS voxel rendering with 60fps imperative updates.",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LayoutitStudio/voxcss.git",
+    "directory": "packages/vue"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@layoutit/voxcss-core": "workspace:^"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^3.2.4",
+    "happy-dom": "^20.8.9",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.12"
+  }
+}
diff --git a/packages/vue/src/camera/VoxCamera.test.ts b/packages/vue/src/camera/VoxCamera.test.ts
new file mode 100644
index 0000000..4b4d95e
--- /dev/null
+++ b/packages/vue/src/camera/VoxCamera.test.ts
@@ -0,0 +1,93 @@
+import { describe, it, expect } from "vitest";
+import { createApp, h } from "vue";
+import { VoxCamera } from "./VoxCamera";
+
+function renderToDiv(cameraProps: Record<string, any> = {}, children?: any[]): HTMLElement {
+  const container = document.createElement("div");
+  const app = createApp({
+    setup() {
+      return () => h(VoxCamera, cameraProps, {
+        default: () => children ?? [h("div")],
+      });
+    },
+  });
+  app.mount(container);
+  return container;
+}
+
+describe("VoxCamera behavior", () => {
+  describe("renders camera wrapper", () => {
+    it("has the voxcss-camera class", () => {
+      const container = renderToDiv();
+      expect(container.querySelector(".voxcss-camera")).toBeTruthy();
+    });
+  });
+
+  describe("perspective", () => {
+    it("applies default perspective of 8000px when perspective is not set", () => {
+      const container = renderToDiv({});
+      const camera = container.querySelector(".voxcss-camera") as HTMLElement;
+      expect(camera.style.perspective).toBe("8000px");
+    });
+
+    it("applies a custom numeric perspective value", () => {
+      const container = renderToDiv({ perspective: 3000 });
+      const camera = container.querySelector(".voxcss-camera") as HTMLElement;
+      expect(camera.style.perspective).toBe("3000px");
+    });
+
+    it("sets perspective to none when false", () => {
+      const container = renderToDiv({ perspective: false });
+      const camera = container.querySelector(".voxcss-camera") as HTMLElement;
+      expect(camera.style.perspective).toBe("none");
+    });
+  });
+
+  describe("interactive mode", () => {
+    it("sets cursor to grab when interactive", () => {
+      const container = renderToDiv({ interactive: true });
+      const camera = container.querySelector(".voxcss-camera") as HTMLElement;
+      expect(camera.style.cursor).toBe("grab");
+    });
+
+    it("sets touch-action to none when interactive", () => {
+      const container = renderToDiv({ interactive: true });
+      const camera = container.querySelector(".voxcss-camera") as HTMLElement;
+      expect(camera.style.touchAction).toBe("none");
+    });
+
+    it("does not set cursor or touch-action when not interactive", () => {
+      const container = renderToDiv();
+      const camera = container.querySelector(".voxcss-camera") as HTMLElement;
+      expect(camera.style.cursor).toBe("");
+      expect(camera.style.touchAction).toBe("");
+    });
+  });
+
+  describe("children", () => {
+    it("renders children inside the camera wrapper", () => {
+      const container = renderToDiv({}, [h("span", { class: "inner-child" }, "Hello")]);
+      const child = container.querySelector(".voxcss-camera .inner-child");
+      expect(child).toBeTruthy();
+      expect(child?.textContent).toBe("Hello");
+    });
+
+    it("renders multiple children", () => {
+      const container = renderToDiv({}, [
+        h("div", { class: "a" }),
+        h("div", { class: "b" }),
+      ]);
+      expect(container.querySelector(".a")).toBeTruthy();
+      expect(container.querySelector(".b")).toBeTruthy();
+    });
+  });
+
+  describe("custom className", () => {
+    it("appends custom className alongside voxcss-camera", () => {
+      const container = renderToDiv({ class: "my-custom-class" });
+      const camera = container.querySelector(".voxcss-camera");
+      expect(camera?.classList.contains("my-custom-class")).toBe(true);
+      expect(camera?.classList.contains("voxcss-camera")).toBe(true);
+    });
+  });
+});
diff --git a/packages/vue/src/camera/VoxCamera.ts b/packages/vue/src/camera/VoxCamera.ts
new file mode 100644
index 0000000..ed09383
--- /dev/null
+++ b/packages/vue/src/camera/VoxCamera.ts
@@ -0,0 +1,76 @@
+import { defineComponent, h, provide, computed } from "vue";
+import type { PropType } from "vue";
+import type { AutoRotateOption } from "@layoutit/voxcss-core";
+import { useCamera } from "./useCamera";
+import { VoxCameraContextKey } from "./context";
+
+const DEFAULT_PERSPECTIVE = 8000;
+
+export const VoxCamera = defineComponent({
+  name: "VoxCamera",
+  props: {
+    zoom: { type: Number },
+    pan: { type: Number },
+    tilt: { type: Number },
+    rotX: { type: Number },
+    rotY: { type: Number },
+    interactive: { type: Boolean },
+    invert: { type: [Boolean, Number] as PropType<boolean | number> },
+    animate: { type: [Boolean, Number, Object] as PropType<AutoRotateOption | false> },
+    perspective: { type: [Number, Boolean] as PropType<number | boolean>, default: undefined },
+    class: { type: String },
+  },
+  setup(props, { slots }) {
+    const cameraOptions = computed(() => ({
+      zoom: props.zoom,
+      pan: props.pan,
+      tilt: props.tilt,
+      rotX: props.rotX,
+      rotY: props.rotY,
+      interactive: props.interactive,
+      invert: props.invert,
+      animate: props.animate,
+    }));
+
+    const {
+      store,
+      cameraRef,
+      sceneElRef,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
+      cursor,
+    } = useCamera(cameraOptions);
+
+    // Provide context — stable identity
+    provide(VoxCameraContextKey, { store, cameraRef, sceneElRef });
+
+    return () => {
+      const perspectiveValue =
+        props.perspective === false
+          ? "none"
+          : `${typeof props.perspective === "number" ? props.perspective : DEFAULT_PERSPECTIVE}px`;
+
+      const cameraStyle: Record<string, string | undefined> = {
+        perspective: perspectiveValue,
+        cursor: props.interactive ? cursor.value : undefined,
+        touchAction: props.interactive ? "none" : undefined,
+        userSelect: props.interactive ? "none" : undefined,
+      };
+
+      return h(
+        "div",
+        {
+          class: `voxcss-camera${props.class ? ` ${props.class}` : ""}`,
+          style: cameraStyle,
+          onPointerdown: props.interactive ? onPointerDown : undefined,
+          onPointermove: props.interactive ? onPointerMove : undefined,
+          onPointerup: props.interactive ? onPointerUp : undefined,
+          onPointercancel: props.interactive ? onPointerCancel : undefined,
+        },
+        slots.default?.()
+      );
+    };
+  },
+});
diff --git a/packages/vue/src/camera/context.ts b/packages/vue/src/camera/context.ts
new file mode 100644
index 0000000..e31326b
--- /dev/null
+++ b/packages/vue/src/camera/context.ts
@@ -0,0 +1,11 @@
+import type { InjectionKey, Ref } from "vue";
+import type { CameraHandle } from "@layoutit/voxcss-core";
+import type { SceneStore } from "../store";
+
+export interface VoxCameraContextValue {
+  store: SceneStore;
+  cameraRef: Ref<CameraHandle>;
+  sceneElRef: Ref<HTMLElement | null>;
+}
+
+export const VoxCameraContextKey: InjectionKey<VoxCameraContextValue> = Symbol("voxcss-camera");
diff --git a/packages/vue/src/camera/index.ts b/packages/vue/src/camera/index.ts
new file mode 100644
index 0000000..5e0f0fe
--- /dev/null
+++ b/packages/vue/src/camera/index.ts
@@ -0,0 +1,5 @@
+export { VoxCamera } from "./VoxCamera";
+export { useCamera } from "./useCamera";
+export type { UseCameraOptions, UseCameraResult } from "./useCamera";
+export { VoxCameraContextKey } from "./context";
+export type { VoxCameraContextValue } from "./context";
diff --git a/packages/vue/src/camera/pointer.test.ts b/packages/vue/src/camera/pointer.test.ts
new file mode 100644
index 0000000..ae9a442
--- /dev/null
+++ b/packages/vue/src/camera/pointer.test.ts
@@ -0,0 +1,166 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { createApp, h, computed } from "vue";
+import { useCamera } from "./useCamera";
+import type { UseCameraResult, UseCameraOptions } from "./useCamera";
+
+function makePointerEvent(
+  type: string,
+  overrides: Partial<{
+    clientX: number;
+    clientY: number;
+    pointerId: number;
+    isPrimary: boolean;
+  }> = {}
+): PointerEvent {
+  return {
+    clientX: overrides.clientX ?? 0,
+    clientY: overrides.clientY ?? 0,
+    pointerId: overrides.pointerId ?? 1,
+    isPrimary: overrides.isPrimary ?? true,
+    preventDefault: vi.fn(),
+    currentTarget: {
+      setPointerCapture: vi.fn(),
+      releasePointerCapture: vi.fn(),
+    },
+  } as unknown as PointerEvent;
+}
+
+function mountCamera(options: UseCameraOptions = {}): UseCameraResult {
+  let captured: UseCameraResult | null = null;
+  const container = document.createElement("div");
+  const app = createApp({
+    setup() {
+      captured = useCamera(computed(() => options));
+      return () => h("div");
+    },
+  });
+  app.mount(container);
+  return captured!;
+}
+
+describe("pointer interaction behavior", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("pointer down sets dragging state", () => {
+    it("changes cursor to grabbing after pointer down", () => {
+      const result = mountCamera({ interactive: true });
+      expect(result.cursor.value).toBe("grab");
+
+      const downEvent = makePointerEvent("pointerdown");
+      result.onPointerDown(downEvent);
+
+      expect(result.cursor.value).toBe("grabbing");
+    });
+  });
+
+  describe("pointer move during drag updates camera rotation", () => {
+    it("updates rotY when dragging horizontally", () => {
+      const result = mountCamera({ interactive: true, rotY: 45 });
+      const initialRotY = result.cameraRef.value.state.rotY;
+
+      const downEvent = makePointerEvent("pointerdown", { clientX: 100, clientY: 100 });
+      result.onPointerDown(downEvent);
+
+      const moveEvent = makePointerEvent("pointermove", { clientX: 150, clientY: 100 });
+      result.onPointerMove(moveEvent);
+
+      const updatedRotY = result.cameraRef.value.state.rotY;
+      expect(updatedRotY).not.toBe(initialRotY);
+    });
+  });
+
+  describe("pointer up ends drag", () => {
+    it("restores cursor to grab after pointer up", () => {
+      const result = mountCamera({ interactive: true });
+
+      const downEvent = makePointerEvent("pointerdown");
+      result.onPointerDown(downEvent);
+      expect(result.cursor.value).toBe("grabbing");
+
+      const upEvent = makePointerEvent("pointerup");
+      result.onPointerUp(upEvent);
+
+      expect(result.cursor.value).toBe("grab");
+    });
+  });
+
+  describe("pointer move without prior down does nothing", () => {
+    it("does not change camera rotation when not dragging", () => {
+      const result = mountCamera({ interactive: true, rotY: 45 });
+      const initialRotY = result.cameraRef.value.state.rotY;
+
+      const moveEvent = makePointerEvent("pointermove", { clientX: 200, clientY: 200 });
+      result.onPointerMove(moveEvent);
+
+      expect(result.cameraRef.value.state.rotY).toBe(initialRotY);
+    });
+  });
+
+  describe("invert option reverses drag direction", () => {
+    it("moves rotation in opposite direction when invert is true", () => {
+      const resultNormal = mountCamera({ interactive: true, invert: false });
+      const normalInitialRotY = resultNormal.cameraRef.value.state.rotY;
+
+      const downNormal = makePointerEvent("pointerdown", { clientX: 100, clientY: 100 });
+      resultNormal.onPointerDown(downNormal);
+      const moveNormal = makePointerEvent("pointermove", { clientX: 200, clientY: 100 });
+      resultNormal.onPointerMove(moveNormal);
+
+      const normalDelta = resultNormal.cameraRef.value.state.rotY - normalInitialRotY;
+
+      const resultInvert = mountCamera({ interactive: true, invert: true });
+      const invertInitialRotY = resultInvert.cameraRef.value.state.rotY;
+
+      const downInvert = makePointerEvent("pointerdown", { clientX: 100, clientY: 100 });
+      resultInvert.onPointerDown(downInvert);
+      const moveInvert = makePointerEvent("pointermove", { clientX: 200, clientY: 100 });
+      resultInvert.onPointerMove(moveInvert);
+
+      const invertDelta = resultInvert.cameraRef.value.state.rotY - invertInitialRotY;
+
+      expect(normalDelta).not.toBe(0);
+      expect(Math.sign(invertDelta)).toBe(-Math.sign(normalDelta));
+    });
+  });
+
+  describe("animation pauses on pointer interaction", () => {
+    it("pauses auto-rotate when pauseOnInteraction is true and pointer down occurs", () => {
+      const callbacks: FrameRequestCallback[] = [];
+      vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+        callbacks.push(cb);
+        return callbacks.length;
+      });
+
+      const result = mountCamera({
+        interactive: true,
+        rotY: 0,
+        animate: { speed: 1, pauseOnInteraction: true },
+      });
+
+      // Run a few animation frames to confirm rotation advances
+      for (let i = 0; i < 5 && callbacks.length > 0; i++) {
+        const cb = callbacks.shift()!;
+        cb(performance.now());
+      }
+
+      const rotYBeforePause = result.cameraRef.value.state.rotY;
+      expect(rotYBeforePause).not.toBe(0);
+
+      // Now trigger pointer down to pause
+      const downEvent = makePointerEvent("pointerdown");
+      result.onPointerDown(downEvent);
+
+      // Run more animation frames -- rotation should NOT advance further
+      const rotYAtPause = result.cameraRef.value.state.rotY;
+      for (let i = 0; i < 5 && callbacks.length > 0; i++) {
+        const cb = callbacks.shift()!;
+        cb(performance.now());
+      }
+
+      const rotYAfterPause = result.cameraRef.value.state.rotY;
+      expect(rotYAfterPause).toBe(rotYAtPause);
+    });
+  });
+});
diff --git a/packages/vue/src/camera/useCamera.test.ts b/packages/vue/src/camera/useCamera.test.ts
new file mode 100644
index 0000000..e753778
--- /dev/null
+++ b/packages/vue/src/camera/useCamera.test.ts
@@ -0,0 +1,180 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { createApp, h, ref, computed, nextTick } from "vue";
+import type { Ref } from "vue";
+import { useCamera } from "./useCamera";
+import type { UseCameraResult, UseCameraOptions } from "./useCamera";
+
+function captureHook(options: UseCameraOptions = {}): UseCameraResult {
+  let captured: UseCameraResult | null = null;
+  const container = document.createElement("div");
+  const optionsRef = computed(() => options);
+  const app = createApp({
+    setup() {
+      captured = useCamera(optionsRef);
+      return () => h("div");
+    },
+  });
+  app.mount(container);
+  return captured!;
+}
+
+describe("useCamera behavior", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("default camera state", () => {
+    it("starts with standard defaults for zoom, rotation, pan, tilt, and depthOffset", () => {
+      const result = captureHook();
+      const state = result.store.getState().cameraState;
+      expect(state.zoom).toBe(0.65);
+      expect(state.rotX).toBe(65);
+      expect(state.rotY).toBe(45);
+      expect(state.pan).toBe(0);
+      expect(state.tilt).toBe(0);
+      expect(state.depthOffset).toBe(20);
+    });
+
+    it("returns grab cursor by default (useCamera always starts with grab)", () => {
+      const result = captureHook();
+      expect(result.cursor.value).toBe("grab");
+    });
+  });
+
+  describe("initial camera props", () => {
+    it("applies custom zoom", () => {
+      const result = captureHook({ zoom: 2.0 });
+      expect(result.store.getState().cameraState.zoom).toBe(2.0);
+    });
+
+    it("applies custom rotX and rotY", () => {
+      const result = captureHook({ rotX: 30, rotY: 120 });
+      const state = result.store.getState().cameraState;
+      expect(state.rotX).toBe(30);
+      expect(state.rotY).toBe(120);
+    });
+
+    it("applies custom pan and tilt", () => {
+      const result = captureHook({ pan: 10, tilt: 5 });
+      const state = result.store.getState().cameraState;
+      expect(state.pan).toBe(10);
+      expect(state.tilt).toBe(5);
+    });
+  });
+
+  describe("prop changes update camera handle", () => {
+    it("updates the camera handle when rotation props change across a wall-mask boundary", async () => {
+      const opts = ref<UseCameraOptions>({ rotX: 65, rotY: 45 });
+      let captured: UseCameraResult | null = null;
+      const container = document.createElement("div");
+      const app = createApp({
+        setup() {
+          captured = useCamera(computed(() => opts.value));
+          return () => h("div");
+        },
+      });
+      app.mount(container);
+
+      const maskBefore = captured!.store.getState().wallMask;
+
+      opts.value = { rotX: 65, rotY: 135 };
+      await nextTick();
+
+      const maskAfter = captured!.store.getState().wallMask;
+      expect(maskAfter).not.toEqual(maskBefore);
+      expect(captured!.cameraRef.value.state.rotY).toBe(135);
+    });
+
+    it("updates the camera handle zoom directly", async () => {
+      const opts = ref<UseCameraOptions>({ zoom: 1.0 });
+      let captured: UseCameraResult | null = null;
+      const container = document.createElement("div");
+      const app = createApp({
+        setup() {
+          captured = useCamera(computed(() => opts.value));
+          return () => h("div");
+        },
+      });
+      app.mount(container);
+
+      expect(captured!.cameraRef.value.state.zoom).toBe(1.0);
+
+      opts.value = { zoom: 2.5 };
+      await nextTick();
+
+      expect(captured!.cameraRef.value.state.zoom).toBe(2.5);
+    });
+  });
+
+  describe("cursor changes based on interaction state", () => {
+    it("shows grab cursor when interactive", () => {
+      const result = captureHook({ interactive: true });
+      expect(result.cursor.value).toBe("grab");
+    });
+
+    it("shows grab cursor when not interactive (cursor is always grab in useCamera)", () => {
+      const result = captureHook({ interactive: false });
+      // The Vue useCamera always starts with "grab" — the VoxCamera component controls
+      // whether to apply it based on the interactive prop.
+      expect(result.cursor.value).toBe("grab");
+    });
+  });
+
+  describe("auto-rotate", () => {
+    it("schedules animation frame when animate is true", () => {
+      const rafSpy = vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation(() => 1);
+      const container = document.createElement("div");
+      const app = createApp({
+        setup() {
+          useCamera(computed(() => ({ animate: true } as UseCameraOptions)));
+          return () => h("div");
+        },
+      });
+      app.mount(container);
+
+      expect(rafSpy).toHaveBeenCalled();
+    });
+
+    it("does not schedule animation when animate is false", () => {
+      const rafSpy = vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation(() => 1);
+      const container = document.createElement("div");
+      const app = createApp({
+        setup() {
+          useCamera(computed(() => ({ animate: false } as UseCameraOptions)));
+          return () => h("div");
+        },
+      });
+      app.mount(container);
+
+      expect(rafSpy).not.toHaveBeenCalled();
+    });
+
+    it("updates the camera handle rotation over time via animation frames", () => {
+      let captured: UseCameraResult | null = null;
+      const callbacks: FrameRequestCallback[] = [];
+      vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+        callbacks.push(cb);
+        return callbacks.length;
+      });
+
+      const container = document.createElement("div");
+      const app = createApp({
+        setup() {
+          captured = useCamera(computed(() => ({ rotY: 0, animate: true } as UseCameraOptions)));
+          return () => h("div");
+        },
+      });
+      app.mount(container);
+
+      const initialRotY = captured!.cameraRef.value.state.rotY;
+
+      for (let i = 0; i < 10 && callbacks.length > 0; i++) {
+        const cb = callbacks.shift()!;
+        cb(performance.now());
+      }
+
+      const updatedRotY = captured!.cameraRef.value.state.rotY;
+      expect(updatedRotY).not.toBe(initialRotY);
+    });
+  });
+});
diff --git a/packages/vue/src/camera/useCamera.ts b/packages/vue/src/camera/useCamera.ts
new file mode 100644
index 0000000..057d2e2
--- /dev/null
+++ b/packages/vue/src/camera/useCamera.ts
@@ -0,0 +1,231 @@
+import { ref, shallowRef, watch, onMounted, onBeforeUnmount } from "vue";
+import type { Ref } from "vue";
+import { createIsometricCamera } from "@layoutit/voxcss-core";
+import type { CameraState, CameraHandle, AutoRotateOption, AutoRotateConfig } from "@layoutit/voxcss-core";
+import { createSceneStore, type SceneStore } from "../store";
+
+const POINTER_DRAG_SPEED = 5;
+
+export interface UseCameraOptions {
+  zoom?: number;
+  pan?: number;
+  tilt?: number;
+  rotX?: number;
+  rotY?: number;
+  interactive?: boolean;
+  invert?: boolean | number;
+  animate?: AutoRotateOption | false;
+}
+
+export interface UseCameraResult {
+  store: SceneStore;
+  cameraRef: Ref<CameraHandle>;
+  sceneElRef: Ref<HTMLElement | null>;
+  onPointerDown: (e: PointerEvent) => void;
+  onPointerMove: (e: PointerEvent) => void;
+  onPointerUp: (e: PointerEvent) => void;
+  onPointerCancel: (e: PointerEvent) => void;
+  cursor: Ref<string>;
+}
+
+function normalizeAngle(value: number): number {
+  let normalized = value % 360;
+  if (normalized < 0) normalized += 360;
+  return normalized;
+}
+
+function normalizeAutoRotateOption(
+  option: AutoRotateOption
+): { axis: "x" | "y"; speed: number; pauseOnInteraction: boolean } | null {
+  if (!option) return null;
+  if (option === true) return { axis: "y", speed: 0.3, pauseOnInteraction: true };
+  if (typeof option === "number") {
+    if (!Number.isFinite(option) || option === 0) return null;
+    return { axis: "y", speed: option, pauseOnInteraction: true };
+  }
+  const config = option as AutoRotateConfig;
+  const speed =
+    typeof config.speed === "number" && Number.isFinite(config.speed) ? config.speed : 0.3;
+  if (!speed) return null;
+  return {
+    axis: config.axis === "x" ? "x" : "y",
+    speed,
+    pauseOnInteraction: config.pauseOnInteraction !== false,
+  };
+}
+
+export function useCamera(options: Ref<UseCameraOptions>): UseCameraResult {
+  const handle = createIsometricCamera({
+    zoom: options.value.zoom,
+    pan: options.value.pan,
+    tilt: options.value.tilt,
+    rotX: options.value.rotX,
+    rotY: options.value.rotY,
+  });
+
+  const cameraRef = shallowRef<CameraHandle>(handle);
+  const sceneElRef = ref<HTMLElement | null>(null);
+  const store = createSceneStore(handle.state);
+
+  const isDragging = ref(false);
+  let activePointerId: number | null = null;
+  const pointer = { x: 0, y: 0 };
+  let animationPaused = false;
+
+  function getInvertSign(): number {
+    const inv = options.value.invert;
+    if (typeof inv === "number") return inv < 0 ? -1 : 1;
+    return inv === true ? -1 : 1;
+  }
+
+  // Sync prop changes to camera handle — only update when values actually change
+  watch(
+    () => ({
+      zoom: options.value.zoom,
+      pan: options.value.pan,
+      tilt: options.value.tilt,
+      rotX: options.value.rotX,
+      rotY: options.value.rotY,
+    }),
+    (next, prev) => {
+      const partial: Partial<CameraState> = {};
+      if (next.zoom !== undefined && next.zoom !== prev?.zoom) partial.zoom = next.zoom;
+      if (next.pan !== undefined && next.pan !== prev?.pan) partial.pan = next.pan;
+      if (next.tilt !== undefined && next.tilt !== prev?.tilt) partial.tilt = next.tilt;
+      if (next.rotX !== undefined && next.rotX !== prev?.rotX) partial.rotX = next.rotX;
+      if (next.rotY !== undefined && next.rotY !== prev?.rotY) partial.rotY = next.rotY;
+      if (Object.keys(partial).length > 0) {
+        handle.update(partial);
+        applyTransformDirect();
+        store.updateCameraFromRef(handle);
+        store.notifyAll();
+      }
+    }
+  );
+
+  // Apply camera transform directly to scene element (bypasses Vue reactivity)
+  function applyTransformDirect(): void {
+    const el = sceneElRef.value;
+    if (!el) return;
+    const s = handle.state;
+    const depthOffset = Number(el.dataset.voxDepthOffset ?? 0);
+    el.style.transform = `scale(${s.zoom}) translateY(${depthOffset}px) translateY(${s.tilt}px) translateX(${s.pan}px) rotateX(${s.rotX}deg) rotate(${s.rotY}deg)`;
+  }
+
+
+
+  // Auto-rotate
+  let animFrameId = 0;
+  let animStopped = false;
+
+  function startAnimation(): void {
+    stopAnimation();
+    const animOpt = options.value.animate;
+    if (!animOpt) return;
+    const config = normalizeAutoRotateOption(animOpt);
+    if (!config) return;
+
+    animStopped = false;
+    const tick = () => {
+      if (animStopped) return;
+      if (!animationPaused) {
+        if (config.axis === "x") {
+          handle.update({ rotX: normalizeAngle(handle.state.rotX + config.speed) });
+        } else {
+          handle.update({ rotY: normalizeAngle(handle.state.rotY + config.speed) });
+        }
+        applyTransformDirect();
+        store.updateCameraFromRef(handle);
+      }
+      animFrameId = requestAnimationFrame(tick);
+    };
+    animFrameId = requestAnimationFrame(tick);
+  }
+
+  function stopAnimation(): void {
+    animStopped = true;
+    if (animFrameId) {
+      cancelAnimationFrame(animFrameId);
+      animFrameId = 0;
+    }
+  }
+
+  watch(() => options.value.animate, () => {
+    startAnimation();
+  });
+
+  onMounted(() => {
+    startAnimation();
+  });
+
+  onBeforeUnmount(() => {
+    stopAnimation();
+  });
+
+  const cursor = ref("grab");
+
+  function onPointerDown(e: PointerEvent): void {
+    if (!options.value.interactive) return;
+    if (activePointerId !== null) return;
+    if (e.isPrimary === false) return;
+
+    const animConfig = options.value.animate ? normalizeAutoRotateOption(options.value.animate) : null;
+    if (animConfig?.pauseOnInteraction) {
+      animationPaused = true;
+    }
+
+    e.preventDefault();
+    activePointerId = e.pointerId;
+    pointer.x = e.clientX;
+    pointer.y = e.clientY;
+    isDragging.value = true;
+    cursor.value = "grabbing";
+    try {
+      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    } catch {
+      // Ignore capture errors
+    }
+  }
+
+  function onPointerMove(e: PointerEvent): void {
+    if (activePointerId === null || e.pointerId !== activePointerId) return;
+    e.preventDefault();
+    const inv = getInvertSign();
+    const dX = ((e.clientX - pointer.x) * inv) / POINTER_DRAG_SPEED;
+    const dY = ((e.clientY - pointer.y) * inv) / POINTER_DRAG_SPEED;
+    handle.update({
+      rotX: Math.max(0, Math.min(100, handle.state.rotX - dY)),
+      rotY: (handle.state.rotY - dX + 360) % 360,
+    });
+    applyTransformDirect();
+    pointer.x = e.clientX;
+    pointer.y = e.clientY;
+
+    // Update store — Vue's render function handles mask classes declaratively
+    store.updateCameraFromRef(handle);
+  }
+
+  function onPointerUp(e: PointerEvent): void {
+    if (activePointerId === null || e.pointerId !== activePointerId) return;
+    activePointerId = null;
+    isDragging.value = false;
+    cursor.value = "grab";
+    animationPaused = false;
+    try {
+      (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+    } catch {
+      // Ignore capture errors
+    }
+  }
+
+  return {
+    store,
+    cameraRef,
+    sceneElRef,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel: onPointerUp,
+    cursor,
+  };
+}
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
new file mode 100644
index 0000000..6990406
--- /dev/null
+++ b/packages/vue/src/index.ts
@@ -0,0 +1,31 @@
+// Register DOM-based color resolver for named CSS colors
+import { setColorResolver } from "@layoutit/voxcss-core";
+import { resolveColor } from "./styles";
+setColorResolver(resolveColor);
+
+export { VoxCamera } from "./camera";
+export { useCamera } from "./camera";
+export type { UseCameraOptions, UseCameraResult } from "./camera";
+export { VoxCameraContextKey } from "./camera";
+export type { VoxCameraContextValue } from "./camera";
+
+export { VoxScene, VoxLayer, useSceneContext } from "./scene";
+export type { UseSceneContextOptions } from "./scene";
+
+export { VoxCube, VoxShape } from "./shapes";
+
+export { useSliceBrushes, SliceZBrushes, SliceAxisHost } from "./slice";
+
+export { injectBaseStyles } from "./styles";
+
+// Re-export commonly used core types for convenience
+export type {
+  Voxel,
+  VoxelGrid,
+  CubeFace,
+  GridContext,
+  ProjectionMode,
+  WallsMask,
+} from "@layoutit/voxcss-core";
+export type { CameraState, AutoRotateOption } from "@layoutit/voxcss-core";
+export type { MergeVoxelsOption } from "@layoutit/voxcss-core";
diff --git a/packages/vue/src/scene/Ceiling.ts b/packages/vue/src/scene/Ceiling.ts
new file mode 100644
index 0000000..bdb9026
--- /dev/null
+++ b/packages/vue/src/scene/Ceiling.ts
@@ -0,0 +1,27 @@
+import { h } from "vue";
+import type { VNode } from "vue";
+import { shadeColor } from "@layoutit/voxcss-core";
+
+const FLOOR_BASE_DELTA = 120;
+
+export interface CeilingOptions {
+  wallColor: string;
+  dimensions: { rows: number; cols: number; depth: number };
+  tileSize: number;
+}
+
+export function renderCeiling(opts: CeilingOptions): VNode {
+  const { wallColor, dimensions, tileSize } = opts;
+  const ceilingColor = shadeColor(wallColor, FLOOR_BASE_DELTA);
+  return h("div", {
+    key: "ceiling",
+    class: "voxcss-ceiling",
+    style: {
+      width: `${dimensions.cols * tileSize}px`,
+      height: `${dimensions.rows * tileSize}px`,
+      transform: `translateZ(${dimensions.depth * tileSize}px)`,
+      "--voxcss-ceiling-base": ceilingColor,
+      "--voxcss-ceiling-opacity": "0.35",
+    },
+  });
+}
diff --git a/packages/vue/src/scene/Floor.test.ts b/packages/vue/src/scene/Floor.test.ts
new file mode 100644
index 0000000..2c616ac
--- /dev/null
+++ b/packages/vue/src/scene/Floor.test.ts
@@ -0,0 +1,83 @@
+import { describe, it, expect } from "vitest";
+import { createApp, h } from "vue";
+import type { Voxel } from "@layoutit/voxcss-core";
+import { VoxCamera } from "../camera/VoxCamera";
+import { VoxScene } from "./VoxScene";
+
+function renderScene(
+  sceneProps: Record<string, any>,
+  cameraProps: Record<string, any> = {}
+): HTMLElement {
+  const container = document.createElement("div");
+  const app = createApp({
+    setup() {
+      return () =>
+        h(VoxCamera, cameraProps, {
+          default: () => h(VoxScene, sceneProps),
+        });
+    },
+  });
+  app.mount(container);
+  return container;
+}
+
+describe("Floor behavior", () => {
+  describe("floor custom properties when visible", () => {
+    it("has --voxcss-floor-base custom property when showFloor is true", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0, color: "#ff0000" }];
+      const container = renderScene({ voxels, showFloor: true });
+      const floor = container.querySelector(".voxcss-floor-z") as HTMLElement;
+      expect(floor).toBeTruthy();
+      const floorBase = floor.style.getPropertyValue("--voxcss-floor-base");
+      expect(floorBase).toBeTruthy();
+      expect(floorBase).not.toBe("");
+    });
+
+    it("has --voxcss-grid-x and --voxcss-grid-y CSS custom properties when visible", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0, color: "#ff0000" }];
+      const container = renderScene({ voxels, showFloor: true });
+      const floor = container.querySelector(".voxcss-floor-z") as HTMLElement;
+      expect(floor).toBeTruthy();
+      const gridX = floor.style.getPropertyValue("--voxcss-grid-x");
+      const gridY = floor.style.getPropertyValue("--voxcss-grid-y");
+      expect(gridX).toContain("px");
+      expect(gridY).toContain("px");
+    });
+  });
+
+  describe("floor background when not visible", () => {
+    it("has background:none when showFloor is false", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0, color: "#ff0000" }];
+      const container = renderScene({ voxels, showFloor: false });
+      const floor = container.querySelector(".voxcss-floor-z") as HTMLElement;
+      expect(floor).toBeTruthy();
+      expect(floor.style.background).toContain("none");
+    });
+  });
+
+  describe("large grids suppress floor grid sprite", () => {
+    it("does not set --voxcss-floor-grid for grids larger than 20x20", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 25, y: 25, z: 0, color: "#00ff00" },
+      ];
+      const container = renderScene({ voxels, showFloor: true });
+      const floor = container.querySelector(".voxcss-floor-z") as HTMLElement;
+      expect(floor).toBeTruthy();
+      const floorGrid = floor.style.getPropertyValue("--voxcss-floor-grid");
+      expect(floorGrid).toBe("");
+    });
+
+    it("sets --voxcss-floor-grid for small grids", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 3, y: 3, z: 0, color: "#00ff00" },
+      ];
+      const container = renderScene({ voxels, showFloor: true });
+      const floor = container.querySelector(".voxcss-floor-z") as HTMLElement;
+      expect(floor).toBeTruthy();
+      const floorGrid = floor.style.getPropertyValue("--voxcss-floor-grid");
+      expect(floorGrid).toContain("url(");
+    });
+  });
+});
diff --git a/packages/vue/src/scene/Floor.ts b/packages/vue/src/scene/Floor.ts
new file mode 100644
index 0000000..c0a2e2d
--- /dev/null
+++ b/packages/vue/src/scene/Floor.ts
@@ -0,0 +1,142 @@
+import { h, computed, ref } from "vue";
+import type { Ref, VNode } from "vue";
+import type { Voxel, GridContext, PlaneAxis } from "@layoutit/voxcss-core";
+import { shadeColor } from "@layoutit/voxcss-core";
+import { buildGridSvgDataUrl } from "./VoxScene";
+import { VoxLayer } from "./VoxLayer";
+import { useSliceBrushes, SliceZBrushes, SliceAxisHost } from "../slice";
+import type { SceneStore } from "../store";
+
+const FLOOR_BASE_DELTA = 120;
+const FLOOR_GRID_ALPHA = 0.12;
+
+const X_AXES = new Set<PlaneAxis>(["x"]);
+const Y_AXES = new Set<PlaneAxis>(["y"]);
+
+export interface FloorOptions {
+  layers: Voxel[][];
+  context: GridContext;
+  dimensions: { rows: number; cols: number; depth: number };
+  showFloor: boolean;
+  wallMask: { b: boolean; t: boolean };
+  wallColor: string;
+  tileSize: number;
+  layerElevation: number;
+  disableGrid: boolean;
+  is3d: boolean;
+  store: SceneStore;
+  sliceBrushes: { plans: Ref<any[]> };
+  floorRef: Ref<HTMLElement | null>;
+}
+
+export function renderFloor(opts: FloorOptions): VNode[] {
+  const {
+    layers,
+    context,
+    dimensions,
+    showFloor,
+    wallMask,
+    wallColor,
+    tileSize,
+    layerElevation,
+    disableGrid,
+    is3d,
+    store,
+    sliceBrushes,
+    floorRef,
+  } = opts;
+
+  const floorVisible = showFloor && wallMask.b;
+  const floorColor = floorVisible ? shadeColor(wallColor, FLOOR_BASE_DELTA) : undefined;
+  const floorGrid = floorVisible && !disableGrid
+    ? buildGridSvgDataUrl(tileSize, tileSize, FLOOR_GRID_ALPHA)
+    : undefined;
+
+  const sceneChildren: VNode[] = [];
+
+  // Floor div children
+  const floorChildren: any[] = [];
+  if (is3d) {
+    floorChildren.push(
+      h(SliceZBrushes, {
+        key: "slice-z",
+        floorRef,
+        plans: sliceBrushes.plans.value,
+        store: store as SceneStore,
+        tileSize,
+        layerElevation,
+      })
+    );
+  } else {
+    for (let i = 0; i < layers.length; i++) {
+      floorChildren.push(
+        h(VoxLayer, { key: i, layerIndex: i, voxels: layers[i], context })
+      );
+    }
+  }
+
+  const floorStyle: Record<string, string | undefined> = {
+    "--voxcss-floor-base": floorColor,
+    "--voxcss-grid-x": floorVisible ? `${tileSize}px` : undefined,
+    "--voxcss-grid-y": floorVisible ? `${tileSize}px` : undefined,
+    "--voxcss-floor-grid": floorGrid,
+    background: floorVisible ? undefined : "none",
+    pointerEvents: "none",
+  };
+
+  if (is3d) {
+    floorStyle.display = "grid";
+    floorStyle.gridTemplateColumns = `repeat(${dimensions.cols}, ${tileSize}px)`;
+    floorStyle.gridTemplateRows = `repeat(${dimensions.rows}, ${tileSize}px)`;
+  }
+
+  sceneChildren.push(
+    h("div", {
+      ref: floorRef,
+      class: "voxcss-floor-z",
+      style: floorStyle,
+    }, floorChildren)
+  );
+
+  // X/Y slice hosts for 3d mode
+  if (is3d) {
+    sceneChildren.push(
+      h(SliceAxisHost, {
+        key: "slice-x",
+        className: "voxcss-floor-x",
+        hostStyle: {
+          width: `${dimensions.cols * tileSize}px`,
+          height: `${dimensions.depth * layerElevation}px`,
+          display: "grid",
+          gridTemplateColumns: `repeat(${dimensions.cols}, ${tileSize}px)`,
+          gridTemplateRows: `repeat(${dimensions.depth}, ${layerElevation}px)`,
+        },
+        plans: sliceBrushes.plans.value,
+        store: store as SceneStore,
+        tileSize,
+        layerElevation,
+        axes: X_AXES,
+      })
+    );
+    sceneChildren.push(
+      h(SliceAxisHost, {
+        key: "slice-y",
+        className: "voxcss-floor-y",
+        hostStyle: {
+          width: `${dimensions.depth * layerElevation}px`,
+          height: `${dimensions.rows * tileSize}px`,
+          display: "grid",
+          gridTemplateColumns: `repeat(${dimensions.depth}, ${layerElevation}px)`,
+          gridTemplateRows: `repeat(${dimensions.rows}, ${tileSize}px)`,
+        },
+        plans: sliceBrushes.plans.value,
+        store: store as SceneStore,
+        tileSize,
+        layerElevation,
+        axes: Y_AXES,
+      })
+    );
+  }
+
+  return sceneChildren;
+}
diff --git a/packages/vue/src/scene/VoxLayer.ts b/packages/vue/src/scene/VoxLayer.ts
new file mode 100644
index 0000000..d121428
--- /dev/null
+++ b/packages/vue/src/scene/VoxLayer.ts
@@ -0,0 +1,37 @@
+import { defineComponent, h } from "vue";
+import type { PropType } from "vue";
+import type { GridContext, Voxel } from "@layoutit/voxcss-core";
+import { VoxCube } from "../shapes/VoxCube";
+import { VoxShape } from "../shapes/VoxShape";
+
+function voxelKey(voxel: Voxel, index: number): string {
+  return `${voxel.x}:${voxel.y}:${voxel.z}:${index}`;
+}
+
+export const VoxLayer = defineComponent({
+  name: "VoxLayer",
+  props: {
+    layerIndex: { type: Number, required: true },
+    voxels: { type: Array as PropType<Voxel[]>, required: true },
+    context: { type: Object as PropType<GridContext>, required: true },
+  },
+  setup(props) {
+    return () => {
+      const elevation = props.context.layerElevation ?? props.context.tileSize;
+      const transform = `translateZ(${props.layerIndex * elevation}px)`;
+
+      return h(
+        "div",
+        { class: "voxcss-layer", style: { transform } },
+        props.voxels.map((voxel, i) => {
+          if (!voxel) return null;
+          const shape = voxel.shape ?? "cube";
+          if (shape === "cube") {
+            return h(VoxCube, { key: voxelKey(voxel, i), voxel, context: props.context });
+          }
+          return h(VoxShape, { key: voxelKey(voxel, i), voxel, context: props.context });
+        })
+      );
+    };
+  },
+});
diff --git a/packages/vue/src/scene/VoxScene.test.ts b/packages/vue/src/scene/VoxScene.test.ts
new file mode 100644
index 0000000..5dcbf1f
--- /dev/null
+++ b/packages/vue/src/scene/VoxScene.test.ts
@@ -0,0 +1,165 @@
+import { describe, it, expect } from "vitest";
+import { createApp, h, nextTick } from "vue";
+import type { Voxel } from "@layoutit/voxcss-core";
+import { VoxCamera } from "../camera/VoxCamera";
+import { VoxScene } from "./VoxScene";
+
+function renderScene(
+  sceneProps: Record<string, any>,
+  cameraProps: Record<string, any> = {}
+): HTMLElement {
+  const container = document.createElement("div");
+  const app = createApp({
+    setup() {
+      return () =>
+        h(VoxCamera, cameraProps, {
+          default: () => h(VoxScene, sceneProps),
+        });
+    },
+  });
+  app.mount(container);
+  return container;
+}
+
+describe("VoxScene behavior", () => {
+  describe("scene dimensions", () => {
+    it("sets CSS custom properties for grid rows and cols based on voxel extents", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0 },
+        { x: 5, y: 7, z: 0 },
+      ];
+      const container = renderScene({ voxels });
+      const scene = container.querySelector(".voxcss-scene") as HTMLElement;
+      expect(scene).toBeTruthy();
+      expect(scene.style.getPropertyValue("--voxcss-rows")).toBe("6");
+      expect(scene.style.getPropertyValue("--voxcss-cols")).toBe("8");
+    });
+
+    it("computes dimensions for single voxel at origin", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0 }];
+      const container = renderScene({ voxels });
+      const scene = container.querySelector(".voxcss-scene") as HTMLElement;
+      expect(scene.style.getPropertyValue("--voxcss-rows")).toBe("1");
+      expect(scene.style.getPropertyValue("--voxcss-cols")).toBe("1");
+    });
+  });
+
+  describe("layers", () => {
+    it("creates a layer element for each z-level that has voxels", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 0, y: 0, z: 1, color: "#00ff00" },
+        { x: 0, y: 0, z: 2, color: "#0000ff" },
+      ];
+      const container = renderScene({ voxels });
+      const layers = container.querySelectorAll(".voxcss-layer");
+      expect(layers.length).toBe(3);
+    });
+
+    it("creates a single layer when all voxels are on the same z-level", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0 },
+        { x: 1, y: 0, z: 0 },
+        { x: 0, y: 1, z: 0 },
+      ];
+      const container = renderScene({ voxels });
+      const layers = container.querySelectorAll(".voxcss-layer");
+      expect(layers.length).toBe(1);
+    });
+  });
+
+  describe("floor visibility", () => {
+    it("shows floor when showFloor is true", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0 }];
+      const container = renderScene({ voxels, showFloor: true });
+      const floor = container.querySelector(".voxcss-floor-z") as HTMLElement;
+      expect(floor).toBeTruthy();
+      expect(floor.style.background).not.toContain("none");
+    });
+
+    it("hides floor background when showFloor is false", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0 }];
+      const container = renderScene({ voxels, showFloor: false });
+      const floor = container.querySelector(".voxcss-floor-z") as HTMLElement;
+      expect(floor).toBeTruthy();
+      expect(floor.style.background).toContain("none");
+    });
+  });
+
+  describe("walls visibility", () => {
+    it("renders wall elements when showWalls is true", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0 }];
+      const container = renderScene({ voxels, showWalls: true });
+      const walls = container.querySelectorAll(".voxcss-wall");
+      expect(walls.length).toBeGreaterThan(0);
+    });
+
+    it("does not render wall elements when showWalls is false", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0 }];
+      const container = renderScene({ voxels, showWalls: false });
+      const walls = container.querySelectorAll(".voxcss-wall");
+      expect(walls.length).toBe(0);
+    });
+  });
+
+  describe("ceiling", () => {
+    it("shows ceiling when showFloor is true and camera rotX > 90 (wall mask t is true)", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0 }];
+      const container = renderScene({ voxels, showFloor: true }, { rotX: 95 });
+      const ceiling = container.querySelector(".voxcss-ceiling");
+      expect(ceiling).toBeTruthy();
+    });
+
+    it("does not show ceiling when rotX is less than 90", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0 }];
+      const container = renderScene({ voxels, showFloor: true }, { rotX: 65 });
+      const ceiling = container.querySelector(".voxcss-ceiling");
+      expect(ceiling).toBeNull();
+    });
+
+    it("does not show ceiling when showFloor is false even if rotX > 90", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0 }];
+      const container = renderScene({ voxels, showFloor: false }, { rotX: 95 });
+      const ceiling = container.querySelector(".voxcss-ceiling");
+      expect(ceiling).toBeNull();
+    });
+  });
+
+  describe("dimetric projection", () => {
+    it("applies the dimetric projection class to the scene", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0 }];
+      const container = renderScene({ voxels, projection: "dimetric" });
+      const scene = container.querySelector(".voxcss-scene");
+      expect(scene?.classList.contains("voxcss-projection--dimetric")).toBe(true);
+    });
+
+    it("does not apply dimetric class for cubic projection", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0 }];
+      const container = renderScene({ voxels, projection: "cubic" });
+      const scene = container.querySelector(".voxcss-scene");
+      expect(scene?.classList.contains("voxcss-projection--dimetric")).toBe(false);
+    });
+  });
+
+  describe("voxels render in correct grid positions", () => {
+    it("positions cubes using grid-area based on voxel x,y coordinates", () => {
+      const voxels: Voxel[] = [
+        { x: 2, y: 3, z: 0, color: "#ff0000" },
+      ];
+      const container = renderScene({ voxels });
+      const cube = container.querySelector(".voxcss-cube") as HTMLElement;
+      expect(cube).toBeTruthy();
+      expect(cube.style.gridArea).toBe("2 / 3 / 3 / 4");
+    });
+
+    it("renders multiple cubes each with their own grid position", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 1, y: 2, z: 0, color: "#00ff00" },
+      ];
+      const container = renderScene({ voxels });
+      const cubes = container.querySelectorAll(".voxcss-cube");
+      expect(cubes.length).toBe(2);
+    });
+  });
+});
diff --git a/packages/vue/src/scene/VoxScene.ts b/packages/vue/src/scene/VoxScene.ts
new file mode 100644
index 0000000..accc2f8
--- /dev/null
+++ b/packages/vue/src/scene/VoxScene.ts
@@ -0,0 +1,240 @@
+import { defineComponent, h, computed, shallowRef, ref, inject, onMounted, onBeforeUnmount, watch } from "vue";
+import type { PropType } from "vue";
+import type { ProjectionMode, VoxelGrid, WallsMask } from "@layoutit/voxcss-core";
+import { DEFAULT_WALL_COLOR, wallMasksEqual } from "@layoutit/voxcss-core";
+import { createIsometricCamera } from "@layoutit/voxcss-core";
+import type { MergeVoxelsOption } from "@layoutit/voxcss-core";
+import { VoxCameraContextKey } from "../camera";
+import { useSceneContext } from "./useSceneContext";
+import { useSliceBrushes } from "../slice";
+import { injectBaseStyles } from "../styles";
+import type { SceneStore } from "../store";
+import { renderFloor } from "./Floor";
+import { renderCeiling } from "./Ceiling";
+import { renderWalls } from "./Walls";
+
+const DIMETRIC_CLASS = "voxcss-projection--dimetric";
+const GRID_DISABLE_THRESHOLD = 20;
+
+const gridSvgCache = new Map<string, string>();
+
+export function buildGridSvgDataUrl(width: number, height: number, alpha: number): string {
+  const key = `${width}x${height}:${alpha}`;
+  const cached = gridSvgCache.get(key);
+  if (cached) return cached;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" shape-rendering="crispEdges"><rect x="0" y="0" width="1" height="${height}" fill="rgb(0, 0, 0)" fill-opacity="${alpha}"/><rect x="0" y="0" width="${width}" height="1" fill="rgb(0, 0, 0)" fill-opacity="${alpha}"/></svg>`;
+  const url = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+  gridSvgCache.set(key, url);
+  return url;
+}
+
+export const VoxScene = defineComponent({
+  name: "VoxScene",
+  props: {
+    voxels: { type: Array as PropType<VoxelGrid>, required: true },
+    rows: { type: Number },
+    cols: { type: Number },
+    depth: { type: Number },
+    showFloor: { type: Boolean, default: false },
+    showWalls: { type: Boolean, default: false },
+    projection: { type: String as PropType<ProjectionMode>, default: "cubic" },
+    mergeVoxels: { type: [String, Boolean] as PropType<MergeVoxelsOption> },
+    wallColor: { type: String, default: DEFAULT_WALL_COLOR },
+  },
+  setup(props) {
+    const cameraCtx = inject(VoxCameraContextKey);
+    if (!cameraCtx) {
+      throw new Error("voxcss: VoxScene must be used inside a VoxCamera.");
+    }
+
+    const { store, sceneElRef } = cameraCtx;
+
+    // Read camera state once for initial render — transform updates go via direct DOM
+    const cameraState = store.getState().cameraState;
+
+    // Subscribe to wall mask — re-renders only when mask actually changes.
+    // Use shallowRef + equality check to avoid spurious Vue reactivity triggers.
+    const wallMask = shallowRef(store.getState().wallMask);
+    let unsubscribe: (() => void) | null = null;
+
+    onMounted(() => {
+      unsubscribe = store.subscribe(() => {
+        const next = store.getState().wallMask;
+        if (!wallMasksEqual(wallMask.value, next)) {
+          wallMask.value = next;
+        }
+      });
+    });
+
+    onBeforeUnmount(() => {
+      unsubscribe?.();
+      unsubscribe = null;
+    });
+
+    // Inject base styles once
+    let injected = false;
+    onMounted(() => {
+      if (injected) return;
+      if (typeof document !== "undefined") {
+        injectBaseStyles(document);
+        injected = true;
+      }
+    });
+
+    const sceneElLocalRef = ref<HTMLElement | null>(null);
+
+    // Sync local ref to camera context's sceneElRef
+    watch(sceneElLocalRef, (el) => {
+      sceneElRef.value = el;
+    });
+
+    const sceneContextOptions = computed(() => ({
+      rows: props.rows,
+      cols: props.cols,
+      depth: props.depth,
+      projection: props.projection,
+      showFloor: props.showFloor,
+      showWalls: props.showWalls,
+      wallColor: props.wallColor,
+      // Only include wallMask for non-3d modes — 3d uses NO_WALLS internally
+      wallMask: props.mergeVoxels === "3d" ? undefined : wallMask.value,
+      mergeVoxels: props.mergeVoxels,
+    }));
+
+    const voxelsRef = computed(() => props.voxels);
+    const sceneResult = useSceneContext(voxelsRef, sceneContextOptions);
+
+    // Stable dimensions ref — only updates when rows/cols/depth actually change,
+    // NOT on every wall mask change. This prevents sceneStyle from recomputing
+    // and resetting the live camera transform set by applyTransformDirect.
+    const stableDimensions = computed(() => sceneResult.value.dimensions);
+    let prevDims = { rows: 0, cols: 0, depth: 0 };
+    const dimensions = computed(() => {
+      const dims = stableDimensions.value;
+      if (dims.rows === prevDims.rows && dims.cols === prevDims.cols && dims.depth === prevDims.depth) {
+        return prevDims;
+      }
+      prevDims = { rows: dims.rows, cols: dims.cols, depth: dims.depth };
+      return prevDims;
+    });
+
+    // Scene style: ONLY width/height. Transform is NEVER in Vue's style.
+    // Direct DOM exclusively owns el.style.transform.
+    const sceneStyle = computed(() => {
+      const dims = dimensions.value;
+      const tileSize = 50;
+      return {
+        width: `${dims.cols * tileSize}px`,
+        height: `${dims.rows * tileSize}px`,
+      };
+    });
+
+    // Apply transform via direct DOM whenever scene element or dimensions change.
+    // This is the ONLY place transform is set — Vue never touches it.
+    watch(
+      [sceneElLocalRef, dimensions, () => props.projection],
+      ([el, dims]) => {
+        if (!el) return;
+        const cam = cameraCtx.cameraRef.value;
+        const handle = createIsometricCamera(cam.state);
+        const camStyle = handle.getStyle({
+          rows: dims.rows,
+          cols: dims.cols,
+          depth: dims.depth,
+          dimetric: props.projection === "dimetric",
+        });
+        el.style.transform = camStyle.transform;
+        el.dataset.voxDepthOffset = String(
+          dims.depth * cam.state.depthOffset * (props.projection === "dimetric" ? 0.5 : 1)
+        );
+      },
+      { flush: "post" }
+    );
+
+    const is3d = computed(() => props.mergeVoxels === "3d");
+
+    const sliceLayers = computed(() => is3d.value ? sceneResult.value.layers : []);
+    const sliceContext = computed(() => sceneResult.value.context);
+    const sliceBrushes = useSliceBrushes(sliceLayers, sliceContext);
+
+    const floorRef = ref<HTMLElement | null>(null);
+
+    return () => {
+
+      const { context, dimensions, layers } = sceneResult.value;
+      const mask = wallMask.value;
+      const tileSize = context.tileSize;
+      const layerElevation = context.layerElevation ?? tileSize;
+      // Include mask classes declaratively so they survive Vue re-renders
+      let className = `voxcss-scene${props.projection === "dimetric" ? ` ${DIMETRIC_CLASS}` : ""}`;
+      for (const face of ["t", "b", "bl", "br", "fl", "fr"] as const) {
+        if (mask[face]) className += ` voxcss-mask-${face}`;
+      }
+
+      const disableGrid = dimensions.rows > GRID_DISABLE_THRESHOLD && dimensions.cols > GRID_DISABLE_THRESHOLD;
+
+      const sceneChildren = [];
+
+      // Floor + slice hosts
+      sceneChildren.push(
+        ...renderFloor({
+          layers,
+          context,
+          dimensions,
+          showFloor: props.showFloor,
+          wallMask: mask,
+          wallColor: props.wallColor,
+          tileSize,
+          layerElevation,
+          disableGrid,
+          is3d: is3d.value,
+          store: store as SceneStore,
+          sliceBrushes,
+          floorRef,
+        })
+      );
+
+      // Ceiling
+      if (props.showFloor && mask.t) {
+        sceneChildren.push(
+          renderCeiling({
+            wallColor: props.wallColor,
+            dimensions,
+            tileSize,
+          })
+        );
+      }
+
+      // Walls
+      if (props.showWalls) {
+        sceneChildren.push(
+          ...renderWalls({
+            walls: context.walls,
+            wallColor: props.wallColor,
+            dimensions,
+            tileSize,
+            disableGrid,
+            layerElevation,
+          })
+        );
+      }
+
+      return h(
+        "div",
+        {
+          ref: sceneElLocalRef,
+          class: className,
+          "data-vox-depth-offset": String(
+            dimensions.depth * cameraCtx.cameraRef.value.state.depthOffset * (props.projection === "dimetric" ? 0.5 : 1)
+          ),
+          style: {
+            ...sceneStyle.value,
+            "--voxcss-rows": dimensions.rows,
+            "--voxcss-cols": dimensions.cols,
+          },
+        },
+        sceneChildren
+      );
+    };
+  },
+});
diff --git a/packages/vue/src/scene/Walls.ts b/packages/vue/src/scene/Walls.ts
new file mode 100644
index 0000000..7740e01
--- /dev/null
+++ b/packages/vue/src/scene/Walls.ts
@@ -0,0 +1,91 @@
+import { h } from "vue";
+import type { VNode } from "vue";
+import type { WallsMask } from "@layoutit/voxcss-core";
+import { shadeWallFace } from "@layoutit/voxcss-core";
+import { buildGridSvgDataUrl } from "./VoxScene";
+
+const WALL_GRID_ALPHA = 0.1;
+
+export const WALL_DEFINITIONS: Array<{
+  key: keyof WallsMask;
+  className: string;
+  useAltGrid: boolean;
+  getSize: (rows: number, cols: number, depth: number, tile: number) => [number, number];
+  getTransform: (rows: number, cols: number, depth: number, halfTile: number) => string;
+}> = [
+  {
+    key: "bl",
+    className: "voxcss-wall voxcss-wall--backLeft",
+    useAltGrid: true,
+    getSize: (rows, _cols, depth, tile) => [depth * tile, rows * tile],
+    getTransform: (_rows, _cols, depth, halfTile) =>
+      `rotateY(-90deg) translateZ(${halfTile * depth}px) translateX(${halfTile * depth}px)`,
+  },
+  {
+    key: "fr",
+    className: "voxcss-wall voxcss-wall--frontRight",
+    useAltGrid: true,
+    getSize: (rows, _cols, depth, tile) => [depth * tile, rows * tile],
+    getTransform: (_rows, _cols, depth, halfTile) =>
+      `rotateY(-90deg) translateZ(-${halfTile * depth}px) translateX(${halfTile * depth}px)`,
+  },
+  {
+    key: "br",
+    className: "voxcss-wall voxcss-wall--backRight",
+    useAltGrid: false,
+    getSize: (_rows, cols, depth, tile) => [cols * tile, depth * tile],
+    getTransform: (_rows, _cols, depth, halfTile) =>
+      `rotateX(90deg) translateZ(${halfTile * depth}px) translateY(${halfTile * depth}px)`,
+  },
+  {
+    key: "fl",
+    className: "voxcss-wall voxcss-wall--frontLeft",
+    useAltGrid: false,
+    getSize: (_rows, cols, depth, tile) => [cols * tile, depth * tile],
+    getTransform: (rows, _cols, depth, halfTile) =>
+      `rotateX(-90deg) translateZ(${halfTile * (2 * rows - depth)}px) translateY(-${halfTile * depth}px)`,
+  },
+];
+
+export interface WallsOptions {
+  walls: WallsMask;
+  wallColor: string;
+  dimensions: { rows: number; cols: number; depth: number };
+  tileSize: number;
+  disableGrid: boolean;
+  layerElevation: number;
+}
+
+export function renderWalls(opts: WallsOptions): VNode[] {
+  const { walls, wallColor, dimensions, tileSize, disableGrid, layerElevation } = opts;
+  const halfTile = tileSize / 2;
+  const { rows, cols, depth } = dimensions;
+  const wallGridUrl = disableGrid ? undefined : buildGridSvgDataUrl(tileSize, layerElevation, WALL_GRID_ALPHA);
+  const wallGridAltUrl = disableGrid ? undefined
+    : tileSize === layerElevation ? wallGridUrl
+    : buildGridSvgDataUrl(layerElevation, tileSize, WALL_GRID_ALPHA);
+
+  const children: VNode[] = [];
+  for (const def of WALL_DEFINITIONS) {
+    if (!walls[def.key]) continue;
+    const [width, height] = def.getSize(rows, cols, depth, tileSize);
+    const transform = def.getTransform(rows, cols, depth, halfTile);
+    const bgColor = shadeWallFace(wallColor, def.key);
+    const gridUrl = def.useAltGrid ? wallGridAltUrl : wallGridUrl;
+
+    children.push(
+      h("div", {
+        key: def.key,
+        class: def.className,
+        style: {
+          width: `${width}px`,
+          height: `${height}px`,
+          transform,
+          backgroundColor: bgColor,
+          "--voxcss-wall-grid": gridUrl,
+        },
+      })
+    );
+  }
+  return children;
+}
diff --git a/packages/vue/src/scene/index.ts b/packages/vue/src/scene/index.ts
new file mode 100644
index 0000000..37f1c8c
--- /dev/null
+++ b/packages/vue/src/scene/index.ts
@@ -0,0 +1,4 @@
+export { VoxScene } from "./VoxScene";
+export { VoxLayer } from "./VoxLayer";
+export { useSceneContext } from "./useSceneContext";
+export type { UseSceneContextOptions } from "./useSceneContext";
diff --git a/packages/vue/src/scene/integration.test.ts b/packages/vue/src/scene/integration.test.ts
new file mode 100644
index 0000000..a447740
--- /dev/null
+++ b/packages/vue/src/scene/integration.test.ts
@@ -0,0 +1,183 @@
+import { describe, it, expect } from "vitest";
+import { createApp, h, ref, nextTick } from "vue";
+import type { Voxel } from "@layoutit/voxcss-core";
+import { VoxCamera } from "../camera/VoxCamera";
+import { VoxScene } from "./VoxScene";
+
+function renderScene(
+  sceneProps: Record<string, any>,
+  cameraProps: Record<string, any> = {}
+): HTMLElement {
+  const container = document.createElement("div");
+  const app = createApp({
+    setup() {
+      return () =>
+        h(VoxCamera, cameraProps, {
+          default: () => h(VoxScene, sceneProps),
+        });
+    },
+  });
+  app.mount(container);
+  return container;
+}
+
+describe("Scene integration", () => {
+  describe("mixed scene with multiple shape types", () => {
+    it("renders cubes, ramp, wedge, and spike together in the same scene", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 1, y: 0, z: 0, color: "#00ff00" },
+        { x: 2, y: 0, z: 0, shape: "ramp", color: "#0000ff", rot: 0 },
+        { x: 3, y: 0, z: 0, shape: "wedge", color: "#ffff00", rot: 90 },
+        { x: 4, y: 0, z: 0, shape: "spike", color: "#ff00ff", rot: 180 },
+      ];
+      const container = renderScene({ voxels });
+
+      const cubes = container.querySelectorAll(".voxcss-cube");
+      expect(cubes.length).toBe(2);
+
+      const ramp = container.querySelector(".voxcss-ramp");
+      expect(ramp).toBeTruthy();
+
+      const wedge = container.querySelector(".voxcss-wedge");
+      expect(wedge).toBeTruthy();
+
+      const spike = container.querySelector(".voxcss-spike");
+      expect(spike).toBeTruthy();
+    });
+
+    it("places all shape types in the correct single layer", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 1, y: 0, z: 0, shape: "ramp", color: "#0000ff" },
+        { x: 2, y: 0, z: 0, shape: "wedge", color: "#00ff00" },
+      ];
+      const container = renderScene({ voxels });
+
+      const layers = container.querySelectorAll(".voxcss-layer");
+      expect(layers.length).toBe(1);
+    });
+  });
+
+  describe("updating voxels changes the rendered scene", () => {
+    it("re-renders with new voxels when props change", async () => {
+      const voxelData = ref<Voxel[]>([
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+      ]);
+      const container = document.createElement("div");
+      const app = createApp({
+        setup() {
+          return () =>
+            h(VoxCamera, {}, {
+              default: () => h(VoxScene, { voxels: voxelData.value }),
+            });
+        },
+      });
+      app.mount(container);
+
+      let cubes = container.querySelectorAll(".voxcss-cube");
+      expect(cubes.length).toBe(1);
+
+      voxelData.value = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 1, y: 0, z: 0, color: "#00ff00" },
+        { x: 2, y: 0, z: 0, color: "#0000ff" },
+      ];
+      await nextTick();
+
+      cubes = container.querySelectorAll(".voxcss-cube");
+      expect(cubes.length).toBe(3);
+    });
+
+    it("removes shapes when voxels are reduced", async () => {
+      const voxelData = ref<Voxel[]>([
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 1, y: 0, z: 0, shape: "ramp", color: "#0000ff" },
+      ]);
+      const container = document.createElement("div");
+      const app = createApp({
+        setup() {
+          return () =>
+            h(VoxCamera, {}, {
+              default: () => h(VoxScene, { voxels: voxelData.value }),
+            });
+        },
+      });
+      app.mount(container);
+
+      expect(container.querySelector(".voxcss-ramp")).toBeTruthy();
+
+      voxelData.value = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+      ];
+      await nextTick();
+
+      expect(container.querySelector(".voxcss-ramp")).toBeNull();
+    });
+  });
+
+  describe("wall mask changes show/hide appropriate faces", () => {
+    it("shows back-left and back-right walls with default camera angle", () => {
+      const voxels: Voxel[] = [{ x: 0, y: 0, z: 0 }];
+      const container = renderScene({ voxels, showWalls: true });
+
+      const walls = container.querySelectorAll(".voxcss-wall");
+      const wallClasses = Array.from(walls).map((w) => w.className);
+      expect(wallClasses.some((c) => c.includes("backLeft"))).toBe(true);
+      expect(wallClasses.some((c) => c.includes("backRight"))).toBe(true);
+    });
+
+    it("changes visible walls when camera rotY changes past a quadrant boundary", async () => {
+      const rotY = ref(45);
+      const container = document.createElement("div");
+      const app = createApp({
+        setup() {
+          return () =>
+            h(VoxCamera, { rotY: rotY.value }, {
+              default: () => h(VoxScene, { voxels: [{ x: 0, y: 0, z: 0 }], showWalls: true }),
+            });
+        },
+      });
+      app.mount(container);
+
+      const wallsBefore = container.querySelectorAll(".voxcss-wall");
+      const beforeClasses = Array.from(wallsBefore).map((w) => w.className);
+
+      rotY.value = 135;
+      await nextTick();
+
+      const wallsAfter = container.querySelectorAll(".voxcss-wall");
+      const afterClasses = Array.from(wallsAfter).map((w) => w.className);
+
+      expect(afterClasses).not.toEqual(beforeClasses);
+    });
+
+    it("cube face visibility changes with camera rotation", async () => {
+      const rotY = ref(45);
+      const container = document.createElement("div");
+      const app = createApp({
+        setup() {
+          return () =>
+            h(VoxCamera, { rotX: 65, rotY: rotY.value }, {
+              default: () =>
+                h(VoxScene, { voxels: [{ x: 0, y: 0, z: 0, color: "#ff0000" }] }),
+            });
+        },
+      });
+      app.mount(container);
+
+      const facesBefore = Array.from(
+        container.querySelectorAll(".voxcss-cube-face")
+      ).map((f) => f.className);
+
+      rotY.value = 225;
+      await nextTick();
+
+      const facesAfter = Array.from(
+        container.querySelectorAll(".voxcss-cube-face")
+      ).map((f) => f.className);
+
+      expect(facesAfter).not.toEqual(facesBefore);
+    });
+  });
+});
diff --git a/packages/vue/src/scene/useSceneContext.ts b/packages/vue/src/scene/useSceneContext.ts
new file mode 100644
index 0000000..e9c4797
--- /dev/null
+++ b/packages/vue/src/scene/useSceneContext.ts
@@ -0,0 +1,58 @@
+import { computed } from "vue";
+import type { Ref } from "vue";
+import type { ProjectionMode, VoxelGrid } from "@layoutit/voxcss-core";
+import type { SceneContextBuildResult } from "@layoutit/voxcss-core";
+import { buildSceneContext } from "@layoutit/voxcss-core";
+import { mergeVoxels as mergeVoxelsGrid } from "@layoutit/voxcss-core";
+import type { MergeVoxelsOption, WallsMask } from "@layoutit/voxcss-core";
+
+/** All-false wall mask — topology only for 3d merge mode. */
+const NO_WALLS = { t: false, b: false, bl: false, br: false, fl: false, fr: false } as const;
+
+export interface UseSceneContextOptions {
+  rows?: number;
+  cols?: number;
+  depth?: number;
+  projection?: ProjectionMode;
+  showFloor?: boolean;
+  showWalls?: boolean;
+  wallColor?: string;
+  wallMask?: WallsMask;
+  mergeVoxels?: MergeVoxelsOption;
+}
+
+export function useSceneContext(
+  voxels: Ref<VoxelGrid>,
+  options: Ref<UseSceneContextOptions>
+): Ref<SceneContextBuildResult> {
+  return computed(() => {
+    const opts = options.value;
+    // For 3d merge mode, use NO_WALLS so the scene context is stable
+    // and doesn't rebuild when camera rotates. The imperative brush
+    // renderer handles wall mask filtering directly.
+    const effectiveWalls = opts.mergeVoxels === "3d" ? NO_WALLS : (opts.wallMask ?? NO_WALLS);
+
+    let grid = voxels.value;
+    if (opts.mergeVoxels === "2d") {
+      grid = mergeVoxelsGrid(grid);
+    }
+    return buildSceneContext({
+      grid,
+      context: {
+        rows: opts.rows,
+        cols: opts.cols,
+        depth: opts.depth,
+        projection: opts.projection,
+        showFloor: opts.showFloor,
+        showWalls: opts.showWalls,
+        wallColor: opts.wallColor,
+        walls: effectiveWalls,
+      },
+      dimensions: {
+        rows: opts.rows,
+        cols: opts.cols,
+        depth: opts.depth,
+      },
+    });
+  });
+}
diff --git a/packages/vue/src/shapes/Ramp.ts b/packages/vue/src/shapes/Ramp.ts
new file mode 100644
index 0000000..b197270
--- /dev/null
+++ b/packages/vue/src/shapes/Ramp.ts
@@ -0,0 +1,39 @@
+import { h } from "vue";
+import type { ShapeInnerProps } from "./types";
+import { getSurfaceColor, getSurfaceDelta, resolveSurfaceTexture, textureBrightnessFilter } from "./utils";
+
+export function renderRamp(
+  { voxel, context, baseColor, lighting, showBottom }: ShapeInnerProps,
+) {
+  const slopeColor = getSurfaceColor(lighting, "slope", baseColor);
+  const slopeDelta = getSurfaceDelta(lighting, "slope");
+  const slopeTexture = resolveSurfaceTexture(voxel, "slope", context);
+  const bottomTexture = resolveSurfaceTexture(voxel, "bottom", context);
+
+  const children = [];
+  if (showBottom) {
+    children.push(
+      h("div", {
+        class: "voxcss-ramp-bottom",
+        style: {
+          backgroundColor: bottomTexture ? undefined : baseColor,
+          backgroundImage: bottomTexture ? `url(${bottomTexture})` : undefined,
+          filter: bottomTexture ? textureBrightnessFilter(0) : undefined,
+        },
+      })
+    );
+  }
+  children.push(
+    h("div", {
+      class: "voxcss-ramp-slope",
+      style: {
+        backgroundColor: slopeTexture ? undefined : slopeColor,
+        backgroundImage: slopeTexture ? `url(${slopeTexture})` : undefined,
+        backgroundSize: "70px 50px",
+        filter: slopeTexture ? textureBrightnessFilter(slopeDelta) : undefined,
+      },
+    })
+  );
+
+  return children;
+}
diff --git a/packages/vue/src/shapes/Spike.ts b/packages/vue/src/shapes/Spike.ts
new file mode 100644
index 0000000..54d57c5
--- /dev/null
+++ b/packages/vue/src/shapes/Spike.ts
@@ -0,0 +1,56 @@
+import { h } from "vue";
+import type { ShapeInnerProps } from "./types";
+import { getSurfaceColor, getSurfaceDelta, resolveSurfaceTexture, textureBrightnessFilter } from "./utils";
+import { renderSvgSlope } from "./SvgSlope";
+
+export function renderSpike(
+  { voxel, context, baseColor, lighting, showBottom }: ShapeInnerProps,
+) {
+  const primaryColor = getSurfaceColor(lighting, "primary", baseColor);
+  const secondaryColor = getSurfaceColor(lighting, "secondary", baseColor);
+  const primaryDelta = getSurfaceDelta(lighting, "primary");
+  const secondaryDelta = getSurfaceDelta(lighting, "secondary");
+  const primaryTexture = resolveSurfaceTexture(voxel, "primary", context);
+  const secondaryTexture = resolveSurfaceTexture(voxel, "secondary", context);
+  const bottomTexture = resolveSurfaceTexture(voxel, "bottom", context);
+
+  const children = [];
+  if (showBottom) {
+    children.push(
+      h("div", {
+        class: "voxcss-spike-bottom",
+        style: {
+          backgroundColor: bottomTexture ? undefined : baseColor,
+          backgroundImage: bottomTexture ? `url(${bottomTexture})` : undefined,
+          filter: bottomTexture ? textureBrightnessFilter(0) : undefined,
+        },
+      })
+    );
+  }
+  children.push(
+    renderSvgSlope(
+      "voxcss-spike-slope voxcss-spike-slope--primary",
+      "M480 0 L480 480 L0 480 Z",
+      primaryColor,
+      undefined,
+      undefined,
+      undefined,
+      primaryTexture,
+      primaryDelta,
+    )
+  );
+  children.push(
+    renderSvgSlope(
+      "voxcss-spike-slope voxcss-spike-slope--secondary",
+      "M0 0 L0 480 L480 0 Z",
+      secondaryColor,
+      undefined,
+      "50",
+      "56",
+      secondaryTexture,
+      secondaryDelta,
+    )
+  );
+
+  return children;
+}
diff --git a/packages/vue/src/shapes/SvgSlope.ts b/packages/vue/src/shapes/SvgSlope.ts
new file mode 100644
index 0000000..fd56999
--- /dev/null
+++ b/packages/vue/src/shapes/SvgSlope.ts
@@ -0,0 +1,74 @@
+import { h } from "vue";
+import { textureBrightnessFilter } from "./utils";
+
+let _patternIdCounter = 0;
+function nextPatternId(): string {
+  return `vox-pat-${++_patternIdCounter}`;
+}
+
+export function renderSvgSlope(
+  className: string,
+  path: string,
+  fill: string,
+  viewBox = "0 0 480 480",
+  width = "56",
+  height = "50",
+  textureUrl?: string,
+  brightnessDelta = 0,
+) {
+  const patternId = textureUrl ? nextPatternId() : "";
+  const effectiveFill = textureUrl ? `url(#${patternId})` : fill;
+  const filter = textureUrl ? textureBrightnessFilter(brightnessDelta) : undefined;
+
+  const defs = textureUrl
+    ? h("defs", null, [
+        h("pattern", {
+          id: patternId,
+          patternUnits: "objectBoundingBox",
+          patternContentUnits: "objectBoundingBox",
+          width: "1",
+          height: "1",
+        }, [
+          h("image", {
+            width: "1",
+            height: "1",
+            preserveAspectRatio: "xMidYMid slice",
+            href: textureUrl,
+          }),
+        ]),
+      ])
+    : null;
+
+  return h("div", { class: className, style: { filter } }, [
+    h(
+      "svg",
+      {
+        viewBox,
+        width,
+        height,
+        preserveAspectRatio: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        focusable: "false",
+        style: {
+          position: "absolute",
+          inset: "0",
+          width: "100%",
+          height: "100%",
+          display: "block",
+          pointerEvents: "none",
+        },
+      },
+      [
+        defs,
+        h("path", {
+          d: path,
+          fill: effectiveFill,
+          stroke: "rgba(0, 0, 0, 0.1)",
+          "stroke-width": "1",
+          "vector-effect": "non-scaling-stroke",
+        }),
+      ]
+    ),
+  ]);
+}
diff --git a/packages/vue/src/shapes/VoxCube.ts b/packages/vue/src/shapes/VoxCube.ts
new file mode 100644
index 0000000..c9a88ed
--- /dev/null
+++ b/packages/vue/src/shapes/VoxCube.ts
@@ -0,0 +1,67 @@
+import { defineComponent, h } from "vue";
+import type { PropType } from "vue";
+import type { CubeFace, GridContext, Voxel } from "@layoutit/voxcss-core";
+import { computeVisibleFaces, computeCubeFaceAppearance, getVoxelBounds } from "@layoutit/voxcss-core";
+
+const CubeFaceDiv = defineComponent({
+  name: "CubeFaceDiv",
+  props: {
+    voxel: { type: Object as PropType<Voxel>, required: true },
+    face: { type: String as PropType<CubeFace>, required: true },
+    context: { type: Object as PropType<GridContext>, required: true },
+  },
+  setup(props) {
+    return () => {
+      const appearance = computeCubeFaceAppearance(props.voxel, props.face, props.context);
+      return h("div", {
+        class: `voxcss-cube-face voxcss-cube-face--${props.face}`,
+        style: {
+          backgroundColor: appearance.backgroundColor || undefined,
+          backgroundImage: appearance.backgroundImage || undefined,
+          filter: appearance.filter || undefined,
+        },
+      });
+    };
+  },
+});
+
+export const VoxCube = defineComponent({
+  name: "VoxCube",
+  props: {
+    voxel: { type: Object as PropType<Voxel>, required: true },
+    context: { type: Object as PropType<GridContext>, required: true },
+  },
+  setup(props) {
+    return () => {
+      const faces = computeVisibleFaces(props.voxel, props.context);
+      if (faces.length === 0) return null;
+
+      const { x2, y2 } = getVoxelBounds(props.voxel);
+      const tileSize = props.context.tileSize;
+      const halfTile = tileSize / 2;
+      const spanX = x2 - props.voxel.x;
+      const spanY = y2 - props.voxel.y;
+
+      return h(
+        "div",
+        {
+          class: "voxcss-cube",
+          style: {
+            gridArea: `${props.voxel.x} / ${props.voxel.y} / ${x2} / ${y2}`,
+            "--voxcss-side-offset-x": `${spanX * halfTile}px`,
+            "--voxcss-side-offset-y": `${spanY * halfTile}px`,
+            "--voxcss-fr-offset": `${spanY * tileSize}px`,
+          },
+        },
+        faces.map((face) =>
+          h(CubeFaceDiv, {
+            key: face,
+            voxel: props.voxel,
+            face,
+            context: props.context,
+          })
+        )
+      );
+    };
+  },
+});
diff --git a/packages/vue/src/shapes/VoxShape.ts b/packages/vue/src/shapes/VoxShape.ts
new file mode 100644
index 0000000..16b378a
--- /dev/null
+++ b/packages/vue/src/shapes/VoxShape.ts
@@ -0,0 +1,57 @@
+import { defineComponent, h } from "vue";
+import type { PropType } from "vue";
+import type { GridContext, Voxel, ShapeType } from "@layoutit/voxcss-core";
+import { getVoxelBounds, computeShapeLighting } from "@layoutit/voxcss-core";
+import { normalizeRotation, ORIENTATION_MAP, isCovered, shouldRenderBottom } from "./utils";
+import { renderRamp } from "./Ramp";
+import { renderWedge } from "./Wedge";
+import { renderSpike } from "./Spike";
+
+export const VoxShape = defineComponent({
+  name: "VoxShape",
+  props: {
+    voxel: { type: Object as PropType<Voxel>, required: true },
+    context: { type: Object as PropType<GridContext>, required: true },
+  },
+  setup(props) {
+    return () => {
+      const shapeKey = props.voxel.shape ?? "cube";
+      if (shapeKey === "cube") return null;
+      const shape = shapeKey as ShapeType;
+
+      if (isCovered(props.voxel, props.context)) return null;
+
+      const { x2, y2 } = getVoxelBounds(props.voxel);
+      const rawRotation = Number.isFinite(props.voxel.rot as number) ? Number(props.voxel.rot) : 0;
+      const rotation = normalizeRotation(rawRotation);
+      const orientation = ORIENTATION_MAP[rotation] ?? "east";
+      const baseColor = props.voxel.color ?? "#cccccc";
+      const lighting = computeShapeLighting(shape, rawRotation, baseColor);
+      const showBottom = shouldRenderBottom(props.voxel, props.context);
+
+      const innerProps = { voxel: props.voxel, context: props.context, baseColor, lighting, showBottom };
+
+      let shapeClass: string;
+      let children: any[];
+      if (shape === "ramp") {
+        shapeClass = "voxcss-ramp";
+        children = renderRamp(innerProps);
+      } else if (shape === "wedge") {
+        shapeClass = "voxcss-wedge";
+        children = renderWedge(innerProps);
+      } else {
+        shapeClass = "voxcss-spike";
+        children = renderSpike(innerProps);
+      }
+
+      return h(
+        "div",
+        {
+          class: `voxcss-${orientation} ${shapeClass}`,
+          style: { gridArea: `${props.voxel.x} / ${props.voxel.y} / ${x2} / ${y2}` },
+        },
+        children
+      );
+    };
+  },
+});
diff --git a/packages/vue/src/shapes/Wedge.ts b/packages/vue/src/shapes/Wedge.ts
new file mode 100644
index 0000000..95d2c4a
--- /dev/null
+++ b/packages/vue/src/shapes/Wedge.ts
@@ -0,0 +1,56 @@
+import { h } from "vue";
+import type { ShapeInnerProps } from "./types";
+import { getSurfaceColor, getSurfaceDelta, resolveSurfaceTexture, textureBrightnessFilter } from "./utils";
+import { renderSvgSlope } from "./SvgSlope";
+
+export function renderWedge(
+  { voxel, context, baseColor, lighting, showBottom }: ShapeInnerProps,
+) {
+  const primaryColor = getSurfaceColor(lighting, "primary", baseColor);
+  const secondaryColor = getSurfaceColor(lighting, "secondary", baseColor);
+  const primaryDelta = getSurfaceDelta(lighting, "primary");
+  const secondaryDelta = getSurfaceDelta(lighting, "secondary");
+  const primaryTexture = resolveSurfaceTexture(voxel, "primary", context);
+  const secondaryTexture = resolveSurfaceTexture(voxel, "secondary", context);
+  const bottomTexture = resolveSurfaceTexture(voxel, "bottom", context);
+
+  const children = [];
+  if (showBottom) {
+    children.push(
+      h("div", {
+        class: "voxcss-wedge-bottom",
+        style: {
+          backgroundColor: bottomTexture ? undefined : baseColor,
+          backgroundImage: bottomTexture ? `url(${bottomTexture})` : undefined,
+          filter: bottomTexture ? textureBrightnessFilter(0) : undefined,
+        },
+      })
+    );
+  }
+  children.push(
+    renderSvgSlope(
+      "voxcss-wedge-slope voxcss-wedge-slope--primary",
+      "M0 0 L480 0 L0 480 Z",
+      primaryColor,
+      undefined,
+      undefined,
+      undefined,
+      primaryTexture,
+      primaryDelta,
+    )
+  );
+  children.push(
+    renderSvgSlope(
+      "voxcss-wedge-slope voxcss-wedge-slope--secondary",
+      "M480 480 L0 480 L480 0 Z",
+      secondaryColor,
+      undefined,
+      "50",
+      "56",
+      secondaryTexture,
+      secondaryDelta,
+    )
+  );
+
+  return children;
+}
diff --git a/packages/vue/src/shapes/index.ts b/packages/vue/src/shapes/index.ts
new file mode 100644
index 0000000..0dc2ca5
--- /dev/null
+++ b/packages/vue/src/shapes/index.ts
@@ -0,0 +1,8 @@
+export { renderRamp } from "./Ramp";
+export { renderWedge } from "./Wedge";
+export { renderSpike } from "./Spike";
+export { renderSvgSlope } from "./SvgSlope";
+export { normalizeRotation, ORIENTATION_MAP, isCovered, shouldRenderBottom } from "./utils";
+export type { ShapeInnerProps } from "./types";
+export { VoxCube } from "./VoxCube";
+export { VoxShape } from "./VoxShape";
diff --git a/packages/vue/src/shapes/shapes.test.ts b/packages/vue/src/shapes/shapes.test.ts
new file mode 100644
index 0000000..eaa4282
--- /dev/null
+++ b/packages/vue/src/shapes/shapes.test.ts
@@ -0,0 +1,236 @@
+import { describe, it, expect } from "vitest";
+import { createApp, h } from "vue";
+import type { GridContext, Voxel } from "@layoutit/voxcss-core";
+import { buildSceneContext } from "@layoutit/voxcss-core";
+import { VoxShape } from "./VoxShape";
+import { VoxCube } from "./VoxCube";
+
+function makeContext(voxels: Voxel[], walls?: Record<string, boolean>): GridContext {
+  return buildSceneContext({ grid: voxels, context: walls ? { walls } : undefined }).context;
+}
+
+function renderToDiv(component: any, props: Record<string, any>): HTMLElement {
+  const container = document.createElement("div");
+  const app = createApp({
+    setup() {
+      return () => h(component, props);
+    },
+  });
+  app.mount(container);
+  return container;
+}
+
+describe("Shape behaviors", () => {
+  describe("ramp", () => {
+    it("renders with a slope element", () => {
+      const voxel: Voxel = { x: 0, y: 0, z: 0, shape: "ramp", color: "#ff0000" };
+      const context = makeContext([voxel]);
+      const container = renderToDiv(VoxShape, { voxel, context });
+
+      expect(container.querySelector(".voxcss-ramp")).toBeTruthy();
+      expect(container.querySelector(".voxcss-ramp-slope")).toBeTruthy();
+    });
+  });
+
+  describe("wedge", () => {
+    it("renders with two SVG slope elements", () => {
+      const voxel: Voxel = { x: 0, y: 0, z: 0, shape: "wedge", color: "#00ff00" };
+      const context = makeContext([voxel]);
+      const container = renderToDiv(VoxShape, { voxel, context });
+
+      expect(container.querySelector(".voxcss-wedge")).toBeTruthy();
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs.length).toBe(2);
+      const paths = container.querySelectorAll("path");
+      expect(paths.length).toBe(2);
+    });
+  });
+
+  describe("spike", () => {
+    it("renders with two SVG slope elements", () => {
+      const voxel: Voxel = { x: 0, y: 0, z: 0, shape: "spike", color: "#0000ff" };
+      const context = makeContext([voxel]);
+      const container = renderToDiv(VoxShape, { voxel, context });
+
+      expect(container.querySelector(".voxcss-spike")).toBeTruthy();
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs.length).toBe(2);
+    });
+  });
+
+  describe("rotation orientations", () => {
+    const shapes: Array<{ shape: "ramp" | "wedge" | "spike"; className: string }> = [
+      { shape: "ramp", className: "voxcss-ramp" },
+      { shape: "wedge", className: "voxcss-wedge" },
+      { shape: "spike", className: "voxcss-spike" },
+    ];
+
+    const orientationCases: Array<{ rot: number; expected: string }> = [
+      { rot: 0, expected: "voxcss-east" },
+      { rot: 90, expected: "voxcss-south" },
+      { rot: 180, expected: "voxcss-west" },
+      { rot: 270, expected: "voxcss-north" },
+    ];
+
+    for (const { shape, className } of shapes) {
+      for (const { rot, expected } of orientationCases) {
+        it(`${shape} at rot=${rot} has orientation class ${expected}`, () => {
+          const voxel: Voxel = { x: 0, y: 0, z: 0, shape, rot, color: "#aabbcc" };
+          const context = makeContext([voxel]);
+          const container = renderToDiv(VoxShape, { voxel, context });
+
+          const shapeEl = container.querySelector(`.${className}`);
+          expect(shapeEl).toBeTruthy();
+          expect(shapeEl?.classList.contains(expected)).toBe(true);
+        });
+      }
+    }
+  });
+
+  describe("covered shape", () => {
+    it("returns null when a voxel exists directly above the shape", () => {
+      const ramp: Voxel = { x: 0, y: 0, z: 0, shape: "ramp", color: "#ff0000" };
+      const above: Voxel = { x: 0, y: 0, z: 1, color: "#00ff00" };
+      const context = makeContext([ramp, above]);
+      const container = renderToDiv(VoxShape, { voxel: ramp, context });
+
+      expect(container.querySelector(".voxcss-ramp")).toBeNull();
+    });
+
+    it("renders when there is no voxel above", () => {
+      const ramp: Voxel = { x: 0, y: 0, z: 0, shape: "ramp", color: "#ff0000" };
+      const context = makeContext([ramp]);
+      const container = renderToDiv(VoxShape, { voxel: ramp, context });
+
+      expect(container.querySelector(".voxcss-ramp")).toBeTruthy();
+    });
+  });
+
+  describe("bottom face rendering", () => {
+    it("renders bottom face when not occluded and walls.b is false", () => {
+      const voxel: Voxel = { x: 0, y: 0, z: 0, shape: "ramp", color: "#ff0000" };
+      const context = makeContext([voxel], { b: false, t: false, bl: false, br: false, fl: false, fr: false });
+      const container = renderToDiv(VoxShape, { voxel, context });
+
+      const bottom = container.querySelector(".voxcss-ramp-bottom");
+      expect(bottom).toBeTruthy();
+    });
+
+    it("hides bottom face when walls.b is true (back-face culled)", () => {
+      const voxel: Voxel = { x: 0, y: 0, z: 0, shape: "ramp", color: "#ff0000" };
+      const context = makeContext([voxel], { b: true });
+      const container = renderToDiv(VoxShape, { voxel, context });
+
+      const bottom = container.querySelector(".voxcss-ramp-bottom");
+      expect(bottom).toBeNull();
+    });
+
+    it("hides bottom face when the voxel below occludes it", () => {
+      const ramp: Voxel = { x: 0, y: 0, z: 1, shape: "ramp", color: "#ff0000" };
+      const below: Voxel = { x: 0, y: 0, z: 0, color: "#00ff00" };
+      const context = makeContext([ramp, below], { b: false, t: false, bl: false, br: false, fl: false, fr: false });
+      const container = renderToDiv(VoxShape, { voxel: ramp, context });
+
+      const bottom = container.querySelector(".voxcss-ramp-bottom");
+      expect(bottom).toBeNull();
+    });
+  });
+
+  describe("textured shape", () => {
+    it("applies backgroundImage when voxel has a texture URL", () => {
+      const voxel: Voxel = {
+        x: 0, y: 0, z: 0,
+        shape: "ramp",
+        color: "#ff0000",
+        texture: "https://example.com/texture.png",
+      };
+      const context = makeContext([voxel]);
+      const container = renderToDiv(VoxShape, { voxel, context });
+
+      const slope = container.querySelector(".voxcss-ramp-slope") as HTMLElement;
+      expect(slope).toBeTruthy();
+      expect(slope.style.backgroundImage).toContain("https://example.com/texture.png");
+    });
+
+    it("does not apply backgroundImage when no texture is set", () => {
+      const voxel: Voxel = { x: 0, y: 0, z: 0, shape: "ramp", color: "#ff0000" };
+      const context = makeContext([voxel]);
+      const container = renderToDiv(VoxShape, { voxel, context });
+
+      const slope = container.querySelector(".voxcss-ramp-slope") as HTMLElement;
+      expect(slope).toBeTruthy();
+      expect(slope.style.backgroundImage).toBe("");
+    });
+  });
+
+  describe("shape colors from lighting", () => {
+    it("applies computed slope color to ramp slope element", () => {
+      const voxel: Voxel = { x: 0, y: 0, z: 0, shape: "ramp", color: "#ff0000" };
+      const context = makeContext([voxel]);
+      const container = renderToDiv(VoxShape, { voxel, context });
+
+      const slope = container.querySelector(".voxcss-ramp-slope") as HTMLElement;
+      expect(slope).toBeTruthy();
+      expect(slope.style.backgroundColor).toBeTruthy();
+    });
+
+    it("applies fill colors to wedge SVG paths", () => {
+      const voxel: Voxel = { x: 0, y: 0, z: 0, shape: "wedge", color: "#00ff00" };
+      const context = makeContext([voxel]);
+      const container = renderToDiv(VoxShape, { voxel, context });
+
+      const paths = container.querySelectorAll("path");
+      expect(paths.length).toBe(2);
+      for (const path of paths) {
+        expect(path.getAttribute("fill")).toBeTruthy();
+      }
+    });
+  });
+
+  describe("cube faces", () => {
+    it("renders only visible faces for an isolated cube", () => {
+      const voxel: Voxel = { x: 0, y: 0, z: 0, color: "#ff0000" };
+      const context = makeContext([voxel]);
+      const container = renderToDiv(VoxCube, { voxel, context });
+
+      const faces = container.querySelectorAll(".voxcss-cube-face");
+      expect(faces.length).toBe(3);
+    });
+
+    it("renders no faces when cube is fully surrounded", () => {
+      const voxels: Voxel[] = [];
+      for (let x = 0; x < 3; x++)
+        for (let y = 0; y < 3; y++)
+          for (let z = 0; z < 3; z++)
+            voxels.push({ x, y, z });
+      const context = makeContext(voxels);
+      const center = voxels.find((v) => v.x === 1 && v.y === 1 && v.z === 1)!;
+      const container = renderToDiv(VoxCube, { voxel: center, context });
+
+      const faces = container.querySelectorAll(".voxcss-cube-face");
+      expect(faces.length).toBe(0);
+    });
+
+    it("applies correct background color based on face lighting", () => {
+      const voxel: Voxel = { x: 0, y: 0, z: 0, color: "#ff0000" };
+      const context = makeContext([voxel]);
+      const container = renderToDiv(VoxCube, { voxel, context });
+
+      const topFace = container.querySelector(".voxcss-cube-face--t") as HTMLElement;
+      expect(topFace).toBeTruthy();
+      expect(topFace.style.backgroundColor).toBe("rgb(255, 0, 0)");
+    });
+
+    it("has distinct face class names for each visible face", () => {
+      const voxel: Voxel = { x: 0, y: 0, z: 0, color: "#ff0000" };
+      const context = makeContext([voxel]);
+      const container = renderToDiv(VoxCube, { voxel, context });
+
+      const faces = container.querySelectorAll(".voxcss-cube-face");
+      const classNames = Array.from(faces).map((f) => f.className);
+      expect(classNames).toContain("voxcss-cube-face voxcss-cube-face--t");
+      expect(classNames).toContain("voxcss-cube-face voxcss-cube-face--fr");
+      expect(classNames).toContain("voxcss-cube-face voxcss-cube-face--fl");
+    });
+  });
+});
diff --git a/packages/vue/src/shapes/textures.test.ts b/packages/vue/src/shapes/textures.test.ts
new file mode 100644
index 0000000..a5cc122
--- /dev/null
+++ b/packages/vue/src/shapes/textures.test.ts
@@ -0,0 +1,153 @@
+import { describe, it, expect } from "vitest";
+import { createApp, h } from "vue";
+import type { GridContext, Voxel } from "@layoutit/voxcss-core";
+import { buildSceneContext } from "@layoutit/voxcss-core";
+import { VoxShape } from "./VoxShape";
+
+function makeContext(voxels: Voxel[], walls?: Record<string, boolean>): GridContext {
+  return buildSceneContext({ grid: voxels, context: walls ? { walls } : undefined }).context;
+}
+
+function renderToDiv(props: Record<string, any>): HTMLElement {
+  const container = document.createElement("div");
+  const app = createApp({
+    setup() {
+      return () => h(VoxShape, props);
+    },
+  });
+  app.mount(container);
+  return container;
+}
+
+describe("Shape texture behaviors", () => {
+  describe("ramp with texture", () => {
+    it("applies backgroundImage on slope when texture is set", () => {
+      const voxel: Voxel = {
+        x: 0, y: 0, z: 0,
+        shape: "ramp",
+        color: "#ff0000",
+        texture: "https://example.com/brick.png",
+      };
+      const context = makeContext([voxel]);
+      const container = renderToDiv({ voxel, context });
+
+      const slope = container.querySelector(".voxcss-ramp-slope") as HTMLElement;
+      expect(slope).toBeTruthy();
+      expect(slope.style.backgroundImage).toContain("https://example.com/brick.png");
+    });
+  });
+
+  describe("wedge with texture", () => {
+    it("creates SVG pattern with image href for textured wedge", () => {
+      const voxel: Voxel = {
+        x: 0, y: 0, z: 0,
+        shape: "wedge",
+        color: "#00ff00",
+        texture: "https://example.com/stone.png",
+      };
+      const context = makeContext([voxel]);
+      const container = renderToDiv({ voxel, context });
+
+      const patterns = container.querySelectorAll("pattern");
+      expect(patterns.length).toBeGreaterThan(0);
+
+      const images = container.querySelectorAll("image");
+      expect(images.length).toBeGreaterThan(0);
+      const hrefs = Array.from(images).map((img) => img.getAttribute("href"));
+      expect(hrefs.some((href) => href === "https://example.com/stone.png")).toBe(true);
+    });
+  });
+
+  describe("spike with texture", () => {
+    it("creates SVG pattern with image href for textured spike", () => {
+      const voxel: Voxel = {
+        x: 0, y: 0, z: 0,
+        shape: "spike",
+        color: "#0000ff",
+        texture: "https://example.com/metal.png",
+      };
+      const context = makeContext([voxel]);
+      const container = renderToDiv({ voxel, context });
+
+      const patterns = container.querySelectorAll("pattern");
+      expect(patterns.length).toBeGreaterThan(0);
+
+      const images = container.querySelectorAll("image");
+      expect(images.length).toBeGreaterThan(0);
+      const hrefs = Array.from(images).map((img) => img.getAttribute("href"));
+      expect(hrefs.some((href) => href === "https://example.com/metal.png")).toBe(true);
+    });
+  });
+
+  describe("shape bottom with texture", () => {
+    it("applies backgroundImage on ramp bottom when texture is set and bottom is visible", () => {
+      const voxel: Voxel = {
+        x: 0, y: 0, z: 0,
+        shape: "ramp",
+        color: "#ff0000",
+        texture: "https://example.com/wood.png",
+      };
+      const context = makeContext([voxel], { b: false, t: false, bl: false, br: false, fl: false, fr: false });
+      const container = renderToDiv({ voxel, context });
+
+      const bottom = container.querySelector(".voxcss-ramp-bottom") as HTMLElement;
+      expect(bottom).toBeTruthy();
+      expect(bottom.style.backgroundImage).toContain("https://example.com/wood.png");
+    });
+
+    it("applies backgroundImage on wedge bottom when texture is set and bottom is visible", () => {
+      const voxel: Voxel = {
+        x: 0, y: 0, z: 0,
+        shape: "wedge",
+        color: "#00ff00",
+        texture: "https://example.com/wood.png",
+      };
+      const context = makeContext([voxel], { b: false, t: false, bl: false, br: false, fl: false, fr: false });
+      const container = renderToDiv({ voxel, context });
+
+      const bottom = container.querySelector(".voxcss-wedge-bottom") as HTMLElement;
+      expect(bottom).toBeTruthy();
+      expect(bottom.style.backgroundImage).toContain("https://example.com/wood.png");
+    });
+  });
+
+  describe("texture brightness filter", () => {
+    it("applies brightness filter on slope based on face delta", () => {
+      const voxel: Voxel = {
+        x: 0, y: 0, z: 0,
+        shape: "ramp",
+        color: "#ff0000",
+        texture: "https://example.com/texture.png",
+      };
+      const context = makeContext([voxel]);
+      const container = renderToDiv({ voxel, context });
+
+      const slope = container.querySelector(".voxcss-ramp-slope") as HTMLElement;
+      expect(slope).toBeTruthy();
+      const filter = slope.style.filter;
+      if (filter) {
+        expect(filter).toContain("brightness(");
+      }
+    });
+
+    it("applies brightness filter on wedge SVG slope wrappers based on face delta", () => {
+      const voxel: Voxel = {
+        x: 0, y: 0, z: 0,
+        shape: "wedge",
+        color: "#00ff00",
+        texture: "https://example.com/texture.png",
+      };
+      const context = makeContext([voxel]);
+      const container = renderToDiv({ voxel, context });
+
+      const slopeWrappers = container.querySelectorAll(".voxcss-wedge-slope");
+      expect(slopeWrappers.length).toBe(2);
+
+      const filters = Array.from(slopeWrappers).map(
+        (el) => (el as HTMLElement).style.filter
+      );
+      const hasFilter = filters.some((f) => f && f.includes("brightness("));
+      expect(hasFilter).toBe(true);
+    });
+  });
+});
diff --git a/packages/vue/src/shapes/types.ts b/packages/vue/src/shapes/types.ts
new file mode 100644
index 0000000..e3b377a
--- /dev/null
+++ b/packages/vue/src/shapes/types.ts
@@ -0,0 +1,10 @@
+import type { GridContext, Voxel } from "@layoutit/voxcss-core";
+import type { ShapeSurfaceLighting } from "@layoutit/voxcss-core";
+
+export interface ShapeInnerProps {
+  voxel: Voxel;
+  context: GridContext;
+  baseColor: string;
+  lighting: ShapeSurfaceLighting[];
+  showBottom: boolean;
+}
diff --git a/packages/vue/src/shapes/utils.ts b/packages/vue/src/shapes/utils.ts
new file mode 100644
index 0000000..b9f1883
--- /dev/null
+++ b/packages/vue/src/shapes/utils.ts
@@ -0,0 +1,82 @@
+import type { GridContext, Voxel } from "@layoutit/voxcss-core";
+import { getVoxelBounds } from "@layoutit/voxcss-core";
+import type { ShapeSurfaceLighting } from "@layoutit/voxcss-core";
+
+export const ORIENTATION_MAP: Record<number, string> = {
+  0: "east",
+  90: "south",
+  180: "west",
+  270: "north",
+};
+
+export function normalizeRotation(value: number | undefined): number {
+  if (!Number.isFinite(value)) return 0;
+  const snapped = Math.round((value as number) / 90) * 90;
+  return ((snapped % 360) + 360) % 360;
+}
+
+export function isCovered(voxel: Voxel, context: GridContext): boolean {
+  const { x2, y2 } = getVoxelBounds(voxel);
+  const layerAbove = Math.max(0, Math.floor((voxel.z ?? 0) + 1));
+  for (let row = voxel.x; row < x2; row += 1) {
+    for (let col = voxel.y; col < y2; col += 1) {
+      if (context.getVoxel(row, col, layerAbove)) return true;
+    }
+  }
+  return false;
+}
+
+export function isBottomOccluded(voxel: Voxel, context: GridContext): boolean {
+  const targetZ = Math.floor((voxel.z ?? 0) - 1);
+  if (targetZ < 0) return false;
+  const { x2, y2 } = getVoxelBounds(voxel);
+  for (let x = voxel.x; x < x2; x += 1) {
+    for (let y = voxel.y; y < y2; y += 1) {
+      if (!context.getVoxel(x, y, targetZ)) return false;
+    }
+  }
+  return true;
+}
+
+export function shouldRenderBottom(voxel: Voxel, context: GridContext): boolean {
+  if (context.walls?.b) return false;
+  return !isBottomOccluded(voxel, context);
+}
+
+export function getSurfaceColor(lighting: ShapeSurfaceLighting[], surfaceId: string, fallback: string): string {
+  return lighting.find((s) => s.id === surfaceId)?.color ?? fallback;
+}
+
+export function getSurfaceDelta(lighting: ShapeSurfaceLighting[], surfaceId: string): number {
+  return lighting.find((s) => s.id === surfaceId)?.delta ?? 0;
+}
+
+export function resolveSurfaceTexture(
+  voxel: Voxel,
+  surfaceId: string,
+  context: GridContext
+): string | undefined {
+  const textureKey = voxel.texture;
+  if (!textureKey || textureKey.startsWith("#")) return undefined;
+  const resolved = context.resolveTexture?.(textureKey, surfaceId);
+  if (resolved) return resolved;
+  if (
+    textureKey.startsWith("/") ||
+    textureKey.startsWith("./") ||
+    textureKey.startsWith("../") ||
+    textureKey.startsWith("http://") ||
+    textureKey.startsWith("https://") ||
+    textureKey.startsWith("data:") ||
+    textureKey.includes(".")
+  ) {
+    return textureKey;
+  }
+  return undefined;
+}
+
+export function textureBrightnessFilter(delta: number): string | undefined {
+  const brightness = Math.max(0, 1 + delta / 200);
+  if (Math.abs(brightness - 1) < 0.001) return undefined;
+  const rounded = Math.round(brightness * 1000) / 1000;
+  return `brightness(${rounded})`;
+}
diff --git a/packages/vue/src/slice/VoxSliceRenderer.test.ts b/packages/vue/src/slice/VoxSliceRenderer.test.ts
new file mode 100644
index 0000000..b298ae1
--- /dev/null
+++ b/packages/vue/src/slice/VoxSliceRenderer.test.ts
@@ -0,0 +1,166 @@
+import { describe, it, expect } from "vitest";
+import { createApp, h, ref, nextTick } from "vue";
+import type { Voxel } from "@layoutit/voxcss-core";
+import { VoxCamera } from "../camera/VoxCamera";
+import { VoxScene } from "../scene/VoxScene";
+
+function renderScene(
+  sceneProps: Record<string, any>,
+  cameraProps: Record<string, any> = {}
+): HTMLElement {
+  const container = document.createElement("div");
+  const app = createApp({
+    setup() {
+      return () =>
+        h(VoxCamera, cameraProps, {
+          default: () => h(VoxScene, sceneProps),
+        });
+    },
+  });
+  app.mount(container);
+  return container;
+}
+
+describe("VoxSliceRenderer behavior", () => {
+  describe("3d merge mode produces brush elements in the DOM", () => {
+    it("renders brush elements when mergeVoxels is 3d", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 1, y: 0, z: 0, color: "#ff0000" },
+        { x: 0, y: 1, z: 0, color: "#ff0000" },
+      ];
+      const container = renderScene({ voxels, mergeVoxels: "3d" });
+
+      const brushes = container.querySelectorAll(".voxcss-brush");
+      expect(brushes.length).toBeGreaterThan(0);
+    });
+
+    it("does not render brush elements when mergeVoxels is not 3d", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 1, y: 0, z: 0, color: "#ff0000" },
+      ];
+      const container = renderScene({ voxels });
+
+      const brushes = container.querySelectorAll(".voxcss-brush");
+      expect(brushes.length).toBe(0);
+    });
+  });
+
+  describe("brushes have correct grid-area and background-color", () => {
+    it("sets grid-area style on brush elements", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+      ];
+      const container = renderScene({ voxels, mergeVoxels: "3d" });
+
+      const brushes = container.querySelectorAll(".voxcss-brush") as NodeListOf<HTMLElement>;
+      expect(brushes.length).toBeGreaterThan(0);
+      for (const brush of brushes) {
+        expect(brush.style.gridArea).toBeTruthy();
+      }
+    });
+
+    it("sets background-color on brush elements", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+      ];
+      const container = renderScene({ voxels, mergeVoxels: "3d" });
+
+      const brushes = container.querySelectorAll(".voxcss-brush") as NodeListOf<HTMLElement>;
+      expect(brushes.length).toBeGreaterThan(0);
+      for (const brush of brushes) {
+        expect(brush.style.backgroundColor).toBeTruthy();
+      }
+    });
+  });
+
+  describe("wall mask changes toggle brush visibility", () => {
+    it("changes brush count when camera rotation crosses a quadrant boundary", async () => {
+      const rotY = ref(45);
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 1, y: 0, z: 0, color: "#ff0000" },
+        { x: 0, y: 1, z: 0, color: "#ff0000" },
+        { x: 1, y: 1, z: 0, color: "#ff0000" },
+      ];
+
+      const container = document.createElement("div");
+      const app = createApp({
+        setup() {
+          return () =>
+            h(VoxCamera, { rotY: rotY.value }, {
+              default: () => h(VoxScene, { voxels, mergeVoxels: "3d" }),
+            });
+        },
+      });
+      app.mount(container);
+
+      const brushesBefore = container.querySelectorAll(".voxcss-brush");
+      const countBefore = brushesBefore.length;
+
+      rotY.value = 135;
+      await nextTick();
+
+      const brushesAfter = container.querySelectorAll(".voxcss-brush");
+      const countAfter = brushesAfter.length;
+
+      expect(countBefore).toBeGreaterThan(0);
+      expect(countAfter).toBeGreaterThan(0);
+    });
+  });
+
+  describe("brush plans are computed from voxel layers", () => {
+    it("produces more brushes for more voxels", () => {
+      const singleVoxel: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+      ];
+      const containerSingle = renderScene({ voxels: singleVoxel, mergeVoxels: "3d" });
+      const brushesSingle = containerSingle.querySelectorAll(".voxcss-brush").length;
+
+      const multiVoxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 1, y: 0, z: 0, color: "#00ff00" },
+        { x: 0, y: 1, z: 0, color: "#0000ff" },
+        { x: 0, y: 0, z: 1, color: "#ffff00" },
+      ];
+      const containerMulti = renderScene({ voxels: multiVoxels, mergeVoxels: "3d" });
+      const brushesMulti = containerMulti.querySelectorAll(".voxcss-brush").length;
+
+      expect(brushesMulti).toBeGreaterThan(brushesSingle);
+    });
+  });
+
+  describe("multiple axes produce separate host elements", () => {
+    it("renders floor-x and floor-y host elements in 3d mode", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 1, y: 0, z: 0, color: "#ff0000" },
+        { x: 0, y: 0, z: 1, color: "#ff0000" },
+      ];
+      const container = renderScene({ voxels, mergeVoxels: "3d" });
+
+      const floorZ = container.querySelector(".voxcss-floor-z");
+      const floorX = container.querySelector(".voxcss-floor-x");
+      const floorY = container.querySelector(".voxcss-floor-y");
+
+      expect(floorZ).toBeTruthy();
+      expect(floorX).toBeTruthy();
+      expect(floorY).toBeTruthy();
+    });
+
+    it("floor-z host is rendered as a grid container in 3d mode", () => {
+      const voxels: Voxel[] = [
+        { x: 0, y: 0, z: 0, color: "#ff0000" },
+        { x: 1, y: 0, z: 0, color: "#ff0000" },
+      ];
+      const container = renderScene({ voxels, mergeVoxels: "3d" });
+
+      const floorZ = container.querySelector(".voxcss-floor-z") as HTMLElement;
+      expect(floorZ).toBeTruthy();
+      expect(floorZ.style.display).toBe("grid");
+      expect(floorZ.style.gridTemplateColumns).toBeTruthy();
+      expect(floorZ.style.gridTemplateRows).toBeTruthy();
+    });
+  });
+});
diff --git a/packages/vue/src/slice/VoxSliceRenderer.ts b/packages/vue/src/slice/VoxSliceRenderer.ts
new file mode 100644
index 0000000..89a1f1d
--- /dev/null
+++ b/packages/vue/src/slice/VoxSliceRenderer.ts
@@ -0,0 +1,222 @@
+import { computed, onMounted, onBeforeUnmount, watch, ref } from "vue";
+import type { Ref, VNode } from "vue";
+import { h, defineComponent } from "vue";
+import type { PropType } from "vue";
+import type { Voxel, GridContext, WallsMask } from "@layoutit/voxcss-core";
+import {
+  type PlaneAxis,
+  type FaceData,
+  type SlicePlan,
+  buildSlicePlan,
+  buildFaceDataFromSnapshot,
+  NEXT_LAYER_STEP,
+} from "@layoutit/voxcss-core";
+import type { SceneStore } from "../store";
+
+const BRUSH_CLASS = "voxcss-brush";
+
+function applyBrush(
+  el: HTMLElement,
+  gridArea: string,
+  backgroundColor: string,
+  zOffset: string
+): void {
+  const state = ((el as any).__voxBrush ??= {} as Record<string, string>);
+  if (state.className !== BRUSH_CLASS) {
+    el.className = BRUSH_CLASS;
+    state.className = BRUSH_CLASS;
+  }
+  if (state.gridArea !== gridArea) {
+    el.style.gridArea = gridArea;
+    state.gridArea = gridArea;
+  }
+  if (state.backgroundColor !== backgroundColor) {
+    el.style.backgroundColor = backgroundColor;
+    state.backgroundColor = backgroundColor;
+  }
+  if (state.zOffset !== zOffset) {
+    el.style.setProperty("--vox-z", zOffset);
+    state.zOffset = zOffset;
+  }
+}
+
+function renderBrushesToHost(
+  host: HTMLElement,
+  pool: HTMLElement[],
+  plans: SlicePlan[],
+  walls: WallsMask,
+  tileSize: number,
+  layerElevation: number,
+  axes: Set<PlaneAxis>,
+): number {
+  const doc = host.ownerDocument;
+  let poolIndex = 0;
+
+  for (const plan of plans) {
+    const { axis, plane, face } = plan.key;
+    if (!axes.has(axis)) continue;
+    if (walls[face]) continue;
+
+    const planeOffset = axis === "z"
+      ? plane * layerElevation
+      : -1 * (plane - 1) * tileSize;
+    const brushZ = `${planeOffset}px`;
+    const originRow = plan.buffer.minRow;
+    const originCol = plan.buffer.minCol;
+
+    for (const brush of plan.brushes) {
+      const gridArea = `${originRow + brush.r0} / ${originCol + brush.c0} / ${originRow + brush.r1} / ${originCol + brush.c1}`;
+      let el = pool[poolIndex];
+      if (!el) {
+        el = doc.createElement("b");
+        pool[poolIndex] = el;
+      }
+      if (el.parentElement !== host) {
+        host.appendChild(el);
+      }
+      applyBrush(el, gridArea, brush.baseColor, brushZ);
+      poolIndex++;
+    }
+  }
+
+  // Remove excess from DOM (keep in pool)
+  for (let i = poolIndex; i < pool.length; i++) {
+    pool[i]?.remove();
+  }
+
+  return poolIndex;
+}
+
+export function useSliceBrushes(
+  layers: Ref<Voxel[][]>,
+  context: Ref<GridContext>,
+) {
+  const plans = computed(() => {
+    const tileSize = context.value.tileSize ?? 50;
+    const layerElevation = context.value.layerElevation ?? tileSize;
+    void tileSize;
+    void layerElevation;
+
+    const faces = buildFaceDataFromSnapshot({ layers: layers.value, context: context.value });
+    const faceIndex = new Map<string, FaceData>();
+    for (const face of faces) {
+      faceIndex.set(`${face.key.axis}:${face.key.plane}:${face.key.face}`, face);
+    }
+    const result: SlicePlan[] = [];
+    for (const face of faces) {
+      const nextPlane = face.key.plane + NEXT_LAYER_STEP[face.key.face];
+      const nextKey = `${face.key.axis}:${nextPlane}:${face.key.face}`;
+      const nextFace = faceIndex.get(nextKey);
+      const nextBuffer = nextFace?.buffer ?? null;
+      result.push(buildSlicePlan(face, nextBuffer));
+    }
+    return result;
+  });
+
+  return { plans };
+}
+
+const Z_SET = new Set<PlaneAxis>(["z"]);
+const X_SET = new Set<PlaneAxis>(["x"]);
+const Y_SET = new Set<PlaneAxis>(["y"]);
+
+/**
+ * Imperatively renders brushes into a host element.
+ * Subscribes directly to the scene store for wall mask changes —
+ * bypasses Vue reconciliation entirely for face visibility toggling.
+ */
+function useImperativeBrushRenderer(
+  plans: Ref<SlicePlan[]>,
+  store: SceneStore,
+  tileSize: Ref<number>,
+  layerElevation: Ref<number>,
+  axisSet: Set<PlaneAxis>,
+  hostRef: Ref<HTMLElement | null>,
+) {
+  const pool: HTMLElement[] = [];
+  let unsubscribe: (() => void) | null = null;
+
+  function render() {
+    const host = hostRef.value;
+    if (!host) return;
+    const walls = store.getState().wallMask;
+    renderBrushesToHost(host, pool, plans.value, walls, tileSize.value, layerElevation.value, axisSet);
+  }
+
+  // Initial render + plan changes
+  watch([plans, tileSize, layerElevation, hostRef], () => {
+    render();
+  }, { flush: "post" });
+
+  onMounted(() => {
+    render();
+    // Subscribe to store for wall mask changes — direct DOM, no Vue
+    unsubscribe = store.subscribe(() => {
+      render();
+    });
+  });
+
+  onBeforeUnmount(() => {
+    unsubscribe?.();
+    unsubscribe = null;
+  });
+}
+
+/**
+ * Z-axis brushes — renders directly into the floor div via ref.
+ * Does NOT create a wrapper div.
+ */
+export const SliceZBrushes = defineComponent({
+  name: "SliceZBrushes",
+  props: {
+    floorRef: { type: Object as PropType<Ref<HTMLElement | null>>, required: true },
+    plans: { type: Array as PropType<SlicePlan[]>, required: true },
+    store: { type: Object as PropType<SceneStore>, required: true },
+    tileSize: { type: Number, required: true },
+    layerElevation: { type: Number, required: true },
+  },
+  setup(props) {
+    useImperativeBrushRenderer(
+      computed(() => props.plans),
+      props.store,
+      computed(() => props.tileSize),
+      computed(() => props.layerElevation),
+      Z_SET,
+      props.floorRef,
+    );
+    return () => null; // No Vue elements — brushes managed imperatively
+  },
+});
+
+/**
+ * Axis host for x/y brushes. Vue owns the wrapper div, brushes are imperative.
+ */
+export const SliceAxisHost = defineComponent({
+  name: "SliceAxisHost",
+  props: {
+    className: { type: String, required: true },
+    hostStyle: { type: Object as PropType<Record<string, string>>, required: true },
+    plans: { type: Array as PropType<SlicePlan[]>, required: true },
+    store: { type: Object as PropType<SceneStore>, required: true },
+    tileSize: { type: Number, required: true },
+    layerElevation: { type: Number, required: true },
+    axes: { type: Object as PropType<Set<PlaneAxis>>, required: true },
+  },
+  setup(props) {
+    const hostRef = ref<HTMLElement | null>(null);
+
+    useImperativeBrushRenderer(
+      computed(() => props.plans),
+      props.store,
+      computed(() => props.tileSize),
+      computed(() => props.layerElevation),
+      props.axes,
+      hostRef,
+    );
+
+    return () => {
+      if (props.plans.length === 0) return null;
+      return h("div", { ref: hostRef, class: props.className, style: props.hostStyle });
+    };
+  },
+});
diff --git a/packages/vue/src/slice/index.ts b/packages/vue/src/slice/index.ts
new file mode 100644
index 0000000..44ff217
--- /dev/null
+++ b/packages/vue/src/slice/index.ts
@@ -0,0 +1 @@
+export { useSliceBrushes, SliceZBrushes, SliceAxisHost } from "./VoxSliceRenderer";
diff --git a/packages/vue/src/store/index.ts b/packages/vue/src/store/index.ts
new file mode 100644
index 0000000..d09f0c0
--- /dev/null
+++ b/packages/vue/src/store/index.ts
@@ -0,0 +1,2 @@
+export { createSceneStore } from "./sceneStore";
+export type { SceneStore, SceneStoreState } from "./sceneStore";
diff --git a/packages/vue/src/store/sceneStore.ts b/packages/vue/src/store/sceneStore.ts
new file mode 100644
index 0000000..d728c3b
--- /dev/null
+++ b/packages/vue/src/store/sceneStore.ts
@@ -0,0 +1,72 @@
+/**
+ * Lightweight reactive store for voxcss scene state.
+ * Components subscribe to specific slices via selectors,
+ * so only the components that care about a changed value re-render.
+ */
+import type { CameraState, WallsMask, CameraHandle } from "@layoutit/voxcss-core";
+import { computeWallMask, wallMasksEqual } from "@layoutit/voxcss-core";
+
+export interface SceneStoreState {
+  cameraState: CameraState;
+  wallMask: WallsMask;
+}
+
+export interface SceneStore {
+  getState(): SceneStoreState;
+  setState(partial: Partial<SceneStoreState>): void;
+  subscribe(listener: () => void): () => void;
+
+  /** Update camera + recompute wall mask. Only notifies if wall mask changed. Returns true if mask changed. */
+  updateCameraFromRef(handle: CameraHandle): boolean;
+
+  /** Force notify all subscribers (e.g. after prop-driven camera change). */
+  notifyAll(): void;
+}
+
+export function createSceneStore(initial: CameraState): SceneStore {
+  let state: SceneStoreState = {
+    cameraState: { ...initial },
+    wallMask: computeWallMask(initial.rotX, initial.rotY),
+  };
+
+  const listeners = new Set<() => void>();
+
+  function notify() {
+    for (const listener of listeners) listener();
+  }
+
+  return {
+    getState() {
+      return state;
+    },
+
+    setState(partial) {
+      state = { ...state, ...partial };
+      notify();
+    },
+
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+
+    updateCameraFromRef(handle) {
+      const nextMask = computeWallMask(handle.state.rotX, handle.state.rotY);
+      const maskChanged = !wallMasksEqual(state.wallMask, nextMask);
+
+      if (maskChanged) {
+        state = {
+          cameraState: { ...handle.state },
+          wallMask: nextMask,
+        };
+        notify();
+      }
+
+      return maskChanged;
+    },
+
+    notifyAll() {
+      notify();
+    },
+  };
+}
diff --git a/packages/vue/src/styles/colorResolver.test.ts b/packages/vue/src/styles/colorResolver.test.ts
new file mode 100644
index 0000000..2b6f08c
--- /dev/null
+++ b/packages/vue/src/styles/colorResolver.test.ts
@@ -0,0 +1,89 @@
+import { describe, it, expect } from "vitest";
+import { resolveColor } from "./colorResolver";
+
+describe("colorResolver behavior", () => {
+  describe("hex colors", () => {
+    it("resolves #ff0000 to rgb values [255, 0, 0]", () => {
+      const result = resolveColor("#ff0000");
+      expect(result).not.toBeNull();
+      expect(result!.rgb).toEqual([255, 0, 0]);
+      expect(result!.alpha).toBe(1);
+    });
+
+    it("resolves short hex #f00 to rgb values [255, 0, 0]", () => {
+      const result = resolveColor("#f00");
+      expect(result).not.toBeNull();
+      expect(result!.rgb).toEqual([255, 0, 0]);
+    });
+
+    it("resolves #00ff00 to rgb values [0, 255, 0]", () => {
+      const result = resolveColor("#00ff00");
+      expect(result).not.toBeNull();
+      expect(result!.rgb).toEqual([0, 255, 0]);
+    });
+
+    it("resolves #0000ff to rgb values [0, 0, 255]", () => {
+      const result = resolveColor("#0000ff");
+      expect(result).not.toBeNull();
+      expect(result!.rgb).toEqual([0, 0, 255]);
+    });
+  });
+
+  describe("rgb() colors", () => {
+    it("resolves rgb(128, 64, 32) correctly", () => {
+      const result = resolveColor("rgb(128, 64, 32)");
+      expect(result).not.toBeNull();
+      expect(result!.rgb).toEqual([128, 64, 32]);
+      expect(result!.alpha).toBe(1);
+    });
+
+    it("resolves rgb(0, 0, 0) correctly", () => {
+      const result = resolveColor("rgb(0, 0, 0)");
+      expect(result).not.toBeNull();
+      expect(result!.rgb).toEqual([0, 0, 0]);
+    });
+  });
+
+  describe("rgba() colors with alpha", () => {
+    it("resolves rgba(255, 128, 0, 0.5) with correct alpha", () => {
+      const result = resolveColor("rgba(255, 128, 0, 0.5)");
+      expect(result).not.toBeNull();
+      expect(result!.rgb).toEqual([255, 128, 0]);
+      expect(result!.alpha).toBe(0.5);
+    });
+
+    it("resolves rgba(0, 0, 0, 1) with alpha 1", () => {
+      const result = resolveColor("rgba(0, 0, 0, 1)");
+      expect(result).not.toBeNull();
+      expect(result!.alpha).toBe(1);
+    });
+  });
+
+  describe("empty and invalid inputs", () => {
+    it("returns null for empty string", () => {
+      const result = resolveColor("");
+      expect(result).toBeNull();
+    });
+
+    it("returns null for invalid color string", () => {
+      const result = resolveColor("notacolor");
+      expect(result).toBeNull();
+    });
+  });
+
+  describe("caching", () => {
+    it("returns the same object reference on second call for hex color", () => {
+      const first = resolveColor("#aabbcc");
+      const second = resolveColor("#aabbcc");
+      expect(first).toEqual(second);
+    });
+
+    it("returns the same cached object for DOM-resolved named colors", () => {
+      const first = resolveColor("red");
+      const second = resolveColor("red");
+      if (first !== null) {
+        expect(second).toBe(first);
+      }
+    });
+  });
+});
diff --git a/packages/vue/src/styles/colorResolver.ts b/packages/vue/src/styles/colorResolver.ts
new file mode 100644
index 0000000..d3b9d8e
--- /dev/null
+++ b/packages/vue/src/styles/colorResolver.ts
@@ -0,0 +1,55 @@
+/**
+ * DOM-based CSS color resolver for named colors ("red", "tomato", etc).
+ * Uses getComputedStyle on a hidden probe element to resolve any CSS color string.
+ */
+import { parsePureColor, type ParsedColor } from "@layoutit/voxcss-core";
+
+let probeEl: HTMLElement | null = null;
+const resolvedCache = new Map<string, ParsedColor | null>();
+
+function ensureProbe(): HTMLElement | null {
+  if (typeof document === "undefined") return null;
+  if (probeEl && probeEl.ownerDocument) return probeEl;
+  probeEl = document.createElement("div");
+  document.head.appendChild(probeEl);
+  return probeEl;
+}
+
+/**
+ * Resolve a CSS color string using the browser's CSS engine.
+ * Handles named colors like "red", "tomato", "rebeccapurple", etc.
+ * Returns null if the color cannot be resolved.
+ */
+export function resolveColor(input: string): ParsedColor | null {
+  if (!input) return null;
+  const key = input.trim();
+
+  // Try pure parsing first (hex, rgb, rgba)
+  const pure = parsePureColor(key);
+  if (pure) return pure;
+
+  // Check cache
+  const cached = resolvedCache.get(key);
+  if (cached !== undefined) return cached;
+
+  // Use DOM probe for named colors
+  const probe = ensureProbe();
+  if (!probe) {
+    resolvedCache.set(key, null);
+    return null;
+  }
+
+  probe.style.color = "";
+  probe.style.color = key;
+  const computed = getComputedStyle(probe);
+  const value = computed.color;
+
+  if (!value || value === "rgba(0, 0, 0, 0)" || value === "transparent") {
+    resolvedCache.set(key, null);
+    return null;
+  }
+
+  const parsed = parsePureColor(value);
+  resolvedCache.set(key, parsed);
+  return parsed;
+}
diff --git a/packages/vue/src/styles/index.ts b/packages/vue/src/styles/index.ts
new file mode 100644
index 0000000..8747fca
--- /dev/null
+++ b/packages/vue/src/styles/index.ts
@@ -0,0 +1,2 @@
+export { injectBaseStyles } from "./styles";
+export { resolveColor } from "./colorResolver";
diff --git a/packages/vue/src/styles/styles.ts b/packages/vue/src/styles/styles.ts
new file mode 100644
index 0000000..e940f9e
--- /dev/null
+++ b/packages/vue/src/styles/styles.ts
@@ -0,0 +1,386 @@
+import { STYLE_ID } from "@layoutit/voxcss-core";
+
+export function injectBaseStyles(doc: Document): void {
+  if (!doc || doc.getElementById(STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = CORE_BASE_STYLES;
+  doc.head.appendChild(style);
+}
+
+const CORE_BASE_STYLES = `
+.voxcss-layer {
+  display: grid;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+  grid-template-columns: repeat(var(--voxcss-cols, 8), 50px);
+  grid-template-rows: repeat(var(--voxcss-rows, 8), 50px);
+}
+.voxcss-layer > * {
+  pointer-events: all;
+}
+.voxcss-layer:first-of-type {
+  pointer-events: all;
+}
+
+.voxcss-floor-x,
+.voxcss-floor-y {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-style: preserve-3d;
+  pointer-events: none;
+  z-index: 1;
+  transform-origin: 0 0;
+}
+
+.voxcss-floor-x {
+  transform: rotateX(90deg);
+}
+
+.voxcss-floor-y {
+  transform: rotateY(-90deg);
+}
+
+.voxcss-floor-z {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform-style: preserve-3d;
+  background: var(--voxcss-floor-base, #c2c2f3);
+  background-image: var(--voxcss-floor-grid-image, var(--voxcss-floor-grid, none));
+  background-repeat: repeat;
+  background-size: var(--voxcss-grid-x, 50px) var(--voxcss-grid-y, 50px);
+  z-index: 0;
+}
+
+.voxcss-ceiling {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  pointer-events: none;
+  background: var(--voxcss-ceiling-base, #c2c2f3);
+  background-image: var(--voxcss-ceiling-grid-image, var(--voxcss-ceiling-grid, none));
+  background-repeat: repeat;
+  background-size: 50px 50px;
+  opacity: var(--voxcss-ceiling-opacity, 0.35);
+  z-index: 0;
+}
+  .voxcss-wall--frontRight,
+.voxcss-wall--backRight {
+  right: 0;
+}
+.voxcss-wall {
+  position: absolute;
+  background-image: var(--voxcss-wall-grid, none);
+  background-repeat: repeat;
+  background-size: 50px var(--voxcss-layer-elevation, 50px);
+}
+.voxcss-wall--backLeft,
+.voxcss-wall--frontRight {
+  background-size: var(--voxcss-layer-elevation, 50px) 50px;
+}
+.voxcss-brush {
+  position: relative;
+  inset: 0;
+  display: block;
+  pointer-events: none;
+  overflow: visible;
+  transform: translateZ(var(--vox-z, 0px));
+  transform-origin: 0 0;
+}
+.voxcss-cube {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  --voxcss-layer-half: calc(var(--voxcss-layer-elevation, 50px) / 2);
+  transform: translateZ(var(--voxcss-layer-half));
+}
+.voxcss-projection--dimetric .voxcss-cube {
+  --voxcss-layer-half: var(--voxcss-layer-elevation, 50px);
+  transform: translateZ(var(--voxcss-layer-half));
+}
+.voxcss-cube-face,
+.voxcss-plane {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  outline: 1px solid rgba(0, 0, 0, 0.08);
+  outline-offset: -1px;
+  pointer-events: auto;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  overflow: visible;
+}
+
+.voxcss-cube-face--t {
+  transform: translateZ(var(--voxcss-layer-half));
+}
+.voxcss-projection--dimetric .voxcss-cube-face--t {
+  transform: translateZ(0);
+}
+.voxcss-cube-face--b {
+  transform: translateZ(calc(-1 * var(--voxcss-layer-half)));
+}
+.voxcss-cube-face--fr {
+  width: var(--voxcss-layer-elevation, 50px);
+  transform: rotateY(90deg) translateZ(var(--voxcss-side-offset-y, 25px));
+}
+.voxcss-cube-face--fl {
+  height: var(--voxcss-layer-elevation, 50px);
+  transform: rotateX(90deg) translateZ(calc(-1 * var(--voxcss-side-offset-x, 25px)));
+}
+.voxcss-projection--dimetric .voxcss-cube-face--fl {
+  height: var(--voxcss-layer-elevation, 50px);
+  transform-origin: bottom;
+  transform: rotateX(90deg) translateZ(calc(-1 * var(--voxcss-side-offset-x, 25px)));
+}
+.voxcss-cube-face--bl {
+  width: var(--voxcss-layer-elevation, 50px);
+  transform: rotateY(90deg) translateZ(calc(-1 * var(--voxcss-layer-half)));
+}
+.voxcss-projection--dimetric .voxcss-cube-face--bl {
+  transform: rotateY(90deg) translateZ(0px);
+  width: var(--voxcss-layer-elevation, 50px);
+  transform-origin: bottom left;
+}
+.voxcss-cube-face--br {
+  height: var(--voxcss-layer-elevation, 50px);
+  transform: rotateX(90deg) translateZ(var(--voxcss-layer-half));
+}
+.voxcss-projection--dimetric .voxcss-cube-face--br {
+  height: var(--voxcss-layer-elevation, 50px);
+  transform-origin: bottom;
+  transform: rotateX(90deg) translateZ(var(--voxcss-layer-half));
+}
+.voxcss-projection--dimetric .voxcss-cube-face--fr {
+  transform: rotateY(90deg) translateZ(var(--voxcss-fr-offset, var(--voxcss-side-offset-y, 25px)));
+  transform-origin: bottom left;
+  width: var(--voxcss-layer-elevation, 50px);
+}
+.voxcss-camera {
+  display: flex;
+  --voxcss-layer-elevation: 50px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  perspective: 8000px;
+  min-height: inherit;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  contain: paint;
+  isolation: isolate;
+}
+.voxcss-camera * {
+  transform-style: preserve-3d;
+  position: absolute;
+}
+
+.voxcss-projection--dimetric {
+  --voxcss-layer-elevation: 25px;
+}
+
+.voxcss-shape-inner {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  pointer-events: none;
+}
+
+.voxcss-shape-inner > * {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+}
+
+.voxcss-east {
+  --voxcss-shape-rotation: 0deg;
+}
+
+.voxcss-south {
+  --voxcss-shape-rotation: 90deg;
+}
+
+.voxcss-west {
+  --voxcss-shape-rotation: 180deg;
+}
+
+.voxcss-north {
+  --voxcss-shape-rotation: 270deg;
+}
+
+.voxcss-ramp .voxcss-ramp-slope,
+.voxcss-ramp .voxcss-ramp-bottom,
+.voxcss-wedge .voxcss-wedge-bottom,
+.voxcss-spike .voxcss-spike-bottom {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.voxcss-ramp .voxcss-ramp-slope {
+  background-size: 70px 50px;
+}
+
+.voxcss-ramp .voxcss-ramp-bottom,
+.voxcss-wedge .voxcss-wedge-bottom,
+.voxcss-spike .voxcss-spike-bottom {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  pointer-events: auto;
+  outline: 1px solid rgba(0, 0, 0, 0.08);
+  outline-offset: -1px;
+  backface-visibility: hidden;
+  transform: translateZ(calc(-1 * var(--voxcss-layer-elevation, 50px)))
+    rotateX(180deg);
+}
+
+.voxcss-ramp,
+.voxcss-wedge,
+.voxcss-spike {
+  position: relative;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  pointer-events: none;
+  transform: translateZ(var(--voxcss-layer-elevation, 50px))
+    rotate(var(--voxcss-shape-rotation, 0deg));
+}
+
+.voxcss-ramp .voxcss-ramp-slope {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  pointer-events: auto;
+  outline: 1px solid rgba(0, 0, 0, 0.08);
+  outline-offset: -1px;
+  background: transparent;
+  backface-visibility: hidden;
+}
+
+.voxcss-wedge .voxcss-wedge-slope,
+.voxcss-spike .voxcss-spike-slope {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  pointer-events: auto;
+  background: transparent;
+  backface-visibility: hidden;
+}
+
+.voxcss-ramp {
+  --voxcss-ramp-offset: 21px;
+  --voxcss-ramp-angle: 45deg;
+}
+
+.voxcss-projection--dimetric .voxcss-ramp {
+  --voxcss-ramp-offset: 6px;
+  --voxcss-ramp-angle: 26.565deg;
+}
+
+.voxcss-ramp .voxcss-ramp-slope {
+  width: calc(100% + var(--voxcss-ramp-offset, 21px));
+  right: calc(-1 * var(--voxcss-ramp-offset, 21px));
+  transform-origin: top left;
+  transform: rotateY(var(--voxcss-ramp-angle, 45deg));
+}
+
+.voxcss-wedge {
+  --voxcss-wedge-offset: 21px;
+  --voxcss-wedge-angle: 45deg;
+  --voxcss-wedge-bottom-offset: 21px;
+  --voxcss-wedge-secondary-angle: 45deg;
+}
+
+.voxcss-projection--dimetric .voxcss-wedge {
+  --voxcss-wedge-offset: 6px;
+  --voxcss-wedge-angle: 26.565deg;
+  --voxcss-wedge-bottom-offset: 6px;
+  --voxcss-wedge-secondary-angle: 26.565deg;
+}
+
+.voxcss-wedge .voxcss-wedge-slope--primary {
+  width: calc(100% + var(--voxcss-wedge-offset, 21px));
+  right: calc(-1 * var(--voxcss-wedge-offset, 21px));
+  transform-origin: bottom left;
+  transform: rotateY(var(--voxcss-wedge-angle, 45deg));
+}
+
+.voxcss-wedge .voxcss-wedge-slope--secondary {
+  bottom: calc(-1 * var(--voxcss-wedge-bottom-offset, 21px));
+  transform-origin: top left;
+  transform: translateZ(calc(-1 * var(--voxcss-layer-elevation, 50px)))
+    rotateX(var(--voxcss-wedge-secondary-angle, 45deg));
+}
+
+.voxcss-spike {
+  --voxcss-spike-offset: 21px;
+  --voxcss-spike-angle: 45deg;
+  --voxcss-spike-bottom-offset: 21px;
+  --voxcss-spike-secondary-angle: 45deg;
+}
+
+.voxcss-projection--dimetric .voxcss-spike {
+  --voxcss-spike-offset: 6px;
+  --voxcss-spike-angle: 26.565deg;
+  --voxcss-spike-bottom-offset: 6px;
+  --voxcss-spike-secondary-angle: 26.565deg;
+}
+
+.voxcss-spike .voxcss-spike-slope--primary {
+  width: calc(100% + var(--voxcss-spike-offset, 21px));
+  right: calc(-1 * var(--voxcss-spike-offset, 21px));
+  transform-origin: bottom left;
+  transform: rotateY(var(--voxcss-spike-angle, 45deg));
+}
+
+.voxcss-spike .voxcss-spike-slope--secondary {
+  bottom: calc(-1 * var(--voxcss-spike-bottom-offset, 21px));
+  transform-origin: top left;
+  transform: translateZ(calc(-1 * var(--voxcss-layer-elevation, 50px)))
+    rotateX(var(--voxcss-spike-secondary-angle, 45deg));
+}
+
+
+/* Wall mask visibility — applied via CSS classes on .voxcss-scene root.
+   Camera rotation toggles these classes directly (no Vue re-render). */
+/* Cube faces */
+.voxcss-mask-t .voxcss-cube-face--t { display: none; }
+.voxcss-mask-b .voxcss-cube-face--b,
+.voxcss-mask-b .voxcss-ramp-bottom,
+.voxcss-mask-b .voxcss-wedge-bottom,
+.voxcss-mask-b .voxcss-spike-bottom { display: none; }
+.voxcss-mask-bl .voxcss-cube-face--bl { display: none; }
+.voxcss-mask-br .voxcss-cube-face--br { display: none; }
+.voxcss-mask-fl .voxcss-cube-face--fl { display: none; }
+.voxcss-mask-fr .voxcss-cube-face--fr { display: none; }
+
+/* Slice renderer brushes */
+.voxcss-mask-t .voxcss-brush--t { display: none; }
+.voxcss-mask-b .voxcss-brush--b { display: none; }
+.voxcss-mask-bl .voxcss-brush--bl { display: none; }
+.voxcss-mask-br .voxcss-brush--br { display: none; }
+.voxcss-mask-fl .voxcss-brush--fl { display: none; }
+.voxcss-mask-fr .voxcss-brush--fr { display: none; }
+
+/* Shell elements: show when mask bit is set (inverted from faces) */
+/* Floor: hide background only, never display:none (it contains layers/cubes) */
+.voxcss-scene:not(.voxcss-mask-b) .voxcss-floor-z { background: none !important; background-image: none !important; }
+.voxcss-scene:not(.voxcss-mask-t) .voxcss-ceiling { display: none; }
+.voxcss-scene:not(.voxcss-mask-bl) .voxcss-wall--backLeft { display: none; }
+.voxcss-scene:not(.voxcss-mask-br) .voxcss-wall--backRight { display: none; }
+.voxcss-scene:not(.voxcss-mask-fl) .voxcss-wall--frontLeft { display: none; }
+.voxcss-scene:not(.voxcss-mask-fr) .voxcss-wall--frontRight { display: none; }
+`;
diff --git a/packages/vue/tsconfig.build.json b/packages/vue/tsconfig.build.json
new file mode 100644
index 0000000..a302d0b
--- /dev/null
+++ b/packages/vue/tsconfig.build.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": ["DOM", "ES2020"],
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
new file mode 100644
index 0000000..f7dbfdd
--- /dev/null
+++ b/packages/vue/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": ["DOM", "ES2020"],
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "composite": true
+  },
+  "include": ["src/**/*.ts"],
+  "references": [
+    { "path": "../core" }
+  ]
+}
diff --git a/packages/vue/tsup.config.ts b/packages/vue/tsup.config.ts
new file mode 100644
index 0000000..ea3ccaf
--- /dev/null
+++ b/packages/vue/tsup.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: { index: "src/index.ts" },
+  format: ["esm", "cjs"],
+  dts: true,
+  splitting: false,
+  sourcemap: false,
+  clean: true,
+  minify: true,
+  target: "es2020",
+  tsconfig: "tsconfig.build.json",
+  external: ["vue", "@layoutit/voxcss-core"],
+});
diff --git a/packages/vue/vitest.config.ts b/packages/vue/vitest.config.ts
new file mode 100644
index 0000000..6b3d1a5
--- /dev/null
+++ b/packages/vue/vitest.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from "vitest/config";
+import path from "path";
+
+export default defineConfig({
+  test: {
+    include: ["src/**/*.test.ts"],
+    environment: "happy-dom",
+  },
+  resolve: {
+    alias: {
+      "@layoutit/voxcss-core": path.resolve(__dirname, "../core/src/index.ts"),
+    },
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e7b6f6b..37435a4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,13 +6,17 @@ settings:
 
 importers:
 
-  .: {}
+  .:
+    devDependencies:
+      playwright:
+        specifier: ^1.58.2
+        version: 1.58.2
 
   packages/core:
     devDependencies:
       '@vitest/coverage-v8':
         specifier: ^3.1.1
-        version: 3.2.4(vitest@3.2.4(@types/node@25.5.0)(happy-dom@20.8.7))
+        version: 3.2.4(vitest@3.2.4(@types/node@25.5.0)(happy-dom@20.8.9))
       tsup:
         specifier: ^8.0.1
         version: 8.5.1(postcss@8.5.8)(typescript@5.9.3)
@@ -21,7 +25,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^3.1.1
-        version: 3.2.4(@types/node@25.5.0)(happy-dom@20.8.7)
+        version: 3.2.4(@types/node@25.5.0)(happy-dom@20.8.9)
 
   packages/html:
     dependencies:
@@ -131,6 +135,34 @@ importers:
       '@layoutit/voxcss-react':
         specifier: workspace:^
         version: link:../react
+      '@layoutit/voxcss-vue':
+        specifier: workspace:^
+        version: link:../vue
+
+  packages/vue:
+    dependencies:
+      '@layoutit/voxcss-core':
+        specifier: workspace:^
+        version: link:../core
+    devDependencies:
+      '@vitest/coverage-v8':
+        specifier: ^3.2.4
+        version: 3.2.4(vitest@3.2.4(@types/node@25.5.0)(happy-dom@20.8.9))
+      happy-dom:
+        specifier: ^20.8.9
+        version: 20.8.9
+      tsup:
+        specifier: ^8.0.1
+        version: 8.5.1(postcss@8.5.8)(typescript@5.9.3)
+      typescript:
+        specifier: ^5.3.3
+        version: 5.9.3
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.4(@types/node@25.5.0)(happy-dom@20.8.9)
+      vue:
+        specifier: ^3.5.12
+        version: 3.5.30(typescript@5.9.3)
 
 packages:
 
@@ -910,6 +942,11 @@ packages:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -928,6 +965,10 @@ packages:
     resolution: {integrity: sha512-7wfBi+UqulQlyLcis+9a+hTK0A/fMO4QKP6w6J9HnadXVkRdOvGf/N5G4XVpfgCYfnY7oKazlOSdWmsfatNSLQ==}
     engines: {node: '>=20.0.0'}
 
+  happy-dom@20.8.9:
+    resolution: {integrity: sha512-Tz23LR9T9jOGVZm2x1EPdXqwA37G/owYMxRwU0E4miurAtFsPMQ1d2Jc2okUaSjZqAFz2oEn3FLXC5a0a+siyA==}
+    engines: {node: '>=20.0.0'}
+
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -1079,6 +1120,16 @@ packages:
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
+  playwright-core@1.58.2:
+    resolution: {integrity: sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.58.2:
+    resolution: {integrity: sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   postcss-load-config@6.0.1:
     resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
     engines: {node: '>= 18'}
@@ -1750,6 +1801,25 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@types/node@25.5.0)(happy-dom@20.8.9))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 1.0.2
+      ast-v8-to-istanbul: 0.3.12
+      debug: 4.4.3
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.2.0
+      magic-string: 0.30.21
+      magicast: 0.3.5
+      std-env: 3.10.0
+      test-exclude: 7.0.2
+      tinyrainbow: 2.0.0
+      vitest: 3.2.4(@types/node@25.5.0)(happy-dom@20.8.9)
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitest/expect@3.2.4':
     dependencies:
       '@types/chai': 5.2.3
@@ -2035,6 +2105,9 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -2064,6 +2137,18 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
+  happy-dom@20.8.9:
+    dependencies:
+      '@types/node': 25.5.0
+      '@types/whatwg-mimetype': 3.0.2
+      '@types/ws': 8.18.1
+      entities: 7.0.1
+      whatwg-mimetype: 3.0.0
+      ws: 8.20.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   has-flag@4.0.0: {}
 
   html-escaper@2.0.2: {}
@@ -2203,6 +2288,14 @@ snapshots:
       mlly: 1.8.2
       pathe: 2.0.3
 
+  playwright-core@1.58.2: {}
+
+  playwright@1.58.2:
+    dependencies:
+      playwright-core: 1.58.2
+    optionalDependencies:
+      fsevents: 2.3.2
+
   postcss-load-config@6.0.1(postcss@8.5.8):
     dependencies:
       lilconfig: 3.1.3
@@ -2532,6 +2625,48 @@ snapshots:
       - tsx
       - yaml
 
+  vitest@3.2.4(@types/node@25.5.0)(happy-dom@20.8.9):
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/expect': 3.2.4
+      '@vitest/mocker': 3.2.4(vite@6.4.1(@types/node@25.5.0))
+      '@vitest/pretty-format': 3.2.4
+      '@vitest/runner': 3.2.4
+      '@vitest/snapshot': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.15
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 6.4.1(@types/node@25.5.0)
+      vite-node: 3.2.4(@types/node@25.5.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 25.5.0
+      happy-dom: 20.8.9
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
   vue@3.5.30(typescript@5.9.3):
     dependencies:
       '@vue/compiler-dom': 3.5.30