<html lang="en" class="loading">
<head>
	<meta charset="utf-8">
	<title>Ryan Brown Self Portrait</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" user-scalable="yes">
</head>

<body>
	<div class="mobile-codepen-note">CodePen doesn't seem to support device tilt. Try viewing <a href="http://portraits.ryankbrown.com/self/" target="_blank">here</a></div>
	<main>
		<section>
			<div class="instructions">
				<div class="move-mouse">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/mouse-icon.svg" class="mouse-icon" alt="Mouse Icon" />
					<span>Move Mouse</span>
				</div>
				<div class="move-device">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/mobile-icon.svg" class="mobile-icon" alt="Mobile Icon" />
					<span>Tilt Device</span>
				</div>
			</div>
			<figure class="description">
				<svg class="signature" xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 510 120.5" viewBox="0 0 510 120.5">
					<defs>
						<clipPath id="mask">
							<path id="mask-shape" d="M305.2 48.7c-1.1-.7-1.2-2.3-.1-3.1 10.4-7.6 37.5-11.3 50-22.4 3.7-3.3 3.5-7.2.2-9.8-3.9-3.1-7.8-3.4-27.5-2.8-11.5.3-31.8 3.3-49.3 10.4-3.3 1.3-6.5 3-9.7 4.7-1.3.7-2.2 2.7-1.9 3.7 1.2 3.7 4.7.4 10.4-1.9 14.4-5.8 23.8-8.4 43.3-11.2 19-2.7 30.6-.8 31.5-.3 4.1 2 1.5 4.9-2.6 6.9-8 4-15.7 6.2-24.1 9.2-22.5 8-26.4 10.7-25.9 16.1.7 8 19.7 12.3 32.9 22.6 3 2.4 8 6.7 5.4 9.5-1 1.1-2.2 2.2-3.6 2.8-10.7 5-19.4 6.2-31.2 7.3-16.7 1.6-21.6 2.1-32.7 2.6.9-2.3 2.1-6.7 11.5-23.2 11.8-20.9 16.4-35.8 18.6-38.1.6-.6 1-1.3.7-2-.4-.8-1.1-1.3-2.1-1.3-1.6 0-2.7.9-3.3 2.2-1.4 2.8-2.7 5.6-4 8.4-6.2 13.2-5.5 12.7-14.9 29.3-7.5 13.3-12.6 22.1-15.1 28.5-.6 1.7 1 3.1 2.7 2.6.1 0 88.5-2 77.8-25.1-4.2-10.2-20.9-17.3-37-25.6zM41.1 70.6c-8.3-10.3-15-12.1-12.1-13.4 9.1-4.2 35.1-10.4 54.1-24.5 3.6-2.7 7.3-5.4 10.3-8.8 7.3-8.2 2.3-20-15.7-19.3-3.8.2-7.5.4-11.2.7C46.9 6.7 16.2 24 7 31.2c-7.7 6.1-1.7 10.6.8 8.8 2-1.4-.3-2.9 1.2-4 2.3-1.6 4.5-3.4 7-4.8 39.8-23.6 51.4-20.3 63-21 8.6-.5 16.1 4 11 9.8-8.6 9.8-24 17.5-36 22.6-5.5 2.4-20.6 7.7-23.1 8.2.3-1.4 4.5-10.7 7.2-18.1.3-.9.3-2.1 0-2.9-.2-.6-1.3-1.2-2-1.2-3.1-.2-1.1 3.9-21.2 39.3C12 73 3.1 89.4 6 94.4c.5.8 1.2 1.4 2.2 1.3 2.2-.4 1-2.7 3.6-7.9 1.5-3.1 2.6-6.4 4.2-9.4 2.6-5 5.5-9.9 8.2-14.9.9-1.6.5-.6 15.5 11.8 1.5 1.2 3.2 2.2 4.8 3.3.6.4 1.3.3 1.7-.4.4-.6.1-1.2-.3-1.7-1.6-2-3.2-3.9-4.8-5.9zm110.2 16.8c-16.3-1.3-28.1 1.9-30.8-7-.3-1.1-.7-2.2-1-3.3-.9-2.7-3.3-3.6-6-1.2-10.3 9.1-11.6 11.1-15 10.9-1-.1-1.5-.5-1.4-1.5.4-8.2 4.5-12 6.6-15.9.5-1 0-2-.7-2.7-1.4-1.5-2.7-1-4.7 1.4-3.3 4-7.5 13.9-19.9 25.7-6.5 6.1-7.6 6.9-11 9.1 3.8-5.9 9.8-12.7 16-22.9 7-10.7 3.2-17.3-4.2-11.7C68.3 76.4 65 84.4 62.3 83.4c-.8-.3-1.3-1-1.4-1.9-.2-2.7-.4-5.5-.6-8.2-.3-9.3.7-13-2.2-13.4-1-.1-1.8.4-2.2 1.4-.2.5-.4 1.1-.4 1.7 0 5.9-.1 11.9.1 17.8.2 6.8 6.9 11.1 12.4 5.3 14-15 10.5-11.5 13.3-13.6.1.1.2.1.3.2-.2.6-.4 1.2-.7 1.8-2.3 3.6-4.4 7.3-6.9 10.7-3.5 4.8-7.2 9.3-10.8 14-2.8 3.5-5.6 7-8.2 10.6-.9 1.2-1.6 2.6-2.1 4-.6 1.5.5 3.4 1.8 3.7 1.4.3 2.8.3 4-.6 2.1-1.5 4.3-2.9 6.1-4.6 5-5 12.1-10 17-15.1 2.3-2.5 4.4-5.1 6.6-7.7 1-1.2 2.1-2.4 3.2-3.8.2.6.3.9.3 1.2.2 2.5 1.5 4.3 3.9 4.9 3 .7 5.9.3 8.6-1.4 3.3-2.2 6.3-4.8 8.9-7.8.5-.5 1-1 1.6-1.5.8 1.7 1.2 3.4 2.1 4.8 3.1 5 8.2 6.9 13.6 7 6.3.2 12.7-.4 19.1-.6 1.1 0 2.2-.1 3.2-.5.6-.2 1.2-.9 1.4-1.4.3-1.8-1.9-2.9-3-3zm347-5.2c-9.5 3.5-15.1 5.2-23.7 3.6-2.2-.4-3.9-1.8-5.5-3.1-2.1-1.7-4.3-2.8-7.1-2.8-4.8-.1-12.1 2.6-15.3-.3-.9-.8-1.6-1.9-2.3-2.9-3.7-5.1-7.1-2.2-14.3 1.1-4.9 2.3-2.6.4-3.8-3.4-1.4-4.4-5.3-.1-13.1 4.5-2.2 1.3-.6-2.4-.5-5.8 0-2.2-1.5-4.5-4.4-3.3-.5.2-1 .2-1.5.4-1.7.5-3.3.5-4.7-.9-.6-.6-1.6-.8-2.5-1-1.2-.2-1.4-2.2-2.8-2.8-2.3-.9-4.7-.8-6.7.7-9.4 7.1-6.8 11.4-9.9 10.9-.7-.1-1.4-.3-1.4-1.3-.3-4.3-.7-8.5-4.4-9.5-.9-.2-1.5-.3-2.5-.2.1-.3-.3-2.2-.4-2.5-.3-.5-.7-1.1-1.2-1.3-.3-.1-1.1.2-1.3.5-.7 1.1-3 6.4-3.4 6.8-4 3.6-11 11.3-12.2 16.5-.5 2.1 1.3 4.3 3.1 3.9 3.7-1.1 8.2-7.1 10.5-11.3 1.1-2 2.9-4.9 4-6.9.2-.4 1.3-.8 1.8-.9.3 0 .7.7.9 1.2.4.7-1.3 11 6.5 9.1 2.4-.6.5 2 4 4.4 3.5 2.4 8.7 2.6 12.8 1.6 3.4-.8 6.9-5.3 7.3-10.4.2-2.1.8-1.9 3.1-1.9-.5 4.8-1.4 8.4 2.1 9.3 4.6 1.2 8.3-2.3 12.3-5.2.2 2 .3 4.6 3.4 5 2.3.3 4.6.1 6.6-1.1 8.8-5.1 7.9-4.3 9.3-1.8 3.4 6.1 10.6 6.5 17.1 4.9 6.4-1.5 7.3 2.7 12.4 4.8 5.4 2.3 11.1 2.2 16.7.9 1.8-.4 3.5-1.2 5.3-2 2.6-1.1 5.2-2.2 7.7-3.5 2.3-1.3.5-4.9-2-4zm-102-.2c-.9.6-2.1.7-2.9.9-2-.3-3.6-.5-5.2-.9-1.5-.4-2.1-1.7-1.6-3.4 1-3.8 4.4-7.6 6.8-8.9 1.6-.9.9 1.1 1.7 3.9.4 1.2 1.4 1.5 2.5.9 1.4-.7 1.9-.4 1.9 1.2-.1 2.7-1.1 4.9-3.2 6.3zM245.4 14.2c-11.6 9-3.1 4.1-29.6 22.2-.8.5-1.6 1-2.3 1.5-.1-.1-.2-.1-.2-.2.1-.3.1-.6.2-.9l2.1-6c.9-2.8 1.7-5.6 1.2-8.6-.3-1.5-1.5-2.7-2.7-2.7-1.1.1-2 1.2-2.1 2.7 0 .7.4 3.4-2.2 10.2-3.5 8.9-7.5 15-9.9 20.4-6.1 13.6-17.6 28.3-18.2 34.6-.2 1.7 1 3.6 2.6 4 1 .3 1.8-.1 2.5-.8 1.1-1.1-.2-2 .3-3.1.7-1.7-.1-.5 11.2-20.1.2-.4.5-.6.8-1.1.5 1.1.9 2.1 1.5 2.8 5.7 7.2 8.2 8.2 11.7 14.4.6 1 1.3 3.5 3.6 2.6s1-3.6.9-4c-3.1-13.2-15.6-13.4-12-25.4 1.6-5.2 5.1-9.3 9.3-12.6 9-7 14.8-9 31.2-23.3 1.9-1.6 2.5-3.8 2.3-5.7-.3-1.6-.9-1.9-2.2-.9z"/>
						</clipPath>
					</defs>
					<path clip-path="url(#mask)" class="sig-stroke line-7" d="M502.8 82.5s-19 9-28.2 6.5-8.5-7.1-15.5-6.3c-7 .9-8.3 2.1-12.5.2s-4.7-8.5-7.3-7.1c-16.3 8.7-14.7 6-15.3-1.4-19.1 14.8-14.7 3.5-14.6-2.6-2.8 1.2-5.5 1.8-8.2-.7 3 8-1.3 12.8-5.9 13.7-4.6.9-17.7-1.7-12.4-11.1s12.6-8.1 15.6-2c-4.8-14.1-15 6.6-15 6.6s-4 1.2-6.1-.4 1.9-11.6-3.6-10.1c-10.2 2.7-27.5 30.6-17.3 19.7 10-10.8 14.2-29.5 14.2-29.5"/>
					<path clip-path="url(#mask)" class="sig-stroke line-6" d="M298.8 29.6S277.9 74 264.6 96.5c4.3 0 9.4-.2 12.8-.5 29.4-2.5 36.4-3.3 55.4-9.9 9.2-3.2 9.5-7.9 5.9-12.8-3.6-4.9-21.5-16.1-31-20.5-9.4-4.4-6.3-8.6-2.3-10.7 4-2.1 20.2-7.1 40.2-15.2 19.9-8.1 6.2-14.3.4-14.4-5.8-.1-45.5-1-77.2 16.7"/>
					<path clip-path="url(#mask)" class="sig-stroke line-5" d="M215.8 86.6c-1-3.1-1.8-8-11.5-17.4-9.7-9.4-1.5-19.1 8.2-27.3s29.4-20.7 35.4-26.4"/>
					<path clip-path="url(#mask)" class="sig-stroke line-4" d="M185.8 91.3c-.9-.8-1.8-2.2-1-4.7s6.7-15.8 10.2-21.9c3.6-6.1 13.5-28 16.3-34.7 2.8-6.7.4-13.2.1-13.8"/>
					<path clip-path="url(#mask)" class="sig-stroke line-3" d="M151.3 89.5c-31.8 3.1-31.6-4.7-32.2-6.3-1.2-3.1-1.3-7.5-3-6.1-12.2 10.3-16.3 12.7-20 11.3-4.7-1.8-.2-11.2 5.4-21.8-5.3 9.5-12.2 17.1-20.8 27.4s-26.3 21.1-24.9 19c1.4-2.1 20.1-25.2 26.3-36 6.2-10.8-1.5-7.7-5-4.2s-3.5 3.6-9 9.7c-5.4 6.1-9.7 3.3-9.8-1.2s-.2-23.2-.2-23.2"/>
					<path clip-path="url(#mask)" class="sig-stroke line-2" d="M45.5 77.7L23.1 57.3C38.1 52 56.2 45.1 69.6 38c16.9-9 27-18.1 24.1-23.3-2.7-4.8-6.6-14-46.8-2-14.2 4.2-25.6 11.9-30.1 14.8-6.6 4.2-9.5 6.6-9.5 6.6-1.7 1.5-.4 5.2 1.6 7.2"/>
					<path clip-path="url(#mask)" class="sig-stroke line-1" d="M7.1 100.2c-1.4-2.3.1-10.2 3.7-17.5.8-1.6 3.1-7.7 6-14 2.8-6.1 7.1-13 9.7-18.5 6.8-14.9 11-23.5 11-23.5"/>
				</svg>
		<!--		<h1>Ryan K. Brown</h1>-->
			<p>Art&nbsp;Direction, Graphic&nbsp;Design, UI/UX&nbsp;Design, Creative&nbsp;Code,&nbsp;Animation</p>
			</figure>
			<div class="container">
				<div class="build-layers">
					<div class="build-1"></div>
					<div class="build-2"></div>
					<div class="build-3"></div>
					<div class="build-4"></div>
					<div class="build-5"></div>
				</div>
				<div class="parallax-layers">
					<div class="face-1"></div>
					<div class="face-2"></div>
					<div class="face-3">
						<div></div>
					</div>
					<div class="face-4"></div>
					<div class="face-5"></div>
					<div class="face-6"></div>
				</div>
				<div class="splatter"></div>
			</div>
		</section>
	</main>
