Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="scene">
	<div class="texture"></div>
	<div class="texture"></div>
	<div class="texture"></div>
	<div class="texture"></div>
	<div class="texture"></div>
	<div class="character"></div>
</div>

<div id="debug">
	<form>
		<input type="checkbox" id="debug-toggle">
		<label for="debug-toggle">Debug</label>
	</form>

	<ul>
		<li data-id="--scroll-block-position"></li>
		<li data-id="--scroll-block-position-delayed"></li>
		<li data-id="--scroll-block-velocity"></li>
		<li data-id="--scroll-block-direction"></li>
		<li data-id="--scroll-block-speed"></li>
	</ul>

	<ul>
		<li data-id="--scroll-inline-position"></li>
		<li data-id="--scroll-inline-position-delayed"></li>
		<li data-id="--scroll-inline-velocity"></li>
		<li data-id="--scroll-inline-direction"></li>
		<li data-id="--scroll-inline-speed"></li>
	</ul>
</div>
              
            
!

CSS

              
                /*
	Directional control concept from https://www.bram.us/2023/10/23/css-scroll-detection/#the-concept
	Multi axis demo without the frills https://codepen.io/jbasoo/pen/NWoNvLx
	Graphical assets from https://cupnooble.itch.io/sprout-lands-asset-pack and https://axulart.itch.io/small-8-direction-characters
*/

