<h1>Jello</h1>
body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: radial-gradient(#8481c0, #4a468b);
}

@font-palette-values --color {
	font-family: "Honk";
	base-palette: 4;
}

h1 {
	font-family: "Honk", system-ui;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "MORF" 25, "SHLN" 0;
	font-palette: --color;
	font-size: calc(14vw + 0.5rem);
	letter-spacing: 0.4ch;
	animation: morph 5s ease alternate infinite;
}

@keyframes morph {
	0% {
		font-variation-settings: "MORF" 25, "SHLN" 0;
	}

	100% {
		font-variation-settings: "MORF" 45, "SHLN" 100;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.