Spaces:

build-small-hackathon
/

LoFinity

Running on Zero

App Files Files Community

eloigil6 commited on 18 days ago

Commit

9290e75

1 Parent(s): 76a98b2

Enhance visual presentation and camera dynamics. Updated subtitle styling in index.html, refined camera movement and lighting in main.js, and improved cloud generation in world.js. Adjusted CSS for smoother transitions and animations, enhancing overall user experience.

Browse files

Files changed (4) hide show

frontend/index.html +1 -1
frontend/main.js +52 -16
frontend/style.css +43 -8
frontend/world.js +43 -12

frontend/index.html CHANGED Viewed

@@ -19,7 +19,7 @@
 <body>
   <div id="title-overlay">
     <h1 id="title">LoFinity</h1>
-    <p id="subtitle">chill beats, freshly vended</p>
   </div>
   <canvas id="scene"></canvas>
   <script type="module" src="/static/main.js"></script>

 <body>
   <div id="title-overlay">
     <h1 id="title">LoFinity</h1>
+    <p id="subtitle">♪ chill beats, freshly vended</p>
   </div>
   <canvas id="scene"></canvas>
   <script type="module" src="/static/main.js"></script>

frontend/main.js CHANGED Viewed

@@ -26,12 +26,15 @@ const camera = new THREE.PerspectiveCamera(
   1000
 );
-// The camera stays put; we animate what it looks at.
-const CAMERA_POS = new THREE.Vector3(0, 4.8, 17);
 const LOOK_SKY = new THREE.Vector3(0, 90, -60);
 const LOOK_SCENE = new THREE.Vector3(-0.5, 2.8, -3);
