gate scene intro done

src/components/GateScene/GateMiddle.tsx

@@ -1,54 +1,37 @@
-import React, { useMemo } from "react";
+import React from "react";
+import gateText from "../../static/sprite/gate_pass.png";
+import gateTextUnderline from "../../static/sprite/gate_pass_underline.png";
+import gateBlueBinarySingularOne from "../../static/sprite/blue_binary_singular_one.png";
+import gateBlueBinarySingularZero from "../../static/sprite/blue_binary_singular_zero.png";
+import { useLoader } from "react-three-fiber";
 import * as THREE from "three";
+import GateMiddleObject from "./GateMiddleObject";
 
 const GateMiddle = () => {
-  const uniforms = useMemo(
-    () => ({
-      color1: {
-        value: new THREE.Color("white"),
-      },
-      color2: {
-        value: new THREE.Color("red"),
-      },
-    }),
-    []
-  );
-
-  const vertexShader = `
-    varying vec2 vUv;
-
-    void main() {
-        vUv = uv;
-        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    }
-    `;
-
-  const fragmentShader = `
-    uniform vec3 color1;
-    uniform vec3 color2;
-    uniform float alpha;
-
-    varying vec2 vUv;
-    
-    void main() {
-        float alpha = smoothstep(0.0, 1.0, vUv.y);
-        float colorMix = smoothstep(1.0, 2.0, 1.8);
-
-        gl_FragColor = vec4(mix(color1, color2, colorMix), alpha);
-    }
-      `;
+  const gatePassTexture = useLoader(THREE.TextureLoader, gateText);
+  const gatePassUnderline = useLoader(THREE.TextureLoader, gateTextUnderline);
 
   return (
     <>
-      <mesh scale={[2,2,2]}>
-        <planeBufferGeometry attach="geometry"></planeBufferGeometry>
-        <shaderMaterial
+      <sprite scale={[1.5, 0.24, 0]} position={[0, 1.1, 0.07]} renderOrder={3}>
+        <spriteMaterial
           attach="material"
-          vertexShader={vertexShader}
-          fragmentShader={fragmentShader}
-          uniforms={uniforms}
+          map={gatePassTexture}
+          transparent={true}
+          depthTest={false}
         />
-      </mesh>
+      </sprite>
+
+      <sprite scale={[4.2, 0.01, 0]} position={[0, 0.98, 0.07]} renderOrder={3}>
+        <spriteMaterial
+          attach="material"
+          map={gatePassUnderline}
+          transparent={true}
+          depthTest={false}
+        />
+      </sprite>
+
+      <GateMiddleObject />
     </>
   );
 };

src/components/GateScene/GateMiddleObject.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from "react";
+import BlueZero from "./GateMiddleObject/BlueZero";
+import BlueOne from "./GateMiddleObject/BlueOne";
+import { a, useSpring, useSprings } from "@react-spring/three";
+import blue_digit_positions from "../../resources/blue_digit_positions.json";
+import Mirror from "./GateMiddleObject/Mirror";
+
+const GateMiddleObject = () => {
+  const [middleGroupPos, setMiddleGroupPos] = useState<number[]>();
+
+  const [springs, set] = useSprings(44, (intIdx) => {
+    const idx = intIdx.toString();
+    return {
+      type: blue_digit_positions[idx as keyof typeof blue_digit_positions].type,
+      posX:
+        blue_digit_positions[idx as keyof typeof blue_digit_positions]
+          .initial_x,
+      posY:
+        blue_digit_positions[idx as keyof typeof blue_digit_positions]
+          .initial_y,
+      visibility: false,
+      config: { duration: 150 },
+    };
+  });
+
+  useEffect(() => {
+    set((intIdx) => {
+      const idx = intIdx.toString();
+      return {
+        posX:
+          blue_digit_positions[idx as keyof typeof blue_digit_positions]
+            .final_x,
+        posY:
+          blue_digit_positions[idx as keyof typeof blue_digit_positions]
+            .final_y,
+        delay:
+          blue_digit_positions[idx as keyof typeof blue_digit_positions].delay,
+        visibility: true,
+      };
+    });
+
+    setTimeout(() => {
+      setMiddleGroupPos([-0.15, -0.2, -0.1]);
+    }, 1400);
+  }, [set]);
+
+  const middleObjectGroupState = useSpring({
+    posX: middleGroupPos ? middleGroupPos[0] : 0,
+    posY: middleGroupPos ? middleGroupPos[1] : 0,
+    posZ: middleGroupPos ? middleGroupPos[2] : 0,
+    config: { duration: 900 },
+  });
+
+  return (
+    <>
+      <a.group
+        position-x={middleObjectGroupState.posX}
+        position-y={middleObjectGroupState.posY}
+        position-z={middleObjectGroupState.posZ}
+      >
+        {springs.map((item, idx) => {
+          if (item.type) {
+            return item.type.get() === 1 ? (
+              <BlueOne
+                posX={item.posX}
+                posY={item.posY}
+                key={idx}
+                visibility={item.visibility}
+              />
+            ) : (
+              <BlueZero
+                posX={item.posX}
+                posY={item.posY}
+                key={idx}
+                visibility={item.visibility}
+              />
+            );
+          }
+        })}
+      </a.group>
+      <Mirror />
+    </>
+  );
+};
+
+export default GateMiddleObject;

