FpsGraph

<script lang="ts">
  import { onMount } from 'svelte';
  import { FpsGraph, Monitor, Slider } from 'svelte-tweakpane-ui';

  let rotation = 0;
  let rotationSpeed = 3;
  let phase = 500;
  let scale = 1.25;
  let intensity = 4;

  onMount(() => {
    (function tick() {
      rotation += rotationSpeed;
      requestAnimationFrame(tick);
    })();
  });

  $: gridSize = intensity ** 2;
</script>

<FpsGraph interval={50} label="FPS" rows={5} />
<Slider
  bind:value={intensity}
  min={1}
  max={10}
  label="Intensity (Careful)"
  step={1}
/>
<Monitor
  value={gridSize ** 2}
  format={(v) => v.toFixed(0)}
  label="Boxes (Monitor)"
/>
<Slider bind:value={scale} min={0.25} max={2} label="Scale" />
<Slider bind:value={phase} min={0} max={2000} label="Phase" />
<Slider bind:value={rotationSpeed} label="Rotation Speed" />

<div class="demo">
  {#each Array.from({ length: gridSize }, (_, index) => index) as x}
    {#each Array.from({ length: gridSize }, (_, index) => index) as y}
      <div
        class="box"
        style:left="{(x / gridSize) * 100}%"
        style:scale
        style:top="{(y / gridSize) * 100}%"
        style:transform="rotateZ({rotation +
          (x / gridSize) * phase +
          (y / gridSize) * phase}deg)"
        style:width="{100 / gridSize}%"
      ></div>
    {/each}
  {/each}
</div>

<style>
  .demo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    width: 100%;
    background: linear-gradient(to top, gold, rebeccapurple);
  }

  .box {
    position: absolute;
    transform-origin: center;
    aspect-ratio: 1;
    opacity: 0.5;
    background: linear-gradient(to bottom, orange, magenta);
  }
</style>