examples/gradio-motion-canvas-example.tsx

import {makeScene2D, Img, Layout, Icon} from '@motion-canvas/2d';
import {createRef, easeOutCubic, spring, all, waitFor} from '@motion-canvas/core';

let gradioLogoSvg = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='576'%20height='576'%20viewBox='0%200%20576%20576'%20fill='none'%3e%3cpath%20d='M287.5%20229L86%20344.5L287.5%20460L489%20344.5L287.5%20229Z'%20stroke='url(%23paint0_linear_102_7)'%20stroke-width='59'%20stroke-linejoin='round'/%3e%3cpath%20d='M287.5%20116L86%20231.5L287.5%20347L489%20231.5L287.5%20116Z'%20stroke='url(%23paint1_linear_102_7)'%20stroke-width='59'%20stroke-linejoin='round'/%3e%3cpath%20d='M86%20344L288%20229'%20stroke='url(%23paint2_linear_102_7)'%20stroke-width='59'%20stroke-linejoin='bevel'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_102_7'%20x1='60'%20y1='341'%20x2='429.5'%20y2='344'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23F9D100'/%3e%3cstop%20offset='1'%20stop-color='%23F97700'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_102_7'%20x1='513.5'%20y1='231'%20x2='143.5'%20y2='231'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23F9D100'/%3e%3cstop%20offset='1'%20stop-color='%23F97700'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_102_7'%20x1='60'%20y1='344'%20x2='428.987'%20y2='341.811'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23F9D100'/%3e%3cstop%20offset='1'%20stop-color='%23F97700'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"

export default makeScene2D(function* (view) {
  view.fill('white'); // set the background of this scene

  const gradioLogo = createRef<Img>();
  const addIcon = createRef<Icon>();
  const motionCanvasLogo = createRef<Img>();
  const plusIcon = createRef<Icon>();
  const heartIcon = createRef<Icon>();

  view.add(
    <Layout layout direction={'row'} size={'100%'} padding={100} gap={0} alignItems={'center'} justifyContent={'center'}>
      <Img ref={gradioLogo} src={gradioLogoSvg} width='25%' offset={[1,2]}/>
      <Icon ref={addIcon} icon="material-symbols-light:add-2-rounded" color="#404040" width='20%' margin={-10} />
      <Img ref={motionCanvasLogo} src="https://motioncanvas.io/img/logo.svg" width='25%'  margin={-10} />
      <Icon ref={plusIcon} icon="material-symbols-light:equal" color="#404040" width='20%' margin={-30} />
      <Icon ref={heartIcon} icon="material-symbols-light:favorite" color="#ff6470" width='25%' />
    </Layout>
  );

  let initalMargin = view.size().y*1.5;
  gradioLogo().margin.bottom(initalMargin);
  addIcon().margin.bottom(initalMargin);
  motionCanvasLogo().margin.bottom(initalMargin);
  plusIcon().margin.bottom(initalMargin);
  heartIcon().margin.bottom(initalMargin);

  const MySpring = {
    mass: 0.04,
    stiffness: 10.0,
    damping: 0.85,
    initialVelocity: 8.0,
  };

  let springInAnim = function(obj : any) {
    return spring(MySpring, initalMargin, 0, 5, value => {
      obj().margin.bottom(value);
    });
  };

  yield* springInAnim(gradioLogo);
  yield* springInAnim(addIcon);
  yield* springInAnim(motionCanvasLogo);
  yield* springInAnim(plusIcon);
  yield* springInAnim(heartIcon);

  yield * waitFor(1);

  // let them fade away
  yield* all(
    gradioLogo().opacity(0, 1, easeOutCubic),
    addIcon().opacity(0, 1, easeOutCubic),
    motionCanvasLogo().opacity(0, 1, easeOutCubic),
    plusIcon().opacity(0, 1, easeOutCubic),
    heartIcon().opacity(0, 1, easeOutCubic),
  );

  yield * waitFor(1);

});