src/components/GateScene/GateMiddleObject/BlueOne.tsx

@@ -0,0 +1,78 @@
+import React, {useEffect, useMemo, useRef} from "react";
+import { useLoader } from "react-three-fiber";
+import * as THREE from "three";
+import gateBlueBinarySingularOne from "../../../static/sprite/blue_binary_singular_one.png";
+import { a, SpringValue } from "@react-spring/three";
+
+type BlueOneProps = {
+  posX: SpringValue<number>;
+  posY: SpringValue<number>;
+  visibility: SpringValue<boolean>;
+};
+
+const BlueOne = (props: BlueOneProps) => {
+  const gateBlueBinarySingularOneTex = useLoader(
+    THREE.TextureLoader,
+    gateBlueBinarySingularOne
+  );
+
+  const matRef = useRef<THREE.ShaderMaterial>();
+
+  const uniforms = useMemo(
+    () => ({
+      oneTex: { type: "t", value: gateBlueBinarySingularOneTex },
+      brightnessMultiplier: { value: 1.5 },
+    }),
+    [gateBlueBinarySingularOneTex]
+  );
+
+  const vertexShader = `
+    varying vec2 vUv;
+
+    void main() {
+        vUv = uv;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+    `;
+
+  const fragmentShaderOne = `
+    uniform sampler2D oneTex;
+    uniform float brightnessMultiplier;
+    varying vec2 vUv;
+    
+    void main() {
+      gl_FragColor = texture2D(oneTex, vUv) * brightnessMultiplier;
+    }
+      `;
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (matRef.current) {
+        matRef.current.uniforms.brightnessMultiplier.value = 3.5;
+      }
+    }, 1400);
+  }, []);
+
+  return (
+    <a.mesh
+      scale={[0.04, 0.1, 0]}
+      position-x={props.posX}
+      position-y={props.posY}
+      renderOrder={3}
+      visible={props.visibility}
+    >
+      <planeBufferGeometry attach="geometry"></planeBufferGeometry>
+      <shaderMaterial
+        fragmentShader={fragmentShaderOne}
+        vertexShader={vertexShader}
+        uniforms={uniforms}
+        attach="material"
+        transparent={true}
+        depthTest={false}
+        ref={matRef}
+      />
+    </a.mesh>
+  );
+};
+
+export default BlueOne;

