Implemented the JS for a cool looking wave design.

Needs testing once html in done.

wave.js

@@ -0,0 +1,157 @@
+
+App({ el: 'background' });
+
+function App(conf) {
+  conf = {
+    fov: 70,
+    cameraZ: 75,
+    xyCoef: 50,
+    zCoef: 10,
+    lightIntensity: 0.7,
+    ambientColor: 0x000000,
+    light1Color: 0x0E09DC,
+    light2Color: 0x1CD1E1,
+    light3Color: 0x18C02C,
+    light4Color: 0xee3bcf,
+    ...conf };
+
+
+  let renderer, scene, camera, cameraCtrl;
+  let width, height, cx, cy, wWidth, wHeight;
+  const TMath = THREE.Math;
+  const waveHeight = document.getElementsByClassName('landmark-grid-container')[0];
+  console.log(waveHeight);
+  let plane;
+  const simplex = new SimplexNoise();
+
+
+
+  const mouse = new THREE.Vector2();
+  const mousePlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+  const mousePosition = new THREE.Vector3();
+  const raycaster = new THREE.Raycaster();
+
+  conf.xyCoef = 6;
+  conf.zCoef = 7;
+
+
+  init();
+
+  function init() {
+    renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(conf.el), antialias: true, alpha: true });
+    camera = new THREE.PerspectiveCamera(conf.fov);
+    camera.position.z = conf.cameraZ;
+
+    updateSize();
+    window.addEventListener('resize', updateSize, false);
+
+    initScene();
+    animate();
+  }
+
+  function initScene() {
+    scene = new THREE.Scene();
+    initLights();
+
+    let mat = new THREE.MeshLambertMaterial({ color: 0xffffff, side: THREE.DoubleSide });
+    let geo = new THREE.PlaneBufferGeometry(wWidth, wHeight, wWidth / 2, wHeight / 2);
+    plane = new THREE.Mesh(geo, mat);
+    scene.add(plane);
+
+    plane.rotation.x = -Math.PI / 2 - 0.2;
+    plane.position.y = -25;
+    camera.position.z = 60;
+  }
+
+  function initLights() {
+    const r = 30;
+    const y = 10;
+    const lightDistance = 500;
+
+    // light = new THREE.AmbientLight(conf.ambientColor);
+    // scene.add(light);
+
+    light1 = new THREE.PointLight(conf.light1Color, conf.lightIntensity, lightDistance);
+    light1.position.set(0, y, r);
+    scene.add(light1);
+    light2 = new THREE.PointLight(conf.light2Color, conf.lightIntensity, lightDistance);
+    light2.position.set(0, -y, -r);
+    scene.add(light2);
+    light3 = new THREE.PointLight(conf.light3Color, conf.lightIntensity, lightDistance);
+    light3.position.set(r, y, 0);
+    scene.add(light3);
+    light4 = new THREE.PointLight(conf.light4Color, conf.lightIntensity, lightDistance);
+    light4.position.set(-r, y, 0);
+    scene.add(light4);
+  }
+
+  function animate() {
+    requestAnimationFrame(animate);
+
+    animatePlane();
+    animateLights();
+
+    renderer.render(scene, camera);
+  };
+
+  function animatePlane() {
+    gArray = plane.geometry.attributes.position.array;
+    const time = Date.now() * 0.0002;
+  
+    for (let i = 0; i < gArray.length; i += 3) {
+      if(!waveHeight)
+      	gArray[i + 2] = simplex.noise4D(gArray[i] / conf.xyCoef, gArray[i + 1] / conf.xyCoef, time, 5) * conf.zCoef;
+      else
+      	gArray[i + 2] = simplex.noise4D(gArray[i] / conf.xyCoef, gArray[i + 1] / conf.xyCoef, time, 100) * conf.zCoef;
+      	
+    }
+    plane.geometry.attributes.position.needsUpdate = true;
+    // plane.geometry.computeBoundingSphere();
+  }
+
+  function animateLights() {
+    const time = Date.now() * 0.001;
+    const d = 50;
+    light1.position.x = Math.sin(time * 0.1) * d;
+    light1.position.z = Math.cos(time * 0.2) * d;
+    light2.position.x = Math.cos(time * 0.3) * d;
+    light2.position.z = Math.sin(time * 0.4) * d;
+    light3.position.x = Math.sin(time * 0.5) * d;
+    light3.position.z = Math.sin(time * 0.6) * d;
+    light4.position.x = Math.sin(time * 0.7) * d;
+    light4.position.z = Math.cos(time * 0.8) * d;
+  }
+
+  function updateLightsColors() {
+    conf.light1Color = chroma.random().hex();
+    conf.light2Color = chroma.random().hex();
+    conf.light3Color = chroma.random().hex();
+    conf.light4Color = chroma.random().hex();
+    light1.color = new THREE.Color(conf.light1Color);
+    light2.color = new THREE.Color(conf.light2Color);
+    light3.color = new THREE.Color(conf.light3Color);
+    light4.color = new THREE.Color(conf.light4Color);
+    // console.log(conf);
+  }
+
+  function updateSize() {
+    width = window.innerWidth;cx = width / 2;
+    height = window.innerHeight;cy = height / 2;
+    if (renderer && camera) {
+      renderer.setSize(width, height);
+      camera.aspect = width / height;
+      camera.updateProjectionMatrix();
+      const wsize = getRendererSize();
+      wWidth = wsize[0];
+      wHeight = wsize[1];
+    }
+  }
+
+  function getRendererSize() {
+    const cam = new THREE.PerspectiveCamera(camera.fov, camera.aspect);
+    const vFOV = cam.fov * Math.PI / 180;
+    const height = 2 * Math.tan(vFOV / 2) * Math.abs(conf.cameraZ);
+    const width = height * cam.aspect;
+    return [width, height];
+  }
+}