Contrast Variable font

contrast-variable-font.markdown

Contrast Variable font

A Pen by Greg McVerry on CodePen.

License.

index.pug

<p class="firstline">Tales traveling</p>
<p class="secondline">on God's rays,</p>
<p class="thirdline">answers</p>
<p class="firstline">scatter in elastic</p>
<p class="secondline">truths of today</p>
<p class="thirdline">particles</p>
<p class="firstline">simmering just</p>
<p class="secondline">below the horizon</p>
<p class="thirdline">orange darts</>
<p class="secondline">glisten with hope</p>
<p class="thirdline">dancing on</p>
<p class="firstline">air</p>

script.babel

// import gsap from 'gsap';

const body = document.querySelector("body");

body.addEventListener("mousemove", (e) => {
	const x = e.clientX;
	const y = e.clientY;
	translate(x, y);
});

body.addEventListener("touchmove", (e) => {
	const x = e.targetTouches[0].clientX;
	const y = e.targetTouches[0].clientY;
	translate(x, y);
});


function translate(x, y) {
	const xTranslate = (window.innerWidth / 2 - x) / 20;
	const yTranslate = (window.innerHeight / 2 - y) / 20;
	gsap.to("p",{
		textShadow: `
			${xTranslate}px ${yTranslate}px 2px rgba(0,0,0,0.01),
			${xTranslate}px ${yTranslate}px 10px rgba(0,0,0,0.15),
			${-xTranslate}px ${-yTranslate}px 20px rgba(255,255,255, 0.5)`,
		fontVariationSettings: `'wght' ${(x / window.innerWidth) * 700}`,
		"--x-translate": window.innerWidth / 2 - x,
		"--y-translate": window.innerHeight / 2 - y,
		ease: "expo.out"
	});
}

scripts

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

style.scss

@function grid($grid-size) {
	@return calc(100vw / 72 * #{$grid-size});
}

@font-face {
	font-family: "Anybody";
	src: url("https://assets.codepen.io/1492907/Anybody.woff2") format("woff2");
}

* {
	font-family: "Anybody";
	padding-left: 10%;
	margin: 0;
}

.firstline {
	--x-translate: 0;
	--y-translate: 0;
	font-size: grid(3);
	color: blue;
	transform: matrix3d(1, 0, 0, calc(var(--x-translate) / 1000000), 0, 1, 0, calc(var(--y-translate) / 1000000), 0, 0, 1, 0, 0, 0, 0, 1);
	$distance: grid(10/60);
	font-variation-settings: 'wght' 700;
	text-shadow: $distance 10px 2px rgba(0,0,0,0.01), $distance $distance 10px rgba(0,0,0,0.15), calc(#{$distance} * -1) calc(#{$distance} * -1) 10px rgba(255,255,255, 0.5);
}
.secondline {
	--x-translate: 0;
	--y-translate: 0;
	font-size: grid(4);
	color: #423b4a;
	transform: matrix3d(1, 0, 0, calc(var(--x-translate) / 1000000), 0, 1, 0, calc(var(--y-translate) / 1000000), 0, 0, 1, 0, 0, 0, 0, 1);
	$distance: grid(10/60);
	font-variation-settings: 'wght' 700;
	text-shadow: $distance 10px 2px rgba(0,0,0,0.01), $distance $distance 10px rgba(0,0,0,0.15), calc(#{$distance} * -1) calc(#{$distance} * -1) 10px rgba(255,255,255, 0.5);
}
.thirdline {
	--x-translate: 0;
	--y-translate: 0;
	font-size: grid(3);
	color: #2c1945;
	transform: matrix3d(1, 0, 0, calc(var(--x-translate) / 1000000), 0, 1, 0, calc(var(--y-translate) / 1000000), 0, 0, 1, 0, 0, 0, 0, 1);
	$distance: grid(10/60);
	font-variation-settings: 'wght' 700;
	text-shadow: $distance 10px 2px rgba(0,0,0,0.01), $distance $distance 10px rgba(0,0,0,0.15), calc(#{$distance} * -1) calc(#{$distance} * -1) 10px rgba(255,255,255, 0.5);
}
body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: vertical;
	flex-direction: column;
	background-color: #f0f0f0;
	 background-image: url(https://live.staticflickr.com/8722/29380088445_fe3c4f909c_z.jpg);
  background-size: cover;
}