intro ++

app/assets/sfx/intro.js

@@ -87,6 +87,7 @@ const glassMat = new THREE.MeshPhysicalMaterial({
     envMapIntensity: 1.2,
     attenuationColor: new THREE.Color(0x88ffcc),
     attenuationDistance: 2,
+    envMapIntensity: 2.5
 })
 
 
@@ -178,6 +179,7 @@ function animate() {
     }
     if(lettersZ>1.5) {
         for(const [i, letter] of glassLetters.entries()){
+            letter.rotation.x += Math.abs(i-4)/-1000
             letter.rotation.y += (i-4)/2000
             letter.position.x += (i-4)/4000
         }
@@ -186,6 +188,7 @@ function animate() {
         lettersZ = -1
         for(const [i, letter] of glassLetters.entries()){
             letter.rotation.y = 0
+            letter.rotation.x = 0
             letter.position.x = lettersPosScale[i].position.x
             letter.position.z = lettersPosScale[i].position.z
         }        

app/assets/styles/intro.css

@@ -52,7 +52,7 @@ canvas.intro3d{
     z-index: 99;
     border-radius: 1rem;
     box-shadow: 2px 2px 10px #BAFFEF, -2px -2px 10px #BAFFEF, -2px 0 10px #BAFFEF, 0 -2px 10px #BAFFEF;
-    background: radial-gradient(#82cc50, #0a8200);
+    background: radial-gradient(#8cf44677, #14ff0078);
     padding: 2rem 3rem 1rem 3rem;
     margin-top: -68vh;
     opacity: 0;
@@ -61,6 +61,7 @@ canvas.intro3d{
     font-size: 1.3rem;
     transform: perspective(200px) rotateY(0deg) rotateX(6deg) rotateZ(0deg);
     transform-style: preserve-3d;
+    color: #FFF;
 }
 #login-dialog.show {
     opacity: 1;