fix: 分解section

src/App copy.jsx

@@ -3,10 +3,14 @@ import { gsap, ScrollTrigger } from "gsap/all";
 import { Action } from "./action";
 import Opening from "./components/Opening";
 import Viewer from "./components/Viewer";
+import RichText from "./components/RichText";
+import mapJpg from "./assets/meso-map-chinese-simplified.jpg";
 import {
-  TimeLineText,
+  TimeLineTitleText,
   TimeLineLabelText,
   TimeLineWallText,
+  ButtonText,
+  TimeLineTransText,
 } from "./components/TimeLineText";
 
 import { css } from "@emotion/react";
@@ -73,114 +77,232 @@ function App() {
           298: 40,
         }}
       >
-        <>
-          <TimeLineText
-            trigger={Action.scrubPin}
-            parentHeight={"1300vh"}
-            verticalOffset={"33vh"}
-            keyframes={[
-              Object.assign(Action.visible, {
-                start: 0,
-                end: 0,
-              }),
-              Object.assign(Action.fadeDown, {
-                start: 0.02,
-                end: 0.03,
-              }),
-            ]}
+        <TimeLineTitleText
+          trigger={Action.scrubPin}
+          verticalOffset={"33vh"}
+          keyframes={[
+            Object.assign({}, Action.visible, {
+              start: 0,
+              end: 0,
+            }),
+            Object.assign({}, Action.fadeDown, {
+              start: 0.02,
+              end: 0.03,
+            }),
+          ]}
+        >
+          <div
+            css={css`
+              font-weight: 300;
+              font-size: 2.75vw;
+              width: 100%;
+              text-align: center;
+            `}
+          >
+            对古代美索不达米亚人来说，礼拜是日常生活的一部分。
+          </div>
+        </TimeLineTitleText>
+
+        <TimeLineLabelText
+          duration={0.0325}
+          fade={0.01}
+          progressPosition={0.03}
+        >
+          <div
+            css={css`
+              font-weight: 300;
+              font-size: 18px;
+              width: 50%;
+              max-width: 600px;
+              padding: 8px 12px;
+              margin-right: 20px;
+              margin-left: auto;
+              background: rgba(0, 0, 0, 0.7);
+              border-radius: 2px;
+            `}
+          >
+            各城邦的城市建筑甚至被赋予象征及宗教意义。巴比伦古城的建筑装饰即是一个鲜明例子。
+          </div>
+        </TimeLineLabelText>
+
+        <TimeLineWallText className={"wall-text"} progressPosition={0.125}>
+          <div
+            css={css`
+              width: 35%;
+              padding-left: 32px;
+              padding-right: 32px;
+              z-index: 25;
+              font-size: 24px;
+              line-height: 1.66;
+              text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
+            `}
           >
             <div
               css={css`
-                font-weight: 300;
-                font-size: 2.75vw;
-                width: 100%;
-                text-align: center;
+                font-size: 30px;
               `}
             >
-              对古代美索不达米亚人来说，礼拜是日常生活的一部分。
+              迈步狮纹镶板
             </div>
-          </TimeLineText>
+            <div>公元前605-562年</div>
+            <div>涂釉陶瓷</div>
+            <ButtonText>
+              <i>迈步狮纹镶板</i>
+              ，新巴比伦时期，公元前605-562年，涂釉陶瓷。大都会艺术博物馆，Fletcher
+              Fund，1931 (31.13.1)。©大都会艺术博物馆版权所有{" "}
+            </ButtonText>
+          </div>
+        </TimeLineWallText>
 
