add initial heem air example (not linked in sidebar because it is WIP…

…, we need to calculate the fitting of the image in the viewport based on aspect ratio)

packages/lume/docs/examples/heem-air/README.md

@@ -0,0 +1,14 @@
+# Heem Air
+
+<div id="example"></div>
+<script>
+  new Vue({
+    el: '#example',
+    template: '<live-code class="full" :template="code" :autorun="true" mode="html>iframe" />',
+    data: { code: perspectiveLayeredImage({
+      bg: '/examples/heem-air/bg.jpg',
+      fg: '/examples/heem-air/fg.png',
+      bgPosition: {x: 0, y: 36},
+    }) },
+  })
+</script>

packages/lume/docs/examples/indian-boombox/README.md

@@ -1,10 +1,10 @@
-# Buttons with shadow
+# Indian Boombox
 
 <div id="example"></div>
 <script>
   new Vue({
     el: '#example',
     template: '<live-code class="full" :template="code" :autorun="true" mode="html>iframe" />',
-    data: { code: indianBoombox() },
+    data: { code: perspectiveLayeredImage({bg: '/examples/indian-boombox/bg.jpg', fg: '/examples/indian-boombox/fg.png'}) },
   })
 </script>

packages/lume/docs/js/utils.js

@@ -593,7 +593,7 @@ function directionalLightExample() {
 	`)
 }
 
-function indianBoombox() {
+function perspectiveLayeredImage({bg, fg, bgPosition = {}, fgPosition = {}}) {
 	return stripIndent(/*html*/ `
 		<script src="${location.origin + location.pathname}global.js"></script>
 
@@ -612,15 +612,16 @@ function indianBoombox() {
 				mount-point="0.5 0.5"
 				size-mode="proportional proportional"
 				size="1 1"
+				scale="1.2 1.2 1.2"
 			>
 				<lume-mixed-plane
 					size-mode="proportional proportional"
 					size="1 1"
-					position="0 0 -50"
+					position="${bgPosition.x || 0} ${bgPosition.y || 0} -50"
 					color="#444"
 					TODO-material-opacity="0.3"
 				>
-					<img src="${location.origin + location.pathname}/examples/indian-boombox/bg.jpg" />
+					<img src="${location.origin + location.pathname}${bg}" />
 				</lume-mixed-plane>
 				<lume-mixed-plane
 					size-mode="proportional proportional"
@@ -629,7 +630,7 @@ function indianBoombox() {
 					color="#444"
 					TODO-material-opacity="0.3"
 				>
-					<img src="${location.origin + location.pathname}/examples/indian-boombox/fg.png" />
+					<img src="${location.origin + location.pathname}${fg}" />
 				</lume-mixed-plane>
 			</lume-node>
 		</lume-scene>