diff --git a/components/content/brownian-distribution/BrownianDistributionExperiment.vue b/components/content/brownian-distribution/BrownianDistributionExperiment.vue
new file mode 100644
index 0000000..4c757a6
--- /dev/null
+++ b/components/content/brownian-distribution/BrownianDistributionExperiment.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import Imagotype from './Imagotype.vue';
+import BrownianDistributionGroup from './BrownianDistributionGroup.vue'
+</script>
+
+<template>
+  <TresPerspectiveCamera
+    :position="[0, 0, 22]"
+    :fov="45"
+    :near="0.1"
+    :far="1000"
+    :look-at="[0, 5, 0]"
+  />
+  <OrbitControls />
+  <TresAmbientLight :intensity="0.5" />
+  <Imagotype />
+  <BrownianDistributionGroup />
+  <TresDirectionalLight
+    :position="[0, 8, 4]"
+    :intensity="0.7"
+    cast-shadow
+  />
+  <TresDirectionalLight
+    :position="[0, 2, 4]"
+    :intensity="1"
+    cast-shadow
+  />
+</template>
diff --git a/components/content/brownian-distribution/BrownianDistributionGroup.vue b/components/content/brownian-distribution/BrownianDistributionGroup.vue
new file mode 100644
index 0000000..6c885cc
--- /dev/null
+++ b/components/content/brownian-distribution/BrownianDistributionGroup.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useDark } from '@vueuse/core'
+import { MathUtils, Vector3, Euler } from 'three'
+
+import { colors } from './constants'
+import { BoxGeometry, CylinderGeometry, SphereGeometry, MeshToonMaterial } from 'three'
+const { lerp } = MathUtils
+const COUNT = 2000
+
+const brownian = (stepSize: number, xMin: number, xMax: number, yMin: number, yMax: number, zMin: number, zMax: number) => {
+  let x = 0; let y = 0; let z = 0
+  const r = () => (Math.random() - 0.5) * 2 * stepSize
+  const isInBounds = () => xMin < x && x < xMax && yMin < y && y < yMax && zMin < z && z < zMax
+  const reset = () => {
+    x = lerp(xMin, xMax, Math.random())
+    y = lerp(yMin, yMax, Math.random())
+    z = lerp(zMin, zMax, Math.random())
+  }
+  reset()
+  return () => {
+    x += r()
+    y += r()
+    z += r()
+    if (!isInBounds()) { reset() }
+    return [x, y, z]
+  }
+}
+
+const sphereGeometry = new SphereGeometry()
+const cubeGeometry = new BoxGeometry()
+const pyramidGeometry = new CylinderGeometry(0, 0.6, 1)
+
+const isDark = useDark()
+
+const mainMaterial = new MeshToonMaterial({
+  color: isDark.value ? colors.DARK : colors.LIGHT,
+})
+
+const hoverMaterial = new MeshToonMaterial({
+  color: colors.YELLOW,
+})
+
+const getPosition = brownian(2, -60, 60, -40, 40, -30, 0)
+const getRotation = brownian(1, -20, 20, -10, 10, -20, 0)
+const objectPositions = Array.from({ length: COUNT }).map(() => new Vector3(...getPosition()))
+const objectRotations = Array.from({ length: COUNT }).map(() => new Euler(...getRotation()))
+
+function onPointerEnter(ev: ThreeEvent<PointerEvent>) {
+  if (ev.eventObject.material !== hoverMaterial) {
+    ev.eventObject.userData.material = ev.eventObject.material
+  }
+  ev.eventObject.material = hoverMaterial
+}
+
+function onPointerLeave(ev: ThreeEvent<PointerEvent>) {
+  ev.eventObject.material = ev.eventObject.userData.material ?? mainMaterial
+}
+
+watch(isDark, (newVal) => {
+  mainMaterial.color.set(newVal ? colors.DARK : colors.LIGHT)
+})
+</script>
+
+<template>
+  <TresGroup :position="[0, 0, -30]">
+    <TresGroup :position="[0, 0, -30]">
+      <TresMesh
+        v-for="position, i of objectPositions"
+        :key="i"
+        :geometry="[sphereGeometry, cubeGeometry, pyramidGeometry][i % 3]"
+        :material="mainMaterial"
+        :position="position"
+        :rotation="objectRotations[i]"
+        @pointer-enter="onPointerEnter"
+        @pointer-leave="onPointerLeave"
+      />
+    </TresGroup>
+  </TresGroup>
+</template>
diff --git a/components/content/brownian-distribution/Imagotype.vue b/components/content/brownian-distribution/Imagotype.vue
new file mode 100644
index 0000000..bfba834
--- /dev/null
+++ b/components/content/brownian-distribution/Imagotype.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { MathUtils } from 'three'
+import { useDark } from '@vueuse/core'
+
+import { PI, colors } from './constants'
+const { clamp } = MathUtils
+
+const isDark = useDark()
+
+const pyramidRef = ref()
+const boxRef = ref()
+const sphereRef = ref()
+
+const { onBeforeRender } = useLoop()
+
+onBeforeRender(({ elapsed }) => {
+  if (!pyramidRef.value || !boxRef.value || !sphereRef.value) return
+  elapsed = elapsed * 3 + 7
+  pyramidRef.value.position.y = Math.tan(clamp((1 + elapsed) % 9, 0, PI))
+  boxRef.value.position.y = Math.tan(clamp((0.5 + elapsed) % 9, 0, PI))
+  sphereRef.value.position.y = Math.tan(clamp(elapsed % 9, 0, PI))
+
+  const scale0 = Math.abs(Math.cos(clamp((1 + elapsed) % 9, 0, PI)))
+  const scale1 = Math.abs(Math.cos(clamp((0.5 + elapsed) % 9, 0, PI)))
+  const scale2 = Math.abs(Math.cos(clamp(elapsed % 9, 0, PI)))
+  pyramidRef.value.scale.set(scale0, scale0, scale0)
+  boxRef.value.scale.set(scale1, scale1, scale1)
+  sphereRef.value.scale.set(scale2, scale2, scale2)
+})
+
+watch(isDark, (newVal) => {
+  boxRef.value.material.color.set(newVal ? colors.LIGHT : colors.DARK)
+})
+</script>
+
+<template>
+  <TresGroup name="imago">
+    <TresMesh 
+      name="pyramid"
+      :position="[-1.5, 0, 0]"
+      ref="pyramidRef"
+    >
+      <TresCylinderGeometry :args="[0, 0.60, 1]" />
+      <TresMeshToonMaterial :color="colors.TEAL" />
+    </TresMesh>
+    <TresMesh 
+      name="box"
+      ref="boxRef"
+    >
+      <TresBoxGeometry :args="[1, 1, 1]" />
+      <TresMeshToonMaterial :color="isDark ? colors.LIGHT : colors.DARK" />
+    </TresMesh>
+    <TresMesh 
+      name="sphere"
+      :position="[1.5, 0, 0]"
+      ref="sphereRef"
+    >
+      <TresSphereGeometry :args="[0.5, 32, 32]" />
+      <TresMeshToonMaterial :color="colors.ORANGE" />
+    </TresMesh>
+  </TresGroup>
+</template>
+
diff --git a/components/content/brownian-distribution/constants.ts b/components/content/brownian-distribution/constants.ts
new file mode 100644
index 0000000..d31bec1
--- /dev/null
+++ b/components/content/brownian-distribution/constants.ts
@@ -0,0 +1,13 @@
+
+export const colors = {
+  TEAL: '#7fdac6',
+  ORANGE: '#eeac35',
+  PURPLE: '#9b51e0',
+  YELLOW: '#f7d060',
+  BLUE: '#00b4d8',
+  RED: '#ef476f',
+  DARK: '#1e1f22',
+  LIGHT: '#f8f8f8',
+}
+
+export const PI = Math.PI
diff --git a/components/content/brownian-distribution/index.vue b/components/content/brownian-distribution/index.vue
new file mode 100644
index 0000000..d3d56eb
--- /dev/null
+++ b/components/content/brownian-distribution/index.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import BrownianDistributionExperiment from './BrownianDistributionExperiment.vue'
+import { useDark, useToggle } from '@vueuse/core'
+import { colors } from './constants'
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+</script>
+
+<template>
+  <TresCanvas :clear-color="isDark ? colors.DARK : colors.LIGHT" window-size>
+    <BrownianDistributionExperiment />
+  </TresCanvas>
+  <button
+    title="Toggle dark mode"
+    class="rounded-full fixed z-10 bottom-5 right-15 p-1"
+    :class="{ 'bg-white': !isDark, 'bg-dark': isDark }"
+    @click="toggleDark()"
+  >
+    <i
+      v-if="isDark"
+      class="i-carbon-sun w-5 h-5 "
+    />
+    <i
+      v-else
+      class="i-carbon-moon w-5 h-5 "
+    />
+  </button>
+</template>
diff --git a/content/experiments/brownian-distribution.md b/content/experiments/brownian-distribution.md
new file mode 100644
index 0000000..6e9d9a2
--- /dev/null
+++ b/content/experiments/brownian-distribution.md
@@ -0,0 +1,9 @@
+---
+title: Basic Brownian distribution
+author: andretchen0
+description: Basic scene with grouping/parenting and Brownian distribution of instances
+tags: ['useLoop']
+---
+
+::brownian-distribution
+::
\ No newline at end of file
diff --git a/package.json b/package.json
index 83b409b..45b81b9 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue"
   },
   "dependencies": {
-    "@tresjs/post-processing": "1.0.0",
+    "@tresjs/post-processing": "1.0.0-next.1",
     "mdast-util-to-string": "^4.0.0",
     "three": "^0.171.0",
     "three-custom-shader-material": "^6.2.1",
@@ -39,4 +39,4 @@
     "postprocessing": "6.36.5",
     "vite-svg-loader": "^5.1.0"
   }
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08cdaef..ce07bd2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@tresjs/post-processing':
-        specifier: 1.0.0
-        version: 1.0.0(@tresjs/core@4.3.1(three@0.171.0)(vue@3.5.13(typescript@5.7.2)))(three@0.171.0)(vue@3.5.13(typescript@5.7.2))
+        specifier: 1.0.0-next.1
+        version: 1.0.0-next.1(@tresjs/core@4.3.1(three@0.171.0)(vue@3.5.13(typescript@5.7.2)))(three@0.171.0)(vue@3.5.13(typescript@5.7.2))
       mdast-util-to-string:
         specifier: ^4.0.0
         version: 4.0.0
