<script>
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const count = 100;
const seeds = [...Array(count).keys()].map(() => getRandomInt(-10, 10));
let transparent = true;
</script>
<button on:click={() => transparent = !transparent}>
Toggle Transparency
</button>
<div class="root">
{#each seeds as seed, i}
<div class='item' class:transparent style:--wiggle-seed={seed}>{i + 1}</div>
{/each}
</div>
<style>
:global(body) {
overflow-x: hidden;
background-image: linear-gradient(to right bottom, #91a8cc, #80bdd5, #85cfce, #a6ddbe, #d6e6b2); }
.root {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 1px;
}