P5js script not working

Design help Custom code
1

Hey community,
I am looking to understand why a custom code i am integrating is not working!
Anyone with some experience in P5 is welcome :smile:

basically this is what I am including in the before tag
I have then a

with the ID p5-container

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js" type="text/javascript"></script>
<script>

const str = ['Concept','Content design', 'Exhibition design','Graphic design','Copywriting','Information design','Interaction design','Creative Technology','Custom software design','UX/UI','Datavisualization'];
let str_arr = []; 

let customFont = "Supreme";

let w, h; 

const p5Container = document.querySelector("#p5-container");

function setup() {
  w = p5Container.clientWidth;
  h = p5Container.clientHeight;

  let cnv = createCanvas(w, h, WEBGL); // Aggiungi WEBGL qui
  cnv.parent(p5Container);
  cnv.style("position", "absolute");
  cnv.style("inset", 0);
  cnv.style("z-index", -1);
  noStroke();

  for (let i = 0; i < str.length * 10; i++) {
    let x = random(-w / 2, h / 2);
    let y = random(-h / 2, h / 2);
    let z = random(-w * 5, w / 2);
    str_arr.push(new Type(str[i % str.length], x, y, z));
  }
}

function draw() {
  background(0, 0, 0);
  orbitControl();
  for (let i = 0; i < str_arr.length; i++) {
    str_arr[i].update();
    str_arr[i].display();
  }
}

class Type {
  constructor(_str, _x, _y, _z) {
    this.str = _str;
    this.x = _x;
    this.y = _y;
    this.z = _z;
  }

  update() {
    this.z += 5;
    if (this.z > w / 2) {
      this.z = -w * 5;
    }
  }

  display() {
    push();
    translate(this.x, this.y, this.z);
    textAlign(CENTER, CENTER);
    textFont(customFont); // Imposta il font di webflow
    textSize(30);
    fill(212, 202, 202);
    text(this.str, 0, 0);
    pop();
  }
}

function windowResized() {
  w = p5Container.clientWidth;
  h = p5Container.clientHeight;
  resizeCanvas(w, h);
}
</script>

Here is my site Read-Only: Webflow - Limiteazero