-camera.position.copy(CAMERA_POS);
 camera.lookAt(LOOK_SKY);
 window.addEventListener("resize", () => {
   camera.aspect = window.innerWidth / window.innerHeight;
@@ -76,7 +79,14 @@ scene.add(new THREE.Mesh(new THREE.SphereGeometry(450, 32, 16), skyMaterial));
 scene.add(new THREE.HemisphereLight(0xcfe8ff, 0xa8b48a, 0.85));
 const sun = new THREE.DirectionalLight(0xfff2dc, 1.6);
 sun.position.set(30, 55, 20);
 sun.castShadow = true;
 sun.shadow.mapSize.set(2048, 2048);
@@ -99,30 +109,46 @@ const world = buildWorld(scene);
 // Intro: hold on the sky, then ease the gaze down to the scene
 // ---------------------------------------------------------------------------
-const HOLD_MS = 2800; // sky time after everything has loaded
-const DESCENT_MS = 3400;
-const intro = { phase: "loading", t0: 0 };
 const lookTarget = LOOK_SKY.clone();
 function startDescent() {
   if (intro.phase !== "loading") return;
   intro.phase = "descending";
   intro.t0 = performance.now();
-  document.getElementById("title-overlay").classList.add("hidden");
 }
-window.addEventListener("load", () => setTimeout(startDescent, HOLD_MS));
 const easeInOutCubic = (t) =>
   t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-// Dev helper: jump straight to the post-intro state.
 window.lofinityDebug = {
   skipIntro() {
     intro.phase = "idle";
     lookTarget.copy(LOOK_SCENE);
-    document.getElementById("title-overlay").classList.add("hidden");
   },
 };
@@ -141,14 +167,24 @@ function animate() {
     if (cloud.position.x > 170) cloud.position.x = -170;
   }
-  if (intro.phase === "descending") {
     const t = Math.min((performance.now() - intro.t0) / DESCENT_MS, 1);
-    lookTarget.lerpVectors(LOOK_SKY, LOOK_SCENE, easeInOutCubic(t));
-    if (t >= 1) intro.phase = "idle";
   } else if (intro.phase === "idle") {
-    // Gentle lofi sway
-    camera.position.x = CAMERA_POS.x + Math.sin(elapsed * 0.25) * 0.25;
-    camera.position.y = CAMERA_POS.y + Math.sin(elapsed * 0.4) * 0.12;
   }
   camera.lookAt(lookTarget);

   1000
 );
+// The camera starts high in the sky gaze and dollies down/back during the
+// descent for a touch of parallax.
+const CAM_START = new THREE.Vector3(0, 7.4, 14.5);
+const CAM_END = new THREE.Vector3(0, 4.8, 17);
 const LOOK_SKY = new THREE.Vector3(0, 90, -60);
 const LOOK_SCENE = new THREE.Vector3(-0.5, 2.8, -3);
+camera.position.copy(CAM_START);
 camera.lookAt(LOOK_SKY);
+camera.layers.enable(1); // cloud layer
 window.addEventListener("resize", () => {
   camera.aspect = window.innerWidth / window.innerHeight;
 scene.add(new THREE.HemisphereLight(0xcfe8ff, 0xa8b48a, 0.85));
+// Clouds (layer 1) get their own bounce light: white from above, cool
+// blue-gray from below — no green ground tint.
+const cloudLight = new THREE.HemisphereLight(0xf2f8ff, 0xc9d9ec, 0.9);
+cloudLight.layers.set(1);
+scene.add(cloudLight);
 const sun = new THREE.DirectionalLight(0xfff2dc, 1.6);
+sun.layers.enable(1);
 sun.position.set(30, 55, 20);
 sun.castShadow = true;
 sun.shadow.mapSize.set(2048, 2048);
 // Intro: hold on the sky, then ease the gaze down to the scene
 // ---------------------------------------------------------------------------
+const HOLD_MS = 3000; // sky time after everything (fonts included) has loaded
+const DESCENT_MS = 4600;
+const intro = { phase: "loading", t0: 0, idleStart: 0 };
 const lookTarget = LOOK_SKY.clone();
+const overlay = document.getElementById("title-overlay");
 function startDescent() {
   if (intro.phase !== "loading") return;
   intro.phase = "descending";
   intro.t0 = performance.now();
+  overlay.classList.add("hidden");
 }
+const pageLoaded = new Promise((resolve) =>
+  document.readyState === "complete"
+    ? resolve()
+    : window.addEventListener("load", resolve)
+);
+Promise.all([pageLoaded, document.fonts.ready]).then(() =>
+  setTimeout(startDescent, HOLD_MS)
+);
 const easeInOutCubic = (t) =>
   t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+// Dev helpers: jump straight to either end of the intro.
 window.lofinityDebug = {
   skipIntro() {
     intro.phase = "idle";
+    intro.idleStart = 0;
+    camera.position.copy(CAM_END);
     lookTarget.copy(LOOK_SCENE);
+    overlay.classList.add("hidden");
+  },
+  holdSky() {
+    intro.phase = "held";
+    camera.position.copy(CAM_START);
+    lookTarget.copy(LOOK_SKY);
+    overlay.classList.remove("hidden");
   },
 };
     if (cloud.position.x > 170) cloud.position.x = -170;
   }
+  if (intro.phase === "loading" || intro.phase === "held") {
+    // Barely-there float while gazing at the sky
+    camera.position.y = CAM_START.y + Math.sin(elapsed * 0.5) * 0.08;
+  } else if (intro.phase === "descending") {
     const t = Math.min((performance.now() - intro.t0) / DESCENT_MS, 1);
+    const e = easeInOutCubic(t);
+    camera.position.lerpVectors(CAM_START, CAM_END, e);
+    lookTarget.lerpVectors(LOOK_SKY, LOOK_SCENE, e);
+    if (t >= 1) {
+      intro.phase = "idle";
+      intro.idleStart = elapsed;
+    }
   } else if (intro.phase === "idle") {
+    // Gentle lofi sway, ramping in so the descent lands without a jolt
+    const tSway = elapsed - intro.idleStart;
+    const ramp = Math.min(1, tSway / 5);
+    camera.position.x = CAM_END.x + Math.sin(tSway * 0.25) * 0.25 * ramp;
+    camera.position.y = CAM_END.y + Math.sin(tSway * 0.4) * 0.12 * ramp;
   }
   camera.lookAt(lookTarget);

frontend/style.css CHANGED Viewed

@@ -24,29 +24,64 @@ body {
   pointer-events: none;
   z-index: 10;
   opacity: 1;
-  transition: opacity 1.4s ease;
 }
 #title-overlay.hidden {
   opacity: 0;
 }
 #title {
   font-family: "Baloo 2", sans-serif;
   font-weight: 800;
-  font-size: clamp(3rem, 10vw, 7rem);
   color: #ffffff;
   margin: 0;
-  letter-spacing: 0.04em;
-  text-shadow: 0 4px 24px rgba(20, 60, 140, 0.45);
 }
 #subtitle {
   font-family: "Baloo 2", sans-serif;
   font-weight: 600;
-  font-size: clamp(1rem, 2.4vw, 1.4rem);
-  color: rgba(255, 255, 255, 0.85);
-  margin: 0.4rem 0 0;
-  letter-spacing: 0.12em;
   text-transform: lowercase;
 }

   pointer-events: none;
   z-index: 10;
   opacity: 1;
+  transform: translateY(0);
+  transition: opacity 1.8s ease, transform 1.8s cubic-bezier(0.55, 0, 0.55, 1);
 }
 #title-overlay.hidden {
   opacity: 0;
+  transform: translateY(-48px);
 }
 #title {
   font-family: "Baloo 2", sans-serif;
   font-weight: 800;
+  font-size: clamp(3.5rem, 11vw, 8rem);
   color: #ffffff;
   margin: 0;
+  letter-spacing: 0.06em;
+  text-shadow:
+    0 3px 0 rgba(173, 211, 255, 0.55),
+    0 8px 28px rgba(13, 47, 110, 0.5),
+    0 2px 6px rgba(13, 47, 110, 0.35);
+  animation:
+    title-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) both,
+    title-bob 5.5s ease-in-out 1.6s infinite alternate;
 }
 #subtitle {
   font-family: "Baloo 2", sans-serif;
   font-weight: 600;
+  font-size: clamp(0.95rem, 2.2vw, 1.3rem);
+  color: rgba(255, 255, 255, 0.95);
+  margin: 1.1rem 0 0;
+  letter-spacing: 0.14em;
   text-transform: lowercase;