-          <TimeLineLabelText
-            parentHeight={"1300vh"}
-            duration={0.0325}
-            fade={0.01}
-            progressPosition={0.03}
+        <TimeLineLabelText
+          fade={0.01}
+          verticalOffset={"63vh"}
+          progressPosition={0.25}
+        >
+          <div
+            css={css`
+              font-weight: 300;
+              font-size: 18px;
+              width: 50%;
+              max-width: 600px;
+              padding: 8px 12px;
+              margin-right: 20px;
+              margin-left: auto;
+              background: rgba(0, 0, 0, 0.7);
+              border-radius: 2px;
+            `}
+          >
+            <div>
+              在巴比伦最重要的街道Processional
+              Way两侧，排列着一百多块狮子釉砖，迈步狮纹镶板便是其中之一。这条路穿过伊什塔尔城门(Ishtar
+              Gate)，连接这座城市的宫殿及主要神庙。
+            </div>
+          </div>
+        </TimeLineLabelText>
+
+        <TimeLineLabelText
+          fade={0.01}
+          verticalOffset={"63vh"}
+          progressPosition={0.45}
+        >
+          <div
+            css={css`
+              font-weight: 300;
+              font-size: 18px;
+              width: 50%;
+              max-width: 600px;
+              padding: 8px 12px;
+              margin-right: 20px;
+              margin-left: auto;
+              background: rgba(0, 0, 0, 0.7);
+              border-radius: 2px;
+            `}
+          >
+            <div>
+              四维时代致力于人工智能三维数字化技术的.
+              研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。
+            </div>
+          </div>
+        </TimeLineLabelText>
+        <TimeLineTitleText
+          trigger={Action.scrubPin}
+          verticalOffset={"0vh"}
+          keyframes={[
+            Object.assign({}, Action.fadeUp, {
+              start: 0.72,
+              end: 0.77,
+            }),
+            Object.assign({}, Action.visible, {
+              start: 0.9,
+              end: 1,
+            }),
+          ]}
+        >
+          <div
+            css={css`
+              display: flex;
+              min-height: calc(var(--vh, 1vh) * 100);
+              justify-content: center;
+              position: relative;
+              z-index: 10;
+              margin-top: -40px;
+              padding: 100px 40px;
+              align-items: center;
+              direction: var(--text-direction);
+              text-align: var(--alignment);
+            `}
           >
             <div
               css={css`
+                font-size: 25px;
                 font-weight: 300;
-                font-size: 18px;
-                width: 50%;
-                max-width: 600px;
-                padding: 8px 12px;
-                margin-right: 20px;
-                margin-left: auto;
-                background: rgba(0, 0, 0, 0.7);
-                border-radius: 2px;
+                line-height: 2;
+                max-width: 750px;
+                margin: -20px auto 100px;
               `}
             >
-              各城邦的城市建筑甚至被赋予象征及宗教意义。巴比伦古城的建筑装饰即是一个鲜明例子。
+              这是盖蒂别墅博物馆在2021年与卢浮宫博物馆合作举办的关于古美索不达米亚的大型展览中展出的130多件展品之一。这些展品囊括了美索不达米亚城邦、文字及王国于约三千年的发展。
             </div>
-          </TimeLineLabelText>
+          </div>
+        </TimeLineTitleText>
+      </Viewer>
 
-          <TimeLineWallText
-            className={"wall-text"}
-            parentHeight={"1300vh"}
-            progressPosition={0.125}
-          >
+      <RichText height={1276}>
+        <div
+          css={css`
+            display: flex;
+            min-height: calc(var(--vh, 1vh) * 100);
+            justify-content: center;
+            position: relative;
+            z-index: 10;
+            padding: 100px 40px;
+            align-items: center;
+            direction: var(--text-direction);
+            text-align: var(--alignment);
+            flex-direction: column;
+            height: 1276px;
+            margin-top: -40vh;
+          `}
+        >
+          <TimeLineTransText>
             <div
               css={css`
-                width: 35%;
-                padding-left: 32px;
-                padding-right: 32px;
-                z-index: 25;
-                font-size: 24px;
-                line-height: 1.66;
-                text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
+                width: 750px;
+                margin: 0 auto;
               `}
             >
-              <div
+              <img
+                src={mapJpg}
                 css={css`
-                  font-size: 30px;
+                  width: 750px;
+                  height: 600px;
                 `}
-              >
-                迈步狮纹镶板
-              </div>
-              <div>公元前605-562年</div>
-              <div>涂釉陶瓷</div>
+              />
+              <br />
+              <ButtonText>
+                <div>
+                  地图由FNSP根据原作改编，© FNSP版权所有。Sciences Po–Atelier de
+                  cartographie，2016年，由Martin
+                  Sauvage指导（法国国家科学研究中心，USR 3225，Nanterre）
+                </div>
+              </ButtonText>
             </div>
-          </TimeLineWallText>
-
-          <TimeLineLabelText
-            parentHeight={"1300vh"}
-            fade={0.01}
-            verticalOffset={"63vh"}
-            progressPosition={0.03}
-          >
+          </TimeLineTransText>
+          <TimeLineTransText>
             <div
               css={css`
+                font-size: 25px;
                 font-weight: 300;
-                font-size: 18px;
-                width: 50%;
-                max-width: 600px;
-                padding: 8px 12px;
-                margin-right: 20px;
-                margin-left: auto;
-                background: rgba(0, 0, 0, 0.7);
-                border-radius: 2px;
+                line-height: 2;
+                max-width: 750px;
+                margin: 20px auto 100px;
               `}
             >
-              <div>
-                在巴比伦最重要的街道Processional
-                Way两侧，排列着一百多块狮子釉砖，迈步狮纹镶板便是其中之一。这条路穿过伊什塔尔城门(Ishtar
-                Gate)，连接这座城市的宫殿及主要神庙。
-              </div>
+              约公元前4000年，古美索不达米亚（即如今的伊拉克）是城市生活最早形成的发源地。美索不达米亚人在数学、科学及法律方面取得了进步；创作文学、建筑及艺术作品；以及发明了世界上第一个文字系统。
             </div>