</body>
</html>
//  ORDER
//  01. LOADING
//  02. FACE-BUILD
//  03. FACE-MOVE
//  04. DEVICE-INSTRUCTIONS

//--- SRCSET-LIKE CSS BG MIXINS
@mixin bgImageCreator($image, $file-type) {
	background: url( "https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/" + $image + "-med" + $file-type) no-repeat center center;
	background-size: contain;
	@media (min-width: 940px) {
		background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/" + $image + "-large" + $file-type) no-repeat center center;
		background-size: contain;
	}
	@media (-webkit-max-device-pixel-ratio: 1) and (max-width: 500px), (max-resolution: 96dpi) and (max-width: 500px) {
  	background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/" + $image + "-small" + $file-type) no-repeat center center;
		background-size: contain;
	}
} 

* {
	box-sizing: border-box;
}

$gold: #a18a67;
 
//--- PAGE CODE
$background-color: #181818;
html,
body {
	// cursor: none;
	font-size: 10px;
	width: 100%;
	height: 100%;
	background: $background-color;
	font-family: "Helvetica", "Arial", sans-serif;
	overflow: hidden;
}

main {
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%;
	min-width: 320px;
	min-height: 568px;
}
section {
	position: absolute;
	width: 100%;
	height: 100%;
}

//--- PRELOADER CODE
$loader-time: 3s;
$circle-length: 338 - 20;
$preloader-icon-size: 9vh;

