feat(nds): add whoosh effect for nds 3d animation and for the gallery transition

app/components/NDS3D.vue

@@ -102,6 +102,8 @@ const animateIntro = () => {
   if (hasAnimated.value) return;
   hasAnimated.value = true;
 
+  assets.audio.whoosh.play();
+
   gsap
     .timeline()
     .to(
@@ -538,11 +540,6 @@ const releaseButton = () => {
 };
 
 const handleMouseDown = (event: MouseEvent) => {
-  if (!hasAnimated.value) {
-    animateIntro();
-    return;
-  }
-
   handleInteraction(event.clientX, event.clientY, (canvas, intersection) => {
     dispatchScreenEvent("mousedown", canvas, intersection);
   });
@@ -602,11 +599,6 @@ const handleTouchStart = (event: TouchEvent) => {
   swipeStartX = touch.clientX;
   swipeStartY = touch.clientY;
 
-  if (!hasAnimated.value) {
-    animateIntro();
-    return;
-  }
-
   handleInteraction(touch.clientX, touch.clientY, (canvas, intersection) => {
     dispatchScreenEvent("mousedown", canvas, intersection);
   });

app/stores/gallery.ts

@@ -114,6 +114,11 @@ export const useGalleryStore = defineStore("gallery", {
         this.shouldAnimateOutro = true;
         navigateTo("/gallery");
       }, ANIMATION.NAVIGATE_DELAY);
+
+      setTimeout(() => {
+        const { assets } = useAssets();
+        assets.audio.whooshSmall.play(0.6);
+      }, 500);
     },
 
     animateOutro() {
@@ -191,6 +196,9 @@ export const useGalleryStore = defineStore("gallery", {
         app.navigateTo("home");
         app.allowHints();
       }, ANIMATION.NAVIGATE_DELAY);
+
+      const { assets } = useAssets();
+      assets.audio.whooshSmallReverse.play(0.6);
     },
   },
 });