feat(playground): playground tweaks

apps/playground/public/favicon.svg

@@ -1,12 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
-  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
-  <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
-  <defs>
-    <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#000"/>
-      <stop offset="1" stop-color="#000" stop-opacity="0"/>
-    </linearGradient>
-  </defs>
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#4f4f4f" fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V156C0 158.209 1.79086 160 4 160H156C158.209 160 160 158.209 160 156V4C160 1.79086 158.209 0 156 0H4ZM29 129C26.7909 129 25 130.791 25 133C25 135.209 26.7909 137 29 137H132C134.209 137 136 135.209 136 133C136 130.791 134.209 129 132 129H29ZM59 80C59 89.3888 51.3888 97 42 97C32.6112 97 25 89.3888 25 80C25 70.6112 32.6112 63 42 63C51.3888 63 59 70.6112 59 80ZM119 97C128.389 97 136 89.3888 136 80C136 70.6112 128.389 63 119 63C109.611 63 102 70.6112 102 80C102 89.3888 109.611 97 119 97Z"/>
+
+  <path d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
+
 	<style>
     @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
   </style>

apps/playground/src/components/TheInfo.astro

@@ -5,7 +5,7 @@ console.log(Astro) */
 ---
 
 <div class="fixed bottom-0 right-0">
-  <!--  <div class="dropdown dropdown-top dropdown-end p-4 w-full flex justify-end z-60">
+  <div class="dropdown dropdown-top dropdown-end p-4 w-full flex justify-end z-60">
     <label
       tabindex={0}
       class="btn btn-circle important:(bg-white border-white text-gray-600 dark:text-light-200 hover:bg-gray-100) cursor-pointer"
@@ -13,9 +13,9 @@ console.log(Astro) */
     >
     <div
       tabindex={0}
-      class="mb-8 dropdown-content px-4 shadow bg-base-100 rounded-box pb-8 mr-4 z-20 overflow-scroll max-h-screen-md"
+      class="mb-8 dropdown-content px-4 shadow bg-base-100 rounded-box pb-8 mr-4 z-20 overflow-scroll max-h-screen-sm"
     >
-      <div class="prose"><slot /></div>
+      <div class="prose text-xs"><slot /></div>
     </div>
-  </div> -->
+  </div>
 </div>

apps/playground/src/components/lowpoly-planet/Cloud.vue

@@ -19,7 +19,7 @@ function random(min: number, max: number): number {
   return Math.random() < 0.5 ? -randomNumber : randomNumber
 }
 
-cloud.position.set(random(0.5, 1), random(0.5, 1), random(0.5, 1))
+cloud.position.set(random(0.5, 8), random(0.5, 1), random(0.5, 8))
 
 const size = random(0.5, 1)
 cloud.scale.set(size, size, size)
@@ -33,6 +33,24 @@ watch(
     cloud.updateMatrixWorld()
   },
 )
+
+const { onLoop } = useRenderLoop()
+
+let angle = random(0.5, 1) * Math.PI
+let speed = Math.random() / 10
+onLoop(({ delta }) => {
+  if (!cloud) return
+
+  const radius = Math.abs(props.planet.geometry.boundingSphere.radius) + 0.5
+  angle += delta * speed
+  let x = radius * Math.cos(angle)
+  let z = radius * Math.sin(angle)
+  cloud.position.x = x
+  cloud.position.z = z
+  cloud.rotation.y = -angle
+  cloud.lookAt(props.planet.position)
+  cloud.updateMatrixWorld()
+})
 </script>
 <template>
   <TresMesh ref="cloudRef" v-bind="scene" cast-shadow />

apps/playground/src/pages/vue/lowpoly-planet.mdx

@@ -1,6 +1,6 @@
 ---
 layout: /@/layouts/ExperimentLayout.astro
-thumbnail: /gltf-model.png
+thumbnail: /lowpoly-planet.png
 title: Low Poly Planet
 author: Alvarosabu
 description: Low Poly Planet exported from Blender