.preloader-overlay {
	width: 100%;
	height: 100%;
	opacity: 0;
	background: $background-color;
	position: absolute;
	display: flex;
		align-items: center;
		justify-content: center;
	transition: opacity .25s ease-in-out;
	transform: translate3d(0,0,0);
	html.loading & {
		opacity: 1;
	}
}

svg.preloader-icon {
	width: $preloader-icon-size;
	height: $preloader-icon-size;
	
	html.loading & {
		animation-play-state: running;
	}
	html.hide-preloader {
		animation-play-state: paused;
	}
	
	@media (orientation: portrait) {
		@media (min-height: 800px) {
			width: 6vh;
			height: 6vh;	
		}
		@media (min-height: 800px) {
			width: 6vh;
			height: 6vh;	
		}
		@media (min-height: 1100px) {
			width: 5vh;
			height: 5vh;	
		}
	}
	@media (orientation: landscape) {
		@media (min-width: 500px) {
			width: 10vw;
			height: 10vw;
		}
		@media (min-width: 600px) {
			width: 9vw;
			height: 9vw;
		}
		@media (min-width: 800px) {
			width: 6vw;
			height: 6vw;
		}
		@media (min-width: 1000px) {
			width: 5vw;
			height: 5vw;
		}
		@media (min-width: 1600px) {
			width: 2.75vw;
			height: 2.75vw;
		}
	}
}


