GlassSweep.svelte

<div class="wrap">
    <img src="http://placehold.it/1200/1200" alt="testsetse" />
</div>

<style>
    .wrap {
        width: 1200px;
        height: 1200px;
        position: relative;
        overflow: hidden;
    }

    .wrap:before {
        content: "";
        position: absolute;
        height: 200%;
        width: 200%;
        background: linear-gradient(
            transparent 0%,
            rgba(255, 255, 255, 0.005) 5%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.005) 85%,
            transparent 100%
        );
        transition: all 2s;
        animation: shine 2s infinite;
    }

    @keyframes shine {
        0% {
            top: -100%;
        }
        65% {
            top: 100%;
        }
        95% {
            top: -100%;
        }
        100% {
            top: -100%;
        }
    }
</style>

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      keyframes: {
        sweep: {
          '0%, 35%, 100%': { top: '-150%' },
          '15%': { top: '100%' },
        }
      }
    },
  },
  plugins: [],
}

update.svelte

<div class="z-10 w-screen h-screen absolute overflow-hidden bg-[#000000A0]">
    <div
        class="before:w-screen before:h-screen before:absolute before:bg-gradient-to-b before:from-transparent before:from-10% before:via-[#ffffff40] before:via-30% before:to-transparent before:to-90%
before:transition-all before:duration-[2s] before:animate-[sweep_5s_infinite]"
    />
</div>