Mensagem desfocada criado com puro CSS

Bom, eu encontrei esse efeito no site simurai.com e decide compartilhar com vocês. Um efeito, na minha opinião, sensacional.

Clique aqui e veja o exemplo

Entendendo o CSS

Tudo se baseia no desfoque. O texto, em estado normal, fica completamente desfocado, ilegível. No estado hover, o desfoque diminui, assim, podendo ler a mensagem. Além disso, não é usado nem tipo de imagem, é tudo criado com o puro CSS.

.txt {
color: transparent;
text-shadow: #fff 0 0 100px;
-webkit-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
}
#box {
background-color:  rgba(0, 0, 0, 0.3);
padding: 80px 100px;
text-align: center;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);
width: 500px;
-webkit-border-radius: 20px;
font-size: 5em;
font-weight: bold;
margin: 80px auto 20px;
border:1px solid white;
}
#box:hover .txt {
text-shadow: #fff 0 0 5px;
-webkit-transition: text-shadow 1s cubic-bezier(0, 0.75, 0, 1);
}
.heart {
margin: 0 10px;
color: transparent;
text-shadow: red 0 0 8px;
-webkit-transition: text-shadow 1s cubic-bezier(0, 1, 0, 1);
-webkit-animation-name: pulse-animation;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes pulse-animation {
0% { opacity: 1; }
50% { opacity: 0.8; }
100% { opacity: 1; }
}
#box:hover .heart {
margin: 0 5px;
text-shadow: red 0 0 100px;
-webkit-transition: text-shadow 2s cubic-bezier(0, 0.75, 0, 1);
}
#box span:nth-child(3):focus {
outline: none;
}

HTML

<div id="box">
<span class="txt">I</span><span class="heart">&hearts;</span><span class="txt" contenteditable="true">YOU</span>
</div>