//--- DEVICE MOVE INSTRUCTIONS CODE

.instructions {
	position: absolute;
	background: rgba($background-color, .75);
	height: 100%;
	opacity: 0;
	transition: opacity .25s ease-in-out;
	width: 100%;
	z-index: 12;
	display: flex;
		justify-content: center;
		align-items: center;
	transform-style: preserve-3d;
	transform: translate3d(0,0,0);
	perspective: 500px;
	pointer-events: none;
	&.show {
		opacity: 1;
		transition: opacity .5s ease-in-out;
	}
	.move-mouse,
	.move-device {
		text-align: center;
		margin-bottom: 3%;
		img {
			display: block;
			height: auto;
			margin: 0 auto;
		}
		span {
//			display: none;
			color: white;
			font-family: Helvetica, Arial, sans-serif;
			font-weight: bold;
			font-size: 1.4rem;
			@media (min-width: 400px){
				font-size: 1.5rem;
			}
		}
	}
	.move-mouse {
		img {
			transform: translateZ(20px);
			animation: mouseMoveIcon 2s infinite cubic-bezier(.59, .24, .43, .75);
			animation-play-state: paused;
			width: 6.5rem;
			margin-bottom: 5%;
			@media (orientation: landscape) {
				@media (min-width: 1400px) {
					width: 9rem;
				}
			}
			@media (orientation: portrait) {
				width: 6.5rem;
				@media (min-width: 700px) {
					width: 8.5rem;
				}
			}
		}
	}
	.move-device {
		img {
			transform: translateZ(20px);
			animation: deviceMoveIcon 1.5s infinite ease-in-out;
			animation-play-state: paused;
			width: 3.5rem;
			margin-bottom: 30%;
			@media (orientation: landscape) {
				@media (min-width: 1300px) {
					width: 3.75rem;
				}
			}
			@media (orientation: portrait) {
				width: 3.5rem;
				@media (min-width: 700px) {
					margin-bottom: 40%;
					width: 4.15rem;
				}
				@media (min-width: 1000px) {
					width: 4.5rem;
				}
			}
		}
	}
}

.instructions.show img {
	animation-play-state: running;
}

@keyframes mouseMoveIcon {
	#{100/5*1}% { transform: translateZ(20px) translateX(0)    }
	#{100/5*2}% { transform: translateZ(20px) translateX(10%)  }
	#{100/5*3 + 7}% { transform: translateZ(20px) translateX(-10%) }
	#{100/5*4 + 7}% { transform: translateZ(20px) translateX(0)    }
	#{100/5*5}% { transform: translateZ(20px) translateX(0)    }
}

@keyframes deviceMoveIcon {
	0%   { transform: translateZ(20px) rotateY(-20deg) }
	50%  { transform: translateZ(20px) rotateY(20deg) }
	100% { transform: translateZ(20px) rotateY(-20deg)}
}

//--- IMAGE LAYER STRUCTURE CODE

.container {
	overflow: hidden;
	position: absolute;
	width: 100%; 
	height: 100%;
}

