<div><h1 data-text="slinky">Slinky</h1></div>

<p class="credit">Font: <a href="https://www.futurefonts.xyz/scribble-tone/whoa">Whoa by Scribble Tone</a></p>

$border: #cb6ed0;

h1 {
	--axis: 750;
	--axis2: 750;
	color: white;
	font-family:'WHOA Spine';
	font-variation-settings: "hrzn" var(--axis3), "vert" var(--axis2), "rota" var(--axis);
	background: linear-gradient(to right, #59c173, #a17fe0, #5d26c1);
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;	

	&::before {
		content: attr(data-text);
		position: absolute;
		font-family:'WHOA Top';
		text-shadow: 
			-1px -1px 0 $border, 1px -1px 0 $border, -1px 1px 0 $border, 1px 1px 0 $border;
		background: none;
		color: #76ffcc;
		-webkit-background-clip: none;
		-webkit-text-fill-color: #76ffcc;
	}
	
}


//Positioning
html {
	height: 100%;
}

body {
	background: #021723;
	height: 100%;
	cursor: pointer;
}

div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;	
}

h1 {
	display: inline-block;
	text-align: center;
	letter-spacing: 0.6rem;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	margin: 0;
	font-size: 20vw;
	position: relative;
}

p {
	bottom: 0;
	position: absolute;
	color: white;
	font-size: 16px;
	font-style: italic;
	text-align: center;
	margin-bottom: 20px;
	width: 100%;
	a {color: white;}
}

var text = document.querySelector("h1");
var subtitle = document.querySelector("p");

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


	const minAxisValue = -45;
	const maxAxisValue = 45;

	const minAxisValue2 = -1000;
	const maxAxisValue2 = 1000;

	const minAxisValue3 = 1000;
	const maxAxisValue3 = -1000;

	const minEventValue = 0;
	const maxEventValue = 1000;
	
        text.style.setProperty("--axis", 0);
        text.style.setProperty("--axis2", 0);
        text.style.setProperty("--axis3", 0);


document.addEventListener('mousemove', function(e) {
  setPosition(e);
});

document.addEventListener('touchmove', function(e) {
  setPosition(e);
});

function setPosition(e) {	
	fluidAxisVariation(minAxisValue, maxAxisValue, minEventValue, maxEventValue, e.pageX, "--axis", text);
	fluidAxisVariation(minAxisValue2, maxAxisValue2, minEventValue, maxEventValue, e.pageY, "--axis2", text);
	fluidAxisVariation(minAxisValue3, maxAxisValue3, minEventValue, maxEventValue, e.pageX, "--axis3", text);

}


// Fluid Axis Variation
function fluidAxisVariation(minimumAxisValue, maximumAxisValue, minimumEventValue, maximumEventValue, eventValue, axisCustomPropertyName, element) {

	const minAxisValue = minimumAxisValue;
	const maxAxisValue = maximumAxisValue;
    const minEventValue = minimumEventValue;
	const maxEventValue = maximumEventValue;
	const currentEventValue = eventValue;

	const eventPercent = (currentEventValue - minEventValue) / (maxEventValue - minEventValue);
	const fontAxisScale = eventPercent * (minAxisValue - maxAxisValue) + maxAxisValue;

	const newAxisValue = currentEventValue > maxEventValue
	   ? minAxisValue
       : currentEventValue < minEventValue
   			? maxAxisValue
   			: fontAxisScale;
	

    element.style.setProperty(axisCustomPropertyName, newAxisValue);

}