fix: save

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

src/components/Opening.jsx

@@ -1,35 +1,52 @@
 import { useRef, useEffect } from "react";
 import gsap from "gsap";
 import styled from "@emotion/styled";
-
-const TopTitleWrapper = styled.div({
-  //   color: "hotpink",
-  fontSize: "10vw",
-  lineHeight: 1.75,
-  fontWeight: 300,
-});
+import { css } from "@emotion/react";
+import scrollArrow from "../assets/scroll-arrow.png";
 
 export default function Opening() {
   const containerRef = useRef();
   const TitleRef = useRef();
+  const DescRef = useRef();
+  const ScrollRef = useRef();
+  const ImageRef = useRef();
   const height = window.innerHeight;
 
   useEffect(() => {
-    gsap.set(containerRef.current.children, {
+    gsap.set(TitleRef.current.children, {
+      autoAlpha: 0,
+    });
+    gsap.set(DescRef.current.children, {
+      autoAlpha: 0,
+    });
+    gsap.set(ScrollRef.current.children, {
       autoAlpha: 0,
     });
+    // gsap.to(containerRef.current.children, {
+    //   autoAlpha: 1,
+    //   delay: 0.77,
+    // });
+    gsap.to(TitleRef.current.children, {
+      autoAlpha: 1,
+      delay: 0.66,
+    }),
+      gsap.to(DescRef.current.children, {
+        autoAlpha: 1,
+        delay: 0.88,
+      });
 
-    gsap.to(containerRef.current.children, {
+    gsap.to(Array.prototype.slice.call(ScrollRef.current.children).reverse(), {
       autoAlpha: 1,
-      delay: 0.77,
+      delay: 1.11,
     });
-    gsap.to(containerRef.current, {
+    gsap.to(ImageRef.current, {
       opacity: 0.5,
       repeat: -1,
       yoyo: !0,
       duration: 1.5,
       delay: 1.66,
     });
+
     gsap.to(containerRef.current.children, {
       autoAlpha: 0,
       y: -125,
@@ -47,8 +64,61 @@ export default function Opening() {
   });
 
   return (
-    <div ref={containerRef} style={{ height: height, overflow: "hidden" }}>
-      <TopTitleWrapper ref={TitleRef}>美索不达米亚</TopTitleWrapper>
+    <div
+      ref={containerRef}
+      style={{ height: height, overflow: "hidden" }}
+      css={css`
+        display: flex;
+        text-align: center;
+        justify-content: center;
+        text-align: center;
+        flex-direction: column;
+        z-index: 50;
+        min-height: calc(var(--vh, 1vh) * 100);
+      `}
+    >
+      <div
+        css={css`
+          margin-top: auto;
+        `}
+      ></div>
+
+      <div
+        ref={TitleRef}
+        css={css`
+          font-size: 10vw;
+          line-height: 1.75;
+          font-weight: 300;
+        `}
+      >
+        <span>美索不达米亚</span>
+      </div>
+
+      <div
+        ref={DescRef}
+        css={css`
+          font-size: 1.75vw
+          font-weight: 300;
+          text-transform: uppercase;
+      `}
+      >
+        <span>近距离观看盖蒂别墅博物馆展览</span>
+        <br />
+        <span>的一些优秀展品</span>
+      </div>
+      <div
+        ref={ScrollRef}
+        css={css`
+          font-size: 2.5vw;
+          flex-shrink: 0;
+          margin-top: auto;
+          margin-bottom: 20px;
+        `}
+      >
+        <span>请滚动</span>
+        <br />
+        <img ref={ImageRef} src={scrollArrow} />
+      </div>
     </div>
   );
 }

src/components/TimeLineText.jsx

@@ -0,0 +1,3 @@
+import { useEffect } from "react";
+
+export default function TimeLineText() {}