.parallax-layers, .build-layers {
	height: 100%;
	position: absolute;
	transform: translate3d(0, 0, 0) scale(1.45, 1.45) translate(-1%, 2%);
	width: 100%;
	overflow: hidden;
	
	// PORTRAIT MEDIA QUERIES
	@media (orientation: landscape) {
		transform: translate3d(0, 0, 0) scale(1.6, 1.6) translate(-1%, 6%);
		
		@media (min-height: 700px) {
			transform: translate3d(0, 0, 0) scale(1.25, 1.25) translate(-1%, 6.75%);
		}
		@media (min-height: 800px) {
			transform: translate3d(0, 0, 0) scale(1.15, 1.15) translate(-1%, 7%);
		}
		@media (min-height: 1080px) {
			transform: translate3d(0, 0, 0) scale(1.05, 1.05) translate(-1%, 3.75%);
		}
		@media (min-height: 1200px) {
			transform: translate3d(0, 0, 0) scale(1, 1) translate(-1%, 2%);
		}
		@media (min-height: 1300px) {
			transform: translate3d(0, 0, 0) scale(1, 1) translate(-1%, 1%);
		}
	}
	
	@media (orientation: portrait) {
		transform: translate3d(0, 0, 0) scale(1.45, 1.45) translate(-1%, 2%);
		
		@media (min-width: 500px){
			transform: translate3d(0, 0, 0) scale(1.2, 1.2) translate(-1%, 2%);
		}
		@media (min-width: 600px){
			transform: translate3d(0, 0, 0) scale(1.1, 1.1) translate(-1%, 2.25%);
		}
		@media (min-width: 800px){
			transform: translate3d(0, 0, 0) scale(1, 1) translate(-1%, 1.75%);
		}
	}

	div {
		height: 100%;
		position: absolute;
		width: 100%;
	}
}

//--- FACE-BUILD ANIMATION
$face-build-total-duration: 7;
$face-build-layer-duration: 1.75;
$face-build-number-of-steps: 6;
$build-ease: cubic-bezier(.35, -0.02, .35, 1);
$trigger-delay-per-layer: $face-build-total-duration/$face-build-number-of-steps;

$final-build: $trigger-delay-per-layer*$face-build-number-of-steps;
$build-completion-delay: $face-build-total-duration + .75;



.build-layers {
	// Fade out the build layers once the build is done
	opacity: 1;
	transition: opacity $face-build-layer-duration + s ease-in-out;
	transition-delay: $final-build + s;
	html.face-build & {
		opacity: 0;
	}
	[class*='build-0'] {
		will-change: opacity;
	}
}



@for $i from 1 through $face-build-number-of-steps {
	.build-#{$i} {
		@include bgImageCreator("build-0#{$i}", ".jpg");
//		background: red;
		opacity: 0;
		transition: opacity $face-build-layer-duration + s $build-ease;
		// Trigger layer animation one after another.
		// ($i - 1) makes sure the delay starts immediately
		transition-delay: $trigger-delay-per-layer*($i - 1) + s;
		html.face-build & {
			opacity: 1;
		}
	}
}


//--- FACE-PARALLAX LAYERS
.parallax-layers {
	transition: opacity $face-build-layer-duration + s $build-ease;
	// trigger delay  makes sure the delay starts immediately
	transition-delay: $trigger-delay-per-layer*($face-build-number-of-steps - 1) + s;
	opacity: 0;
	z-index: 1;
	html.face-build & {
		opacity: 1;
	}
}
// Create the Face Layers
$face-list: 1,2,4,5;

@each $num in $face-list {
	.face-#{$num} {
		@include bgImageCreator("0#{$num}-face", ".png");
	}
} 

// Face 3 excluded to create Eye move
.face-3 {
	overflow: hidden;
	div {
		width: 100%;
		height: 100%;
		transform-origin: center;
		@include bgImageCreator("03-face", ".png");
		
		html.face-build & {
			animation: eyeMoveLarge 8s infinite ease-in-out;
			animation-delay: $build-completion-delay - 2.25s;
			
			@media (orientation: landscape) {
				
				@media (min-width: 400px) {
					animation-name: eyeMoveSmall;
				}
				@media (min-width: 1100px) {
					animation-name: eyeMoveLarge;
				}
				@media (max-height: 700px) {
					animation-name: eyeMoveExtraSmall;
				}
			}
			@media (orientation: portrait) {
				animation-name: eyeMoveLarge;
			}
		}
	}
}

html.face-build .build-1, .build-1 {
	opacity: 1;
	animation: none;
}

@keyframes eyeMoveExtraSmall {
	0%   { transform: translateX(0) }
	80%  { transform: translateX(0) } 
	90%  { transform: translateX(.3%) }
	100% { transform: translateX(0) }
}
@keyframes eyeMoveSmall {
	0%   { transform: translateX(0) }
	80%  { transform: translateX(0) } 
	90%  { transform: translateX(.7%) }
	100% { transform: translateX(0) }
}
@keyframes eyeMoveLarge {
	0%   { transform: translateX(0) }
	80%  { transform: translateX(0) } 
	90%  { transform: translateX(1%) }
	100% { transform: translateX(0) }
}

.splatter {
	height: 100%;
	width: 100%;
	@include bgImageCreator("splatter", ".jpg");
	opacity: 0;
	transition: all $face-build-layer-duration + s;
	transition-delay: $build-completion-delay + .1s;
	html.face-build & {
		opacity: 1;
	}
}



//--- DESCRIPTION

