some details

Author: anig1scur

src/app.css

@@ -38,51 +38,6 @@ body {
   }
 }
 
-
-.loading-container {
-  position: relative;
-  width: 90%;
-  max-width: 600px;
-  height: 8px;
-  border-radius: 6px;
-}
-
-#loading-bar {
-  width: 0%;
-  height: 100%;
-  background-color: #ffe65a;
-  transition: width 0.2s ease;
-  height: 100%;
-  border-radius: 4px;
-  position: relative;
-}
-
-#loading-bar::after {
-  content: "";
-  position: absolute;
-  top: -65px;
-  right: -15px;
-  width: 60px;
-  height: 60px;
-  background: url("/imgs/meidi.png") no-repeat center / contain;
-}
-
-#loading-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #2a4d33;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 999;
-  transition: opacity 0.1s ease-out;
-}
-
-
-
 @keyframes dog-jump {
   0%   { transform: translateY(0); }
   30%  { transform: translateY(-20px); }
@@ -91,6 +46,6 @@ body {
   100% { transform: translateY(0); }
 }
 
-#loading-bar.done::after {
+#loading-bar>.done {
   animation: dog-jump 0.6s ease-out;
 }

src/components/Footer.svelte

@@ -7,7 +7,7 @@
 
 {#if visible}
   <div
-    class="fixed bottom-1 px-2 md:px-5 w-full flex font-serif items-center justify-between text-white/50"
+    class="fixed bottom-1 px-2 md:px-5 w-full flex font-serif items-center justify-between text-white/50 z-[11]"
     transition:fade={{duration: 200}}
   >
     <div class="flex items-center text-sm gap-1 md:gap-2">
@@ -19,7 +19,7 @@
       >
     </div>
 
-    <div class="text-xs text-center whitespace-pre-line hidden md:block max-w-md mb-[2px]">
+    <div class="text-[0.65rem] leading-3 text-center whitespace-pre-line hidden md:block max-w-md mb-[2px]">
       If you are a ( former ) Douban employee and would like your pet
       to be featured on the site, please reach out to <a
         href="mailto:[email protected]">Yanxin</a

src/components/LoadingOverlay.svelte

@@ -1,5 +1,16 @@
-<div id="loading-overlay">
-  <div class="loading-container">
-    <div id="loading-bar"></div>
+<div
+  id="loading-overlay"
+  class="fixed inset-0 bg-[#3b8f51] flex justify-center items-center z-10 transition-opacity duration-100 ease-out"
+>
+  <div class="relative w-[90%] max-w-[600px] h-2 rounded-[6px]">
+    <div
+      id="loading-bar"
+      class="relative h-full w-0 bg-[#ffe65a] transition-[width] duration-200 ease-in-out rounded-[4px]"
+    >
+      <img
+        src="/imgs/meidi.png"
+        class="absolute -top-14 -right-3  md:-top-18 md:-right-5 w-12 h-12 md:w-15 md:h-15"
+      />
+    </div>
   </div>
 </div>

src/components/VideoOverlay.svelte

@@ -22,7 +22,7 @@
     </button>
 
     <video
-      class="w-[80%] lg:w-[60%] mt-2 h-auto block mx-auto rounded-xl"
+      class="w-[80%] md:w-[60%] mt-2 h-auto block mx-auto rounded-xl max-h-[90vh]"
       playsinline
       loop
       autoplay

src/lib/BookScene.ts

@@ -46,6 +46,7 @@ export class BookScene {
   private raycaster: THREE.Raycaster = new THREE.Raycaster();
   private mouse: THREE.Vector2 = new THREE.Vector2();
   private isFluttering: boolean = false;
+  private isHoveringCover = false;
 
   constructor (container: HTMLDivElement) {
     this.container = container;
@@ -77,10 +78,10 @@ export class BookScene {
     this.renderer.setClearColor(palette.bg[0]);
     this.container.appendChild(this.renderer.domElement);
 
-    this.setUpLight();
+    this.setupLight();
     // this.setupLightControls();
     this.setupLoadingManager();
-    this.setUpPositionAndRotation();
+    this.setupPositionAndRotation();
     this.setupHoverInteraction();
 
     window.addEventListener('resize', () => this.handleResize());
@@ -94,6 +95,7 @@ export class BookScene {
   private setupLoadingManager() {
     const loadingOverlay = document.getElementById('loading-overlay');
     const loadingBar = document.getElementById('loading-bar');
+    const dog = loadingBar.firstChild;
 
     if (!loadingOverlay || !loadingBar) {
       console.error('Loading screen elements not found in the DOM.');
@@ -106,7 +108,7 @@ export class BookScene {
     };
 
     this.loadingManager.onLoad = () => {
-      (loadingBar as HTMLElement).classList.add("done");
+      (dog as HTMLElement).classList.add("done");
 
       setTimeout(() => {
         this.renderable = true;
@@ -123,7 +125,7 @@ export class BookScene {
     };
   }
 
-  private setUpLight() {
+  private setupLight() {
     this.scene.add(this.ambientLight);
 
     const rLight = new THREE.DirectionalLight(0xffffff, 0.6);
@@ -163,6 +165,7 @@ export class BookScene {
     this.renderer.domElement.addEventListener('mousemove', this._onMouseMove.bind(this), false);
   }
 
+
   private _onMouseMove(event: MouseEvent) {
     if (this.openingAnimationStatus !== 'none' || this.isFluttering || this.isMobile) {
       return;
@@ -178,7 +181,12 @@ export class BookScene {
     const intersects = this.raycaster.intersectObject(cover, true);
 
     if (intersects.length > 0) {
-      this._playFlutterAnimation();
+      if (!this.isHoveringCover) {
+        this._playFlutterAnimation();
+        this.isHoveringCover = true;
+      }
+    } else {
+      this.isHoveringCover = false;
     }
   }
 
@@ -207,7 +215,7 @@ export class BookScene {
   }
 
 
-  private setUpPositionAndRotation() {
+  private setupPositionAndRotation() {
     this.camera.position.add(this.initialCameraOffset);
     this.camera.up.copy(this.initialCameraUp);
 
@@ -514,8 +522,8 @@ export class BookScene {
         zooGroup.position.set(config.pageWidth, 0.2, config.pageHeight * 0.8);
         zooGroup.rotation.y = -Math.PI / 2;
       } else {
-        zooGroup.position.set(config.pageWidth * 0.5, 0, 0);
-        zooGroup.rotation.y = -Math.PI / 12;
+        zooGroup.position.set(config.pageWidth * 0.6, 0, 0);
+        zooGroup.rotation.y = -Math.PI / 6;
       }
       this.homeGroup.add(zooGroup);
 
@@ -553,7 +561,7 @@ export class BookScene {
         doubanGroup.position.set(config.pageWidth / 2, 0, 0);
         doubanGroup.rotation.x = -Math.PI / 16;
       } else {
-        doubanGroup.position.set(-config.pageWidth / 3, 0, 0);
+        doubanGroup.position.set(-config.pageWidth / 4, 0, 0);
         doubanGroup.rotation.y = Math.PI / 16;
       }
       this.homeGroup.add(doubanGroup);
@@ -564,7 +572,7 @@ export class BookScene {
 
       this.book.add(this.homeGroup);
 
-      const dropHeight = 10;
+      const dropHeight = 6;
       const textTargetY = (boxGeo: THREE.BoxGeometry) => boxGeo.parameters.height / 2 + 0.4;
 
       // Initial positions
@@ -574,14 +582,14 @@ export class BookScene {
       doubanText.position.y = dropHeight + textTargetY(doubanBoxGeo);
 
       const tl = gsap.timeline({
-        defaults: { duration: 1, ease: 'bounce.out' }
+        defaults: { duration: 1.2, ease: 'bounce.out' }
       });
 
       tl.to(zooBox.position, { y: 0 }, 0);
-      tl.to(doubanBox.position, { y: 0 }, 0.3);
+      tl.to(doubanBox.position, { y: 0 }, 0.2);
 
-      tl.to(zooText.position, { y: textTargetY(zooBoxGeo) }, 1.2);
-      tl.to(doubanText.position, { y: textTargetY(doubanBoxGeo) }, 1.4);
+      tl.to(zooText.position, { y: textTargetY(zooBoxGeo) }, 1);
+      tl.to(doubanText.position, { y: textTargetY(doubanBoxGeo) }, 1.2);
     });
   }
 }