-          </TimeLineLabelText>
-        </>
-      </Viewer>
-
+          </TimeLineTransText>
+        </div>
+      </RichText>
       <Viewer
         height={"400vh"}
         name="Vessel Steadicam"
@@ -189,7 +311,30 @@ function App() {
         debug={debug}
         enterTween={Action.crossFadeIn}
         exitTween={Action.pinForExit}
-      />
+      >
+        <TimeLineLabelText
+          verticalOffset={"70vh"}
+          duration={0.15}
+          fade={0.1}
+          progressPosition={0}
+        >
+          <div
+            css={css`
+              font-weight: 300;
+              font-size: 18px;
+              width: 50%;
+              max-width: 380px;
+              padding: 8px 12px;
+              margin-right: 20px;
+              margin-left: auto;
+              background: rgba(0, 0, 0, 0.7);
+              border-radius: 2px;
+            `}
+          >
+            美索不达米亚人认为，人乃为服务于神而造。
+          </div>
+        </TimeLineLabelText>
+      </Viewer>
 
       <Viewer
         height={"800vh"}
@@ -209,7 +354,7 @@ function App() {
         debug={debug}
         enterTween={Action.crossFadeIn}
         exitTween={Action.pinForExit}
-      />
+      ></Viewer>
 
       <Viewer
         height={"800vh"}

src/App.jsx

@@ -3,17 +3,26 @@ import { gsap, ScrollTrigger } from "gsap/all";
 import { Action } from "./action";
 import Opening from "./components/Opening";
 import Viewer from "./components/Viewer";
-import RichText from "./components/RichText";
-import mapJpg from "./assets/meso-map-chinese-simplified.jpg";
-import {
-  TimeLineTitleText,
-  TimeLineLabelText,
-  TimeLineWallText,
-  ButtonText,
-  TimeLineTransText,
-} from "./components/TimeLineText";
 
-import { css } from "@emotion/react";
+import Section1 from "./view/Section1";
+import Section2 from "./view/Section2";
+import Section3 from "./view/Section3";
+import Section4 from "./view/Section4";
+import Section5 from "./view/Section5";
+import Section6 from "./view/Section6";
+import Section7 from "./view/Section6";
+import Section8 from "./view/Section8";
+import Section9 from "./view/Section9";
+import Section10 from "./view/Section10";
+
+import Section11 from "./view/Section11";
+import Section12 from "./view/Section12";
+
+import Section13 from "./view/Section13";
+import Section14 from "./view/Section14";
+import Section15 from "./view/Section15";
+
+
 
 import { useControls } from "leva";
 
@@ -67,368 +76,23 @@ function App() {
     <div ref={container}>
       <Opening></Opening>
 
-      <Viewer
-        name="Lion Render"
-        path="lion-render-10fps-873-rev1"
-        height={"1300vh"}
-        frameCount={300}
-        debug={debug}
-        pause={{
-          298: 40,
-        }}
-      >
-        <TimeLineTitleText
-          trigger={Action.scrubPin}
-          verticalOffset={"33vh"}
-          keyframes={[
-            Object.assign({}, Action.visible, {
-              start: 0,
-              end: 0,
-            }),
-            Object.assign({}, Action.fadeDown, {
-              start: 0.02,
-              end: 0.03,
-            }),
-          ]}
-        >
-          <div
-            css={css`
-              font-weight: 300;
-              font-size: 2.75vw;
-              width: 100%;
-              text-align: center;
-            `}
-          >
-            对古代美索不达米亚人来说，礼拜是日常生活的一部分。
-          </div>
-        </TimeLineTitleText>
-
-        <TimeLineLabelText
-          duration={0.0325}
-          fade={0.01}
-          progressPosition={0.03}
-        >
-          <div
-            css={css`
-              font-weight: 300;
-              font-size: 18px;
-              width: 50%;
-              max-width: 600px;
-              padding: 8px 12px;
-              margin-right: 20px;
-              margin-left: auto;
-              background: rgba(0, 0, 0, 0.7);
-              border-radius: 2px;
-            `}
-          >
-            各城邦的城市建筑甚至被赋予象征及宗教意义。巴比伦古城的建筑装饰即是一个鲜明例子。
-          </div>
-        </TimeLineLabelText>
-
-        <TimeLineWallText className={"wall-text"} progressPosition={0.125}>
-          <div
-            css={css`
-              width: 35%;
-              padding-left: 32px;
-              padding-right: 32px;
-              z-index: 25;
-              font-size: 24px;
-              line-height: 1.66;
-              text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
-            `}
-          >
-            <div
-              css={css`
-                font-size: 30px;
-              `}
-            >
-              迈步狮纹镶板
-            </div>
-            <div>公元前605-562年</div>
-            <div>涂釉陶瓷</div>
-            <ButtonText>
-              <i>迈步狮纹镶板</i>
-              ，新巴比伦时期，公元前605-562年，涂釉陶瓷。大都会艺术博物馆，Fletcher
-              Fund，1931 (31.13.1)。©大都会艺术博物馆版权所有{" "}
-            </ButtonText>
-          </div>
-        </TimeLineWallText>
-
-        <TimeLineLabelText
-          fade={0.01}
-          verticalOffset={"63vh"}
-          progressPosition={0.25}
-        >
-          <div
-            css={css`
-              font-weight: 300;
-              font-size: 18px;
-              width: 50%;
-              max-width: 600px;
-              padding: 8px 12px;
-              margin-right: 20px;
-              margin-left: auto;
-              background: rgba(0, 0, 0, 0.7);
-              border-radius: 2px;
-            `}
-          >
-            <div>
-              在巴比伦最重要的街道Processional
-              Way两侧，排列着一百多块狮子釉砖，迈步狮纹镶板便是其中之一。这条路穿过伊什塔尔城门(Ishtar
-              Gate)，连接这座城市的宫殿及主要神庙。
-            </div>
-          </div>
-        </TimeLineLabelText>
-
-        <TimeLineLabelText
-          fade={0.01}
-          verticalOffset={"63vh"}
-          progressPosition={0.45}
-        >
-          <div
-            css={css`
-              font-weight: 300;
-              font-size: 18px;
-              width: 50%;
-              max-width: 600px;
-              padding: 8px 12px;
-              margin-right: 20px;
-              margin-left: auto;
-              background: rgba(0, 0, 0, 0.7);
-              border-radius: 2px;
-            `}
-          >
-            <div>
-              四维时代致力于人工智能三维数字化技术的.
-              研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。
-            </div>
-          </div>
-        </TimeLineLabelText>
-        <TimeLineTitleText
-          trigger={Action.scrubPin}
-          verticalOffset={"0vh"}
-          keyframes={[
-            Object.assign({}, Action.fadeUp, {
-              start: 0.72,
-              end: 0.77,
-            }),
-            Object.assign({}, Action.visible, {
-              start: 0.9,
-              end: 1,
-            }),
-          ]}
-        >
-          <div
-            css={css`
-              display: flex;
-              min-height: calc(var(--vh, 1vh) * 100);
-              justify-content: center;
-              position: relative;
-              z-index: 10;
-              margin-top: -40px;
-              padding: 100px 40px;
-              align-items: center;
-              direction: var(--text-direction);
-              text-align: var(--alignment);
-            `}
-          >
-            <div
-              css={css`
-                font-size: 25px;
-                font-weight: 300;
-                line-height: 2;
-                max-width: 750px;
-                margin: -20px auto 100px;
-              `}
-            >
-              这是盖蒂别墅博物馆在2021年与卢浮宫博物馆合作举办的关于古美索不达米亚的大型展览中展出的130多件展品之一。这些展品囊括了美索不达米亚城邦、文字及王国于约三千年的发展。
-            </div>
-          </div>
-        </TimeLineTitleText>
-      </Viewer>
-
-      <RichText height={1276}>
-        <div
-          css={css`
-            display: flex;
-            min-height: calc(var(--vh, 1vh) * 100);
-            justify-content: center;
-            position: relative;
-            z-index: 10;
-            padding: 100px 40px;
-            align-items: center;
-            direction: var(--text-direction);
-            text-align: var(--alignment);
-            flex-direction: column;
-            height: 1276px;
-            margin-top: -40vh;
-          `}
-        >
-          <TimeLineTransText>
-            <div
-              css={css`
-                width: 750px;
-                margin: 0 auto;
-              `}
-            >
-              <img
-                src={mapJpg}
-                css={css`
-                  width: 750px;
-                  height: 600px;
-                `}
-              />
-              <br />
-              <ButtonText>
-                <div>
-                  地图由FNSP根据原作改编，© FNSP版权所有。Sciences Po–Atelier de
-                  cartographie，2016年，由Martin
-                  Sauvage指导（法国国家科学研究中心，USR 3225，Nanterre）
-                </div>
-              </ButtonText>
-            </div>
-          </TimeLineTransText>
-          <TimeLineTransText>
-            <div
-              css={css`
-                font-size: 25px;
-                font-weight: 300;
-                line-height: 2;
-                max-width: 750px;
-                margin: 20px auto 100px;
-              `}
-            >
-              约公元前4000年，古美索不达米亚（即如今的伊拉克）是城市生活最早形成的发源地。美索不达米亚人在数学、科学及法律方面取得了进步；创作文学、建筑及艺术作品；以及发明了世界上第一个文字系统。
-            </div>
-          </TimeLineTransText>
-        </div>
-      </RichText>
-      <Viewer
-        height={"400vh"}
-        name="Vessel Steadicam"
-        path="vessel-steadi-10fps-873-rev1"
-        frameCount={64}
-        debug={debug}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"800vh"}
-        name="Vessel Render"
-        path="vessel-render-10fps-873-rev1"
-        frameCount={125}
-        debug={debug}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"400vh"}
-        name="Michaux Steadicam"
-        path="michaux-steadi-10fps-873-rev1"
-        frameCount={98}
-        debug={debug}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"800vh"}
-        name="Michaux Render"
-        path="michaux-render-10fps-873-rev1"
-        frameCount={158}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"400vh"}
-        name="Gudea Architect Steadi"
-        path="gudea-architect-steadi-10fps-873-rev1"
-        frameCount={84}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-      <Viewer
-        height={"800vh"}
-        name="Gudea Architect Render"
-        path="gudea-architect-render-10fps-873-rev1"
-        frameCount={201}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"800vh"}
-        name="Dictionary Steadi"
-        path="dictionary-steadi-10fps-873-rev1"
-        frameCount={258}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"300vh"}
-        name="Dictionary Render"
-        path="dictionary-steadi-10fps-873-rev1"
-        frameCount={45}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"200h"}
-        name="Enheduanna Steadi"
-        path="enheduanna-steadi-10fps-873-rev1"
-        frameCount={40}
-        pause={{
-          1: 80,
-        }}
-        enterTween={{
-          from: {
-            autoAlpha: 0,
-            y: 500,
-          },
-        }}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"800vh"}
-        name="Cone Steadi"
-        path="cone-steadi-10fps-873-rev1"
-        frameCount={256}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
-
-      <Viewer
-        height={"600vh"}
-        name="Cone Render"
-        path="cone-render-10fps-873-rev1"
-        frameCount={50}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
+      <Section1 debug={debug} />
+      <Section2 debug={debug} />
+      <Section3 debug={debug} />
+      <Section4 debug={debug} />
+      <Section5 debug={debug} />
+      <Section6 debug={debug} />
+      <Section7 debug={debug} />
+      <Section8 debug={debug} />
+      <Section9 debug={debug} />
+      <Section10 debug={debug} />
+      <Section11 debug={debug} />
+      <Section12 debug={debug} />
+      <Section13 debug={debug} />
+      <Section14 debug={debug} />
+      <Section15 debug={debug} />
 
