getty-show/src/view/Section3.jsx

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>
  );
}