body{
    background-color: black;
    overflow: hidden;
}
.interact{
    background-color: rgb(255, 255, 255);
    position: relative;
    width: 100px;
    height: 10vh;
    animation: clipper 1s infinite ;
}
.wrapper{
    position:absolute;
    width:fit-content;
    height: 100%;
}
.w1{
    top:0%;
}
.w2{
    left: 100px;
    top:20%;
}
.w3{
    left:200px;
    top:40%;
}
.w4{
    left: 300px;
    top:60%;
}
.w5{
    left:400px;
    top:80%;
}
#notion{
    height: fit-content;
    width: fit-content;
    color: white;
    border:2px dashed white;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    padding: 15px;
    font-size: 30px;
    border-radius: 10%;
}
@keyframes clipper{
    0%{
        clip-path: polygon(0% 0%, 0% 23%, 0% 49%, 0% 39%, 0% 48%, 0% 58%, 0% 73%,0% 82%, 0% 71%, 0% 92%, 0% 88%, 0% 70%, 0% 68%, 0% 59%, 0% 58%);
    }
    50%{
        clip-path: polygon(42% 27%, 45% 23%, 48% 49%, 53% 39%, 54% 48%, 50% 58%, 55% 73%, 55% 82%, 50% 71%, 48% 92%, 46% 88%, 47% 70%, 41% 68%, 41% 59%, 47% 58%);
    }
    100%{
        clip-path: polygon(100% 0%, 100% 23%, 100% 49%, 100% 39%, 100% 48%, 100% 58%, 100% 73%,100% 82%, 100% 71%, 100% 92%, 100% 88%, 100% 70%, 100% 68%, 100% 59%, 100% 58%);
    }
}