-      <Viewer
-        height={"280vh"}
-        name="Gudea Steadi"
-        path="gudea-steadi-10fps-873-rev1"
-        frameCount={50}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
 
-      <Viewer
-        height={"900vh"}
-        name="Gudea Render"
-        path="gudea-render-10fps-873-rev1"
-        frameCount={184}
-        enterTween={Action.crossFadeIn}
-        exitTween={Action.pinForExit}
-      />
     </div>
   );
 }

src/components/TimeLineText.jsx

@@ -7,7 +7,6 @@ import styled from "@emotion/styled";
 
 export function TimeLineTransText(props) {
   const containerRef = useRef();
-
   const from = props.from || {
     autoAlpha: 0,
     y: 100,
@@ -34,6 +33,7 @@ export function TimeLineTransText(props) {
 
   return <div ref={containerRef}>{props.children}</div>;
 }
+
 TimeLineTransText.propTypes = {
   start: PropTypes.string,
   end: PropTypes.string,
@@ -153,6 +153,8 @@ export function TimeLineLabelText(props) {
   const fade = props.fade || 0.04;
   const duration = props.duration || 0.1;
   const verticalOffset = props.verticalOffset || "50vh";
+  const trigger = props.trigger || Action.scrubPin;
+
   const keyframes = [
     Object.assign(
       {},
@@ -176,7 +178,7 @@ export function TimeLineLabelText(props) {
   // console.log("keyframes-TimeLineLabelText", keyframes);
   return (
     <TimeLineText
-      trigger={Action.scrubPin}
+      trigger={trigger}
       keyframes={keyframes}
       verticalOffset={verticalOffset}
       className={props.className}
@@ -194,6 +196,7 @@ export function TimeLineWallText(props) {
   const fade = props.fade || 0.025;
   const duration = props.duration || 0.05;
   const verticalOffset = props.verticalOffset || "46.5vh";
+  const trigger = props.trigger || Action.scrubPin;
 
   const keyframes = [
     Object.assign({}, Action.fadeIn, {
@@ -209,7 +212,7 @@ export function TimeLineWallText(props) {
 
   return (
     <TimeLineText
-      trigger={Action.scrubPin}
+      trigger={trigger}
       keyframes={keyframes}
       verticalOffset={verticalOffset}
       className={props.className}
@@ -223,8 +226,13 @@ export function TimeLineWallText(props) {
 }
 export function TimeLineTitleText(props) {
   const verticalOffset = props.verticalOffset || "100vh";
+  const trigger = props.trigger || Action.scrubPin;
   return (
-    <TimeLineText verticalOffset={verticalOffset} {...props}></TimeLineText>
+    <TimeLineText
+      trigger={trigger}
+      verticalOffset={verticalOffset}
+      {...props}
+    ></TimeLineText>
   );
 }
 class TimeLineText extends Component {

src/view/Section1.jsx

@@ -0,0 +1,192 @@
+import { Action } from "../action";
+import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import {
+  TimeLineTitleText,
+  TimeLineLabelText,
+  TimeLineWallText,
+  ButtonText,
+} from "../components/TimeLineText";
+
+export default function Section1(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+      name="Lion Render"
+      path="lion-render-10fps-873-rev1"
+      height={"1300vh"}
+      frameCount={300}
+      debug={debug}
+      pause={{
+        298: 40,
+      }}
+    >
+      <TimeLineTitleText
+        trigger={Action.scrubPin}
+        verticalOffset={"33vh"}
+        keyframes={[
+          Object.assign({}, Action.visible, {
+            start: 0,
+            end: 0,
+          }),
+          Object.assign({}, Action.fadeDown, {
+            start: 0.02,
+            end: 0.03,
+          }),
+        ]}
+      >
+        <div
+          css={css`
+            font-weight: 300;
+            font-size: 2.75vw;
+            width: 100%;
+            text-align: center;
+          `}
+        >
+          对古代美索不达米亚人来说，礼拜是日常生活的一部分。
+        </div>
+      </TimeLineTitleText>
+
+      <TimeLineLabelText duration={0.0325} fade={0.01} progressPosition={0.03}>
+        <div
+          css={css`
+            font-weight: 300;
+            font-size: 18px;
+            width: 50%;
+            max-width: 600px;
+            padding: 8px 12px;
+            margin-right: 20px;
+            margin-left: auto;
+            background: rgba(0, 0, 0, 0.7);
+            border-radius: 2px;
+          `}
+        >
+          各城邦的城市建筑甚至被赋予象征及宗教意义。巴比伦古城的建筑装饰即是一个鲜明例子。
+        </div>
+      </TimeLineLabelText>
+
+      <TimeLineWallText className={"wall-text"} progressPosition={0.125}>
+        <div
+          css={css`
+            width: 35%;
+            padding-left: 32px;
+            padding-right: 32px;
+            z-index: 25;
+            font-size: 24px;
+            line-height: 1.66;
+            text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
+          `}
+        >
+          <div
+            css={css`
+              font-size: 30px;
+            `}
+          >
+            迈步狮纹镶板
+          </div>
+          <div>公元前605-562年</div>
+          <div>涂釉陶瓷</div>
+          <ButtonText>
+            <i>迈步狮纹镶板</i>
+            ，新巴比伦时期，公元前605-562年，涂釉陶瓷。大都会艺术博物馆，Fletcher
+            Fund，1931 (31.13.1)。©大都会艺术博物馆版权所有{" "}
+          </ButtonText>
+        </div>
+      </TimeLineWallText>
+
+      <TimeLineLabelText
+        fade={0.01}
+        verticalOffset={"63vh"}
+        progressPosition={0.25}
+      >
+        <div
+          css={css`
+            font-weight: 300;
+            font-size: 18px;
+            width: 50%;
+            max-width: 600px;
+            padding: 8px 12px;
+            margin-right: 20px;
+            margin-left: auto;
+            background: rgba(0, 0, 0, 0.7);
+            border-radius: 2px;
+          `}
+        >
+          <div>
+            在巴比伦最重要的街道Processional
+            Way两侧，排列着一百多块狮子釉砖，迈步狮纹镶板便是其中之一。这条路穿过伊什塔尔城门(Ishtar
+            Gate)，连接这座城市的宫殿及主要神庙。
+          </div>
+        </div>
+      </TimeLineLabelText>
+
+      <TimeLineLabelText
+        fade={0.01}
+        verticalOffset={"63vh"}
+        progressPosition={0.45}
+      >
+        <div
+          css={css`
+            font-weight: 300;
+            font-size: 18px;
+            width: 50%;
+            max-width: 600px;
+            padding: 8px 12px;
+            margin-right: 20px;
+            margin-left: auto;
+            background: rgba(0, 0, 0, 0.7);
+            border-radius: 2px;
+          `}
+        >
+          <div>
+            四维时代致力于人工智能三维数字化技术的.
+            研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。
+          </div>
+        </div>
+      </TimeLineLabelText>
+      <TimeLineTitleText
+        trigger={Action.scrubPin}
+        verticalOffset={"0vh"}
+        keyframes={[
+          Object.assign({}, Action.fadeUp, {
+            start: 0.72,
+            end: 0.77,
+          }),
+          Object.assign({}, Action.visible, {
+            start: 0.9,
+            end: 1,
+          }),
+        ]}
+      >
+        <div
+          css={css`
+            display: flex;
+            min-height: calc(var(--vh, 1vh) * 100);
+            justify-content: center;
+            position: relative;
+            z-index: 10;
+            margin-top: -40px;
+            padding: 100px 40px;
+            align-items: center;
+            direction: var(--text-direction);
+            text-align: var(--alignment);
+          `}
+        >
+          <div
+            css={css`
+              font-size: 25px;
+              font-weight: 300;
+              line-height: 2;
+              max-width: 750px;
+              margin: -20px auto 100px;
+            `}
+          >
+            这是盖蒂别墅博物馆在2021年与卢浮宫博物馆合作举办的关于古美索不达米亚的大型展览中展出的130多件展品之一。这些展品囊括了美索不达米亚城邦、文字及王国于约三千年的发展。
+          </div>
+        </div>
+      </TimeLineTitleText>
+    </Viewer>
+  );
+}

src/view/Section10.jsx

@@ -0,0 +1,20 @@
+import { Action } from "../action";
+// import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section10(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+      height={"300vh"}
+      name="Dictionary Render"
+      path="dictionary-steadi-10fps-873-rev1"
+      frameCount={45}
+      enterTween={Action.crossFadeIn}
+      exitTween={Action.pinForExit}
+    />
+  );
+}

src/view/Section11.jsx

@@ -0,0 +1,28 @@
+import { Action } from "../action";
+// import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section10(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+      height={"200h"}
+      name="Enheduanna Steadi"
+      path="enheduanna-steadi-10fps-873-rev1"
+      frameCount={40}
+      pause={{
+        1: 80,
+      }}
+      enterTween={{
+        from: {
+          autoAlpha: 0,
+          y: 500,
+        },
+      }}
+      exitTween={Action.pinForExit}
+    />
+  );
+}

src/view/Section12.jsx

@@ -0,0 +1,20 @@
+import { Action } from "../action";
+// import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section10(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+    height={"800vh"}
+    name="Cone Steadi"
+    path="cone-steadi-10fps-873-rev1"
+    frameCount={256}
+    enterTween={Action.crossFadeIn}
+    exitTween={Action.pinForExit}
+  />
+  );
+}

src/view/Section13.jsx

@@ -0,0 +1,20 @@
+import { Action } from "../action";
+// import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section10(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+    height={"600vh"}
+    name="Cone Render"
+    path="cone-render-10fps-873-rev1"
+    frameCount={50}
+    enterTween={Action.crossFadeIn}
+    exitTween={Action.pinForExit}
+  />
+  );
+}

src/view/Section14.jsx

@@ -0,0 +1,20 @@
+import { Action } from "../action";
+// import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section10(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+    height={"280vh"}
+    name="Gudea Steadi"
+    path="gudea-steadi-10fps-873-rev1"
+    frameCount={50}
+    enterTween={Action.crossFadeIn}
+    exitTween={Action.pinForExit}
+  />
+  );
+}

src/view/Section15.jsx

@@ -0,0 +1,20 @@
+import { Action } from "../action";
+// import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section10(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+      height={"900vh"}
+      name="Gudea Render"
+      path="gudea-render-10fps-873-rev1"
+      frameCount={184}
+      enterTween={Action.crossFadeIn}
+      exitTween={Action.pinForExit}
+    />
+  );
+}

src/view/Section16.jsx

@@ -0,0 +1,20 @@
+import { Action } from "../action";
+// import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section10(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+      height={"300vh"}
+      name="Dictionary Render"
+      path="dictionary-steadi-10fps-873-rev1"
+      frameCount={45}
+      enterTween={Action.crossFadeIn}
+      exitTween={Action.pinForExit}
+    />
+  );
+}

