diff --git a/README.md b/README.md
index 2ba779b..aff1d4a 100644
--- a/README.md
+++ b/README.md
@@ -86,7 +86,7 @@ Every demo or experiment consist on two parts
 - A vue component containing the scene under `components/content`
 
 1. Create a `your-awesome-demo.md` file under `content/experiments` directory.
-2. Add [Frontmatter](https://content.nuxtjs.org/guide/writing/markdown#front-matter) to provide the meta-data of your experiment, this is crucial to get the cards on the home page nice and pretty. Remember to add the `slug` of your `author` to the correspondant field. Be sure to add `status: published`, otherwise the thumbnail won't show up during your tests.
+2. Add [Frontmatter](https://content.nuxtjs.org/guide/writing/markdown#front-matter) to provide the meta-data of your experiment, this is crucial to get the cards on the home page nice and pretty. Remember to add the `slug` of your `author` to the correspondant field.
 
 ```md
 ---
@@ -94,7 +94,6 @@ thumbnail: /lowpoly-planet.png
 title: Low Poly Planet
 slug: lowpoly-planet
 author: alvarosabu
-status: published
 description: Low Poly Planet exported from Blender
 tags: ['basic', 'cientos', 'useGLTF', 'blender']
 ---
@@ -117,7 +116,6 @@ thumbnail: /lowpoly-planet.png
 title: Low Poly Planet
 slug: lowpoly-planet
 author: alvarosabu
-status: published
 description: Low Poly Planet exported from Blender
 tags: ['basic', 'cientos', 'useGLTF', 'blender']
 ---
@@ -127,6 +125,12 @@ tags: ['basic', 'cientos', 'useGLTF', 'blender']
 
 5. Take a screenshot of your scene ot the `public` directory.
 
+### Broken Github demo links
+
+Note that the system will automatically add a link to your demo's source code on Github, so that visitors can see how you made your demo. 
+
+The link will be broken until your demo is merged into the main Lab branch.
+
 ## License
 
 [MIT](/LICENSE)
diff --git a/components/TheCard.vue b/components/TheCard.vue
index 88745d7..e9ad754 100644
--- a/components/TheCard.vue
+++ b/components/TheCard.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import TheCodeButton from './TheCodeButton.vue'
+
 defineProps<{
   title: string
   path: string
+  repoTitle: string
+  repoPath: string
   media: string
   description: string
   author: {
@@ -13,16 +17,25 @@ defineProps<{
 </script>
 
 <template>
-  <NuxtLink :to="path">
+  <div class="relative">
+    <NuxtLink :to="path">
+      <div class="absolute h-full w-full" />
+    </NuxtLink>
     <div class="shadow-lg rounded-lg overflow-hidden">
       <img
         class="aspect-video object-cover"
         :src="media"
       >
       <div class="p-4">
-        <h2 class="font-bold text-lg mb-2">
-          {{ title }}
-        </h2>
+        <div class="flex gap-2 mb-2">
+          <h2 class="grow font-bold text-lg">
+            {{ title }}
+          </h2>
+          <TheCodeButton
+            :to="repoPath"
+            :title="repoTitle"
+          />
+        </div>
         <p class="text-sm text-gray-400 mb-2 min-h-75px">
           {{ description }}
         </p>
@@ -46,5 +59,5 @@ defineProps<{
         </div>
       </footer>
     </div>
-  </NuxtLink>
+  </div>
 </template>
diff --git a/components/TheCodeButton.vue b/components/TheCodeButton.vue
new file mode 100644
index 0000000..959cb77
--- /dev/null
+++ b/components/TheCodeButton.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  to: string
+}>()
+</script>
+
+<template>
+  <span class="rounded-full border-3">
+    <a
+      :href="to"
+      :title="title"
+      class="i-carbon-logo-github w-6 h-6"
+    />
+  </span>
+</template>
+
+<style scoped>
+.dark span {
+  background-color: rgb(34, 34, 34);
+  border-color: rgb(34, 34, 34);
+}
+
+.dark a {
+  background-color: rgb(209, 213, 219);
+  text-shadow: rgb(34, 34, 34) 1px 0 10px;
+}
+
+span, .sepia span {
+  background-color: #FFF;
+  border-color: #FFF;
+}
+
+a, .sepia a {
+  background-color: rgb(75, 85, 99);
+  text-shadow: rgb(209, 213, 219) 1px 0 10px;
+}
+</style>
diff --git a/components/content/GlassExample.vue b/components/content/glass-material/index.vue
similarity index 100%
rename from components/content/GlassExample.vue
rename to components/content/glass-material/index.vue
diff --git a/components/content/infiniteTube.vue b/components/content/infinite-tube/index.vue
similarity index 100%
rename from components/content/infiniteTube.vue
rename to components/content/infinite-tube/index.vue
diff --git a/components/content/scroll-controls-demo/LowPolyPlanet.vue b/components/content/scroll-controls/LowPolyPlanet.vue
similarity index 100%
rename from components/content/scroll-controls-demo/LowPolyPlanet.vue
rename to components/content/scroll-controls/LowPolyPlanet.vue
diff --git a/components/content/scroll-controls-demo/Rocket.vue b/components/content/scroll-controls/Rocket.vue
similarity index 100%
rename from components/content/scroll-controls-demo/Rocket.vue
rename to components/content/scroll-controls/Rocket.vue
diff --git a/components/content/scroll-controls-demo/index.vue b/components/content/scroll-controls/index.vue
similarity index 100%
rename from components/content/scroll-controls-demo/index.vue
rename to components/content/scroll-controls/index.vue
diff --git a/components/content/synthwave/components/gradientSky.vue b/components/content/synthwave-landscape/components/gradientSky.vue
similarity index 100%
rename from components/content/synthwave/components/gradientSky.vue
rename to components/content/synthwave-landscape/components/gradientSky.vue
diff --git a/components/content/synthwave/components/grid.vue b/components/content/synthwave-landscape/components/grid.vue
similarity index 100%
rename from components/content/synthwave/components/grid.vue
rename to components/content/synthwave-landscape/components/grid.vue
diff --git a/components/content/synthwave/components/mountain.vue b/components/content/synthwave-landscape/components/mountain.vue
similarity index 100%
rename from components/content/synthwave/components/mountain.vue
rename to components/content/synthwave-landscape/components/mountain.vue
diff --git a/components/content/synthwave/components/musicPlayer.vue b/components/content/synthwave-landscape/components/musicPlayer.vue
similarity index 95%
rename from components/content/synthwave/components/musicPlayer.vue
rename to components/content/synthwave-landscape/components/musicPlayer.vue
index 6056745..e2160be 100644
--- a/components/content/synthwave/components/musicPlayer.vue
+++ b/components/content/synthwave-landscape/components/musicPlayer.vue
@@ -27,10 +27,11 @@ function nextLetter() {
   }
 }
 
-watch(playing, p => {
+watch(playing, (p) => {
   if (p) {
     attributionLengthTarget = attribution.length
-  } else {
+  }
+  else {
     attributionLengthTarget = 0
   }
   nextLetter()
@@ -39,7 +40,13 @@ watch(playing, p => {
 
 <template>
   <div :class="`music-player ${typing ? 'typing' : ''}`">
-    <div @keypress="onClick" @click="onClick" class="music-player-button" tabindex="0" role="button">
+    <div
+      class="music-player-button"
+      tabindex="0"
+      role="button"
+      @keypress="onClick"
+      @click="onClick"
+    >
       <svg
         v-if="playing"
         xmlns="http://www.w3.org/2000/svg"
@@ -84,6 +91,7 @@ watch(playing, p => {
     <a href="https://freesound.org/people/vlad.zaichyk/sounds/495329/">{{ attributionDisplay }}</a>
   </div>
 </template>
+
 <style scoped>
 .music-player {
   display: flex;
@@ -94,8 +102,7 @@ watch(playing, p => {
   right: 0;
   bottom: 0;
   z-index: 10;
-  margin: 12px;
-  margin-right: 0;
+  margin: 12px 0 96px;
   padding-right: 12px;
   border: 1px solid #fff;
   border-right: 0;
diff --git a/components/content/synthwave/components/palette.ts b/components/content/synthwave-landscape/components/palette.ts
similarity index 100%
rename from components/content/synthwave/components/palette.ts
rename to components/content/synthwave-landscape/components/palette.ts
diff --git a/components/content/synthwave/components/postprocessing.vue b/components/content/synthwave-landscape/components/postprocessing.vue
similarity index 93%
rename from components/content/synthwave/components/postprocessing.vue
rename to components/content/synthwave-landscape/components/postprocessing.vue
index e689a1c..215e658 100644
--- a/components/content/synthwave/components/postprocessing.vue
+++ b/components/content/synthwave-landscape/components/postprocessing.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { WebGLRenderer, Camera, Scene } from 'three'
+import type { WebGLRenderer, Scene } from 'three'
+import { Camera } from 'three'
 import { BloomEffect, ScanlineEffect, EffectComposer, RenderPass, EffectPass } from 'postprocessing'
 import { useWindowSize } from '@vueuse/core'
+
 let effectComposer: EffectComposer
 
 function setup(renderer: WebGLRenderer, scene: Scene, camera: Camera) {
diff --git a/components/content/synthwave/components/sun.vue b/components/content/synthwave-landscape/components/sun.vue
similarity index 100%
rename from components/content/synthwave/components/sun.vue
rename to components/content/synthwave-landscape/components/sun.vue
diff --git a/components/content/synthwave/components/terrain.vue b/components/content/synthwave-landscape/components/terrain.vue
similarity index 100%
rename from components/content/synthwave/components/terrain.vue
rename to components/content/synthwave-landscape/components/terrain.vue
diff --git a/components/content/synthwave/index.vue b/components/content/synthwave-landscape/index.vue
similarity index 100%
rename from components/content/synthwave/index.vue
rename to components/content/synthwave-landscape/index.vue
diff --git a/content/experiments/array-cameras.md b/content/experiments/array-cameras.md
index 6585edc..82ffc19 100644
--- a/content/experiments/array-cameras.md
+++ b/content/experiments/array-cameras.md
@@ -1,184 +1,9 @@
 ---
-thumbnail: /array-cameras.png
 title: Array of cameras
-slug: array-cameras
 author: jaime-bboyjt
-status: published
 description: An advance technique using ArrayCamera with a model animation
 tags: ['array-camera', 'useGltf', 'useRenderLoop', 'useProgress']
 ---
 
 ::array-cameras
-::
-
-::the-info
-
-![array-cameras](/array-cameras.png)
-
-# Array Camera
-
-Author: [@**jaimebboyjt**](https://twitter.com/jaimebboyjt).
-
-> This is an advance example of how to use array of cameras with TresJS.
-
-```vue
-// App.vue
-<script setup>
-import { computed } from 'vue'
-import { TresCanvas } from '@tresjs/core'
-import { useProgress } from '@tresjs/cientos'
-import { PerspectiveCamera, Vector4, Vector3 } from 'three'
-import { useWindowSize } from '@vueuse/core'
-
-const { width, height } = useWindowSize()
-const WIDTH = (width.value / 4) * window.devicePixelRatio
-const HEIGHT = (height.value / 4) * window.devicePixelRatio
-const ASPECT_RATIO = computed(() => width.value / height.value)
-
-const cameras = []
-
-const cameraOptions = [
-  {
-    viewPort: new Vector4(Math.floor(0), Math.floor(0), Math.ceil(WIDTH * 2), Math.ceil(HEIGHT * 2)),
-    position: new Vector3(15, 0, 3),
-    factor: 0.4,
-    name: 'left_bottom',
-  },
-  {
-    viewPort: new Vector4(Math.floor(WIDTH), Math.floor(0), Math.ceil(WIDTH * 2), Math.ceil(HEIGHT * 2)),
-    position: new Vector3(0, 0, -3),
-    factor: 2,
-    name: 'center_bottom',
-  },
-  {
-    viewPort: new Vector4(Math.floor(WIDTH * 2), Math.floor(0), Math.ceil(WIDTH * 2), Math.ceil(HEIGHT * 2)),
-    position: new Vector3(-15, 0, 3),
-    factor: 0.4,
-    name: 'right_bottom',
-  },
-  {
-    viewPort: new Vector4(Math.floor(WIDTH - 75), Math.floor(HEIGHT), Math.ceil(WIDTH * 2.5), Math.ceil(HEIGHT * 2.5)),
-    position: new Vector3(0, 0, 3),
-    factor: 2,
-    name: 'center_top',
-  },
-]
-
-cameraOptions.forEach((data) => {
-  const currentCam = new PerspectiveCamera(40, ASPECT_RATIO.value, 0.1, 10)
-  currentCam.name = data.name
-  currentCam.viewport = data.viewPort
-  currentCam.position.set(...data.position)
-  currentCam.position.multiplyScalar(data.factor)
-  currentCam.lookAt(0, 0, 0)
-  currentCam.updateMatrixWorld()
-  cameras.push(currentCam)
-})
-
-const { hasFinishLoading, progress, items } = await useProgress()
-</script>
-
-<template>
-  <Transition
-    name="fade-overlay"
-    enter-active-class="opacity-1 transition-opacity duration-200"
-    leave-active-class="opacity-0 transition-opacity duration-200"
-  >
-    <div
-      v-show="!hasFinishLoading"
-      class="absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
-    >
-      <div class="w-200px">
-        Loading... {{ progress }} %
-      </div>
-    </div>
-  </Transition>
-  <TresCanvas
-    window-size
-    clear-color="#82DBC5"
-    class="over-hidden"
-  >
-    <TresArrayCamera
-      :args="[cameras]"
-      :position="[0, 2, 5]"
-    />
-    <Suspense>
-      <model />
-    </Suspense>
-    <TresAmbientLight
-      :color="0xffffff"
-      :intensity="1"
-    />
-    <TresSpotLight
-      :color="0xffffff"
-      :intensity="100"
-      :position="[0, 0, 5]"
-    />
-    <TresDirectionalLight
-      :color="0xffffff"
-      :intensity="5"
-    />
-    <TresHemisphereLight />
-  </TresCanvas>
-</template>
-```
-
-```vue
-// model.vue
-<script setup lang="ts">
-import { useRenderLoop } from '@tresjs/core'
-import { useAnimations, useGLTF, useTweakPane } from '@tresjs/cientos'
-
-const { scene: model, animations } = await useGLTF(
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/warcraft-3-alliance-footmanfanmade/source/Footman_RIG.glb',
-)
-console.log('jaime ~ model:', model)
-const { actions, mixer } = useAnimations(animations, model)
-
-let currentAction = actions.Idle
-
-currentAction.play()
-
-const { pane } = useTweakPane()
-
-const animationList = pane.addBlade({
-  view: 'list',
-  label: 'Animations',
-  options: [
-    { text: 'Idle', value: 'Idle' },
-    { text: 'SwordAndShieldCrouchBlockIdle', value: 'SwordAndShieldCrouchBlockIdle' },
-    { text: 'SwordAndShieldDeath_2', value: 'SwordAndShieldDeath_2' },
-    { text: 'SwordAndShieldIdle', value: 'SwordAndShieldIdle' },
-    { text: 'SwordAndShieldKick', value: 'SwordAndShieldKick' },
-    { text: 'SwordAndShieldRun(back)', value: 'SwordAndShieldRun(back)' },
-    { text: 'SwordAndShieldRun', value: 'SwordAndShieldRun' },
-    { text: 'SwordAndShieldSlash_2', value: 'SwordAndShieldSlash_2' },
-    { text: 'SwordAndShieldSlash', value: 'SwordAndShieldSlash' },
-    { text: 'T-Pose', value: 'T-Pose' },
-  ],
-  value: 'Idle',
-})
-
-animationList.on('change', (value) => {
-  currentAction.stop()
-  currentAction = actions[value.value]
-  currentAction.play()
-})
-
-const { onLoop } = useRenderLoop()
-
-onLoop(() => {
-  if (mixer) {
-    mixer.update(0.01)
-  }
-})
-</script>
-
-<template>
-  <Suspense>
-    <primitive :object="model" />
-  </Suspense>
-</template>
-```
-
-::
+::
\ No newline at end of file
diff --git a/content/experiments/brickelangelo-david.md b/content/experiments/brickelangelo-david.md
index 2c0b474..63e76a8 100644
--- a/content/experiments/brickelangelo-david.md
+++ b/content/experiments/brickelangelo-david.md
@@ -1,34 +1,8 @@
 ---
-thumbnail: /brickelangelo-david.png
-title: Brickelangelo David
-slug: brickelangelo-david
 author: alvarosabu
-status: published
 description: Lego ThreeJS Journey challenge
 tags: ['basic', 'cientos']
 ---
 
 ::brickelangelo-david
-::
-
-::the-info
-
-![David](/brickelangelo-david.png)
-
-# Brickelangelo David
-
-Author: [@**alvarosabu**](https://twitter.com/alvarosabu).
-
-> This is the submission for the ThreeJS Challenge #2 - Lego of [ThreeJS Journey](https://threejs-journey.xyz/) discord by [Bruno Simon](https://twitter.com/simongfx).
-
-Inspired by my recent trip to Florence, Italy, I decided to recreate Michelangelo's David sculpture using Lego bricks in a procedural way `MeshSurfaceSampler` and:
-
-![Modelling David Blender](https://res.cloudinary.com/alvarosaburido/image/upload/v1692638940/projects/modelling-david-blender_kzcqf3.png)
-
-A model "David - Michelangelo" (https://skfb.ly/6X6nQ) by Kefla is licensed under CC Attribution-NonCommercial-NoDerivs (http://creativecommons.org/licenses/by-nc-nd/4.0/).
-
-I modelled a lego block following Joey’s Carlino Tutorial “Lego anything with this NEW Blender geometry nodes feature”
-
-![Model Lego piece](https://res.cloudinary.com/alvarosaburido/image/upload/v1692638940/projects/lego-block-model-blender_ayytys.png)
-
-::
+::
\ No newline at end of file
diff --git a/content/experiments/cult-of-the-lamb.md b/content/experiments/cult-of-the-lamb.md
index facadce..261772a 100644
--- a/content/experiments/cult-of-the-lamb.md
+++ b/content/experiments/cult-of-the-lamb.md
@@ -1,9 +1,6 @@
 ---
-thumbnail: /cult-of-the-lamb.png
 title: Cult of the lamb 🐑
-slug: cult-of-the-lamb
 author: alvarosabu
-status: published
 description: Best video game ever scene to showcase Postprocessing effects
 tags: ['fog', 'backdrop', 'unrealbloom', useGLTF]
 ---
diff --git a/content/experiments/galaxy-generator.md b/content/experiments/galaxy-generator.md
index cd27fca..8788f94 100644
--- a/content/experiments/galaxy-generator.md
+++ b/content/experiments/galaxy-generator.md
@@ -1,291 +1,9 @@
 ---
-thumbnail: /galaxy-generator.png
 title: Galaxy Generator 🪐
-slug: galaxy-generator
 author: alvarosabu
-status: published
 description: Animated galaxy from ThreeJS Journey done with TresJS
 tags: ['particles', 'shaders', 'glsl']
 ---
 
 ::galaxy-generator
-::
-
-::the-info
-
-![Galaxy Generator](/galaxy-generator.png)
-
-# Galaxy Generator
-
-Author: [@**alvarosabu**](https://twitter.com/alvarosabu).
-
-> Galaxy generator from [ThreeJS Journey](https://threejs-journey.com/lessons/animated-galaxy) done with TresJS
-
-```vue
-// App.vue
-<script setup lang="ts">
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping, Color, AdditiveBlending, BufferAttribute } from 'three'
-import gsap from 'gsap'
-
-import { OrbitControls, useTweakPane } from '@tresjs/cientos'
-
-import vertexShader from './shaders/vertex.glsl'
-import fragmentShader from './shaders/fragment.glsl'
-
-const gl = {
-  clearColor: 'black',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-}
-
-const parameters = {
-  count: 30000,
-  size: 20,
-  radius: 5,
-  branches: 5,
-  spin: 4,
-  randomness: 0.13,
-  randomnessPower: 7.5,
-  insideColor: '#b5f28d',
-  outsideColor: '#1b3984',
-}
-
-const colorInside = new Color(parameters.insideColor)
-const colorOutside = new Color(parameters.outsideColor)
-
-const positions = new Float32Array(parameters.count * 3)
-const colors = new Float32Array(parameters.count * 3)
-const scales = new Float32Array(parameters.count)
-const randomness = new Float32Array(parameters.count * 3)
-
-for (let i = 0; i < parameters.count; i++) {
-  const i3 = i * 3
-
-  const radius = Math.random() * parameters.radius
-  /*  const spinAngle = radius * parameters.spin */
-  const spinAngle = 0
-  const branchAngle = ((i % parameters.branches) * Math.PI * 2) / parameters.branches
-
-  positions[i3] = Math.cos(branchAngle) * radius // x
-  positions[i3 + 1] = 0 // y
-  positions[i3 + 2] = Math.sin(branchAngle) * radius // z
-
-  const randomX = Math.random() ** parameters.randomnessPower * (Math.random() < 0.5 ? -1 : 1)
-  const randomY = Math.random() ** parameters.randomnessPower * (Math.random() < 0.5 ? -1 : 1)
-  const randomZ = Math.random() ** parameters.randomnessPower * (Math.random() < 0.5 ? -1 : 1)
-
-  randomness[i3] = randomX
-  randomness[i3 + 1] = randomY
-  randomness[i3 + 2] = randomZ
-
-  const mixedColor = colorInside.clone()
-  mixedColor.lerp(colorOutside, radius / parameters.radius)
-
-  colors[i3 + 0] = mixedColor.r // R
-  colors[i3 + 1] = mixedColor.g // G
-  colors[i3 + 2] = mixedColor.b // B
-
-  scales[i] = Math.random()
-}
-
-const shader = {
-  transparent: true,
-  depthWrite: false,
-  blending: AdditiveBlending,
-  vertexColors: true,
-  vertexShader,
-  fragmentShader,
-  uniforms: {
-    uTime: { value: 0 },
-    uSize: {
-      value: parameters.size,
-    },
-  },
-}
-
-function updateGalaxy() {
-  if (bufferRef.value) {
-    const colorInside = new Color(parameters.insideColor)
-    const colorOutside = new Color(parameters.outsideColor)
-
-    const positions = new Float32Array(parameters.count * 3)
-    const colors = new Float32Array(parameters.count * 3)
-    const scales = new Float32Array(parameters.count)
-    const randomness = new Float32Array(parameters.count * 3)
-    for (let i = 0; i < parameters.count; i++) {
-      const i3 = i * 3
-
-      const radius = Math.random() * parameters.radius
-      /*  const spinAngle = radius * parameters.spin */
-      const spinAngle = 0
-      const branchAngle = ((i % parameters.branches) * Math.PI * 2) / parameters.branches
-
-      positions[i3] = Math.cos(branchAngle) * radius // x
-      positions[i3 + 1] = 0 // y
-      positions[i3 + 2] = Math.sin(branchAngle) * radius // z
-
-      const randomX = Math.random() ** parameters.randomnessPower * (Math.random() < 0.5 ? -1 : 1)
-      const randomY = Math.random() ** parameters.randomnessPower * (Math.random() < 0.5 ? -1 : 1)
-      const randomZ = Math.random() ** parameters.randomnessPower * (Math.random() < 0.5 ? -1 : 1)
-
-      randomness[i3] = randomX
-      randomness[i3 + 1] = randomY
-      randomness[i3 + 2] = randomZ
-
-      const mixedColor = colorInside.clone()
-      mixedColor.lerp(colorOutside, radius / parameters.radius)
-
-      colors[i3 + 0] = mixedColor.r // R
-      colors[i3 + 1] = mixedColor.g // G
-      colors[i3 + 2] = mixedColor.b // B
-
-      scales[i] = Math.random()
-    }
-    bufferRef.value.geometry.setAttribute('position', new BufferAttribute(positions, 3))
-    bufferRef.value.geometry.setAttribute('aRandomness', new BufferAttribute(randomness, 3))
-    bufferRef.value.geometry.setAttribute('color', new BufferAttribute(colors, 3))
-    bufferRef.value.geometry.setAttribute('aScale', new BufferAttribute(scales, 1))
-  }
-}
-
-const bufferRef = ref(null)
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ elapsed }) => {
-  if (bufferRef.value) {
-    bufferRef.value.material.uniforms.uTime.value = elapsed
-  }
-})
-
-const { pane } = useTweakPane()
-
-pane
-  .addInput(parameters, 'count', {
-    min: 0,
-    max: 100000,
-  })
-  .on('change', updateGalaxy)
-pane
-  .addInput(parameters, 'size', {
-    min: 0.01,
-    max: 40,
-    step: 1,
-  })
-  .on('change', updateGalaxy)
-pane
-  .addInput(parameters, 'radius', {
-    min: 0.1,
-    max: 20,
-    step: 0.01,
-  })
-  .on('change', updateGalaxy)
-pane
-  .addInput(parameters, 'branches', {
-    min: 2,
-    max: 10,
-    step: 1,
-  })
-  .on('change', updateGalaxy)
-pane
-  .addInput(parameters, 'spin', {
-    min: -5,
-    max: 5,
-    step: 0.01,
-  })
-  .on('change', updateGalaxy)
-pane
-  .addInput(parameters, 'randomness', {
-    min: 0.1,
-    max: 0.2,
-    step: 0.01,
-  })
-  .on('change', updateGalaxy)
-pane.addInput(parameters, 'randomnessPower', { min: 1, max: 10, step: 0.001 }).on('change', updateGalaxy)
-pane.addInput(parameters, 'insideColor').on('change', updateGalaxy)
-pane.addInput(parameters, 'outsideColor').on('change', updateGalaxy)
-</script>
-
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[3, 3, 3]" />
-    <TresPoints ref="bufferRef">
-      <TresBufferGeometry
-        :position="[positions, 3]"
-        :a-scale="[scales, 1]"
-        :color="[colors, 3]"
-        :a-randomness="[randomness, 3]"
-      />
-      <TresShaderMaterial v-bind="shader" />
-    </TresPoints>
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
-
-## Shaders
-
-Now we need to create the shaders. Shaders are written in GLSL, a C-like language for writing shaders.
-
-```
-// vertex.glsl
-uniform float uSize;
-uniform float uTime;
-
-attribute float aScale;
-attribute vec3 aRandomness;
-
-varying vec3 vColor;
-
-void main() {
-    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
-
-    //Spin
-    float angle = atan(modelPosition.x, modelPosition.z);
-    float distanceToCenter = length(modelPosition.xz);
-    float angleOffset = (1.0 / distanceToCenter) * uTime * 0.2;
-    angle += angleOffset;
-
-    modelPosition.x = distanceToCenter * cos(angle);
-    modelPosition.z = distanceToCenter * sin(angle);
-
-    // Randomness
-    modelPosition.xyz += aRandomness;
-
-    vec4 viewPosition = viewMatrix * modelPosition;
-    vec4 projectedPosition = projectionMatrix * viewPosition;
-    gl_Position = projectedPosition;
-
-    gl_PointSize = uSize * aScale;
-
-    // Size attenuation
-    gl_PointSize *= ( 1.0 / - viewPosition.z);
-
-    // Color
-    vColor = color;
-
-}
-```
-
-```
-// fragment.glsl
-varying vec3 vColor;
-
-void main()
-{
-    // Disc
-    float strength = distance(gl_PointCoord, vec2(0.5));
-    strength = 1.0 - strength;
-    strength = pow(strength, 5.0);
-
-    // Color
-    vec3 color = mix(vec3(0.0), vColor, strength);
-    gl_FragColor = vec4(color, 1.0);
-}
-```
-
-::
+::
\ No newline at end of file
diff --git a/content/experiments/github-1k-stars.md b/content/experiments/github-stars.md
similarity index 70%
rename from content/experiments/github-1k-stars.md
rename to content/experiments/github-stars.md
index c929622..4ed3e58 100644
--- a/content/experiments/github-1k-stars.md
+++ b/content/experiments/github-stars.md
@@ -1,9 +1,6 @@
 ---
