A CodePen by Daniel Marino.

index.html

<h1>Hover over the text</h1>

<p>Not sure if its an original idea or not, but fun concept none-the-less. Using text-shadow to blur text, and unbluring text when hovering with the magnifying glass. Not sure what can be done to make this not so laggy.</p>

<p id="demo">Nulla sollicitudin facilisis eros a bibendum. Morbi lobortis accumsan vulputate. Ut et lectus mi, in congue elit. Nullam sit amet massa velit, at blandit felis. Fusce eleifend, eros at dapibus faucibus, arcu velit elementum lorem, sit amet ullamcorper nibh velit ac neque. Mauris sed mauris erat, non varius erat. Proin dapibus rutrum felis fermentum tincidunt. Pellentesque nec nisl eu dui vehicula lacinia vitae in justo. Duis consequat aliquam odio eu vulputate. Maecenas placerat sodales magna, eu sagittis mauris malesuada a. Phasellus dapibus posuere rhoncus. Fusce vel arcu at ipsum condimentum laoreet. Nam congue urna sit amet magna gravida vehicula. Aliquam.</p>

<div id="unblur"></div>

script.js

(function(d){

  var letters = d.getElementById('demo').childNodes[0].nodeValue;
  var unblur  = $("#unblur");
  var thehtml = [];

  letters.split('').forEach(function(word){
    thehtml.push("<b>" + word + "</b>");
  });

  $('#demo').html(thehtml);

  $(document).on("mousemove", "#demo, #unblur", function(evt) {

    var pX  = evt.pageX;
    var pY  = evt.pageY;
    var els = [];

    unblur.css({
      "left": pX - 50 + "px",
      "top":  pY - 50 + "px",
    });

    unblur.hide();

    for ( var y = pY - 45; y < pY + 45; y += 1 ) {
      for ( var x = pX - 45; x < pX + 45; x += 1 ) {
        var el = d.elementFromPoint(x, y);
        if ((el.offsetLeft >= x) && (el.offsetTop >= y)) {
          els.push(el)
        }
      }
    }

    $('b').removeClass('hover');

    els.forEach(function(t) {
      t.classList.add('hover');
    });

    unblur.show();

  });

}(document));

style.scss

@import "compass";
body {
  margin: 50px 60% 50px 50px;
}

#demo {
  cursor: none;
  font-family: helvetica-light;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 40px;
  padding: 0;
}

b {
  color: transparent;
  font-weight: normal;
  text-shadow: 0 0 10px #222;
}

.hover {
  text-shadow: 0 0 0 #222;
}

#unblur {
  background: transparent;
  border: 1px solid #fff;
   border-radius: 100%;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .75) inset, 0 0 50px 10px #fff inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .75) inset, 0 0 50px 10px #fff inset;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .75) inset, 0 0 50px 10px #fff inset;
  cursor: none;
  height: 100px;
  position: absolute;
  width: 100px;
  display: none;
}