+  padding: 0.45em 1.4em;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  animation: title-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
+}
+@keyframes title-in {
+  from {
+    opacity: 0;
+    transform: translateY(28px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes title-bob {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-12px);
+  }
 }

frontend/world.js CHANGED Viewed

@@ -717,45 +717,76 @@ function buildMountains() {
 }
 function buildClouds() {
   const cloudMaterial = new THREE.MeshLambertMaterial({
     color: 0xffffff,
     flatShading: true,
     emissive: 0xdde9f4,
-    emissiveIntensity: 0.38,
   });
   function makeCloud(scale) {
     const cloud = new THREE.Group();
-    const puffs = 5 + Math.floor(Math.random() * 4);
     for (let i = 0; i < puffs; i++) {
-      const r = rand(3.5, 8);
-      const puff = new THREE.Mesh(new THREE.IcosahedronGeometry(r, 1), cloudMaterial);
-      puff.position.set(
-        (i - puffs / 2) * (r * 0.85) + rand(-1.5, 1.5),
-        rand(-1.5, 1.5),
-        rand(-2, 2)
       );
-      puff.scale.y = 0.55;
-      cloud.add(puff);
     }
     cloud.scale.setScalar(scale);
     return cloud;
   }
   const clouds = [];
   // big hero cumulus, center-back like the reference
-  for (const [x, y, z, s] of [[15, 55, -150, 2.6], [-5, 48, -140, 1.8]]) {
     const cloud = makeCloud(s);
     cloud.position.set(x, y, z);
     cloud.userData.speed = 0.25;
     clouds.push(cloud);
   }
   for (let i = 0; i < 11; i++) {
-    const cloud = makeCloud(rand(0.7, 1.5));
     cloud.position.set(rand(-150, 150), rand(34, 80), rand(-170, -50));
     cloud.userData.speed = rand(0.4, 1.2);
     clouds.push(cloud);
   }
   return clouds;
 }

 }
 function buildClouds() {
+  // Clouds live on light layer 1: they are lit by the sun plus a dedicated
+  // cool hemisphere light (set up in main.js), so they never pick up the
+  // green ground bounce that tints layer-0 objects.
   const cloudMaterial = new THREE.MeshLambertMaterial({
     color: 0xffffff,
     flatShading: true,
     emissive: 0xdde9f4,
+    emissiveIntensity: 0.25,
   });
+  function addPuff(cloud, r, x, y, z) {
+    const puff = new THREE.Mesh(new THREE.IcosahedronGeometry(r, 1), cloudMaterial);
+    puff.position.set(x, y, z);
+    puff.scale.y = 0.66;
+    puff.layers.set(1);
+    cloud.add(puff);
+    return puff;
+  }
   function makeCloud(scale) {
+    // Chunky anime cumulus: big heavily-overlapping puffs (fat middle,
+    // flat-ish underside) with a crown of medium puffs nestled on top.
     const cloud = new THREE.Group();
+    const length = rand(10, 16);
+    const puffs = Math.max(4, Math.round(length / 2.6));
+    let maxR = 0;
     for (let i = 0; i < puffs; i++) {
+      const t = puffs === 1 ? 0.5 : i / (puffs - 1);
+      const envelope = 0.55 + 0.45 * Math.sin(Math.PI * t);
+      const r = (3.2 + 3.2 * envelope) * rand(0.9, 1.1);
+      maxR = Math.max(maxR, r);
+      addPuff(cloud, r, (t - 0.5) * length + rand(-0.5, 0.5), r * 0.5, rand(-1.8, 1.8));
+    }
+    const crowns = 2 + Math.floor(Math.random() * 2);
+    for (let j = 0; j < crowns; j++) {
+      addPuff(
+        cloud,
+        rand(2.4, 3.6),
+        rand(-length * 0.22, length * 0.22),
+        maxR * rand(0.8, 0.95),
+        rand(-1.2, 1.2)
       );
     }
+    // stay mostly side-on so clouds keep their silhouette from the camera
+    cloud.rotation.y = rand(-0.35, 0.35);
     cloud.scale.setScalar(scale);
     return cloud;
   }
   const clouds = [];
   // big hero cumulus, center-back like the reference
+  for (const [x, y, z, s] of [[15, 55, -150, 2.6], [-5, 48, -140, 2.0]]) {
     const cloud = makeCloud(s);
     cloud.position.set(x, y, z);
     cloud.userData.speed = 0.25;
     clouds.push(cloud);
   }
   for (let i = 0; i < 11; i++) {
+    const cloud = makeCloud(rand(1.0, 1.6));
     cloud.position.set(rand(-150, 150), rand(34, 80), rand(-170, -50));
     cloud.userData.speed = rand(0.4, 1.2);
     clouds.push(cloud);
   }
+  // high clouds that frame the title during the sky-gaze intro
+  for (let i = 0; i < 6; i++) {
+    const cloud = makeCloud(rand(1.3, 2.1));
+    cloud.position.set(rand(-130, 130), rand(85, 130), rand(-200, -90));
+    cloud.userData.speed = rand(0.3, 0.8);
+    clouds.push(cloud);
+  }
   return clouds;
 }