-thumbnail: /github-1k-stars.png
 title: 1000 🌟 on Github 
-slug: github-1k-stars
 author: alvarosabu
-status: published
 description: Scene to celebrate 1k stars on Github
 tags: ['basic', 'cientos', 'useGLTF', 'blender']
 ---
diff --git a/content/experiments/glass-material.md b/content/experiments/glass-material.md
index adade8b..760cf91 100644
--- a/content/experiments/glass-material.md
+++ b/content/experiments/glass-material.md
@@ -1,127 +1,8 @@
 ---
-thumbnail: /glass-example.png
 title: Glass/Plastic Material
 author: jaime-bboyjt
-status: published
 description: A realistic glass/plastic effect, play with it!
 tags: ['materials', 'useTweakPane']
 ---
 
-::glass-example
-::
-
-::the-info
-
-![Glass material](/glass-example.png)
-
-# Glass material
-
-Author: [@**jaimebboyjt**](https://twitter.com/jaimebboyjt).
-
-> This effect is base on: https://tympanus.net/codrops/2021/10/27/creating-the-effect-of-transparent-glass-and-plastic-in-three-js/
-
-```vue
-// App.vue
-<script setup>
-import { EquirectangularReflectionMapping } from 'three'
-import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
-
-const { map, normalMap } = await useTexture({
-  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/glass-effect/bg-texture.jpg',
-  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/glass-effect/normal-example.jpg',
-})
-
-const planeRef = shallowRef(null)
-
-// the hdrEquirect image add a beautiful realistic glass effect
-const hdrEquirect = await new RGBELoader().load(
-  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/glass-effect/glass-effect.hdr',
-  () => {
-    hdrEquirect.mapping = EquirectangularReflectionMapping
-  },
-)
-
-const options = reactive({
-  transmission: 1,
-  thickness: 0.5,
-  roughness: 0,
-  envMap: hdrEquirect,
-  clearcoatNormalMap: normalMap,
-  envMapIntensity: 1.5,
-})
-
-const { pane } = useTweakPane()
-pane.addInput(options, 'transmission', {
-  label: 'transmission',
-  min: 0,
-  max: 1,
-  step: 0.01,
-})
-pane.addInput(options, 'thickness', {
-  label: 'thickness',
-  min: 0,
-  max: 1,
-  step: 0.01,
-})
-pane.addInput(options, 'envMapIntensity', {
-  label: 'envMapIntensity',
-  min: 0,
-  max: 3,
-  step: 0.1,
-})
-pane.addInput(options, 'roughness', {
-  label: 'roughness',
-  min: 0,
-  max: 1,
-  step: 0.01,
-})
-
-const hdrEquiredButton = pane.addButton({
-  title: 'Enable/Disable hdrEquired',
-})
-hdrEquiredButton.on('click', () => {
-  options.envMap = options.envMap ? null : hdrEquirect
-})
-</script>
-
-<template>
-  <TresCanvas
-    window-size
-    clear-color="#F7F7F7"
-    class="over-hidden"
-    grid
-  >
-    <TresPerspectiveCamera
-      :position="[0, 0, 3]"
-      :fov="45"
-      :aspect="1"
-      :near="0.1"
-      :far="1000"
-    />
-    <OrbitControls />
-    <TresGridHelper
-      :args="[30, 30]"
-      :position="[0, -2.5, 0]"
-    />
-    <TresMesh :position="[-0, 0, 0]">
-      <TresIcosahedronGeometry :args="[1, 10]" />
-      <TresMeshPhysicalMaterial v-bind="options" />
-    </TresMesh>
-    <TresMesh
-      ref="planeRef"
-      :position="[0, 0, -1]"
-    >
-      <TresPlaneGeometry :args="[5, 5]" />
-      <TresMeshBasicMaterial :map="map" />
-    </TresMesh>
-    <TresDirectionalLight
-      :position="[0, 2, 4]"
-      :intensity="2"
-      cast-shadow
-    />
-    <TresAmbientLight />
-  </TresCanvas>
-</template>
-```
-
-::
+<GlassMaterial />
\ No newline at end of file
diff --git a/content/experiments/haunted-house.md b/content/experiments/haunted-house.md
index 8fe6041..06ed605 100644
--- a/content/experiments/haunted-house.md
+++ b/content/experiments/haunted-house.md
@@ -1,340 +1,8 @@
 ---
-thumbnail: /haunted-house-demo.png
-title: Haunted house
-slug: haunted-house
 author: jaime-bboyjt
-status: published
 description: The classical threejs-journey haunted house, done with TresJs
 tags: ['PointLight', 'fog', 'useTexture', 'threejs-journey']
 ---
 
 ::haunted-house
-::
-
-::the-info
-
-![Haunted house demo](/haunted-house-demo.png)
-
-# Haunted house
-
-Author: [@**jaimebboyjt**](https://twitter.com/jaimebboyjt).
-
-> This is a TresJs implementation of Haunted house demo from Bruno Simon.
-
-```vue
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, useTweakPane } from '@tresjs/cientos'
-import { PCFSoftShadowMap, SRGBColorSpace } from 'three'
-import Floor from './floor.vue'
-import House from './house.vue'
-import Ghosts from './ghosts.vue'
-
-const { pane } = useTweakPane()
-
-const gl = {
-  clearColor: '#262837',
-  shadows: true,
-  alpha: false,
-  shadowMapType: PCFSoftShadowMap,
-  outputColorSpace: SRGBColorSpace,
-}
-
-const moonOptions = reactive({
-  intensity: 1.12,
-  position: [4, 5, -2],
-  color: '#b9d5ff',
-})
-
-pane.addInput(moonOptions, 'intensity', {
-  label: 'intensity',
-  min: 0,
-  max: 3,
-  step: 0.001,
-})
-</script>
-
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[4, 2, 5]" />
-    <TresFog :args="['#262837', 1, 15]" />
-    <OrbitControls />
-
-    <Suspense>
-      <House />
-    </Suspense>
-    <Suspense>
-      <Floor />
-    </Suspense>
-    <Ghosts />
-    <TresAmbientLight
-      color="#b9d5ff"
-      :intensity="0.3"
-    />
-    <TresDirectionalLight
-      v-bind="moonOptions"
-      :shadow-map-size-width="256"
-      :shadow-map-size-height="256"
-      :shadow-camera-far="15"
-      cast-shadow
-    />
-  </TresCanvas>
-</template>
-```
-
-```vue
-// floor.vue
-<script setup>
-import { shallowRef } from 'vue'
-import { useTexture } from '@tresjs/core'
-import { Float32BufferAttribute, RepeatWrapping, BoxGeometry, MeshStandardMaterial, Mesh } from 'three'
-
-const floorRef = shallowRef()
-const gravesRef = shallowRef()
-const floorTexture = await useTexture({
-  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/grass/color.jpg',
-  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/grass/normal.jpg',
-  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/grass/roughness.jpg',
-  aoMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/grass/ambientOcclusion.jpg',
-})
-
-for (const key in floorTexture) {
-  if (floorTexture[key]) {
-    floorTexture[key].repeat.set(8, 8)
-    floorTexture[key].wrapS = RepeatWrapping
-    floorTexture[key].wrapT = RepeatWrapping
-  }
-}
-
-const floorOptions = {
-  color: '#82DBC5',
-  roughness: 0.5,
-  metalness: 0.5,
-  map: floorTexture.map,
-  normalMap: floorTexture.normalMap,
-  roughnessMap: floorTexture.roughnessMap,
-  aoMap: floorTexture.aoMap,
-}
-watch(floorRef, (value) => {
-  value.geometry.setAttribute('uv2', new Float32BufferAttribute(value.geometry.attributes.uv.array, 2))
-})
-
-const bushes = [
-  {
-    scale: [0.5, 0.5, 0.5],
-    position: [0.8, 0.2, 2.2],
-  },
-  {
-    scale: [0.25, 0.25, 0.25],
-    position: [1.4, 0.1, 2.1],
-  },
-  {
-    scale: [0.4, 0.4, 0.4],
-    position: [-0.8, 0.1, 2.2],
-  },
-  {
-    scale: [0.15, 0.15, 0.15],
-    position: [-1, 0.05, 2.6],
-  },
-]
-
-const graveGeometry = new BoxGeometry(0.6, 0.8, 0.1)
-const graveMaterial = new MeshStandardMaterial({ color: '#727272' })
-const graves = []
-
-for (let i = 0; i < 50; i++) {
-  const angle = Math.random() * Math.PI * 2 // Random angle
-  const radius = 3 + Math.random() * 6 // Random radius
-  const x = Math.cos(angle) * radius // Get the x position using cosinus
-  const z = Math.sin(angle) * radius // Get the z position using sinus
-
-  // Create the mesh
-  const grave = new Mesh(graveGeometry, graveMaterial)
-  grave.castShadow = true
-  // Position
-  grave.position.set(x, 0.3, z)
-
-  // Rotation
-  grave.rotation.z = (Math.random() - 0.5) * 0.4
-  grave.rotation.y = (Math.random() - 0.5) * 0.4
-  graves.push(grave)
-}
-</script>
-
-<template>
-  <TresMesh
-    ref="floorRef"
-    receive-shadow
-    :rotation="[-Math.PI * 0.5, 0, 0]"
-    :position="[0, 0, 0]"
-  >
-    <TresPlaneGeometry :args="[20, 20]" />
-    <TresMeshStandardMaterial v-bind="floorOptions" />
-  </TresMesh>
-  <TresMesh
-    v-for="({ position, scale }, index) in bushes"
-    :key="index"
-    :position="position"
-    :scale="scale"
-  >
-    <TresSphereGeometry :args="[1, 16, 16]" />
-    <TresMeshStandardMaterial color="#89c854" />
-  </TresMesh>
-  <TresGroup ref="gravesRef">
-    <TresMesh
-      v-for="({ position, scale, rotation }, index) in graves"
-      :key="index"
-      :position="position"
-      :scale="scale"
-      :rotation="rotation"
-      :material="graveMaterial"
-      :geometry="graveGeometry"
-    />
-  </TresGroup>
-</template>
-```
-
-```vue
-// house.vue
-<script setup>
-import { shallowRef, watch } from 'vue'
-import { useTexture } from '@tresjs/core'
-import { Float32BufferAttribute } from 'three'
-
-const wallRef = shallowRef()
-const doorRef = shallowRef()
-const doorLightRef = shallowRef()
-
-const brickTextures = await useTexture({
-  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/bricks/color.jpg',
-  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/bricks/normal.jpg',
-  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/bricks/roughness.jpg',
-  ambientOcclusion:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/bricks/ambientOcclusion.jpg',
-})
-
-const doorTextures = await useTexture({
-  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/color.jpg',
-  alphaMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/alpha.jpg',
-  ambientOcclusion:
-    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/ambientOcclusion.jpg',
-  displacementMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/height.jpg',
-  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/normal.jpg',
-  metalnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/metalness.jpg',
-  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/roughness.jpg',
-})
-
-const wallOptions = {
-  map: brickTextures.map,
-  aoMap: brickTextures.aoMap,
-  normalMap: brickTextures.normalMap,
-  roughnessMap: brickTextures.roughnessMap,
-}
-const doorOptions = {
-  transparent: true,
-  displacementScale: 0.1,
-  map: doorTextures.map,
-  alphaMap: doorTextures.alphaMap,
-  aoMap: doorTextures.aoMap,
-  displacementMap: doorTextures.displacementMap,
-  normalMap: doorTextures.normalMap,
-  metalnessMap: doorTextures.metalnessMap,
-  roughnessMap: doorTextures.roughnessMap,
-}
-watch(wallRef, (value) => {
-  value.geometry.setAttribute('uv2', new Float32BufferAttribute(value.geometry.attributes.uv.array, 2))
-})
-
-watch(doorRef, (value) => {
-  value.geometry.setAttribute('uv2', new Float32BufferAttribute(value.geometry.attributes.uv.array, 2))
-})
-</script>
-
-<template>
-  <TresGroup ref="houseRef">
-    <TresMesh
-      ref="doorRef"
-      :position="[0, 0.9, 2.01]"
-    >
-      <TresPlaneGeometry :args="[2, 2, 100, 100]" />
-      <TresMeshStandardMaterial v-bind="doorOptions" />
-    </TresMesh>
-    <TresMesh
-      ref="roofRef"
-      :position="[0, 3, 0]"
-      :rotation="[0, Math.PI * 0.25, 0]"
-    >
-      <TresConeGeometry :args="[3.5, 1, 4]" />
-      <TresMeshStandardMaterial color="#b35f45" />
-    </TresMesh>
-    <TresMesh
-      ref="wallRef"
-      :position="[0, 1.25, 0]"
-      cast-shadow
-    >
-      <TresBoxGeometry :args="[4, 2.5, 4]" />
-      <TresMeshStandardMaterial v-bind="wallOptions" />
-    </TresMesh>
-    <TresPointLight
-      :position="[0, 2.2, 2.7]"
-      :args="['#ff7d46', 1, 7]"
-      :shadow-map-size-width="256"
-      :shadow-map-size-height="256"
-      :shadow-camera-far="7"
-      cast-shadow
-    />
-  </TresGroup>
-</template>
-```
-
-```vue
-// ghosts.vue
-<script setup>
-import { shallowRef } from 'vue'
-import { useRenderLoop } from '@tresjs/core'
-
-const ghost1 = shallowRef(null)
-const ghost2 = shallowRef(null)
-const ghost3 = shallowRef(null)
-
-const { onLoop } = useRenderLoop()
-onLoop(({ elapsed }) => {
-  const ghost1Angle = elapsed * 0.5
-  const ghost2Angle = -elapsed * 0.32
-  const ghost3Angle = -elapsed * 0.18
-  if (ghost1.value && ghost2.value && ghost3.value) {
-    ghost1.value.position.x = Math.cos(ghost1Angle) * 4
-    ghost1.value.position.z = Math.sin(ghost1Angle) * 4
-    ghost1.value.position.y = Math.sin(elapsed * 3)
-
-    ghost2.value.position.x = Math.cos(ghost2Angle) * 5
-    ghost2.value.position.z = Math.sin(ghost2Angle) * 5
-    ghost2.value.position.y = Math.sin(elapsed * 4) + Math.sin(elapsed * 2.5)
-
-    ghost3.value.position.x = Math.cos(ghost3Angle) * (7 + Math.sin(elapsed * 0.32))
-    ghost3.value.position.z = Math.sin(ghost3Angle) * (7 + Math.sin(elapsed * 0.5))
-    ghost3.value.position.y = Math.sin(elapsed * 4) + Math.sin(elapsed * 2.5)
-  }
-})
-</script>
-
-<template>
-  <TresPointLight
-    ref="ghost1"
-    :args="['#ff00ff', 3, 3]"
-    cast-shadow
-  />
-  <TresPointLight
-    ref="ghost2"
-    :args="['#00ffff', 3, 3]"
-    cast-shadow
-  />
-  <TresPointLight
-    ref="ghost3"
-    :args="['#ff7800', 3, 3]"
-    cast-shadow
-  />
-</template>
-```
-
-::
+::
\ No newline at end of file
diff --git a/content/experiments/html-phone.md b/content/experiments/html-phone.md
index edd0a84..87c5ba4 100644
--- a/content/experiments/html-phone.md
+++ b/content/experiments/html-phone.md
@@ -1,9 +1,6 @@
 ---
-thumbnail: /html-phone.png
 title: HTML iPhone
-slug: html-phone
 author: alvarosabu
-status: published
 description: Using HTML abstraction to render a page inside a model
 tags: ['html', 'gltf']
 ---
diff --git a/content/experiments/infinite-tube.md b/content/experiments/infinite-tube.md
index 8f57ce0..1e683a5 100644
--- a/content/experiments/infinite-tube.md
+++ b/content/experiments/infinite-tube.md
@@ -1,106 +1,8 @@
 ---
-thumbnail: /infinite-tube.png
-title: Infinite Tube
-slug: infinite-tube
 author: jaime-bboyjt
-status: published
 description: How to create an infinite tube easy with Tresjs
 tags: ['scroll-controls', 'tube-geometry', 'textures-offset']
 ---
 
 ::infinite-tube
-::
-
-::the-info
-
-![infinite-tube](/infinite-tube.png)
-
-# Infinite tube
-
-Author: [@**jaimebboyjt**](https://twitter.com/jaimebboyjt).
-
-> An easy way to create infinite tubes with TresJS.
-
-```vue
-<script setup>
-import { Vector3, CatmullRomCurve3, BackSide, TubeGeometry, RepeatWrapping } from 'three'
-import { useWindowSize } from '@vueuse/core'
-
-const { map, aoMap, normalMap } = await useTexture({
-  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/alien_flesh/Alien_Flesh_001_color.jpg',
-  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/alien_flesh/Alien_Flesh_001_norm.jpg',
-  aoMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/alien_flesh/Alien_Flesh_001_occ.jpg',
-})
-
-const tubeMaterialRef = shallowRef(null)
-const tubeRef = ref(null)
-const progress = ref(0)
-const { width, height } = useWindowSize()
-
-const points = []
-
-for (let i = 0; i < 5; i += 1) {
-  points.push(new Vector3(0, 0, 2.5 * (i / 4)))
-}
-
-const curve = new CatmullRomCurve3(points)
-
-watch(tubeMaterialRef, (value) => {
-  value.map.wrapS = RepeatWrapping
-  value.map.wrapT = RepeatWrapping
-  value.normalMap.wrapS = RepeatWrapping
-  value.normalMap.wrapT = RepeatWrapping
-  value.aoMap.wrapS = RepeatWrapping
-  value.aoMap.wrapT = RepeatWrapping
-})
-watch(progress, (value) => {
-  tubeRef.value.geometry.dispose()
-  curve.points[2].x = value * 0.05
-  curve.points[2].y = - value * 0.05
-  curve.points[4].x = value * 0.005
-  tubeRef.value.geometry = new TubeGeometry(curve, 70, 0.02, 50, false)
-})
-
-const { onLoop } = useRenderLoop()
-
-onLoop(({ elapsed }) => {
-  tubeMaterialRef.value.map.offset.x -= delta * 0.25
-  tubeMaterialRef.value.normalMap.offset.x -= delta * 0.25
-  tubeMaterialRef.value.aoMap.offset.x -= delta * 0.25
-})
-</script>
-
-<template>
-  <TresCanvas
-    window-size
-    clear-color="#ff4444"
-    antialias
-  >
-    <TresFog :args="[0x222222, 0.6, 2.8]" />
-    <TresPerspectiveCamera
-      :args="[8, width / height, 0.1, 1000]"
-      :position="[0, 0, 0.35]"
-    />
-    <ScrollControls
-      v-model="progress"
-      :distance="0"
-    />
-    <TresMesh
-      ref="tubeRef"
-      :position="[0, 0, -2]"
-    >
-      <TresTubeGeometry :args="[curve, 70, 0.02, 50, false]" />
-      <TresMeshStandardMaterial
-        ref="tubeMaterialRef"
-        :side="BackSide"
-        :map="map"
-        :ao-map="aoMap"
-        :normal-map="normalMap"
-      />
-    </TresMesh>
-    <TresDirectionalLight :args="[0xffffff, 0.8]" />
-    <TresHemisphereLight :args="[0xffffbb, 0x887979, 0.9]" />
-  </TresCanvas>
-</template>
-
-```
\ No newline at end of file
+::
\ No newline at end of file
diff --git a/content/experiments/lowpoly-planet.md b/content/experiments/lowpoly-planet.md
index 88f49c2..a5c381b 100644
--- a/content/experiments/lowpoly-planet.md
+++ b/content/experiments/lowpoly-planet.md
@@ -1,9 +1,6 @@
 ---
-thumbnail: /lowpoly-planet.png
 title: Low Poly Planet
-slug: lowpoly-planet
 author: alvarosabu
-status: published
 description: Low Poly Planet exported from Blender
 tags: ['basic', 'cientos', 'useGLTF', 'blender']
 ---
diff --git a/content/experiments/magical-marbles.md b/content/experiments/magical-marbles.md
index 88298d0..3770507 100644
--- a/content/experiments/magical-marbles.md
+++ b/content/experiments/magical-marbles.md
@@ -1,8 +1,4 @@
 ---
-thumbnail: /magical-marbles.png
-title: Magical Marbles
-slug: magical-marbles
-status: published
 author: damienmontastier
 description: Magical Marbles Sphere
 tags: ['magical', 'marbles', 'sphere', 'shaders']
diff --git a/content/experiments/nuxt-stones.md b/content/experiments/nuxt-stones.md
index 358ad37..3a4ec4b 100644
--- a/content/experiments/nuxt-stones.md
+++ b/content/experiments/nuxt-stones.md
@@ -1,8 +1,4 @@
 ---
-thumbnail: /nuxt-stones.png
-title: Nuxt Stones
-slug: nuxt-stones
-status: published
 author: alvarosabu
 description: Nuxt Stone is a simple scene with a stone model and a Nuxt logo. The scene is rendered with baked lighting and post-processing effects.
 tags: ['gltf', 'baked', 'emission', 'post-processing', 'bloom']
diff --git a/content/experiments/overlay.md b/content/experiments/overlay.md
index 185a88e..b13e889 100644
--- a/content/experiments/overlay.md
+++ b/content/experiments/overlay.md
@@ -1,8 +1,5 @@
 ---
-thumbnail: /overlay.png
 title: Overlay HTML
-slug: overlay
-status: published
 author: andretchen0
 description: HTML overlay on TresCanvas
 tags: ['basic', 'cientos']
diff --git a/content/experiments/particle-pumpkin.md b/content/experiments/particle-pumpkin.md
index 3218564..84e7823 100644
--- a/content/experiments/particle-pumpkin.md
+++ b/content/experiments/particle-pumpkin.md
@@ -1,9 +1,6 @@
 ---
-thumbnail: /particle-pumpkin.png
 title: Particle Pumpkin Shader
-slug: particle-pumpkin
 author: neoprint3d
-status: published
 description: A animated 3d pumpkin that uses shaders, particles, and custom gltf model
 tags: ["cientos", "useGLTF", "blender", "shaders"]
 ---
diff --git a/content/experiments/portal-journey.md b/content/experiments/portal-journey.md
index 5d697e9..950ffb8 100644
--- a/content/experiments/portal-journey.md
+++ b/content/experiments/portal-journey.md
@@ -1,7 +1,5 @@
 ---
-thumbnail: /portal-journey.png
-title: Portal Journey
-slug: portal-journey
+status: draft
 author: alvarosabu
 type: vue
 description: Famous Bruno Simon's ThreeJS Journey Portal.
diff --git a/content/experiments/post-processing-manual.md b/content/experiments/post-processing-manual.md
index 1f54609..86bce3f 100644
--- a/content/experiments/post-processing-manual.md
+++ b/content/experiments/post-processing-manual.md
@@ -1,7 +1,6 @@
 ---
-thumbnail: /post-processing-manual.png
+status: draft
 title: Manual Post Processing
-slug: post-processing-manual
 author: alvarosabu
 description: A basic example of how to use the post processing effect manually
 tags: ['post-processing']
diff --git a/content/experiments/potions-classroom.md b/content/experiments/potions-classroom.md
index 402449c..38df34e 100644
--- a/content/experiments/potions-classroom.md
+++ b/content/experiments/potions-classroom.md
@@ -1,9 +1,6 @@
 ---
-thumbnail: /wizard-potions-classroom.png
 title: Wizard's Potion Classroom
-slug: potions-classroom
 author: alvarosabu
-status: published
 description: Potions classroom scene for VueJS Live London 2023
 tags: ['baked', 'blender', 'levioso', 'useGltf', 'emissive']
 ---
diff --git a/content/experiments/product-landing-page.md b/content/experiments/product-landing-page.md
index f32c99c..5f0635c 100644
--- a/content/experiments/product-landing-page.md
+++ b/content/experiments/product-landing-page.md
@@ -1,9 +1,5 @@
 ---
-thumbnail: /product-landing-page.png
-title: Product Landing Page
-slug: product-landing-page
 author: alvarosabu
-status: published
 description: Transparent backdrop and model staging
 tags: ['product', 'levioso', 'glsl', 'contactShadows']
 ---
diff --git a/content/experiments/realistic.md b/content/experiments/realistic.md
index 2962b3c..4d6f880 100644
--- a/content/experiments/realistic.md
+++ b/content/experiments/realistic.md
@@ -1,9 +1,6 @@
 ---
-thumbnail: /realistic.png
 title: Realistic Scene
-slug: realistic
 author: alvarosabu
-status: published
 description: Realistic scene using envmaps
 tags: ['environment', 'envmap', 'useEnvironment']
 ---
diff --git a/content/experiments/repulsion-effect.md b/content/experiments/repulsion-effect.md
index bbb92b4..f2ee0ae 100644
--- a/content/experiments/repulsion-effect.md
+++ b/content/experiments/repulsion-effect.md
@@ -1,8 +1,4 @@
 ---
-thumbnail: /repulsion-effect.png
-title: Repulsion Effect
-slug: repulsion-effect
-status: published
 author: damienmontastier
 description: Repulsion Effect
 tags: ['repulsion', 'effect', 'basic' , 'hover']
diff --git a/content/experiments/scroll-controls.md b/content/experiments/scroll-controls.md
index 0aa0786..0fd99b4 100644
--- a/content/experiments/scroll-controls.md
+++ b/content/experiments/scroll-controls.md
@@ -1,11 +1,9 @@
 ---
-thumbnail: /scroll-controls.png
 title: ScrollControls 
 author: alvarosabu
-status: published
 description: A basic example of how to use the ScrollControl with TresJS and cientos
 tags: ['cientos', 'scroll', 'controls']
 ---
 
-::scroll-controls-demo
+::scroll-controls
 ::
\ No newline at end of file
diff --git a/content/experiments/spooky-saur.md b/content/experiments/spooky-saur.md
index d1bd387..3ffa428 100644
--- a/content/experiments/spooky-saur.md
+++ b/content/experiments/spooky-saur.md
@@ -1,22 +1,9 @@
 ---
-thumbnail: /spooky-saur.png
 title: Halloween Spooky-saur 🎃
-slug: spooky-saur
 author: alvarosabu
-status: published
 description: A basic example of how to animate a geometry using useRendererLoop composable
 tags: ['lights', 'fog', 'backdrop', 'unrealbloom', useGLTF]
 ---
 
 ::spooky-saur
-::
-
-::the-info
-
-# Halloween Spooky-saur 🎃
-
-![Spooky-saur](/spooky-saur.png)
-
-Inspired by [Halloween Bulbasaurs](https://vincenzonova.tumblr.com/post/178892105911/guys-i-did-more-pumpkin-bulbasaurs-more) by [Vince Marcellino](https://twitter.com/vincenzonova?lang=en) I decided to model a spooky-saur and bring it to life with Tres.
-
-![spooky-saur](https://64.media.tumblr.com/db4fbc6754424097d30a43169ca49183/tumblr_pgcfk3nVeU1w3anp2o1_500.jpg)
\ No newline at end of file
+::
\ No newline at end of file
diff --git a/content/experiments/synthwave.md b/content/experiments/synthwave-landscape.md
similarity index 53%
rename from content/experiments/synthwave.md
rename to content/experiments/synthwave-landscape.md
index 9b9be10..0b60607 100644
--- a/content/experiments/synthwave.md
+++ b/content/experiments/synthwave-landscape.md
@@ -1,12 +1,8 @@
 ---
-thumbnail: /synthwave.png
-title: Synthwave landscape
-slug: synthwave-landscape
 author: andretchen0
-status: published
 description: Infinite procedural landscape
 tags: ['procedural', 'shader', 'post-processing']
 ---
 
-::synthwave
+::synthwave-landscape
 ::
diff --git a/layouts/experiment.vue b/layouts/experiment.vue
index 369acfc..7bf45f9 100644
--- a/layouts/experiment.vue
+++ b/layouts/experiment.vue
@@ -1,7 +1,29 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const route = useRoute()
+
+function getSlugFromPath(path: string) {
+  return path.split('/').pop()
+}
+
+function getRepoPathFromPath(path: string) {
+  return `https://github.com/Tresjs/lab/tree/main/components/content/${getSlugFromPath(path)}`
+}
+
+function getRepoTitleFromPath(path: string) {
+  return `${getSlugFromPath(path)} – code on Github` 
+}
+
+const repoPath = getRepoPathFromPath(route.path)
+const repoTitle = getRepoTitleFromPath(route.path)
+</script>
 
 <template>
   <div>
+    <TheCodeButton
+      :to="repoPath"
+      :title="repoTitle"
+      class="fixed z-10 bottom-5 right-5"
+    />
     <slot />
   </div>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 2264cd2..3a76102 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,31 +1,75 @@
 <script setup>
 const { data: experiments } = await useAsyncData('/', 
   () => queryContent('experiments')
-    .where({ status: 'published' })
+    .where({ $or: [ 
+      { status: { $exists: false } }, 
+      { status: 'published' },
+    ] })
     .sort({ date: -1 })
     .find(),
 )
+
 const { data: formattedExperiments } = await useAsyncData('/', () =>
   Promise.all(
     experiments.value.map(async experiment => ({
       ...experiment,
+      slug: getSlugFromExperiment(experiment),
+      title: getTitleFromExperiment(experiment),
+      thumbnail: getThumbnailFromExperiment(experiment),
       author: await queryContent('authors')
         .where({ slug: experiment.author })
         .only(['name', 'avatar', 'slug'])
         .findOne(),
-    })),
-  ),
-)
+      repoPath: getRepoPathFromExperiment(experiment),
+      repoTitle: getRepoTitleFromExperiment(experiment),
+    }))))
+
+function getSlugFromExperiment(experiment) {
+  return experiment.slug ?? experiment._path.split('/').pop()
+}
+
+function getTitleFromExperiment(experiment) {
+  return experiment.title 
+    ?? getSlugFromExperiment(experiment).split('-')
+      .map(capitalize)
+      .join(' ')
+}
+
+function capitalize(word) {
+  if (word.length === 0) {
+    return word
+  } 
+  else if (word.length === 1) {
+    return word.toUpperCase()
+  } 
+  else {
+    return word[0].toUpperCase() + word.slice(1)
+  }
+}
+
+function getThumbnailFromExperiment(experiment) {
+  return experiment.thumbnail ?? `/${getSlugFromExperiment(experiment)}.png`
+}
+
+function getRepoPathFromExperiment(experiment) {
+  return `https://github.com/Tresjs/lab/tree/main/components/content/${getSlugFromExperiment(experiment)}`
+}
+
+function getRepoTitleFromExperiment(experiment) {
+  return `${getSlugFromExperiment(experiment)} – code on Github` 
+}
 </script>
 
 <template>
   <main>