src/components/GateScene/GateMiddleObject/BlueZero.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useMemo, useRef } from "react";
+import { useLoader } from "react-three-fiber";
+import * as THREE from "three";
+import gateBlueBinarySingularZero from "../../../static/sprite/blue_binary_singular_zero.png";
+import { a, SpringValue } from "@react-spring/three";
+
+type BlueZeroProps = {
+  posX: SpringValue<number>;
+  posY: SpringValue<number>;
+  visibility: SpringValue<boolean>;
+};
+
+const BlueZero = (props: BlueZeroProps) => {
+  const gateBlueBinarySingularZeroTex = useLoader(
+    THREE.TextureLoader,
+    gateBlueBinarySingularZero
+  );
+
+  const matRef = useRef<THREE.ShaderMaterial>();
+
+  const uniforms = useMemo(
+    () => ({
+      zeroTex: { type: "t", value: gateBlueBinarySingularZeroTex },
+      brightnessMultiplier: { value: 1.5 },
+    }),
+    [gateBlueBinarySingularZeroTex]
+  );
+
+  const vertexShader = `
+    varying vec2 vUv;
+
+    void main() {
+        vUv = uv;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+    `;
+
+  const fragmentShaderZero = `
+    uniform sampler2D zeroTex;
+    uniform float brightnessMultiplier;
+    
+    varying vec2 vUv;
+    
+    void main() {
+      gl_FragColor = texture2D(zeroTex, vUv) * brightnessMultiplier;
+    }
+      `;
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (matRef.current) {
+        matRef.current.uniforms.brightnessMultiplier.value = 3.5;
+      }
+    }, 1400);
+  }, []);
+
+  return (
+    <a.mesh
+      scale={[0.08, 0.1, 0]}
+      position-x={props.posX}
+      position-y={props.posY}
+      renderOrder={3}
+      visible={props.visibility}
+    >
+      <planeBufferGeometry attach="geometry"></planeBufferGeometry>
+      <shaderMaterial
+        fragmentShader={fragmentShaderZero}
+        vertexShader={vertexShader}
+        uniforms={uniforms}
+        attach="material"
+        transparent={true}
+        depthTest={false}
+        ref={matRef}
+      />
+    </a.mesh>
+  );
+};
+
+export default BlueZero;

src/components/GateScene/GateMiddleObject/Mirror.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo, useRef } from "react";
+import gateMirrorTexture from "../../../static/sprite/gate_object_texture.png";
+import { useFrame, useLoader } from "react-three-fiber";
+import * as THREE from "three";
+
+const Mirror = () => {
+  const gateMirrorTex = useLoader(THREE.TextureLoader, gateMirrorTexture);
+  const mirrorRef = useRef<THREE.Object3D>();
+
+  const textureMemo = useMemo(() => {
+    gateMirrorTex.wrapS = THREE.RepeatWrapping;
+    gateMirrorTex.wrapT = THREE.RepeatWrapping;
+
+    return gateMirrorTex;
+  }, [gateMirrorTex]);
+
+  useFrame(() => {
+    if (mirrorRef.current) {
+      mirrorRef.current.rotation.y += 0.03;
+    }
+  });
+
+  return (
+    <group ref={mirrorRef} position={[-0.1, -0.2, -0.2]}>
+      <mesh renderOrder={4} position={[0.2, 0.2, 0.2]} scale={[0.4, 1, 0.05]}>
+        <boxBufferGeometry attach="geometry"></boxBufferGeometry>
+        <meshBasicMaterial
+          attach="material"
+          map={textureMemo}
+          transparent={true}
+          depthTest={false}
+        ></meshBasicMaterial>
+      </mesh>
+    </group>
+  );
+};
+
+export default Mirror;

src/components/GateScene/GateSide.tsx

@@ -2,49 +2,107 @@ import React, { useMemo, useRef } from "react";
 import blueBinary from "../../static/sprite/blue_binary.png";
 import { useFrame, useLoader } from "react-three-fiber";
 import * as THREE from "three";
