Base Front Webpack con gsap.js / barba.js / P5.js

Se necesita una base hecha en webpack, que trabaje armoniosamente con gsap.js, barba.js y p5.js y en donde nosotros podamos manejar las velocidades, transiciones, etc, de forma fácil (puede ser con un documento aparte donde figuren todos los parametros que se puedan modificar). En pocas palabras, crear una base o 'framework' bien amigable donde podamos modificar los parametros de las librerias.
Esta base o 'framework' debe estar fuertemente influenciada por el demo que estamos enviando (Archivos base de trabajo).

Archivos base de trabajo (de los cuales necesitamos en que se trabaje esto)
Demo: https://ihatetomatoes.net/demos/barbajs/barbajs-gsap-transition/
Repositorio: https://github.com/Ihatetomatoes/barbajs-demos

- Barbajs-gsap-transition, es el archivo base con el que queremos que se trabaje, se puede descargar del repositorio más arriba.
- Necesitamos que se trabaje con webpack para que mantengamos el mismo flujo.
- El proyecto se necesita con Gsap.js para los efectos y Barba.js para la transición entre páginas (de manera que sean fluidas y no se note el cambio de página)
- En la configuración de webpack está cargado el loader de Babel.js, la idea es que siga compilando de esta forma para que se mantenga la compatibilidad con la mayoría de los navegadores.


Archivos efecto distorsión sonido p5.js
https://tympanus.net/codrops/2020/02/24/audio-based-image-distortion-effects-with-webgl/
Demo: https://tympanus.net/Development/AudioBasedImageDistortion/

Requerimientos:
- Necesitamos que el archivo base funcione con el sonido y las animaciones de distorsión del ejemplo de p5.js. (Que podamos distorsionar las imagenes como se presentan en el ejemplo del demo, de manera diferente a cada una de las imagenes).
- Necesitamos incluir la animación de inicio (tipo película) en el archivo base y aplicar las distorsiones en las imágenes.

- Necesitamos que en un mismo html se puedan aplicar distintos efectos de distorsión a distintas imágenes. (Es decir, tener control de la distorción que sea diferente en cada imagen que necesitemos)
- Necesitamos que al cambiar de URL (barba.js) la música siga sonando y no se produzcan cortes. Aquí hay referente que lo hace ocupando Barba.js para que se entienda que estamos buscando --> https://www.pantheoneaudio.com/specifications/
- Necesitamos saber como funcionan las distorsiones, saber si nosotros lo podemos editar ya que las del referente son muy agresivas, necesitamos más suavidad y aplicar algunos efectos 3D.

- En esta URL hay bantantes posibilidades: https://github.com/aferriss/p5jsShaderExamples
- Si se necesita, aquí explican como usar barba.js: https://ihatetomatoes.net/get-barba-101/

Cualquier duda me preguntan.
Happy coding!