Star Wars opening crawl effect

dabblet.css

/* Star Wars opening crawl effect */

.fade {
	margin: -40px auto 0;
	max-width: 540px;
    position: relative;
    width: 50%;
    transform: perspective(20px) rotateX(7deg) translateZ(-6px);
}

.fade::before {
	background: linear-gradient(to bottom, #000 5px, transparent 20px);
	content: ' ';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 20px;
	z-index: 2;
}

.text {
	appearance: none;
	background: transparent;
	border: none;
	color: #fc0;
	display: block;
	font: bold 23px/25px "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
    height: 250px;
	outline: none;
	overflow: hidden;
	resize: none;
	text-align: justify;
	width: 100%;
	white-space: pre-line;
}

.text:hover {
	overflow: auto;
}



/* Star background (based on Keith Clark's pure CSS starfield:
   http://codepen.io/keithclark/details/zqcEd) */

body {
	background-color: black;
	background-image: 
		radial-gradient(1px 1px at 110px 2px, #fff, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 17px 20px, #fff, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 40px 30px, #fff, rgba(0,0,0,0)),
		radial-gradient(1px 1px at 81px 140px, #fff, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 10px 70px, #fff, rgba(0,0,0,0)),
		radial-gradient(1px 1px at 50px 100px, #fff, rgba(0,0,0,0)),
		radial-gradient(1px 1px at 90px 70px, #fff, rgba(0,0,0,0)),
		radial-gradient(1px 1px at 130px 80px, #fff, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 140px 150px, #fff, rgba(0,0,0,0)),
		radial-gradient(1px 1px at 130px 170px, #fff, rgba(0,0,0,0)),
		radial-gradient(1px 1px at 160px 120px, #fff, rgba(0,0,0,0));
	background-repeat: repeat;
	background-size:
		205px 200px,
		190px 235px,
		305px 150px,
		280px 210px,
		220px 160px,
		105px 300px;
	perspective: 1000px;
}

dabblet.html

<div class="fade">
	<!--
	You can change this div to a textarea as originally requested,
	but you'll lose text justification!
	-->
	<div class="text" contenteditable spellcheck="false">It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.

Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.

The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}