-    <div class="w-full container mx-auto px-4 md:px-0 mb-60 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-16 pt-8">
+    <div class="w-full container mx-auto px-4 md:px-0 pb-60 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-16 pt-8">
       <TheCard
         v-for="experiment in formattedExperiments"
         :key="experiment._path"
         :title="experiment.title"
         :path="experiment._path"
+        :repo-title="experiment.repoTitle"
+        :repo-path="experiment.repoPath"
         :media="experiment.thumbnail"
         :description="experiment.description"
         :author="experiment.author"
diff --git a/public/array-cameras.png b/public/array-cameras.png
index 75ea3a5..d8a7b9f 100644
Binary files a/public/array-cameras.png and b/public/array-cameras.png differ
diff --git a/public/brickelangelo-david.png b/public/brickelangelo-david.png
index f378258..3608b6b 100644
Binary files a/public/brickelangelo-david.png and b/public/brickelangelo-david.png differ
diff --git a/public/cult-of-the-lamb.png b/public/cult-of-the-lamb.png
index d29db44..503fa12 100644
Binary files a/public/cult-of-the-lamb.png and b/public/cult-of-the-lamb.png differ
diff --git a/public/environment.png b/public/environment.png
index 746aacd..9df48f1 100644
Binary files a/public/environment.png and b/public/environment.png differ
diff --git a/public/galaxy-generator.png b/public/galaxy-generator.png
index fa9c659..a017e23 100644
Binary files a/public/galaxy-generator.png and b/public/galaxy-generator.png differ
diff --git a/public/github-1k-stars.png b/public/github-1k-stars.png
deleted file mode 100644
index ea8685e..0000000
Binary files a/public/github-1k-stars.png and /dev/null differ
diff --git a/public/github-stars.png b/public/github-stars.png
new file mode 100644
index 0000000..485ece9
Binary files /dev/null and b/public/github-stars.png differ
diff --git a/public/glass-example.png b/public/glass-example.png
deleted file mode 100644
index 89d262c..0000000
Binary files a/public/glass-example.png and /dev/null differ
diff --git a/public/glass-material.png b/public/glass-material.png
new file mode 100644
index 0000000..bc15f55
Binary files /dev/null and b/public/glass-material.png differ
diff --git a/public/haunted-house-demo.png b/public/haunted-house-demo.png
deleted file mode 100644
index 9d82542..0000000
Binary files a/public/haunted-house-demo.png and /dev/null differ
diff --git a/public/haunted-house.png b/public/haunted-house.png
new file mode 100644
index 0000000..c7cd0ef
Binary files /dev/null and b/public/haunted-house.png differ
diff --git a/public/html-phone.png b/public/html-phone.png
index 547a9e8..9735d87 100644
Binary files a/public/html-phone.png and b/public/html-phone.png differ
diff --git a/public/infinite-tube.png b/public/infinite-tube.png
index 41b9ae1..21b8c34 100644
Binary files a/public/infinite-tube.png and b/public/infinite-tube.png differ
diff --git a/public/lowpoly-planet.png b/public/lowpoly-planet.png
index c7a3f1d..edd6cac 100644
Binary files a/public/lowpoly-planet.png and b/public/lowpoly-planet.png differ
diff --git a/public/magical-marbles.png b/public/magical-marbles.png
index 6dbab7c..cafb92c 100644
Binary files a/public/magical-marbles.png and b/public/magical-marbles.png differ
diff --git a/public/nuxt-stones.png b/public/nuxt-stones.png
index 26e9bf3..0c42d10 100644
Binary files a/public/nuxt-stones.png and b/public/nuxt-stones.png differ
diff --git a/public/overlay.png b/public/overlay.png
index 4eaf515..3d220f5 100644
Binary files a/public/overlay.png and b/public/overlay.png differ
diff --git a/public/particle-pumpkin.png b/public/particle-pumpkin.png
index ed6ca3d..0110229 100644
Binary files a/public/particle-pumpkin.png and b/public/particle-pumpkin.png differ
diff --git a/public/portal-journey.png b/public/portal-journey.png
index 3add11e..91488c0 100644
Binary files a/public/portal-journey.png and b/public/portal-journey.png differ
diff --git a/public/post-processing-manual.png b/public/post-processing-manual.png
index 22a64cc..e18350d 100644
Binary files a/public/post-processing-manual.png and b/public/post-processing-manual.png differ
diff --git a/public/potions-classroom.png b/public/potions-classroom.png
new file mode 100644
index 0000000..1f1a63a
Binary files /dev/null and b/public/potions-classroom.png differ
diff --git a/public/product-landing-page.png b/public/product-landing-page.png
index dd7537e..d465cb3 100644
Binary files a/public/product-landing-page.png and b/public/product-landing-page.png differ
diff --git a/public/realistic.png b/public/realistic.png
index 9786761..ff7d5ef 100644
Binary files a/public/realistic.png and b/public/realistic.png differ
diff --git a/public/repulsion-effect.png b/public/repulsion-effect.png
index 01f129a..8c483aa 100644
Binary files a/public/repulsion-effect.png and b/public/repulsion-effect.png differ
diff --git a/public/scroll-controls.png b/public/scroll-controls.png
index 926f2d1..a3ccfe2 100644
Binary files a/public/scroll-controls.png and b/public/scroll-controls.png differ
diff --git a/public/spooky-saur.png b/public/spooky-saur.png
index a49ee28..26d4a0c 100644
Binary files a/public/spooky-saur.png and b/public/spooky-saur.png differ
diff --git a/public/synthwave-landscape.png b/public/synthwave-landscape.png
new file mode 100644
index 0000000..3e8644b
Binary files /dev/null and b/public/synthwave-landscape.png differ
diff --git a/public/synthwave.png b/public/synthwave.png
deleted file mode 100644
index 316336a..0000000
Binary files a/public/synthwave.png and /dev/null differ
diff --git a/public/tresjs-lab-og_001.png b/public/tresjs-lab-og_001.png
new file mode 100644
index 0000000..f7e6eac
Binary files /dev/null and b/public/tresjs-lab-og_001.png differ
diff --git a/public/wizard-potions-classroom.png b/public/wizard-potions-classroom.png
deleted file mode 100644
index e65a041..0000000
Binary files a/public/wizard-potions-classroom.png and /dev/null differ