/* Block */
@property --scroll-block-position {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --scroll-block-position-delayed {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --scroll-block-direction {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@keyframes adjust-block-pos {
	to {
		--scroll-block-position: 1;
		--scroll-block-position-delayed: 1;
	}
}

/* Inline */
@property --scroll-inline-position {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --scroll-inline-position-delayed {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --scroll-inline-direction {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@keyframes adjust-inline-pos {
	to {
		--scroll-inline-position: 1;
		--scroll-inline-position-delayed: 1;
	}
}

:root {
	animation: adjust-block-pos linear, adjust-inline-pos linear;
	animation-timeline: scroll(nearest block), scroll(nearest inline);
}

body {
  /* Block */
	transition: --scroll-block-position-delayed .1s linear, --scroll-inline-position-delayed .06s linear;
	--scroll-block-velocity: calc(var(--scroll-block-position) - var(--scroll-block-position-delayed));
	--scroll-block-speed: max(var(--scroll-block-velocity), -1 * var(--scroll-block-velocity)); /* abs(var(--scroll-block-velocity)); */
	--scroll-block-direction: calc(var(--scroll-block-velocity) / var(--scroll-block-speed)); /* sign(var(--scroll-block-velocity)); */

	--when-block-scrolling: abs(var(--scroll-block-direction));
	--when-not-block-scrolling: abs(var(--when-scrolling) - 1);

	--when-scrolling-up: min(abs(var(--scroll-block-direction) - abs(var(--scroll-block-direction))),	1);
	--when-scrolling-down: min(var(--scroll-block-direction) + abs(var(--scroll-block-direction)), 1);

	--when-scrolling-up-or-when-not-block-scrolling: clamp(0, abs(var(--scroll-block-direction) - 1), 1);
	--when-scrolling-down-or-when-not-block-scrolling: clamp(0, var(--scroll-block-direction) + 1, 1);
	
	--scroll-inline-velocity: calc(var(--scroll-inline-position) - var(--scroll-inline-position-delayed));
  --scroll-inline-speed: max(var(--scroll-inline-velocity), -1 * var(--scroll-inline-velocity)); /* abs(var(--scroll-inline-velocity)); */
  --scroll-inline-direction: calc(var(--scroll-inline-velocity) / var(--scroll-inline-speed)); /* sign(var(--scroll-inline-velocity)); */

  --when-inline-scrolling: abs(var(--scroll-inline-direction));
  --when-not-inline-scrolling: abs(var(--when-scrolling) - 1);

  --when-scrolling-left: min(abs(var(--scroll-inline-direction) - abs(var(--scroll-inline-direction))),	1);
  --when-scrolling-right: min(var(--scroll-inline-direction) + abs(var(--scroll-inline-direction)), 1);

  --when-scrolling-left-or-when-not-inline-scrolling: clamp(0, abs(var(--scroll-inline-direction) - 1), 1);
  --when-scrolling-right-or-when-not-inline-scrolling: clamp(0, var(--scroll-inline-direction) + 1, 1);
}

#debug {
  counter-reset:
    /* Block */
    scroll-block-position calc(var(--scroll-block-position) * 100)
    scroll-block-position-delayed calc(var(--scroll-block-position-delayed) * 100)
    scroll-block-velocity calc(var(--scroll-block-velocity) * 100)
    scroll-block-direction var(--scroll-block-direction)
    scroll-block-speed calc(var(--scroll-block-speed) * 100)
    
    /* Inline */
    scroll-inline-position calc(var(--scroll-inline-position) * 100)
    scroll-inline-position-delayed calc(var(--scroll-inline-position-delayed) * 100)
    scroll-inline-velocity calc(var(--scroll-inline-velocity) * 100)
    scroll-inline-direction var(--scroll-inline-direction)
    scroll-inline-speed calc(var(--scroll-inline-speed) * 100)
  ;
  
  /* Block */
  [data-id="--scroll-block-position"]::after {
    content: "--scroll-block-position: " counter(scroll-block-position);
  }
  [data-id="--scroll-block-position-delayed"]::after {
    content: "--scroll-block-position-delayed: " counter(scroll-block-position-delayed);
  }
  [data-id="--scroll-block-velocity"]::after {
    content: "--scroll-block-velocity: " counter(scroll-block-velocity);
  }
  [data-id="--scroll-block-direction"]::after {
    content: "--scroll-block-direction: " counter(scroll-block-direction);
  }
  [data-id="--scroll-block-speed"]::after {
    content: "--scroll-block-speed: " counter(scroll-block-speed);
  }
  
  /* Inline */
  [data-id="--scroll-inline-position"]::after {
    content: "--scroll-inline-position: " counter(scroll-inline-position);
  }
  [data-id="--scroll-inline-position-delayed"]::after {
    content: "--scroll-inline-position-delayed: " counter(scroll-inline-position-delayed);
  }
  [data-id="--scroll-inline-velocity"]::after {
    content: "--scroll-inline-velocity: " counter(scroll-inline-velocity);
  }
  [data-id="--scroll-inline-direction"]::after {
    content: "--scroll-inline-direction: " counter(scroll-inline-direction);
  }
  [data-id="--scroll-inline-speed"]::after {
    content: "--scroll-inline-speed: " counter(scroll-inline-speed);
  }
  
	/* Presentational */
  position: fixed;
  top: 0;
	left: 0;
  display: grid;
	gap: 1rem;
  justify-content: center;
	padding: 2rem;
  align-items: center;
  
	& ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display: none;
	  font-family: monospace;
	}
	
	& form {
		font-family: cursive;
	}
	
	&:has([type="checkbox"]:checked) ul {
		display: initial;
	}
}

/* Cute graphical stuff */
*, *:before, *:after {
	box-sizing: border-box;
}

html {
	block-size: 100%;
}

body {
	min-block-size: 100%;
	margin: 0;
	
	&:before {
		content: "";
		position: fixed;
		z-index: 2;
		inset: 0;
		pointer-events: none;
		border: 8px solid #78A158;
	}
	
	&:after {
		content: "";
		position: fixed;
		z-index: 2;
		inset: 0;
		pointer-events: none;
		border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAYAAABRRIOnAAAEpmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTMyIgogICB0aWZmOkltYWdlV2lkdGg9IjEzMiIKICAgdGlmZjpSZXNvbHV0aW9uVW5pdD0iMiIKICAgdGlmZjpYUmVzb2x1dGlvbj0iNzIvMSIKICAgdGlmZjpZUmVzb2x1dGlvbj0iNzIvMSIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEzMiIKICAgZXhpZjpQaXhlbFlEaW1lbnNpb249IjEzMiIKICAgZXhpZjpDb2xvclNwYWNlPSIxIgogICBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIgogICBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTEwLTMwVDIyOjUzOjA2WiIKICAgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0xMC0zMFQyMjo1MzowNloiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgUGhvdG8gMiAyLjIuMSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMy0xMC0zMFQyMjo1MzowNloiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PuH8RYgAAAGBaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRzytEURTHP/PGrwZRJAtpElYzYpTYKDNpqEnTGGWwmXnmh5ofr/dGkq2ynaLExq8FfwFbZa0UkZIta2LD9Jxn1Ejm3M49n/u995zuPReUcFrNGFX9kMnm9ZDf65yNzDlrn3DQSRsKNVHV0MaCwQAV7f0WmxWv3Vatyuf+tfrFuKGCrU54VNX0vPCEcGAlr1m8JdyqpqKLwifCLl0uKHxj6bESP1ucLPGnxXo45AOlWdiZ/MWxX6ym9IywvJzuTHpZ/bmP9ZKGeHZmWmKXeAcGIfx4cTLJOD6GGGBE5iHceOiTFRXy+7/zp8hJriqzxio6SyRJkccl6rJUj0tMiB6XkWbV6v/fvhqJQU+peoMXqh9N87UHajehWDDNjwPTLB6C/QHOs+X83D4Mv4leKGvde9C0DqcXZS22DWcb0H6vRfXot2QXVxIJeDmGxgi0XIFjvtSzn32O7iC8Jl91CTu70Cvnmxa+ABSnZ8B6YgxYAAAACXBIWXMAAAsTAAALEwEAmpwYAAADbElEQVR4nO3dMXJTMRQFUMzQMTTUNPQsiI5tZAnZBl0WRE9DTcNQQwWjW2jmyZJ+vp1zqjAxiuPcec/S/5IvrxZ5+Pr5z6qxGPf45emyYpzXKwbhfggEoVRmVrWDTx/frhim69v331ufQ2/8M/xeFZW2okIQBILQLSG9NrG7PDKv0mJ67UOFIAgEIcrGmdvEh/fv/n/94+ev047fjlOx43fp6bWStn2oEASBILzpfWNVm+iV4tHS2huzp/KzeuV6x3Ou2N0WK1QIgkAQui2jfUc62j56pbVSumfepbf/tzLOqsfMPP9Vr9WqFqNCEASCcKlc2q60jN3vwI905Mxih0r76C1SqRAEgSBMLUzdYjmtuPXfa2b2oUIQBILQbRkVt/5u/Aye6zVs3xK0Mw4VgiAQhGgZL3lm8VxmXs8d7UaFIAgEYWqWsYrZynVGL9+3r7NrGZQIBOEUC1PaxD6uZTBFIAilljF6Iyjn0ZtluJZBiUAQBIIgEASBIJRmGa41vBwqBEEgCFMLU1rJ/VEhCAJBmLr8rU0cY9WBKhUqBEEgCNEyeudKrZpNmJVcZ0ebcJMtJQJBGJ5l7DiCj7UcGMIyAkEYbhnK/vnNnGqrQhAEgjB8YEiPRafbYl8GJQJBmLpjavQxHMPCFMsIBOEUZ0xxHccSsp1AEGzlu2E7/hYqBEEgCKWbbHk5VAiCQBAsTJ3Ukdv3WioEQSAIw3dMVUqZhax5qw6T77UPW/koEQjCln0Z2sQxKq159O4pFYIgEIRlN9lyvJm/i30ZlAgEwR1TBBWCIBAEs4w751oGUwSCYJZBUCEIAkEY3pehfRxv9DWvXOZ2LYMSgSBsP8lWi5k3c8i8M6aYIhCELfsyWtrE8WzlYxmBIJzi8zLMRNaylY9lBIJwijOmbvHDYe+1zakQBIEgTH2Qa+u5yuY9/dxVh7FYmGIZgSBc2n88fP3859/XlVnGLV4KP8Nz2G10Merxy9P/HKgQBIEgdGcZq264PbJEj565tGrMM7ShmZlFS4UgCARh2eHnlZJVWdRatQdhZgFtdMzeY0Z/1o6FplEqBEEgCJfeN9pFqpaPXrotlcWolgpBEAhCt2W0eu1jVG/Hce8xFb1xZsY8w/i9MSvPp6fXJloqBEEgCKWWUbGqrXCdSjuoUCEIAkH4C7uNdmiOt5mTAAAAAElFTkSuQmCC');
		border-image-slice: 16;
		border-image-width: 16px;
		border-image-repeat: round;
	}
}

.scene {
	display: none;
	block-size: 400dvh;
  inline-size: 400dvw;
	background-color: #C0D470;
	background-position: center;
	display: grid;
	position: relative;
	
	.texture {
		background-position: center;
		grid-area: 1 / 1 / -1 / -1;
	}
	
	.texture:nth-child(1) {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><image width="18" height="16" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAICAIAAACkr0LiAAABgGlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8GESNTLCykl4bV0KAmNspIqEkaoww2b575oebH672ZNNkqW0WJjV8L/gK2ylopIiVb1sSG6TlvRs0kc27nns/93ntO954LjlBSS5l1Xkils0Zw0q8shBeVhhea6MJFJz5VM/Wx2dkAVe3znho73vbZtaqf+9eaV6KmBjWNwqOabmSFp4QDa1nd5h3hdi2hrgifCXsMuaDwna1HSvxqc7zE3zYboeA4OFzCSryCIxWsJYyUsLwcdyqZ037vY7/EGU3Pz0nsFu/EJMgkfhSmmWAcHwOMyOyjj0H6ZUWVfG8xf4aM5Goy6+QxWCVOgiweUXNSPSoxJnpURpK83f+/fTVjQ4Ol6k4/1D9b1nsPNGxDYcuyvo4sq3AMtU9wmS7nZw5h+EP0rbLmPoDWDTi/KmuRXbjYhI5HXTXUolQr7ojF4O0UWsLQdgNNS6We/e5z8gChdfmqa9jbh14537r8A6nHaATSt2iMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAP0lEQVQImWM8cKWAARt48u4zEy4JGSFe7HIQwPTk3WdMURkhXgYGBiYZIV6s0gwMDFjMhCtlgpuA7Aqc+uAAAP73E9nNqdK6AAAAAElFTkSuQmCC" /></svg>');
	}
	
	.texture:nth-child(2) {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25"><image width="6" height="4" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAASFvFNAAABgGlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8GESNTLCykl4bV0KAmNspIqEkaoww2b575oebH672ZNNkqW0WJjV8L/gK2ylopIiVb1sSG6TlvRs0kc27nns/93ntO954LjlBSS5l1Xkils0Zw0q8shBeVhhea6MJFJz5VM/Wx2dkAVe3znho73vbZtaqf+9eaV6KmBjWNwqOabmSFp4QDa1nd5h3hdi2hrgifCXsMuaDwna1HSvxqc7zE3zYboeA4OFzCSryCIxWsJYyUsLwcdyqZ037vY7/EGU3Pz0nsFu/EJMgkfhSmmWAcHwOMyOyjj0H6ZUWVfG8xf4aM5Goy6+QxWCVOgiweUXNSPSoxJnpURpK83f+/fTVjQ4Ol6k4/1D9b1nsPNGxDYcuyvo4sq3AMtU9wmS7nZw5h+EP0rbLmPoDWDTi/KmuRXbjYhI5HXTXUolQr7ojF4O0UWsLQdgNNS6We/e5z8gChdfmqa9jbh14537r8A6nHaATSt2iMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVQImWNccihZRoj3ybvPTBBKRogXAFWGCAjC9NluAAAAAElFTkSuQmCC" /></svg>');
	}
	
	.texture:nth-child(3) {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="27"><image width="6" height="4" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAASFvFNAAABgGlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8GESNTLCykl4bV0KAmNspIqEkaoww2b575oebH672ZNNkqW0WJjV8L/gK2ylopIiVb1sSG6TlvRs0kc27nns/93ntO954LjlBSS5l1Xkils0Zw0q8shBeVhhea6MJFJz5VM/Wx2dkAVe3znho73vbZtaqf+9eaV6KmBjWNwqOabmSFp4QDa1nd5h3hdi2hrgifCXsMuaDwna1HSvxqc7zE3zYboeA4OFzCSryCIxWsJYyUsLwcdyqZ037vY7/EGU3Pz0nsFu/EJMgkfhSmmWAcHwOMyOyjj0H6ZUWVfG8xf4aM5Goy6+QxWCVOgiweUXNSPSoxJnpURpK83f+/fTVjQ4Ol6k4/1D9b1nsPNGxDYcuyvo4sq3AMtU9wmS7nZw5h+EP0rbLmPoDWDTi/KmuRXbjYhI5HXTXUolQr7ojF4O0UWsLQdgNNS6We/e5z8gChdfmqa9jbh14537r8A6nHaATSt2iMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVQImWN88W7VjWfHNKSsmCDUjWfHAHSsCwiHjz0mAAAAAElFTkSuQmCC" /></svg>');
	}
		
	.texture:nth-child(4) {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77" height="77"><image width="18" height="16" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAICAIAAACkr0LiAAABgGlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8GESNTLCykl4bV0KAmNspIqEkaoww2b575oebH672ZNNkqW0WJjV8L/gK2ylopIiVb1sSG6TlvRs0kc27nns/93ntO954LjlBSS5l1Xkils0Zw0q8shBeVhhea6MJFJz5VM/Wx2dkAVe3znho73vbZtaqf+9eaV6KmBjWNwqOabmSFp4QDa1nd5h3hdi2hrgifCXsMuaDwna1HSvxqc7zE3zYboeA4OFzCSryCIxWsJYyUsLwcdyqZ037vY7/EGU3Pz0nsFu/EJMgkfhSmmWAcHwOMyOyjj0H6ZUWVfG8xf4aM5Goy6+QxWCVOgiweUXNSPSoxJnpURpK83f+/fTVjQ4Ol6k4/1D9b1nsPNGxDYcuyvo4sq3AMtU9wmS7nZw5h+EP0rbLmPoDWDTi/KmuRXbjYhI5HXTXUolQr7ojF4O0UWsLQdgNNS6We/e5z8gChdfmqa9jbh14537r8A6nHaATSt2iMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAP0lEQVQImWM8cKWAAQY0pKxuPDsG5zLhkmBgYGDSkLJiwAGYbjw7hksaYSaygRDVTFjUMzBADGNC04HdTEwAAKYiFBQKFhL5AAAAAElFTkSuQmCC" /></svg>');
	}
		
	.texture:nth-child(5) {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="89" height="89"><image width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAABgGlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8GESNTLCykl4bV0KAmNspIqEkaoww2b575oebH672ZNNkqW0WJjV8L/gK2ylopIiVb1sSG6TlvRs0kc27nns/93ntO954LjlBSS5l1Xkils0Zw0q8shBeVhhea6MJFJz5VM/Wx2dkAVe3znho73vbZtaqf+9eaV6KmBjWNwqOabmSFp4QDa1nd5h3hdi2hrgifCXsMuaDwna1HSvxqc7zE3zYboeA4OFzCSryCIxWsJYyUsLwcdyqZ037vY7/EGU3Pz0nsFu/EJMgkfhSmmWAcHwOMyOyjj0H6ZUWVfG8xf4aM5Goy6+QxWCVOgiweUXNSPSoxJnpURpK83f+/fTVjQ4Ol6k4/1D9b1nsPNGxDYcuyvo4sq3AMtU9wmS7nZw5h+EP0rbLmPoDWDTi/KmuRXbjYhI5HXTXUolQr7ojF4O0UWsLQdgNNS6We/e5z8gChdfmqa9jbh14537r8A6nHaATSt2iMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAATElEQVQYlWM8cKVAi5eDgYHh2ucfDBiACSLHwMAAZ6BIwzUh69bi5YCoZsE0Ftk8JkwDkc1jwZRGVoFFN4rTMJ2DRRqX95gwnYMsDQBZAh2aN8SpLQAAAABJRU5ErkJggg==" /></svg>');
	}
}

.character {
	position: fixed;
  inset: 0;
	display: grid;
	place-items: center;
	transition: initial;
	
	&:before {
		content: "";
		inline-size: 60px;
		block-size: 68px;
		display: block;
		place-items: center;
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAN0CAYAAABsvPvpAAAEpmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iODg0IgogICB0aWZmOkltYWdlV2lkdGg9IjQ4MCIKICAgdGlmZjpSZXNvbHV0aW9uVW5pdD0iMiIKICAgdGlmZjpYUmVzb2x1dGlvbj0iNzIvMSIKICAgdGlmZjpZUmVzb2x1dGlvbj0iNzIvMSIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjQ4MCIKICAgZXhpZjpQaXhlbFlEaW1lbnNpb249Ijg4NCIKICAgZXhpZjpDb2xvclNwYWNlPSIxIgogICBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIgogICBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIz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');
		background-repeat: no-repeat;
		background-position: -240px -272px;
		animation-duration: .2s;
		animation-timing-function: steps(2);
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;
	}
}


@keyframes to-bottom {
	from { background-position: -240px -272px; }
  to { background-position: -240px -408px; }
}

@keyframes to-top {
	from { background-position: 0px -272px; }
  to { background-position: 0px -408px; }
}

@keyframes to-left {
	from { background-position: -300px -272px; }
  to { background-position: -300px -408px; }
}

@keyframes to-right {
	from { background-position: -180px -272px; }
  to { background-position: -180px -408px; }
}

@keyframes to-bottom-right {
	from { background-position: -120px -272px; }
  to { background-position: -120px -408px; }
}

@keyframes to-top-left {
	from { background-position: -360px -272px; }
  to { background-position: -360px -408px; }
}

@keyframes to-top-right {
	from { background-position: -60px -272px; }
  to { background-position: -60px -408px; }
}

@keyframes to-bottom-left {
	from { background-position: -300px -272px; }
  to { background-position: -300px -408px; }
}

/* To bottom */
@container style(--scroll-block-direction: 1) {
  .character:before {
		animation-name: to-bottom;
  }
}

/* To top */
@container style(--scroll-block-direction: -1) {
  .character:before {
		animation-name: to-top;
  }
}

/* To right */
@container style(--scroll-inline-direction: 1) {
  .character:before {
		animation-name: to-right;
  }
}

/* To left */
@container style(--scroll-inline-direction: -1) {
  .character:before {
		animation-name: to-left;
  }
}

@container style(--scroll-block-direction: 1) and style(--scroll-inline-direction: 1){
	.character:before {
		animation-name: to-bottom-right;
  }
}

@container style(--scroll-block-direction: -1) and style(--scroll-inline-direction: -1){
	.character:before {
		animation-name: to-top-left;
  }
}

@container style(--scroll-block-direction: -1) and style(--scroll-inline-direction: 1){
	.character:before {
		animation-name: to-top-right;
  }
}

@container style(--scroll-block-direction: 1) and style(--scroll-inline-direction: -1){
	.character:before {
		animation-name: to-bottom-left;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console