From d7bb55d96ece6283a6d3e443e25e318e67189b51 Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Sat, 6 Sep 2025 10:59:28 +0200
Subject: [PATCH 1/6] feat: add CameraShake component

---
 docs/component-list/components.ts             |   1 +
 .../vue/src/pages/staging/CameraShakeDemo.vue | 130 +++++++++++++++
 playground/vue/src/router/routes/staging.ts   |   5 +
 src/core/staging/CameraShake.vue              | 152 ++++++++++++++++++
 src/core/staging/index.ts                     |   2 +
 5 files changed, 290 insertions(+)
 create mode 100644 playground/vue/src/pages/staging/CameraShakeDemo.vue
 create mode 100644 src/core/staging/CameraShake.vue

diff --git a/docs/component-list/components.ts b/docs/component-list/components.ts
index ce204469e..80c3d9583 100644
--- a/docs/component-list/components.ts
+++ b/docs/component-list/components.ts
@@ -124,6 +124,7 @@ export default [
       { text: 'AccumulativeShadows', link: '/guide/staging/accumulative-shadows' },
       { text: 'ContactShadows', link: '/guide/staging/contact-shadows' },
       { text: 'Precipitation', link: '/guide/staging/precipitation' },
+      { text: 'CameraShake', link: '/guide/staging/camera-shake' },
       { text: 'Sparkles', link: '/guide/staging/sparkles' },
       { text: 'Ocean', link: '/guide/staging/ocean' },
       { text: 'Fit', link: '/guide/staging/fit' },
diff --git a/playground/vue/src/pages/staging/CameraShakeDemo.vue b/playground/vue/src/pages/staging/CameraShakeDemo.vue
new file mode 100644
index 000000000..720b6b2ae
--- /dev/null
+++ b/playground/vue/src/pages/staging/CameraShakeDemo.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { CameraShake, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { NoToneMapping, SRGBColorSpace } from 'three'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#333',
+  alpha: true,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const {
+  intensity,
+  decay,
+  decayRate,
+  maxYaw,
+  maxPitch,
+  maxRoll,
+  yawFrequency,
+  pitchFrequency,
+  rollFrequency,
+} = useControls({
+  intensity: {
+    label: 'Intensity',
+    value: 1,
+    min: 0,
+    max: 2,
+    step: 0.01,
+  },
+  decay: false,
+  decayRate: {
+    label: 'Decay Rate',
+    value: 0.65,
+    min: 0,
+    max: 1,
+    step: 0.01,
+  },
+  maxYaw: {
+    label: 'Max Yaw',
+    value: 0.01,
+    min: 0,
+    max: 0.2,
+    step: 0.001,
+  },
+  maxPitch: {
+    label: 'Max Pitch',
+    value: 0.01,
+    min: 0,
+    max: 0.2,
+    step: 0.001,
+  },
+  maxRoll: {
+    label: 'Max Roll',
+    value: 0.01,
+    min: 0,
+    max: 0.2,
+    step: 0.001,
+  },
+  yawFrequency: {
+    label: 'Yaw Freq',
+    value: 0.5,
+    min: 0,
+    max: 2,
+    step: 0.01,
+  },
+  pitchFrequency: {
+    label: 'Pitch Freq',
+    value: 0.5,
+    min: 0,
+    max: 2,
+    step: 0.01,
+  },
+  rollFrequency: {
+    label: 'Roll Freq',
+    value: 0.4,
+    min: 0,
+    max: 2,
+    step: 0.01,
+  },
+}, {
+  uuid: 'camera-shake-demo',
+})
+</script>
+
+<template>
+  <TresLeches
+    class="top-0 important-right-4"
+    uuid="camera-shake-demo"
+  />
+
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+
+    <TresMesh>
+      <TresBoxGeometry :args="[1, 1, 1]" />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
+
+    <TresMesh :position-x="-2.5">
+      <TresSphereGeometry :args="[.5, 32, 32]" />
+      <TresMeshBasicMaterial color="hotpink" />
+    </TresMesh>
+
+    <TresMesh :position-x="2.5">
+      <TresConeGeometry :args="[.5, 1, 32]" />
+      <TresMeshBasicMaterial color="lime" />
+    </TresMesh>
+
+    <TresGridHelper :args="[10, 10]" />
+
+    <OrbitControls make-default />
+
+    <CameraShake
+      :intensity="intensity.value"
+      :decay="decay.value"
+      :decayRate="decayRate.value"
+      :maxYaw="maxYaw.value"
+      :maxPitch="maxPitch.value"
+      :maxRoll="maxRoll.value"
+      :yawFrequency="yawFrequency.value"
+      :pitchFrequency="pitchFrequency.value"
+      :rollFrequency="rollFrequency.value"
+    />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/router/routes/staging.ts b/playground/vue/src/router/routes/staging.ts
index a2e231d21..d23f857ac 100644
--- a/playground/vue/src/router/routes/staging.ts
+++ b/playground/vue/src/router/routes/staging.ts
@@ -4,6 +4,11 @@ export const stagingRoutes = [
     name: 'Smoke',
     component: () => import('../../pages/staging/SmokeDemo.vue'),
   },
+  {
+    path: '/staging/camera-shake',
+    name: 'CameraShake',
+    component: () => import('../../pages/staging/CameraShakeDemo.vue'),
+  },
   {
     path: '/staging/precipitation',
     name: 'Precipitation',
diff --git a/src/core/staging/CameraShake.vue b/src/core/staging/CameraShake.vue
new file mode 100644
index 000000000..6ff7153ca
--- /dev/null
+++ b/src/core/staging/CameraShake.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { useLoop, useTresContext } from '@tresjs/core'
+import { useEventListener } from '@vueuse/core'
+import { SimplexNoise } from 'three-stdlib'
+import { onUnmounted, shallowRef, toRefs, watch } from 'vue'
+
+/**
+ * Props for CameraShake
+ */
+export interface CameraShakeProps {
+  /**
+   * The intensity of the shake.
+   * @default 1
+   * @type {number}
+   */
+  intensity?: number
+  /**
+   * If true, the intensity decays over time.
+   * @default false
+   * @type {boolean}
+   */
+  decay?: boolean
+  /**
+   * How fast the intensity decays when `decay` is true.
+   * @default 0.65
+   * @type {number}
+   */
+  decayRate?: number
+  /**
+   * Maximum yaw angle in radians.
+   * @default 0.01
+   * @type {number}
+   */
+  maxYaw?: number
+  /**
+   * Maximum pitch angle in radians.
+   * @default 0.01
+   * @type {number}
+   */
+  maxPitch?: number
+  /**
+   * Maximum roll angle in radians.
+   * @default 0.01
+   * @type {number}
+   */
+  maxRoll?: number
+  /**
+   * Frequency of yaw oscillation.
+   * @default 0.1
+   * @type {number}
+   */
+  yawFrequency?: number
+  /**
+   * Frequency of pitch oscillation.
+   * @default 0.1
+   * @type {number}
+   */
+  pitchFrequency?: number
+  /**
+   * Frequency of roll oscillation.
+   * @default 0.1
+   * @type {number}
+   */
+  rollFrequency?: number
+}
+
+const props = withDefaults(defineProps<CameraShakeProps>(), {
+  intensity: 1,
+  decay: false,
+  decayRate: 0.65,
+  maxYaw: 0.01,
+  maxPitch: 0.01,
+  maxRoll: 0.01,
+  yawFrequency: 0.1,
+  pitchFrequency: 0.1,
+  rollFrequency: 0.1,
+})
+
+const {
+  intensity,
+  decay,
+  decayRate,
+  maxYaw,
+  maxPitch,
+  maxRoll,
+  yawFrequency,
+  pitchFrequency,
+  rollFrequency,
+} = toRefs(props)
+
+const { camera, controls } = useTresContext()
+
+let cleanUpFn: ReturnType<typeof useEventListener> | null = null
+
+const currentIntensity = shallowRef(props.intensity)
+const initialRotation = shallowRef(camera.activeCamera.value?.rotation.clone())
+
+const yawNoise = new SimplexNoise()
+const pitchNoise = new SimplexNoise()
+const rollNoise = new SimplexNoise()
+
+watch(intensity, (newVal) => {
+  currentIntensity.value = newVal
+})
+
+function updateInitialRotation() {
+  if (camera.activeCamera.value) {
+    initialRotation.value = camera.activeCamera.value.rotation.clone()
+  }
+}
+
+watch([camera.activeCamera, controls], () => {
+  if (!camera.activeCamera.value) { return }
+
+  updateInitialRotation()
+
+  if (controls.value) {
+    cleanUpFn = useEventListener(controls.value as any, 'change', updateInitialRotation)
+  }
+})
+
+const { onBeforeRender } = useLoop()
+
+onBeforeRender(({ elapsed, delta }) => {
+  if (!camera.activeCamera.value) { return }
+
+  const shake = currentIntensity.value ** 2
+
+  const yaw = maxYaw.value * shake * yawNoise.noise(elapsed * yawFrequency.value, 1)
+  const pitch = maxPitch.value * shake * pitchNoise.noise(elapsed * pitchFrequency.value, 1)
+  const roll = maxRoll.value * shake * rollNoise.noise(elapsed * rollFrequency.value, 1)
+
+  camera.activeCamera.value.rotation.set(
+    initialRotation.value.x + pitch,
+    initialRotation.value.y + yaw,
+    initialRotation.value.z + roll,
+  )
+
+  if (decay.value && currentIntensity.value > 0) {
+    currentIntensity.value -= decayRate.value * delta
+    if (currentIntensity.value < 0) { currentIntensity.value = 0 }
+  }
+})
+
+onUnmounted(() => {
+  cleanUpFn?.()
+})
+</script>
+
+<template>
+  <slot></slot>
+</template>
diff --git a/src/core/staging/index.ts b/src/core/staging/index.ts
index 02248a415..156809910 100644
--- a/src/core/staging/index.ts
+++ b/src/core/staging/index.ts
@@ -11,6 +11,7 @@ import CircleShadow from './CircleShadow.vue'
 import RandomizedLights from './RandomizedLights/component.vue'
 import Sky from './Sky.vue'
 import Smoke from './Smoke.vue'
+import CameraShake from './CameraShake.vue'
 import SoftShadows from './SoftShadows.vue'
 import Sparkles from './Sparkles/component.vue'
 import Stage from './Stage.vue'
@@ -23,6 +24,7 @@ export {
   Align,
   Backdrop,
   Bounds,
+  CameraShake,
   CircleShadow,
   ContactShadows,
   Environment,

From ca63f468f0ae4ebfe12f9e2d309f0020e444971b Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Sat, 6 Sep 2025 11:02:15 +0200
Subject: [PATCH 2/6] fix: correct CameraShake behavior

---
 src/core/staging/CameraShake.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/core/staging/CameraShake.vue b/src/core/staging/CameraShake.vue
index 6ff7153ca..375c2c321 100644
--- a/src/core/staging/CameraShake.vue
+++ b/src/core/staging/CameraShake.vue
@@ -99,8 +99,14 @@ const yawNoise = new SimplexNoise()
 const pitchNoise = new SimplexNoise()
 const rollNoise = new SimplexNoise()
 
+function constrainIntensity() {
+  if (currentIntensity.value < 0) { currentIntensity.value = 0 }
+  if (currentIntensity.value > 1) { currentIntensity.value = 1 }
+}
+
 watch(intensity, (newVal) => {
   currentIntensity.value = newVal
+  constrainIntensity()
 })
 
 function updateInitialRotation() {
@@ -138,7 +144,7 @@ onBeforeRender(({ elapsed, delta }) => {
 
   if (decay.value && currentIntensity.value > 0) {
     currentIntensity.value -= decayRate.value * delta
-    if (currentIntensity.value < 0) { currentIntensity.value = 0 }
+    constrainIntensity()
   }
 })
 

From 6effe932b9246ed1d2021ee1f8e75034b288c20c Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Sat, 6 Sep 2025 14:50:41 +0200
Subject: [PATCH 3/6] docs: add CameraShake documentation and playground demo

---
 .../theme/components/CameraShakeDemo.vue      | 84 +++++++++++++++++++
 docs/guide/staging/camera-shake.md            | 54 ++++++++++++
 docs/public/camera-shake/fake-hud.svg         |  1 +
 3 files changed, 139 insertions(+)
 create mode 100644 docs/.vitepress/theme/components/CameraShakeDemo.vue
 create mode 100644 docs/guide/staging/camera-shake.md
 create mode 100644 docs/public/camera-shake/fake-hud.svg

diff --git a/docs/.vitepress/theme/components/CameraShakeDemo.vue b/docs/.vitepress/theme/components/CameraShakeDemo.vue
new file mode 100644
index 000000000..78f1ea0fd
--- /dev/null
+++ b/docs/.vitepress/theme/components/CameraShakeDemo.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { Backdrop, CameraShake, ContactShadows, Environment, OrbitControls, useGLTF } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { NoToneMapping, SRGBColorSpace } from 'three'
+import { computed } from 'vue'
+
+const gl = {
+  clearColor: '#333',
+  alpha: true,
+  shadows: true,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const { state } = useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/ugly-naked-bunny/ugly-naked-bunny-animated.gltf', { draco: true })
+
+const model = computed(() => state?.value?.scene)
+</script>
+
+<template>
+  <div class="fdsfsdfds"></div>
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera :position="[0, 1.25, 3]" />
+
+    <TresGroup name="model" :position="[0, -0.5, 0]" :scale="[0.5, 0.5, 0.5]">
+      <primitive v-if="model" :object="model" />
+    </TresGroup>
+
+    <Backdrop
+      :floor="5"
+      :segments="10"
+      receive-shadow
+      :scale="[20, 8.5, 1]"
+      :position="[0, -0.5, -2]"
+    >
+      <TresMeshPhysicalMaterial color="orange" />
+    </Backdrop>
+
+    <ContactShadows
+      :position="[0, -0.475, 0]"
+      :scale="5"
+      :blur="1"
+      :opacity="0.5"
+    />
+
+    <TresAmbientLight :intensity="1" />
+
+    <Suspense>
+      <Environment preset="dawn" :environment-intensity="0.5" />
+    </Suspense>
+
+    <OrbitControls make-default />
+
+    <CameraShake
+      :intensity="1"
+      :maxYaw="0.1"
+      :maxPitch="0.05"
+      :maxRoll="0.05"
+      :yawFrequency="0.05"
+      :pitchFrequency="0.2"
+      :rollFrequency="0.2"
+      :decayRate="0.65"
+    />
+  </TresCanvas>
+</template>
+
+<style scoped>
+.fdsfsdfds {
+  position: absolute;
+  z-index: 999;
+  width: 90%;
+  height: 100%;
+  background-image: url('/camera-shake/fake-hud.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  pointer-events: none;
+  left: 50%;
+  transform: translateX(-50%);
+  aspect-ratio: 486 / 274;
+}
+</style>
diff --git a/docs/guide/staging/camera-shake.md b/docs/guide/staging/camera-shake.md
new file mode 100644
index 000000000..d72b4f898
--- /dev/null
+++ b/docs/guide/staging/camera-shake.md
@@ -0,0 +1,54 @@
+# Camera Shake
+
+`<CameraShake />` is a component that adds **natural**, *noise-driven motion* to the **active camera**.
+It offers **per-axis control**, **adjustable intensity**, and *optional decay* — perfect for *handheld feel*, *footsteps*, *impacts*, or *engine rumble*.
+
+<DocsDemo>
+  <CameraShakeDemo />
+</DocsDemo>
+
+<details>
+  <summary>Demo code</summary>
+
+  <<< @/.vitepress/theme/components/CameraShakeDemo.vue{0}
+</details>
+
+## Usage
+
+You can use `<CameraShake />` component without passing any props, but still if you want you can tweak the props to find the best setup for you
+
+```vue{8}
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+
+    <!-- YOUR SCENE -->
+
+    <OrbitControls make-default />
+    <CameraShake :intensity="0.5" />
+  </TresCanvas>
+</template>
+```
+
+::: info
+`<CameraShake />` is fully compatible with **`<OrbitControls />`**.
+To ensure it works *as expected*, make sure to add the **`make-default`** prop:
+
+```vue
+<OrbitControls make-default />
+```
+:::
+
+## Props
+
+| **Prop**            | **Description**                                                                                                   | **Default** |
+|---------------------|-------------------------------------------------------------------------------------------------------------------|-------------|
+| `intensity`         | **Controls the overall strength** of the shake effect.                                                            | `1`         |
+| `decay`             | **Enables gradual reduction** of shake intensity over time.                                                       | `false`     |
+| `decayRate`         | **Sets the speed** at which intensity decays per second when `decay` is enabled. Multiplied by `delta` each frame.| `0.65`      |
+| `maxYaw`            | **Maximum amplitude** for yaw (horizontal rotation) in radians.                                                   | `0.01`      |
+| `maxPitch`          | **Maximum amplitude** for pitch (vertical rotation) in radians.                                                   | `0.01`      |
+| `maxRoll`           | **Maximum amplitude** for roll (tilt) in radians.                                                                 | `0.01`      |
+| `yawFrequency`      | Frequency of **yaw oscillation**, used with elapsed time in Simplex noise calculations.                           | `0.1`       |
+| `pitchFrequency`    | Frequency of **pitch oscillation**.                                                                               | `0.1`       |
+| `rollFrequency`     | Frequency of **roll oscillation**.                                                                                | `0.1`       |
diff --git a/docs/public/camera-shake/fake-hud.svg b/docs/public/camera-shake/fake-hud.svg
new file mode 100644
index 000000000..d894791ea
--- /dev/null
+++ b/docs/public/camera-shake/fake-hud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="486" height="274" fill="none" viewBox="0 0 486 274"><path stroke="#fff" stroke-width="1.5" d="M2 2h482v270H2z"/><path stroke="#fff" stroke-width="2" d="M2 40V2M40 2H2M484 40V2M446 2h38M2 234v38M40 272H2M484 234v38M446 272h38"/><path stroke="#fff" stroke-width="1.5" d="M243 120v34M226 137h34"/><text x="20" y="35" fill="#fff" font-family="Arial" font-size="18">REC</text><circle cx="65" cy="27" r="6" fill="red"/><path stroke="#fff" stroke-width="1.5" d="M420 18h40v16h-40z"/><path fill="#fff" d="M461 22h5v8h-5zM422 20h30v12h-30z"/><text x="50%" y="260" fill="#fff" font-family="Courier New, monospace" font-size="20" text-anchor="middle">00:00:00</text></svg>
\ No newline at end of file

From ac1a4fba558ed77b3aa35a8ef20dfff32cf53ddb Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Sat, 6 Sep 2025 15:00:45 +0200
Subject: [PATCH 4/6] chore: apply global corrections to CameraShake source,
 docs and demo

---
 .../.vitepress/theme/components/CameraShakeDemo.vue | 13 ++++++-------
 src/core/staging/CameraShake.vue                    |  7 +++++++
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/theme/components/CameraShakeDemo.vue b/docs/.vitepress/theme/components/CameraShakeDemo.vue
index 78f1ea0fd..e7b583e67 100644
--- a/docs/.vitepress/theme/components/CameraShakeDemo.vue
+++ b/docs/.vitepress/theme/components/CameraShakeDemo.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
 import { Backdrop, CameraShake, ContactShadows, Environment, OrbitControls, useGLTF } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { NoToneMapping, SRGBColorSpace } from 'three'
+import { SRGBColorSpace } from 'three'
 import { computed } from 'vue'
 
 const gl = {
   clearColor: '#333',
   alpha: true,
-  shadows: true,
   outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
 }
 
 const { state } = useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/ugly-naked-bunny/ugly-naked-bunny-animated.gltf', { draco: true })
@@ -18,7 +16,8 @@ const model = computed(() => state?.value?.scene)
 </script>
 
 <template>
-  <div class="fdsfsdfds"></div>
+  <div class="hud-overlay"></div>
+
   <TresCanvas
     v-bind="gl"
   >
@@ -45,13 +44,13 @@ const model = computed(() => state?.value?.scene)
       :opacity="0.5"
     />
 
-    <TresAmbientLight :intensity="1" />
+    <TresAmbientLight :intensity="0.5" />
 
     <Suspense>
       <Environment preset="dawn" :environment-intensity="0.5" />
     </Suspense>
 
-    <OrbitControls make-default />
+    <OrbitControls make-default :max-polar-angle="Math.PI / 2" />
 
     <CameraShake
       :intensity="1"
@@ -67,7 +66,7 @@ const model = computed(() => state?.value?.scene)
 </template>
 
 <style scoped>
-.fdsfsdfds {
+.hud-overlay {
   position: absolute;
   z-index: 999;
   width: 90%;
diff --git a/src/core/staging/CameraShake.vue b/src/core/staging/CameraShake.vue
index 375c2c321..111f4a0c9 100644
--- a/src/core/staging/CameraShake.vue
+++ b/src/core/staging/CameraShake.vue
@@ -130,6 +130,13 @@ const { onBeforeRender } = useLoop()
 onBeforeRender(({ elapsed, delta }) => {
   if (!camera.activeCamera.value) { return }
 
+  if (!decay.value && currentIntensity.value < intensity.value) {
+    currentIntensity.value = Math.min(
+      intensity.value,
+      currentIntensity.value + decayRate.value * delta,
+    )
+  }
+
   const shake = currentIntensity.value ** 2
 
   const yaw = maxYaw.value * shake * yawNoise.noise(elapsed * yawFrequency.value, 1)

From d89e75f2f3e953ba37afc76817d15ab7231bb319 Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Sat, 6 Sep 2025 15:13:15 +0200
Subject: [PATCH 5/6] docs: update CameraShake documentation

---
 docs/guide/staging/camera-shake.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/staging/camera-shake.md b/docs/guide/staging/camera-shake.md
index d72b4f898..839a32f3a 100644
--- a/docs/guide/staging/camera-shake.md
+++ b/docs/guide/staging/camera-shake.md
@@ -1,7 +1,7 @@
 # Camera Shake
 
 `<CameraShake />` is a component that adds **natural**, *noise-driven motion* to the **active camera**.
-It offers **per-axis control**, **adjustable intensity**, and *optional decay* — perfect for *handheld feel*, *footsteps*, *impacts*, or *engine rumble*.
+It offers **per-axis control**, **adjustable intensity**, and *optional decay* — perfect for *handheld feel*, *footsteps*, *impacts*, or *engine rumble* — and is based on the [Drei `CameraShake` component](https://drei.docs.pmnd.rs/staging/camera-shake#camerashake).
 
 <DocsDemo>
   <CameraShakeDemo />

From ba93b50fd6e25e7a2d9071b2274b214655d65d6f Mon Sep 17 00:00:00 2001
From: Damien Montastier <montastier.damien@gmail.com>
Date: Tue, 14 Oct 2025 20:11:20 +0200
Subject: [PATCH 6/6] fix: change zIndex hud demo

---
 docs/.vitepress/theme/components/CameraShakeDemo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/theme/components/CameraShakeDemo.vue b/docs/.vitepress/theme/components/CameraShakeDemo.vue
index e7b583e67..6c88ac676 100644
--- a/docs/.vitepress/theme/components/CameraShakeDemo.vue
+++ b/docs/.vitepress/theme/components/CameraShakeDemo.vue
@@ -68,7 +68,7 @@ const model = computed(() => state?.value?.scene)
 <style scoped>
 .hud-overlay {
   position: absolute;
-  z-index: 999;
+  z-index: 2;
   width: 90%;
   height: 100%;
   background-image: url('/camera-shake/fake-hud.svg');