<script lang="ts">
	const imported: Record<string, any> = import.meta.glob('$lib/assets/img/blinkies/*.gif', {
		eager: true
	});
</script>

<div class="holder noselect">
	<div class="marquee">
		{#each Object.entries(imported) as [_path, module]}
			<img src={module.default} alt="" />
		{/each}
		{#each Object.entries(imported) as [_path, module]}
			<img src={module.default} alt="" />
		{/each}
	</div>
</div>

<style>
	img {
		width: 150px;
		height: 20px;
	}
	.holder {
		font-family: none;
		width: 800px;
		margin: 1em auto;
		overflow: hidden;
		height: 20px;
	}
	.marquee {
		display: inline-flex;
		gap: 5px;

		animation: marquee 120s linear infinite;
	}
	@keyframes marquee {
		0% {
			transform: translateZ(0);
		}
		to {
			transform: translate3d(-50%, 0, 0);
		}
	}
</style>
