- let text = 'Good day!';
- let arr = text.split('');

h1(role='img' aria-label=text)
	- arr.forEach(letter => {
		span.letter(class=Math.random() > .5 ? 'rev' : null) #{letter}
	- });

@import 'compass/css3';

$h: .125em;
$a: 2deg;
$f: 1/cos($a);

body {
	display: grid;
	place-content: center;
	overflow: hidden;
	margin: 0;
	height: 100vh;
	background: url(https://images.unsplash.com/photo-1484313544071-4d67c88b99be?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) 50%/ cover
}

h1 {
	display: flex;
	position: relative;
	padding: 0 .5*$h;
	transform-style: preserve-3d;
	font: 900 10vw chilanka, segoe script, purisa, comic sans ms, cursive;
	
	&::after {
		position: absolute;
		top: calc(50% - .5*#{$h}); right: 0;
		width: calc(50% + 50vw); height: $h;
		border-radius: 0 $h $h 0;
		background: crimson;
		animation: slide 2s ease-out;
		content: ''
	}
}

@keyframes slide { 0% { transform: translate(-100%) } }

.letter {
	overflow: visible;
	white-space: pre;
	transform: rotatey($a) scalex($f)
}

.rev { transform: rotatey(-$a) scalex($f) }