<h1 contenteditable data-heading="Folded">Folded</h1>

body {
	background: linear-gradient(45deg, lch(90 2.22 62.5) 80%, lch(78 2.15 94.43) 100%);
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
	
h1 {
	font-family: 'Source Code Pro', monospace;
	font-weight: 900;
	font-size: calc(20vw + 0.5rem);
	white-space: nowrap;
	
	color: lch(76 39.21 9.23 / 0.5);
	text-transform: uppercase;
	transform: skew(10deg) rotate(-10deg);
	text-shadow: 1px 4px 6px lch(90 2.22 62.5), 0 0 0 lch(28 26.21 12.27), 1px 4px 6px lch(90 2.22 62.5);

	&::before {
		content: attr(data-heading);
		position: absolute;
		left: 0;
		top: -4.8%;
		overflow: hidden;
		height: 50%;
		color: lch(97 2.19 62.49);
		transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
		text-shadow: 2px -1px 6px rgba(0,0,0,0.2);
	}

	&::after {
		content: attr(data-heading);
		position: absolute;
		left: 0;
		color: lch(83 2.26 62.51);
		transform: translate(0, 0) skew(13deg) scale(1, 0.8);
		clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
		text-shadow: 2px -1px 6px lch(0 0 0 / 0.3);
	}
}

// JS for content editable trick from Chris Coyier

var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
  this.setAttribute("data-heading", this.innerText);
});