@@ -1557,11 +1557,11 @@ packages:
     peerDependencies:
       three: '>=0.133'
 
-  '@tresjs/post-processing@1.0.0':
-    resolution: {integrity: sha512-SGRdr9NL+w06JwcR9nGIUuPFAHUyD9wg3KlKeK/ITp7933+Phb60bCIe2B/N574gc3O5/vejMttnMp6B2pxTRg==}
+  '@tresjs/post-processing@1.0.0-next.1':
+    resolution: {integrity: sha512-ZjhA+pQO+hehHoGXzZKSXWB+CPjNoHoxiXE+H1d56/dXHP2CXMooMmXG4a9Cy4G6XNC9jibZpuJ+oHPKAiU4Nw==}
     peerDependencies:
       '@tresjs/core': '>=4.0'
-      three: '>=0.169'
+      three: '>=0.133'
       vue: '>=3.4'
 
   '@trysound/sax@0.2.0':
@@ -2319,9 +2319,6 @@ packages:
   '@vueuse/core@11.1.0':
     resolution: {integrity: sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==}
 
-  '@vueuse/core@11.3.0':
-    resolution: {integrity: sha512-7OC4Rl1f9G8IT6rUfi9JrKiXy4bfmHhZ5x2Ceojy0jnd3mHNEvV4JaRygH362ror6/NZ+Nl+n13LPzGiPN8cKA==}
-
   '@vueuse/head@2.0.0':
     resolution: {integrity: sha512-ykdOxTGs95xjD4WXE4na/umxZea2Itl0GWBILas+O4oqS7eXIods38INvk3XkJKjqMdWPcpCyLX/DioLQxU1KA==}
     peerDependencies:
