matrix-animations/src/scenes/textEvent.tsx

import { makeScene2D } from '@motion-canvas/2d/lib/scenes';
import { Rect, Layout, Circle, Txt } from '@motion-canvas/2d/lib/components';
import { CodeBlock, lines } from '@motion-canvas/2d/lib/components/CodeBlock';
import { createRef } from '@motion-canvas/core/lib/utils';
import { all, delay, waitUntil } from '@motion-canvas/core/lib/flow';

const BOXLEFT = '#B97A95';
const BOXRIGHT = '#F6AE99';
const TEXTBOX = '#494853';
const HIGHLIGHT = '#A7D2CB';
const BG = 'F2E1C1';

const BOLD = 700;


export default makeScene2D(function* (view) {
  const colLeft = createRef<Layout>();
  const colRight = createRef<Layout>();
  const colRightBG = createRef<Rect>();
  const codeTextContainer = createRef<CodeBlock>();
  const leftContainer = createRef<Rect>();
  const textEvent = createRef<Rect>();
  const eventContent = createRef<Rect>();
  const eventContentText = createRef<Txt>();
  const description = createRef<Txt>();
  const eventTimestamp = createRef<Rect>();
  const eventTimestampText = createRef<Txt>();

  view.add(
    <>
      <Layout layout padding={10} width={1920} height={1080}>
        <Layout
          ref={colLeft}
          basis={0}
          width={0}
        >
          <Rect
            ref={leftContainer}
            fill={BOXLEFT}
            radius={2}
            grow={1}
            direction={'column'}
            alignItems="center"
            justifyContent="center"
            gap={25}
            padding={128}
          >
            <Rect
              basis={0}
              ref={textEvent}
              fill={TEXTBOX}
              radius={4}
              lineWidth={2}
              stroke={'#fff'}
              direction={'row'}
              gap={48}
              padding={24}
              opacity={0}
              width="100%"
            >
              <Layout direction={'column'} gap={12} alignItems='center'>
                <Circle size={80} fill={'#FD8A8A'} />
                <Rect
                  ref={eventTimestamp}
                  alignItems="center"
                  justifyContent="center"
                  fill={TEXTBOX}
                >
                  <Txt ref={eventTimestampText} fill={'#b9bec6'} fontFamily="Inter" fontSize={18} text={"00:14"} />
                </Rect>

              </Layout>
              <Layout direction={'column'} gap={12} alignItems={"start"}>
                <Txt fill={'#7286D3'} fontFamily="Inter" fontSize={32} fontWeight={BOLD} text={"Username"} />
                <Rect
                  ref={eventContent}
                  alignItems="center"
                  justifyContent="center"
                  fill={TEXTBOX}
                >
                  <Txt ref={eventContentText} fill={'#fff'} fontFamily="Inter" fontSize={24} text={"Hello Matrix!"} />
                </Rect>
              </Layout>
            </Rect>
            <Txt ref={description} fill={'#fff'} fontFamily="Inter" opacity={0} fontSize={36} text={"A  Matrix Textevent"} />
          </Rect>
        </Layout>
        <Rect ref={colRight} grow={1} fill={BG}>
          <Rect
            ref={colRightBG}
            fill={BOXRIGHT}
            grow={1}
            radius={4}
            direction={'column'}
            alignItems="center"
            justifyContent="center"
          >
            <Rect
              fill={TEXTBOX}
              radius={4}
              stroke={'#fff'}
              lineWidth={4}
              padding={32}
              width={"75%"}
            >
              <CodeBlock ref={codeTextContainer} language="json" code={`
              {
                "content": {
                  "body": "Hello Matrix!",
                  "msgtype": "m.text"
                },
                "origin_server_ts": 1679081573367,
                "sender": "@example:matrix.org",
                "type": "m.room.message",
                "event_id": "$abc",
                "room_id": "!def:matrix.org"
              }`} />,
            </Rect>
          </Rect>
        </Rect>
      </Layout>
    </>,
  );

  yield* waitUntil('Show Text Event')
  yield* all(
    colLeft().grow(4, 0.8),
    colRight().grow(1, 0.8),
    codeTextContainer().fontSize(23, 0.8),
    colRightBG().margin.left(10, 0.1),
    delay(0.25,
      all(
        textEvent().opacity(1, 0.3),
        description().opacity(1, 0.3)
      )
    )
  );
  yield* waitUntil('Show Content')

  const animation_length = 0.8;
  const radius = 5;
  const padding = 8;
  const darkText = "#000";
  const fontSizeHighlighted = 32;
  yield* all(
    codeTextContainer().selection(lines(1, 4), animation_length),
    eventContentText().fill(darkText, animation_length),
    eventContentText().fontSize(fontSizeHighlighted, animation_length),
    eventContent().fill(HIGHLIGHT, animation_length),
    eventContent().padding(padding).radius(radius).lineWidth(2, animation_length),
    description().text("The Content of the event", animation_length)
  )

  yield* waitUntil('Show Timestamp')
  yield* all(
    codeTextContainer().selection(lines(5), animation_length),
    eventContentText().fill("#fff").fontSize(24, animation_length),
    eventContent().fill(null).padding(0).radius(0).lineWidth(0, animation_length),

    eventTimestampText().fill(darkText, animation_length),
    eventTimestampText().fontSize(fontSizeHighlighted, animation_length),
    eventTimestamp().fill(HIGHLIGHT, animation_length),
    eventTimestamp().padding(padding).radius(radius).lineWidth(2, animation_length),
    description().text("The timestamp of the event", animation_length)

  )

  yield* waitUntil('Next')
});