body {
    margin: 0;
    overflow: hidden;
    background: #111;
}

#container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.crack {
    position: absolute;
    width: 500px;
    height: 500px;
    background: url('Black_And_White_Drawing_Of_Cracks_On_The_Wall__Wall_Cracks__Wall__Cracked_Effect_PNG_Transparent_Image_and_Clipart_for_Free_Download-removebg-preview.png') no-repeat center/contain;
    pointer-events: none;
}

.shard {
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    animation: fall 1s forwards;
}

@keyframes fall {
    to {
        transform: translateY(800px) rotate(720deg);
        opacity: 0;
    }
}