@@ -2377,9 +2374,6 @@ packages:
   '@vueuse/metadata@11.1.0':
     resolution: {integrity: sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==}
 
-  '@vueuse/metadata@11.3.0':
-    resolution: {integrity: sha512-pwDnDspTqtTo2HwfLw4Rp6yywuuBdYnPYDq+mO38ZYKGebCUQC/nVj/PXSiK9HX5otxLz8Fn7ECPbjiRz2CC3g==}
-
   '@vueuse/nuxt@11.1.0':
     resolution: {integrity: sha512-ZPYigcqgPPe9vk9nBHLF8p0zshX8qvWV/ox1Y4GdV4k2flPiw7+2THNTpU2NZDBXSOXlhB2sao+paGCsvJm/Qw==}
     peerDependencies:
@@ -2391,9 +2385,6 @@ packages:
   '@vueuse/shared@11.1.0':
     resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
 
-  '@vueuse/shared@11.3.0':
-    resolution: {integrity: sha512-P8gSSWQeucH5821ek2mn/ciCk+MS/zoRKqdQIM3bHq6p7GXDAJLmnRRKmF5F65sAVJIfzQlwR3aDzwCn10s8hA==}
-
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
 
@@ -8912,12 +8903,13 @@ snapshots:
       - vue
       - webpack
 
