In case you were wondering what the header animation is, it’s a quick 24-line (excluding blank lines and closing braces) Processing sketch. Here it is, in all its slapped-together-in-a-few-minutes glory:

int barCount = 64;
int barGap = 8;

boolean output = true; //When enabled, the sketch will output the animation as PNG images and exit

int maxFrameCount = 240; //How many frames it takes to perform the animation

void setup(){
  size(1920, 360);
  frameRate(30);
}

void drawBars(){
  noStroke();
  fill(#17becf);
  for(int i = 0; i <= barCount; i++){
    float barTheta = 
      ( TAU*((float)i/barCount) ) + //base angle based on position on graph (for the shape of the waveform)
      ( TAU*(float)(frameCount%maxFrameCount)/maxFrameCount //additional angle for animation
    );
      
    int barHeight = round((sin(barTheta)*(height/4)) + (height / 2));
    int barSpacing = width/barCount;
    int barWidth = barSpacing - barGap;
    rect(barSpacing*i, barHeight, barWidth, height);
  }
}

void draw(){
  background(0);
  //drawTriGrid();
  drawBars();
  if(output){
    if(frameCount == maxFrameCount){exit();}
    saveFrame("frames/"+frameCount+".png");
  }
}

To convert the output frames to an MP4 video for use on WordPress, I imported it as an image sequence in Blender’s NLE and exported in H.264.

Feel free to use this sketch for all your sine wave animation needs.