fxhash previewer - save as html in your project, tweak the values

index.html

<nav><button onclick="reloadFrames()">GENERATE()</button></nav>
<main></main>
<script>
const urlParams = new URLSearchParams(window.location.search);
const total = 15+5; // total frames
const interval = urlParams.get("fast") == "true" ? 60 : 200; // ms
const src = "./index.html";

let alphabet = "123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ"
function getHash() {
	return "oo" + Array(49).fill(0).map(_=>alphabet[(Math.random()*alphabet.length)|0]).join('')
}

window.onload = () => { 
	let container = document.querySelector('main');
	for(let i=0;i<total;i++) container.innerHTML += `<div><iframe id="frame${i}" ></iframe><center><center></div>`;
	reloadFrames();
}

let darkmode = false;
const reloadFrames = () => {
	document.documentElement.classList.toggle("darkmode", darkmode = !darkmode);
	for(let i=0;i<total;i++) setTimeout(() => {
		let hash = getHash();
		let url = src+ `?fxhash=${hash}&${location.search.substr(1)}`;
		let frame = window[`frame${i}`];
		frame.setAttribute("src", url)
		frame.nextSibling.innerHTML = `<a href="${url}" target="_blank">${hash}</a>`;
	}, i * interval)
}
window.onclick = event => {
	if (event.target == document.documentElement || event.target == document.body || event.target == document.querySelector('main')) {
		reloadFrames();
	}
	console.log(event.target);
}
</script>
<style>
:root {
	--gap-size: 1em;
	
	/* setup colors here */
	
	--background: #fff;
	--links: #555;
	--aspect-ratio: 1 / 1;
	--total-columns: 8;
}
:root.darkmode {
	--background: #111;
	--links: #999;
}
::-webkit-scrollbar {
    height: 2px;
    width: 2px;
    background: var(--background);
}

::-webkit-scrollbar-thumb {
    background: var(--links);
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: var(--background);
}

button {
	padding:5px 15px;
	font-size:21px;
	font-weight:bold;
}
body {
	background: var(--background);
	padding: 0;
	overflow-x:hidden;
	overflow-x:hidden;
}

nav {
	display:block;
	text-align: center;
	margin-top: 5px;
}

main {
	margin: var(--gap-size) auto calc(var(--gap-size) * 2) auto;
	max-width: 1800px;
	display: grid;
	grid-template-columns: repeat(var(--total-columns), 1fr);
	grid-gap: var(--gap-size);
}

div {
	position:relative;
	width: 100%;
	aspect-ratio: var(--aspect-ratio);
}
div:nth-child(10n + 3) {
	grid-row: span 2;
	grid-column: span 2;
}
div:nth-child(10n + 6) {
	grid-row:span 2;
	grid-column: span 2;
}
iframe { 
	border: 0;
	height: 100%;
	width: 100%;
	background: var(--background);
} 
center {
	position:absolute;
	width:100%;
}
a {
	color: var(--links);
	max-width: 100%;
	
	text-overflow: ellipsis;
	overflow: hidden; 
	width: 100%;
	white-space: nowrap;
	display:inline-block;
}
* {
	font: 13px monospace;
}
</style>

Just leaving a thank you note! This is great