+import { OrbitControls } from "drei";
 
 const GateSide = () => {
   const blueBinaryTex = useLoader(THREE.TextureLoader, blueBinary);
 
+  // this is really fucking weird
   const texture = useMemo(() => {
     blueBinaryTex.wrapS = THREE.RepeatWrapping;
     blueBinaryTex.wrapT = THREE.RepeatWrapping;
     blueBinaryTex.repeat.set(5, 5);
-
     return blueBinaryTex;
   }, [blueBinaryTex]);
 
   useFrame(() => {
-    if (Date.now() % 2 === 0) {
-      texture.offset.y += 0.5;
+    if (Date.now() % 2 === 0 && matRef.current) {
+      matRef.current.uniforms.offset.value += 0.5;
     }
   });
+
+  const matRef = useRef<THREE.ShaderMaterial>();
+
+  const uniforms = useMemo(
+    () => ({
+      tex1: { type: "t", value: texture },
+      offset: { value: 0 },
+    }),
+    [texture]
+  );
+
+  const vertexShader = `
+    varying vec2 vUv;
+
+    void main() {
+        vUv = uv;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+    `;
+
+  const fragmentShaderLeft = `
+    uniform sampler2D tex1;
+    uniform float alpha;
+    uniform float offset;
+
+    varying vec2 vUv;
+    
+    void main() {
+        float alpha = smoothstep(0.7, 1.0, vUv.x);
+
+        vec4 t1 = texture2D(tex1,vUv * 5.0 + offset);
+        
+        gl_FragColor = mix(t1, vec4(0,0,0,0), alpha);
+    }
+      `;
+
+  const fragmentShaderRight = `
+    uniform sampler2D tex1;
+    uniform float alpha;
+    uniform float offset;
+
+    varying vec2 vUv;
+    
+    void main() {
+        float alpha = smoothstep(0.3, 1.0, vUv.x);
+
+        vec4 t1 = texture2D(tex1,vUv * 5.0 + offset);
+        
+        gl_FragColor = mix(vec4(0,0,0,0), t1, alpha) * 1.4;
+    }
+      `;
+
   return (
     <>
+      <OrbitControls />
       <mesh
         rotation={[0, 0.2, 0]}
-        position={[-1.7, 0, 1.5]}
+        position={[-1.4, 0, 1.5]}
         scale={[3, 1.5, 0]}
       >
         <planeBufferGeometry attach="geometry"></planeBufferGeometry>
-        <meshBasicMaterial
+        <shaderMaterial
           attach="material"
-          map={texture}
+          uniforms={uniforms}
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShaderLeft}
           transparent={true}
-          opacity={0.6}
+          ref={matRef}
         />
       </mesh>
       <mesh
         rotation={[0, -0.2, 0]}
-        position={[1.7, 0, 1.5]}
+        position={[0.05, 0, 1.3]}
         scale={[3, 1.5, 0]}
       >
         <planeBufferGeometry attach="geometry"></planeBufferGeometry>
-        <meshBasicMaterial
+        <shaderMaterial
           attach="material"
-          map={texture}
+          uniforms={uniforms}
+          vertexShader={vertexShader}
+          fragmentShader={fragmentShaderRight}
           transparent={true}
-          opacity={0.6}
+          ref={matRef}
         />
       </mesh>
     </>

src/components/MainScene/BlueOrb.tsx

@@ -27,7 +27,7 @@ type BlueOrbContructorProps = {
   level: string;
 };
 
-const BlueOrb = memo((props: BlueOrbContructorProps) => {
+const BlueOrb = (props: BlueOrbContructorProps) => {
   // the game only has a couple of sprite that it displays in the hub
   // dynamically importnig them would be worse for performance,
   // so we import all of them here and then use this function to
@@ -216,6 +216,6 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
       )}
     </group>
   );
-});
+};
 
 export default BlueOrb;

src/components/MainScene/Site.tsx