-  '@tresjs/post-processing@1.0.0(@tresjs/core@4.3.1(three@0.171.0)(vue@3.5.13(typescript@5.7.2)))(three@0.171.0)(vue@3.5.13(typescript@5.7.2))':
+  '@tresjs/post-processing@1.0.0-next.1(@tresjs/core@4.3.1(three@0.171.0)(vue@3.5.13(typescript@5.7.2)))(three@0.171.0)(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@tresjs/core': 4.3.1(three@0.171.0)(vue@3.5.13(typescript@5.7.2))
-      '@vueuse/core': 11.3.0(vue@3.5.13(typescript@5.7.2))
+      '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.7.2))
       postprocessing: 6.36.5(three@0.171.0)
       three: 0.171.0
+      three-stdlib: 2.32.2(three@0.171.0)
       vue: 3.5.13(typescript@5.7.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -10356,16 +10348,6 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@11.3.0(vue@3.5.13(typescript@5.7.2))':
-    dependencies:
-      '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 11.3.0
-      '@vueuse/shared': 11.3.0(vue@3.5.13(typescript@5.7.2))
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
   '@vueuse/head@2.0.0(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@unhead/dom': 1.11.14
@@ -10397,8 +10379,6 @@ snapshots:
 
   '@vueuse/metadata@11.1.0': {}
 
-  '@vueuse/metadata@11.3.0': {}
-
   '@vueuse/nuxt@11.1.0(magicast@0.3.5)(nuxt@3.15.0(@parcel/watcher@2.5.0)(@types/node@22.10.2)(db0@0.2.1)(eslint@9.17.0(jiti@2.4.2))(ioredis@5.4.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.29.1)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.2)(vite@6.0.6(@types/node@22.10.2)(jiti@2.4.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(yaml@2.7.0))(rollup@4.29.1)(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@nuxt/kit': 3.15.0(magicast@0.3.5)(rollup@4.29.1)
@@ -10428,13 +10408,6 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/shared@11.3.0(vue@3.5.13(typescript@5.7.2))':
-    dependencies:
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.2))
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
   '@webassemblyjs/ast@1.14.1':
     dependencies:
       '@webassemblyjs/helper-numbers': 1.13.2
diff --git a/public/brownian-distribution.png b/public/brownian-distribution.png
new file mode 100644
index 0000000..ae2c8d0
Binary files /dev/null and b/public/brownian-distribution.png differ