.description {
	
	// display: none;
  width: 100%;
	line-height: 110%;
	text-align: center;
  background: linear-gradient(to bottom, rgba($background-color, 0), rgba($background-color, 0) 0%);
	
	margin: 0 auto;
	opacity: 0;
	padding: 10vh 2rem;
	padding-bottom: 6vh;
  position: absolute;
  	bottom: 0;
  	z-index: 11;
	transition: all 1s ease-out;
	transition-delay: $build-completion-delay + s;
	transform: translateY(10%);
	pointer-events: none;
	
	@media (min-width: 400px) {
		padding-left: 4rem;
		padding-right: 4rem;
	}
	
	@media (orientation: landscape) {
		padding-top: 12vh;
		@media (min-height: 700px) {
			padding-bottom: 7vh;
		}
		@media (min-width: 1300px) {
			padding-bottom: 9vh;
		}
	}
	
	@media (orientation: portrait) {
		@media (min-height: 1000px) {
			padding-bottom: 8.5vh;
		}
	}
//	@media (min-width: 1400px) {
//		padding-bottom: 7vh;
//	}
	
	html.face-build & {
		opacity: 1;
		transform: translateY(0);
		background: linear-gradient(to bottom, rgba($background-color, 0), rgba($background-color, 0.9) 60%);
//		background: rgba(red, .2);
	}
	
	
	//--- SIGNATURE
	
	svg.signature {
		height: 5rem;
		$translateX: translateX(5%);
		
		@media (orientation: landscape) {
			@media (min-height: 400px) {
				margin-bottom: .5%;
				transform: $translateX scale(1.1);
			}
			@media (min-height: 600px) {
				margin-bottom: 1.30%;
				transform: $translateX scale(1.3);
			}
			@media (min-height: 1000px) {
				margin-bottom: 1.25%;
				transform: $translateX scale(1.45);
			}
			@media (min-height: 1100px) {
				margin-bottom: 1.25%;
				transform: $translateX scale(1.7);
			}
		}
		@media (orientation: portrait) {
			@media (min-width: 300px) {
				margin-bottom: 3%;
				transform: $translateX scale(1.1);
			}
			@media (min-width: 350px) {
				margin-bottom: 4%; 
				transform: $translateX scale(1.2);
			}
			@media (min-width: 400px) {
				transform: $translateX scale(1.3);
			}
			@media (min-width: 700px) {
				margin-bottom: 3.5%;
				transform: $translateX scale(1.4);
			}
			@media (min-width: 1000px) {
				margin-bottom: 4.25%;
				transform: $translateX scale(1.7);
			}
		}
		
		.sig-stroke {
			stroke: darken(white, 10%);
			stroke: $gold;
			fill:none;
			stroke-width: 8.2509;
			stroke-linecap:round;
			stroke-linejoin:round;
			stroke-miterlimit:10;
		}

		$line-lengths: 80, 219, 267, 83, 98, 364, 296;  
		$num-lines: 7;
		$draw-duration: .5;

		@for $i from 1 through $num-lines {
			.line-#{$i} {
				stroke-dashoffset: -1*nth($line-lengths, $i)*2;
				stroke-dasharray: nth($line-lengths, $i)*2 10000;
				transition: all $draw-duration + s ease-in-out;
				transition-delay: ($i - 1)*$draw-duration/2 + $build-completion-delay + s;
				
				html.face-build & {
					stroke-dashoffset: 0;
				}
			}
		}
		.line-3 { 
			transition-duration: $draw-duration*2.75 + s ;
			transition-delay: $build-completion-delay + $draw-duration - .5 + s;
		}
		.line-7 { 
			transition-duration: $draw-duration*2.75 + s ;  
		}
		.line-4 {
			transition-delay: $build-completion-delay + $draw-duration*2.25 + s;
		}
		.line-5 {
			transition-delay: $build-completion-delay + $draw-duration*2.75 + s;
		}
		.line-6 {
			transition-duration: $draw-duration*1.5 + s;
			transition-delay: $build-completion-delay + $draw-duration*3.25 + s;
		}
		.line-7 {
			transition-delay: $build-completion-delay + $draw-duration*3.5 + s;
		}
	}
	p {
    transition: all 1s ease-out;
		transition-delay: $build-completion-delay + 3s;
    transform: translateY(50%);
		opacity: 0;
    color: darken(white, 50%);
    font-size: 1.5rem;
		line-height: 150%;
		@media (orientation: landscape) {
			@media (min-height: 600px) {
				font-size: 1.6rem;
			}
			@media (min-height: 1000px) {
				font-size: 1.7rem;
			}
			@media (min-height: 1200px) {
				font-size: 1.8rem;
			}
		}
		@media (orientation: portrait) {
			@media (min-width: 350px) {
				font-size: 1.5rem;
			}
			@media (min-width: 400px) {
				font-size: 1.6rem;
			}
			@media (min-width: 550px) {
				font-size: 1.7rem;
			}
			@media (min-width: 600px) {
				font-size: 1.8rem;
			}
			@media (min-width: 650px) {
				font-size: 1.7rem;
			}
			@media (min-width: 800px) {
				font-size: 1.6rem;
			}
			@media (min-width: 1000px) {
				font-size: 1.8rem;
			}
		}
		
		html.face-build & {
			opacity: 1;
			transform: translateY(0);
		}
  }
}
.mobile-codepen-note {
	display: none;
	background: rgba(black, .5);
	padding: 16px;
	color: white;
	font-size: 16px;
	line-height: 120%;
	position: fixed;
		z-index: 999;
	a {
		color: $gold;
	}
}
View Compiled
/*

IF YOU'RE ON A MOBILE PHONE, TRY VIEWING THIS PEN AT http://portraits.ryankbrown.com/self/ AND TILTING YOU'RE DEVICE! UNFORTUNATELY CODEPEN DOESN'T SEEM TO SUPPORT DEVICE TILT.

*/