src/view/Section2.jsx

@@ -0,0 +1,68 @@
+import { css } from "@emotion/react";
+import { ButtonText, TimeLineTransText } from "../components/TimeLineText";
+import mapJpg from "../assets/meso-map-chinese-simplified.jpg";
+
+import RichText from "../components/RichText";
+
+export default function Section2() {
+  // eslint-disable-next-line react/prop-types
+  // const debug = props.debug || false;
+  return (
+    <RichText height={1276}>
+      <div
+        css={css`
+          display: flex;
+          min-height: calc(var(--vh, 1vh) * 100);
+          justify-content: center;
+          position: relative;
+          z-index: 10;
+          padding: 100px 40px;
+          align-items: center;
+          direction: var(--text-direction);
+          text-align: var(--alignment);
+          flex-direction: column;
+          height: 1276px;
+          margin-top: -40vh;
+        `}
+      >
+        <TimeLineTransText>
+          <div
+            css={css`
+              width: 750px;
+              margin: 0 auto;
+            `}
+          >
+            <img
+              src={mapJpg}
+              css={css`
+                width: 750px;
+                height: 600px;
+              `}
+            />
+            <br />
+            <ButtonText>
+              <div>
+                地图由FNSP根据原作改编，© FNSP版权所有。Sciences Po–Atelier de
+                cartographie，2016年，由Martin
+                Sauvage指导（法国国家科学研究中心，USR 3225，Nanterre）
+              </div>
+            </ButtonText>
+          </div>
+        </TimeLineTransText>
+        <TimeLineTransText>
+          <div
+            css={css`
+              font-size: 25px;
+              font-weight: 300;
+              line-height: 2;
+              max-width: 750px;
+              margin: 20px auto 100px;
+            `}
+          >
+            约公元前4000年，古美索不达米亚（即如今的伊拉克）是城市生活最早形成的发源地。美索不达米亚人在数学、科学及法律方面取得了进步；创作文学、建筑及艺术作品；以及发明了世界上第一个文字系统。
+          </div>
+        </TimeLineTransText>
+      </div>
+    </RichText>
+  );
+}

