I always wanted to teach. And I have always wasted time to find the right tool.

I have always revolved around motioncanvas, animotion, remotion and even revealjs.

As the title suggest I gave up and chose motioncanvas.

Yesterday I missed a day of dev. But I really enjoyed what I learnt, I'll probably show the my update here.

Here we go [initial commit]

The code for the above

import { Circle, CODE, Code, CubicBezier, Layout, LezerHighlighter, makeScene2D, Path, Rect } from '@motion-canvas/2d';
import { all, createEffect, createRef, Reference, sequence, spawn, waitFor, createSignal } from '@motion-canvas/core';
import { parser } from "@lezer/python";
import { PathBuilder } from "owd-path-builder";

Code.defaultHighlighter = new LezerHighlighter(
  parser.configure({
    dialect: 'py',
  })
)

const emails = [
  'vheller@yahoo.com',
  'edgar.jacobson@yahoo.com',
  'plebsack@gmail.com',
  'medhurst.elsie@homenick.com',
  'tyler41@yahoo.com',
  'greenholt.dorthy@gmail.com',
  'nola11@braun.com',
  'monte62@yahoo.com',
  'nader.ivory@grady.net',
  'lillie.kunde@stamm.com'
]

const regexpEg = `email = re.findall(r'[w.-]+@[w.-]+(.[w]+)+',line)` 

const regexpEgWords = regexpEg.split(`=`)

const regexpLeft = regexpEgWords[0]
const regexpRight = regexpEgWords[1]

const bg = "#272822"

export default makeScene2D(function* (view) {
  // Create your animations here
  view.fill(bg)

  const code = createRef<Code>();
  const codeContainer = createSignal<Layout>()
  const codeSignal = createSignal(code)

  const bottom = {
    ref : createRef<Path>(),
    path : new PathBuilder(),
  }
  const top = {
    ref : createRef<Path>(),
    path : new PathBuilder(),
  }
  const left = {
    ref : createRef<Path>(),
    path : new PathBuilder(),
  }
  const right = {
    ref : createRef<Path>(),
    path : new PathBuilder(),
  }

  createEffect(() => {
    
  })

  view.add(
    <>
      <Code
        ref={code}
        fontSize={50}
        code={``}
      />,
      <Path
        ref={bottom.ref}
        lineWidth={26}
        stroke={"#fff"}
        data={bottom.path.absolute().moveTo(-3000, 550).toString()}
        scale={0.25}
      />,
      <Path
        ref={top.ref}
        lineWidth={26}
        stroke={"#fff"}
        data={top.path.absolute().moveTo(3000, -550).toString()}
        scale={0.25}
      />,
      <Path
        ref={right.ref}
        lineWidth={26}
        stroke={"#fff"}
        data={right.path.absolute().moveTo(3000, 550).toString()}
        scale={0.25}
      />
      <Path
        ref={left.ref}
        lineWidth={26}
        stroke={"#fff"}
        data={left.path.absolute().moveTo(-3000, -550).toString()}
        scale={0.25}
      />
    </>
  )

  yield* all(
    bottom.ref().data(
      bottom.path.horizontalLine(3000).toString(),
      3,
    ),
    top.ref().data(
      top.path.horizontalLine(-3000).toString(),
      3,
    ),
    right.ref().data(
      right.path.verticalLine(-550).toString(),
      1,
    ),
    left.ref().data(
      left.path.verticalLine(550).toString(),
      1,
    ),
    code().code.append(regexpRight, 3),
    waitFor(1)
  )

});