@@ -39,24 +39,24 @@ const Site = memo(() => {
         {Object.entries(site_a).map((blueOrb) => {
           if (
             // (blueOrb as any)[1]["unlocked_by"] === "-1" &&
-            activeLevels.includes((blueOrb as any)[0].substr(0, 2))
+            activeLevels.includes(blueOrb[0].substr(0, 2))
           )
             return (
               <BlueOrb
-                sprite={(blueOrb as any)[1]["node_name"]}
+                sprite={blueOrb[1].node_name}
                 position={
-                  (blue_orb_positions as any)[(blueOrb as any)[0].substr(2)][
-                    "position"
-                  ]
+                  blue_orb_positions[
+                    blueOrb[0].substr(2) as keyof typeof blue_orb_positions
+                  ].position
                 }
                 rotation={
-                  (blue_orb_positions as any)[(blueOrb as any)[0].substr(2)][
-                    "rotation"
-                  ]
+                  blue_orb_positions[
+                    blueOrb[0].substr(2) as keyof typeof blue_orb_positions
+                  ].rotation
                 }
-                key={(blueOrb as any)[1]["node_name"]}
-                active={(blueOrb as any)[0] === activeBlueOrbId}
-                level={(blueOrb as any)[0].substr(0, 2)}
+                key={blueOrb[1].node_name}
+                active={blueOrb[0] === activeBlueOrbId}
+                level={blueOrb[0].substr(0, 2)}
               />
             );
         })}

src/components/StateManagers/GreenTextManager.tsx

@@ -28,7 +28,6 @@ const GreenTextManager = (props: StateManagerProps) => {
 
   const toggleAndSetGreenText = useCallback(
     (newActiveBlueOrbId: string, newActiveHudId: string, delay: number) => {
-      console.log('s')
       const targetGreenText =
         site_a[newActiveBlueOrbId as keyof typeof site_a].title;
 

src/components/StateManagers/MediaImageManager.tsx

@@ -14,7 +14,6 @@ const MediaImageManager = (props: StateManagerProps) => {
         site_a[newActiveBlueOrbId as keyof typeof site_a].node_name;
       const images = image_table[node_name as keyof typeof image_table];
 
-      console.log(newActiveBlueOrbId);
       Object.values(images).forEach((img) => {
         switch (img.substr(img.length - 1)) {
           case "0":
@@ -64,9 +63,6 @@ const MediaImageManager = (props: StateManagerProps) => {
     if (props.eventState) {
       const eventAction = props.eventState.event;
       const newActiveBlueOrbId = props.eventState.newActiveBlueOrbId;
-
-      console.log(eventAction);
-      console.log(newActiveBlueOrbId);
       const dispatchedObject = dispatchObject(eventAction, newActiveBlueOrbId);
 
       if (dispatchedObject) {

src/components/StateManagers/YellowTextManager.tsx

@@ -99,7 +99,6 @@ const YellowTextManager = (props: any) => {
 
       setTimeout(() => {
         // animate it to new pos x/y
-        console.log(newActiveHudId);
         setYellowTextPosX(
           blue_orb_huds[newActiveHudId as keyof typeof blue_orb_huds]
             .big_text[0]

src/components/TextRenderer/BigLetter.tsx

@@ -4,7 +4,7 @@ import * as THREE from "three";
 import { useLoader } from "react-three-fiber";
 import orange_font_json from "../../resources/font_data/big_font.json";
 import { a, useSpring } from "@react-spring/three";
-import React, { useMemo } from "react";
+import React, {useEffect, useMemo} from "react";
 import { LetterProps } from "./TextRenderer";
 
 interface BigLetterProps extends LetterProps {

src/resources/blue_digit_positions.json

@@ -0,0 +1,364 @@
+{
+  "0": {
+    "type": 1,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.0,
+    "final_y": 0.7,
+    "delay": 50
+  },
+  "1": {
+    "type": 1,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.1,
+    "final_y": 0.7,
+    "delay": 100
+  },
+  "2": {
+    "type": 1,
+    "initial_x": -1.0,
+    "initial_y": 0.8,
+    "final_x": 0.2,
+    "final_y": 0.7,
+    "delay": 1200
+  },
+  "3": {
+    "type": 0,
+    "initial_x": -1.0,
+    "initial_y": 0.8,
+    "final_x": 0.3,
+    "final_y": 0.7,
+    "delay": 150
+  },
+
+  "4": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.0,
+    "final_y": 0.6,
+    "delay": 600
+  },
+  "5": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.1,
+    "final_y": 0.6,
+    "delay": 500
+  },
+  "6": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.2,
+    "final_y": 0.6,
+    "delay": 400
+  },
+  "7": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.3,
+    "final_y": 0.6,
+    "delay": 300
+  },
+
+  "8": {
+    "type": 1,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.0,
+    "final_y": 0.5,
+    "delay": 150
+  },
+  "9": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.1,
+    "final_y": 0.5,
+    "delay": 900
+  },
+  "10": {
+    "type": 1,
+    "initial_x": -1.0,
+    "initial_y": 0.6,
+    "final_x": 0.2,
+    "final_y": 0.5,
+    "delay": 50
+  },
+  "11": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.3,
+    "final_y": 0.5,
+    "delay": 250
+  },
+
+  "12": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.4,
+    "final_x": 0.0,
+    "final_y": 0.4,
+    "delay": 200
+  },
+  "13": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.1,
+    "final_y": 0.4,
+    "delay": 200
+  },
+  "14": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.3,
+    "final_x": 0.2,
+    "final_y": 0.4,
+    "delay": 300
+  },
+  "15": {
+    "type": 0,
+    "initial_x": -1.0,
+    "initial_y": 0.8,
+    "final_x": 0.3,
+    "final_y": 0.4,
+    "delay": 400
+  },
+
+  "16": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.4,
+    "final_x": 0.0,
+    "final_y": 0.3,
+    "delay": 650
+  },
+  "17": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.1,
+    "final_y": 0.3,
+    "delay": 400
+  },
+  "18": {
+    "type": 0,
+    "initial_x": -1.0,
+    "initial_y": 0.4,
+    "final_x": 0.2,
+    "final_y": 0.3,
+    "delay": 300
+  },
+  "19": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.3,
+    "final_x": 0.3,
+    "final_y": 0.3,
+    "delay": 1000
+  },
+
+  "20": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.4,
+    "final_x": 0.0,
+    "final_y": 0.2,
+    "delay": 800
+  },
+  "21": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.1,
+    "final_y": 0.2,
+    "delay": 700
+  },
+  "22": {
+    "type": 1,
+    "initial_x": -1.0,
+    "initial_y": 0.4,
+    "final_x": 0.2,
+    "final_y": 0.2,
+    "delay": 600
+  },
+  "23": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": -0.3,
+    "final_x": 0.3,
+    "final_y": 0.2,
+    "delay": 500
+  },
+
+  "24": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.4,
+    "final_x": 0.0,
+    "final_y": 0.1,
+    "delay": 900
+  },
+  "25": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.1,
+    "final_y": 0.1,
+    "delay": 800
+  },
+  "26": {
+    "type": 1,
+    "initial_x": -1.0,
+    "initial_y": -0.4,
+    "final_x": 0.2,
+    "final_y": 0.1,
+    "delay": 700
+  },
+  "27": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.3,
+    "final_x": 0.3,
+    "final_y": 0.1,
+    "delay": 600
+  },
+
+  "28": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.4,
+    "final_x": 0.0,
+    "final_y": 0.0,
+    "delay": 300
+  },
+  "29": {
+    "type": 1,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.1,
+    "final_y": 0.0,
+    "delay": 1100
+  },
+  "30": {
+    "type": 1,
+    "initial_x": -1.0,
+    "initial_y": -0.4,
+    "final_x": 0.2,
+    "final_y": 0.0,
+    "delay": 700
+  },
+  "31": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.3,
+    "final_x": 0.3,
+    "final_y": 0.0,
+    "delay": 900
+  },
+
+  "32": {
+    "type": 1,
+    "initial_x": -1.0,
+    "initial_y": 0.2,
+    "final_x": 0.0,
+    "final_y": -0.1,
+    "delay": 500
+  },
+  "33": {
+    "type": 1,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.1,
+    "final_y": -0.1,
+    "delay": 300
+  },
+  "34": {
+    "type": 1,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.2,
+    "final_y": -0.1,
+    "delay": 800
+  },
+  "35": {
+    "type": 1,
+    "initial_x": 1.0,
+    "initial_y": 0.3,
+    "final_x": 0.3,
+    "final_y": -0.1,
+    "delay": 900
+  },
+
+  "36": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": -0.4,
+    "final_x": 0.0,
+    "final_y": -0.2,
+    "delay": 1000
+  },
+  "37": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.1,
+    "final_y": -0.2,
+    "delay": 900
+  },
+  "38": {
+    "type": 1,
+    "initial_x": -1.0,
+    "initial_y": 0.8,
+    "final_x": 0.2,
+    "final_y": -0.2,
+    "delay": 400
+  },
+  "39": {
+    "type": 1,
+    "initial_x": -1.0,
+    "initial_y": -0.4,
+    "final_x": 0.3,
+    "final_y": -0.2,
+    "delay": 500
+  },
+
+  "40": {
+    "type": 1,
+    "initial_x": 1.0,
+    "initial_y": -0.4,
+    "final_x": 0.0,
+    "final_y": -0.3,
+    "delay": 400
+  },
+  "41": {
+    "type": 0,
+    "initial_x": 1.0,
+    "initial_y": 0.8,
+    "final_x": 0.1,
+    "final_y": -0.3,
+    "delay": 1000
+  },
+  "42": {
+    "type": 0,
+    "initial_x": -1.0,
+    "initial_y": 0.8,
+    "final_x": 0.2,
+    "final_y": -0.3,
+    "delay": 900
+  },
+  "43": {
+    "type": 1,
+    "initial_x": -1.0,
+    "initial_y": -0.4,
+    "final_x": 0.3,
+    "final_y": -0.3,
+    "delay": 1100
+  }
+}

src/scenes/MainScene.tsx

@@ -57,7 +57,7 @@ const MainScene = () => {
           <HUD />
           <TextRenderer />
           <YellowOrb />
-          {/*<Starfield />*/}
+          <Starfield />
           <GrayPlanes />
           <Lights />
           <MiddleRing />