src/view/Section3.jsx

@@ -0,0 +1,44 @@
+import { Action } from "../action";
+import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section3(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+      height={"400vh"}
+      name="Vessel Steadicam"
+      path="vessel-steadi-10fps-873-rev1"
+      frameCount={64}
+      debug={debug}
+      enterTween={Action.crossFadeIn}
+      exitTween={Action.pinForExit}
+    >
+      <TimeLineLabelText
+        verticalOffset={"70vh"}
+        duration={0.15}
+        fade={0.1}
+        progressPosition={0}
+      >
+        <div
+          css={css`
+            font-weight: 300;
+            font-size: 18px;
+            width: 50%;
+            max-width: 380px;
+            padding: 8px 12px;
+            margin-right: 20px;
+            margin-left: auto;
+            background: rgba(0, 0, 0, 0.7);
+            border-radius: 2px;
+          `}
+        >
+          美索不达米亚人认为，人乃为服务于神而造。
+        </div>
+      </TimeLineLabelText>
+    </Viewer>
+  );
+}

src/view/Section4.jsx

@@ -0,0 +1,21 @@
+import { Action } from "../action";
+import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section4(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+      height={"800vh"}
+      name="Vessel Render"
+      path="vessel-render-10fps-873-rev1"
+      frameCount={125}
+      debug={debug}
+      enterTween={Action.crossFadeIn}
+      exitTween={Action.pinForExit}
+    />
+  );
+}

