#headlight-field
  #headlight-text Twixes

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #fff;
}

#headlight-field {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#headlight-text {
  will-change: text-shadow;
  transform: translate3d(0, 0, 0);
  color: #fff;
  font: 700 italic 24vmin "Roboto";
  text-rendering: optimizeLegibility;
}

// # WORKS WELL ONLY ON LARGE TEXT
// # actually use a canvas-based solution, please!

// # quick glossary:
// outerId = the ID of the mouse tracking plane (can be the same as innerId)
// innerId = the ID of the shaded element (can be the same as outerId)
// shadowType = determines if the shadow is a text or box one (valid values: 'text', 'box')

// # shading function
function HeadlightShade(x, y, innerId, shadowType, shadowSmoothness, shadowLengthLimit, shadowScattering, shadowOpacity) {
  var shadowSettings = [];
  var shadows = [];
  var shadow;
  x = x - $('#' + innerId).offset().left - $('#' + innerId).width() / 2;
  y = y - $('#' + innerId).offset().top - $('#' + innerId).height() / 2;
  // ## Y axis shadow length limiting
  if (y < 0 && y < -shadowLengthLimit) {
    y = -shadowLengthLimit;
  } else if (y > shadowLengthLimit) {
    y = shadowLengthLimit;
  }
  // ## X axis shadow length limiting
  if (x < 0 && x < -shadowLengthLimit) {
    x = -shadowLengthLimit;
  } else if (x > shadowLengthLimit) {
    x = shadowLengthLimit;
  } 
  // ## configuring shadows
  for (i = 0; i < shadowSmoothness; i++) {
    shadowSettings.push({
      x: (-x) / shadowSmoothness * i,
      y: (-y) / shadowSmoothness * i,
      width: shadowScattering * i,
      opacity: shadowOpacity - (shadowOpacity / shadowSmoothness ) * i
    });
  }
  // ## setting shadows up
  for (i in shadowSettings) {
    shadows.push(shadowSettings[i].x + 'px ' + shadowSettings[i].y + 'px ' + shadowSettings[i].width + 'px rgba(0, 0, 0,' + shadowSettings[i].opacity + ')');
  }
  // ## applying shadows
  if (shadowType === 'text') {
    $('#' + innerId).css({
      'text-shadow': shadows.join(', ')
    });
  } else if (shadowType === 'box') {
    $('#' + innerId).css({
      'box-shadow': shadows.join(', ')
    });
  }
}

// # mouse tracking function
function HeadlightTrack(outerId, innerId, shadowType, shadowSmoothness, shadowLengthLimit, shadowScattering, shadowOpacity) {
  // ## shade basing on the cursor's position
  $('#' + outerId).mousemove(function (e) {
    HeadlightShade(e.pageX, e.pageY, innerId, shadowType, shadowSmoothness, shadowLengthLimit, shadowScattering, shadowOpacity);
  });
  // ## default shading settings (used when no input was provided)
 HeadlightShade(0, 50, innerId, shadowType, shadowSmoothness, shadowLengthLimit, shadowScattering, shadowOpacity);
}

// # activation and configuration
HeadlightTrack('headlight-field', 'headlight-text', 'text', 16, 200, 8, 0.25);