<h1>Solid</h1>
<p>Hover over, or tap this title. On safari the magic is invisible</p><a href="https://codepen.io/collection/nomVwQ">More pens with Typography</a><a href="https://cydstumpel.nl/" target="_blank">My portfolio</a>
<svg class="distort">
  <filter id="distortionFilter">
    <feTurbulence type="fractalNoise" baseFrequency="2.01 .01" numOctaves="5" seed="2" stitchTiles="noStitch" x="0%" y="0%" width="100%" height="100%" result="noise"></feTurbulence>
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" filterUnits="userSpaceOnUse"></feDisplacementMap>
  </filter>
</svg>

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

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

* {
	font-family: "Anybody";
	margin: 0;
}

::selection {
	background: #0e0e0e;
	color: #f0f0f0;
}

h1 {
	padding: 4rem;
	filter: url(#distortionFilter);
	font-size: grid(3);
	color: #0e0e0e;
	font-variation-settings: "wght" 700;
	@media (max-width: 800px) {
		font-size: 8rem;
	}
}

svg {
	position: absolute;
	width: 0;
	height: 0;
	left: -9999px;
	pointer-events: none;
}

body {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #f0f0f0;
}

a {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2rem;
	color: #0e0e0e;
	text-decoration: none;
	&:last-of-type {
		right: 0;
		left: unset;
	}
}

// 404
const title = document.querySelector("h1");
if (title) {
	title.addEventListener("mouseenter", () => {
		gsap.to(".distort feDisplacementMap", 1, {
			attr: {
				scale: 100
			},
			ease: "circ.out"
		});
		gsap.to(".distort feTurbulence", 1, {
			attr: {
				baseFrequency: '2.08 .08'
			},
			ease: "circ.out"
		}, 1);
		gsap.to(title, 1, {
			fontVariationSettings: "'wght' 650",
			ease: "back.out"
		});
	});
	title.addEventListener("mouseleave", () => {
		gsap.to(".distort feDisplacementMap", 1, {
			attr: {
				scale: 0
			},
			ease: "circ.out"
		}, 1);
		gsap.to(".distort feTurbulence", 1, {
			attr: {
				baseFrequency: '2.01 .01'
			},
			ease: "circ.out"
		}, 1);
		gsap.to(title, 1, {
			fontVariationSettings: "'wght' 700",
			ease: "back.out"
		}, 1);
	});
}