src/view/Section5.jsx

@@ -0,0 +1,21 @@
+import { Action } from "../action";
+// import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section4(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+      height={"400vh"}
+      name="Michaux Steadicam"
+      path="michaux-steadi-10fps-873-rev1"
+      frameCount={98}
+      debug={debug}
+      enterTween={Action.crossFadeIn}
+      exitTween={Action.pinForExit}
+    ></Viewer>
+  );
+}

src/view/Section6.jsx

@@ -0,0 +1,20 @@
+import { Action } from "../action";
+// import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section6(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+      height={"800vh"}
+      name="Michaux Render"
+      path="michaux-render-10fps-873-rev1"
+      frameCount={158}
+      enterTween={Action.crossFadeIn}
+      exitTween={Action.pinForExit}
+    />
+  );
+}

src/view/Section7.jsx

@@ -0,0 +1,20 @@
+import { Action } from "../action";
+// import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section7(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+      height={"400vh"}
+      name="Gudea Architect Steadi"
+      path="gudea-architect-steadi-10fps-873-rev1"
+      frameCount={84}
+      enterTween={Action.crossFadeIn}
+      exitTween={Action.pinForExit}
+    />
+  );
+}

src/view/Section8.jsx

@@ -0,0 +1,20 @@
+import { Action } from "../action";
+// import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section8(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+      height={"800vh"}
+      name="Gudea Architect Render"
+      path="gudea-architect-render-10fps-873-rev1"
+      frameCount={201}
+      enterTween={Action.crossFadeIn}
+      exitTween={Action.pinForExit}
+    />
+  );
+}

src/view/Section9.jsx

@@ -0,0 +1,20 @@
+import { Action } from "../action";
+// import { css } from "@emotion/react";
+import Viewer from "../components/Viewer";
+
+import { TimeLineLabelText } from "../components/TimeLineText";
+
+export default function Section8(props) {
+  // eslint-disable-next-line react/prop-types
+  const debug = props.debug || false;
+  return (
+    <Viewer
+    height={"800vh"}
+    name="Dictionary Steadi"
+    path="dictionary-steadi-10fps-873-rev1"
+    frameCount={258}
+    enterTween={Action.crossFadeIn}
+    exitTween={Action.pinForExit}
+  />
+  );
+}

src/view/index.jsx

@@ -1,3 +0,0 @@
-export default function MainView() {
-  return <></>;
-}