Function Title

packs/standalone/src/frame.tsx:157–173

({ textPair, t }: CaptionProps)

type CaptionProps = { textPair: Tuple<string | undefined>; t: number };

function Title({ textPair, t }: CaptionProps) {
  if (!textPair.any()) {
    return null;
  }

  const [prev, next] = textPair.spread();
  const text = t < 0.5 ? prev : next;
  const textStyle = prev !== next ? fadeOutIn()(t) : undefined;
  const backgroundStyle =
    prev && next ? undefined : !prev ? halfFadeIn()(t) : halfFadeOut()(t);

  return (
    <Styled.Title className="cs-title" style={backgroundStyle}>
      <span style={textStyle}>{text}</span>
    </Styled.Title>
  );
}

function Subtitle({ textPair, t }: CaptionProps) {
  if (!textPair.any()) {