world-game/src/components/ui/GalleryAnimation.svelte

<script>
  /**
   * GalleryAnimation — animation CSS de galerie en 3 colonnes défilantes.
   * @prop {Array<{src: string, srcset: string, webp: string}>} images
   * @prop {number} secondsPerImage — durée par image (défaut: 8s)
   */
  let { images = [], secondsPerImage = 8 } = $props()

  const columns = $derived.by(() => {
    const count    = images.length
    const duration = count * secondsPerImage
    const defs = [
      { offset: 0,                    delay: 0 },
      { offset: Math.floor(count / 3), delay: duration / 4 },
      { offset: 0,                    delay: duration / 2 },
    ]
    return defs.map(({ offset, delay }) => ({
      images: shiftImages(images, offset),
      delay,
      duration,
    }))
  })

  function shiftImages(imgs, offset) {
    if (!offset) return imgs
    return [...imgs.slice(offset), ...imgs.slice(0, offset)]
  }
</script>

<div
  class="gallery-animation gallery-animation--vertical"
  style="--gallery-duration: {columns[0]?.duration ?? 24}s"
>
  {#each columns as col}
    <div class="gallery-animation__column">
      <div
        class="gallery-animation__track"
        style="animation-delay: -{col.delay}s"
      >
        <!-- Images × 2 pour le défilement infini -->
        {#each [col.images, col.images] as set}
          {#each set as img}
            <picture>
              <source type="image/webp" srcset={img.webp} sizes="(max-width: 700px) 33vw, 15vw" />
              <img
                class="gallery-animation__image"
                src={img.src}
                srcset={img.srcset}
                sizes="(max-width: 700px) 33vw, 15vw"
                alt=""
                aria-hidden="true"
                loading="lazy"
                decoding="async"
              />
            </picture>
          {/each}
        {/each}
      </div>
    </div>
  {/each}
</div>