import {Img, makeScene2D} from '@motion-canvas/2d';
import {createRef} from '@motion-canvas/core';

// Visit https://motioncanvas.io/docs for more information.
export default makeScene2D(function* (view) {
  view.fill('#141414');

  const iconRef = createRef<Img>();
  yield view.add(<Img src={'https://motioncanvas.io/img/logo_dark.svg'} size={500} ref={iconRef} />);
  // Modification happens by accessing the `filters` property.
  // Individual filters don't need to be initialized. If a filter you set doesn't
  // exists, it will be automatically created and added to the list of filters.
  // If you have multiple filters of the same type, this will only
  // modify the first instance (you can use the array method for more control).
  yield* iconRef().filters.blur(10, 1);
  yield* iconRef().filters.blur(0, 1);
});