var isMobile = {
	Android: function() {
		return navigator.userAgent.match(/Android/i);
	},
	BlackBerry: function() {
		return navigator.userAgent.match(/BlackBerry/i);
	},
	iOS: function() {
		return navigator.userAgent.match(/iPhone|iPad|iPod/i);
	},
	Opera: function() {
		return navigator.userAgent.match(/Opera Mini/i);
	},
	Windows: function() {
		return navigator.userAgent.match(/IEMobile/i);
	},
	any: function() {
		return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
	}
},

		//SET VARIABLES
		html = $('html'),
		container = $(".container"),
		instructions = $(".instructions"),

		face1 = $(".face-1"),
		face2 = $(".face-2"),
		face3 = $(".face-3"),
		face4 = $(".face-4"),
		face5 = $(".face-5"),
		face6 = $(".face-6"),

		buildLayers = $(".build-layers"),

		orientation,

		elementOffsetX,
		elementOffsetY,

		introHasRun = false,
		motionDetected = false,

		mouseCenterX,
		mouseCenterY,

		trackAreaX,
		trackAreaY,
		trackAreaCenterX,
		trackAreaCenterY,
		trackAreaRangeX,
		trackAreaRangeY,
		trackElementX,
		trackElementY,

		mobileTrackRangeX,
		mobileTrackRangeY,

		parallaxOn = false,

		deviceX,
		deviceY,

		f1_rate = 0.01,
		f1_rate_mobile = 0.7,
		f1X,
		f1Y,

		f2_rate = 0.015,
		f2_rate_mobile = 0.6,
		f2X,
		f2Y,

		f3_rate = 0.02,
		f3_rate_mobile = 0.5,
		f3X,
		f3Y,

		f4_rate = 0.025,
		f4_rate_mobile = 0.4,
		f4X,
		f4Y,

		f5_rate = 0.03,
		f5_rate_mobile = 0.3,
		f5X,
		f5Y,

		f6_rate = 0.035,
		f6_rate_mobile = 0.2,
		f6X,
		f6Y;

//READ DEVICE ORIENTATION
function readDeviceOrientation() {
	switch (window.orientation) {
		case 0:
			orientation = 'portrait';
			// Portrait
			break;

		case 180:
			orientation = 'portrait-upside-down';
			// Portrait (Upside-down)
			break;

		case -90:
			orientation = 'landscape-clockwise';
			// Landscape (landscape-clockwise)
			break;

		case 90:
			orientation = 'landscape-counter-clockwise';
			// Landscape  (Counterlandscape-clockwise)
			break;
	}
}

//GET SIZES
function getSizes() {
	//GET ORIENTATION
	readDeviceOrientation();

	elementOffsetX = container.offset().left;
	elementOffsetY = container.offset().top;

	trackAreaX = container.width();
	trackAreaY = container.height();

	trackAreaCenterX = trackAreaX / 2;
	trackAreaCenterY = trackAreaY / 2;

	//DESKTOP TRACK RANGE CODE
	trackAreaRangeX = (trackAreaX * 69 / 100) / 2;
	if (trackAreaX > trackAreaY * 2) {
		trackAreaRangeX = (trackAreaX * 45 / 100) / 2;
	}
	//MATH FOR RESPONSIVELY TRACKING AREA
	if (trackAreaX > trackAreaY) {
		trackAreaRangeY = (trackAreaY * 90 / 100) / 2;
	} else {
		trackAreaRangeY = (trackAreaY * 70 / 100) / 2;
		if (trackAreaY > trackAreaX * 2) {
			trackAreaRangeY = (trackAreaY * 60 / 100) / 2;
		}
	}

	//MOBILE TRACK RANGE CODE
	//Check orientation
	mobileTrackRangeX = (trackAreaX / 30);
	mobileTrackRangeY = (trackAreaY / 40);
}

//MOVE IMAGES
function moveImages() {
	if (introHasRun && f1X > 1 || f1Y > 1) {
		motionDetected = true;
	}

	face1.css({
		"transform": "translateZ(0px) translate(" + f1X + "px, " + f1Y + "px)"
	});
	face2.css({
		"transform": "translateZ(0px) translate(" + f2X + "px, " + f2Y + "px)"
	});
	face3.css({
		"transform": "translateZ(0px) translate(" + f3X + "px, " + f3Y + "px)"
	});
	face4.css({
		"transform": "translateZ(0px) translate(" + f4X + "px, " + f4Y + "px)"
	});
	face5.css({
		"transform": "translateZ(0px) translate(" + f5X + "px, " + f5Y + "px)"
	});
	face6.css({
		"transform": "translateZ(0px) translate(" + f6X + "px, " + f6Y + "px)"
	});
}

