motion blur

dabblet.css

/*
motion blur
*/
html{
	text-align:center;
}
div{
	background:rgba(255,0,0,.1);
	display:inline-block;
	margin:20px;
	font-size:80px;
	font-weight:bold;
	color:transparent;
	text-shadow:
		 0   0 0 rgba(0,0,0,.4  ),
		-12px 0 0 rgba(0,0,0,.00625),
		 12px 0 0 rgba(0,0,0,.00625),
		-10px 0 0 rgba(0,0,0,.0125),
		 10px 0 0 rgba(0,0,0,.0125),
		-8px 0 0 rgba(0,0,0,.025),
		 8px 0 0 rgba(0,0,0,.025),
		-6px 0 0 rgba(0,0,0,.05 ),
		 6px 0 0 rgba(0,0,0,.05 ),
		-4px 0 0 rgba(0,0,0,.1  ),
		 4px 0 0 rgba(0,0,0,.1  ),
		-2px 0 0 rgba(0,0,0,.2  ),
		 2px 0 0 rgba(0,0,0,.2  );
		 transition:all 1s;
}
html:hover #d1:not(:hover){
	text-shadow:
		0 0 0 rgba(0,0,0,1);
}
html:hover #d2:not(:hover){
	text-shadow:
		0 0 0 rgba(0,0,0,.4  ),
		0 0 0 rgba(0,0,0,.00625),
		0 0 0 rgba(0,0,0,.00625),
		0 0 0 rgba(0,0,0,.0125),
		0 0 0 rgba(0,0,0,.0125),
		0 0 0 rgba(0,0,0,.025),
		0 0 0 rgba(0,0,0,.025),
		0 0 0 rgba(0,0,0,.05 ),
		0 0 0 rgba(0,0,0,.05 ),
		0 0 0 rgba(0,0,0,.1  ),
		0 0 0 rgba(0,0,0,.1  ),
		0 0 0 rgba(0,0,0,.2  ),
		0 0 0 rgba(0,0,0,.2  );
}
html:hover #d3:not(:hover){
	text-shadow:
		0 0 0 rgba(0,0,0,1),
		0 0 0 rgba(0,0,0,0),
		0 0 0 rgba(0,0,0,0),
		0 0 0 rgba(0,0,0,0),
		0 0 0 rgba(0,0,0,0),
		0 0 0 rgba(0,0,0,0),
		0 0 0 rgba(0,0,0,0),
		0 0 0 rgba(0,0,0,0),
		0 0 0 rgba(0,0,0,0),
		0 0 0 rgba(0,0,0,0),
		0 0 0 rgba(0,0,0,0),
		0 0 0 rgba(0,0,0,0),
		0 0 0 rgba(0,0,0,0);
}

dabblet.html

<div id="d1">Lorem Ipsum</div>
<div id="d2">Lorem Ipsum</div>
<div id="d3">Lorem Ipsum</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}