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, edit, 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';

import { BG, BOLD, BOXLEFT, BOXRIGHT, HIGHLIGHT, TEXTBOX } from '../utils/constants';
import { IMAGE_EVENT, CODESIZE_DEFAULT as CODESIZE_IMAGE_EVENT } from './imageEvent';
import { easeOutCubic } from '@motion-canvas/core/lib/tweening';

const CODESIZE_DEFAULT = 48;

const TEXT_EVENT = `{
  "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"
}`;

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 eventTimestamp = createRef<Rect>();
  const eventTimestampText = createRef<Txt>();
  const eventUsername = createRef<Rect>();
  const eventAvatar = createRef<Circle>();
  const eventUsernameText = createRef<Txt>();

  view.add(
    <>
      <Layout layout padding={10} width={"100%"} height={"100%"}>
        <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
                  ref={eventAvatar}
                  alignItems="center"
                  justifyContent="center"
                  fill={TEXTBOX}
                >
                  <Circle size={80} fill={'#FD8A8A'} />
                </Circle>
                <Rect
                  ref={eventTimestamp}
                  alignItems="center"
                  justifyContent="center"
                  fill={TEXTBOX}
                  lineWidth={0}
                  lineDash={[0, 0]}
                >
                  <Txt ref={eventTimestampText} fill={'#b9bec6'} fontFamily="Inter" fontSize={18} text={"00:14"} />
                </Rect>

              </Layout>
              <Layout direction={'column'} gap={12} alignItems={"start"}>
                <Rect
                  ref={eventUsername}
                  alignItems="center"
                  justifyContent="center"
                  fill={TEXTBOX}
                >
                  <Txt ref={eventUsernameText} fill={'#7286D3'} fontFamily="Inter" fontSize={32} fontWeight={BOLD} text={"Username"} />
                </Rect>

                <Rect
                  ref={eventContent}
                  alignItems="center"
                  justifyContent="center"
                  fill={TEXTBOX}
                  lineWidth={0}
                  lineDash={[0, 0]}
                >
                  <Txt ref={eventContentText} fill={'#fff'} fontFamily="Inter" fontSize={24} text={"Hello Matrix!"} />
                </Rect>
              </Layout>
            </Rect>
          </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} fontSize={CODESIZE_DEFAULT} language="json" code={TEXT_EVENT} />,
            </Rect>
          </Rect>
        </Rect>
      </Layout>
    </>,
  );

  yield* waitUntil('Show Text Event')


  let animation_length = easeOutCubic(0.8);
  colLeft().save();
  colRight().save();
  textEvent().save();
  yield* all(
    colLeft().grow(4, animation_length),
    colRight().grow(1, animation_length),
    codeTextContainer().fontSize(23, animation_length),
    colRightBG().margin.left(10, 0.1),
    delay(0.25,
      all(
        textEvent().opacity(1, 0.3),
      )
    )
  );
  yield* waitUntil('Show Content')

  animation_length = easeOutCubic(1.5);
  const radius = 5;
  const padding = 8;
  const fontSizeHighlighted = 32;
  const dashes = [15, 15];
  const dashSize = 4;

  eventContent().save();
  eventContentText().save();
  yield* all(
    codeTextContainer().selection(lines(1, 4), animation_length),

    eventContentText().fontSize(fontSizeHighlighted, animation_length),
    eventContent().stroke(HIGHLIGHT, animation_length),
    eventContent().lineDash(dashes, animation_length),
    eventContent().padding(padding, animation_length),
    eventContent().radius(radius, animation_length),
    eventContent().lineWidth(dashSize, animation_length),
  )

  yield* waitUntil('Show Timestamp')
  eventTimestamp().save();
  eventTimestampText().save();
  yield* all(
    codeTextContainer().selection(lines(5), animation_length),

    eventContentText().restore(animation_length),
    eventContent().restore(animation_length),

    eventTimestampText().fontSize(fontSizeHighlighted, animation_length),
    eventTimestampText().fill('#fff', animation_length),
    eventTimestamp().stroke(HIGHLIGHT, animation_length),
    eventTimestamp().lineDash(dashes, animation_length),
    eventTimestamp().padding(padding, animation_length),
    eventTimestamp().radius(radius, animation_length),
    eventTimestamp().lineWidth(dashSize, animation_length),

  )

  yield* waitUntil('Show sender')
  yield* all(
    codeTextContainer().selection(lines(6), animation_length),

    eventTimestampText().restore(animation_length),
    eventTimestamp().restore(animation_length),

    eventUsernameText().fontSize(fontSizeHighlighted, animation_length),
    eventUsername().stroke(HIGHLIGHT, animation_length),
    eventUsername().lineDash(dashes, animation_length),
    eventUsername().padding(padding, animation_length),
    eventUsername().radius(radius, animation_length),
    eventUsername().lineWidth(dashSize, animation_length),


    eventAvatar().stroke(HIGHLIGHT, animation_length),
    eventAvatar().lineDash(dashes, animation_length),
    eventAvatar().padding(padding, animation_length),
    eventAvatar().lineWidth(dashSize, animation_length),
  )

  yield* waitUntil('Back to Overview')

  animation_length = 0.8;
  yield* all(
    colLeft().restore(animation_length),
    colRight().restore(animation_length),
    codeTextContainer().fontSize(CODESIZE_IMAGE_EVENT, animation_length),
    textEvent().restore(animation_length),
    codeTextContainer().selection(lines(0, 10), animation_length),
    delay(animation_length - 0.1,
      colRightBG().margin.left(0, 0.1)
    )
  );

  yield* waitUntil('Next Slide')
  yield* codeTextContainer().edit(1.2)`${edit(TEXT_EVENT, IMAGE_EVENT)}`
});