//IF ON MOBILE DEVICES
if (isMobile.any()) {
	$('.mobile-codepen-note').css({'display':'block'});
	$('.move-mouse').remove();
	window.addEventListener("deviceorientation", function(e) {
		if (parallaxOn) {
			// Z = The compass direction - will return a value between 0 and 360
			// alpha = Math.round(e.alpha * 100)/100;
			// X = Side to side value - will return a value between -180 and 180
			// deviceY= Math.round(e.deviceY* 100)/100 - 30;
			// Y = Front to back value - will return a value between -90 and 90
			// gamma = Math.round(e.gamma * 100)/100;

			switch (orientation) {
				case 'portrait':
					// Y = Front to back value - will return a value between -90 and 90
					deviceY = Math.round(e.beta * 100) / 100 - 30;
					// X = Side to side value - will return a value between -180 and 180
					deviceX = Math.round(e.gamma * 100) / 100;
					break;

				case 'portrait-upside-down':
					// X = Side to side value - will return a value between -180 and 180
					deviceY = (Math.round(e.beta * 100) / 100 + 30) * -1;
					// Y = Front to back value - will return a value between -90 and 90
					deviceX = (Math.round(e.gamma * 100) / 100) * -1;
					break;

				case 'landscape-clockwise':
					deviceX = (Math.round(e.beta * 100) / 100) * -1;
					deviceY = Math.round(e.gamma * 100) / 100 - 30;
					break;

				case 'landscape-counter-clockwise':
					deviceX = Math.round(e.beta * 100) / 100;
					deviceY = (Math.round(e.gamma * 100) / 100 + 30) * -1;
					break;
			}

			trackElementX = deviceX;
			trackElementY = deviceY;

			//IF THE DEVICE ORIENTATION DEGREE IS WITHIN THE TRACK RANGE
			if (Math.abs(deviceX) < mobileTrackRangeX) { 
				f6X = f6_rate_mobile * trackElementX;
				f5X = f5_rate_mobile * trackElementX;
				f4X = f4_rate_mobile * trackElementX;
				f3X = f3_rate_mobile * trackElementX;
				f2X = f2_rate_mobile * trackElementX;
				f1X = f1_rate_mobile * trackElementX;
			}
			if(Math.abs(deviceY) < mobileTrackRangeY){
				f6Y = f6_rate_mobile * trackElementY;
				f5Y = f5_rate_mobile * trackElementY;
				f4Y = f4_rate_mobile * trackElementY;
				f3Y = f3_rate_mobile * trackElementY;
				f2Y = f2_rate_mobile * trackElementY;
				f1Y = f1_rate_mobile * trackElementY;
			}
			//				setTimeout(function() {
			//					window.requestAnimationFrame(moveImages);
			//				}, 1000 / 60);
			window.requestAnimationFrame(moveImages);
		}
	}, true);

} else {
	$('.move-device').remove();
	//IF ON MOUSE DEVICE
	container.on('mousemove', function(e) {
		if (parallaxOn) {
			mouseCenterX = e.pageX - trackAreaCenterX;
			mouseCenterY = e.pageY - trackAreaCenterY;

			trackElementX = mouseCenterX - elementOffsetX;
			trackElementY = mouseCenterY - elementOffsetY;

			//IF MOUSE POSITION IS WITHIN THE TRACK RANGE
			if (Math.abs(mouseCenterX) < Math.abs(trackAreaRangeX)) {
				f1X = f1_rate * trackElementX;
				f2X = f2_rate * trackElementX;
				f3X = f3_rate * trackElementX;
				f4X = f4_rate * trackElementX;
				f5X = f5_rate * trackElementX;
				f6X = f6_rate * trackElementX;
			}

			if (Math.abs(mouseCenterY) < Math.abs(trackAreaRangeY)) {
				f1Y = f1_rate * trackElementY;
				f2Y = f2_rate * trackElementY;
				f3Y = f3_rate * trackElementY;
				f4Y = f4_rate * trackElementY;
				f5Y = f5_rate * trackElementY;
				f6Y = f6_rate * trackElementY;
			}
			//				setTimeout(function() {
			//					window.requestAnimationFrame(moveImages);
			//				}, 1000 / 60);
			window.requestAnimationFrame(moveImages);
		}
	});
}

//CHECK IF THERE HAS BEEN MOVEMENT EVERY 2 SECONDS
function hasDeviceMoved() {
	setInterval(function() {
		if (!motionDetected && parallaxOn) {
			instructions.addClass('show');
			//				console.log('motion has not been detected.');
		} else {
			instructions.removeClass('show');
			motionDetected = true;
		}
	}, 500);
}

$(window).resize(getSizes);

$(window).on("orientationchange", function() {
	getSizes();
});

//IF THE LAST ANIMATION HAS RUN START TO CHECK FOR MOVEMENT
$('.description p').one('transitionend', function() {
	//		console.log('.description has finished animating');
	buildLayers.remove();
	introHasRun = true;
	parallaxOn = true;
	setTimeout(function() {
		hasDeviceMoved();
	}, 2000);
});
setTimeout(function() {
html.removeClass('loading').addClass('face-build');
	setTimeout(function(){
		$('.preloader-overlay').remove();
	}, 1000);
}, 1000);
getSizes();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js