harvesting_the_net/pics/static/style.scss

:root {
    --scenePerspective: 1;
    --scenePerspectiveOriginX: 50;
    --scenePerspectiveOriginY: 0;
    --itemZ: 5;
    --cameraSpeed: 40; // Where 1 is the fastest
    --cameraZ: 0;
    --viewportHeight: 105;
}

$n : 300;

.viewport {
    height: calc(var(--viewportHeight) * 1px);

    .scene3D-container {
        z-index: 1;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        perspective: calc(var(--scenePerspective) * var(--cameraSpeed) * 1px);
        perspective-origin: calc(var(--scenePerspectiveOriginX) * 1%) calc(var(--scenePerspectiveOriginY) * 1%);
        will-change: perspective-origin;
        transform: translate3d(0, 0, 0); //Allow Hardware-Accelerated CSS

        .scene3D {
            position: absolute;
            top: 0;
            height: 100vh;
            width: 100%;
            transform-style: preserve-3d;
            transform: translateZ(calc(var(--cameraZ) * 1px));
            will-change: transform;

            >div {
                position: absolute;
                display: block;
                width: 70%;
                top: 100%;

                &:nth-child(2n) {
                    left: 80%;
                    bottom: 10%;
                }

                &:nth-child(2n + 1) {
                    right: 80%;
                    bottom: 10%
                }


                @for $i from 0 through $n {
                    &:nth-child(#{$i}) {
                        transform: translate3D(random(200) * .1%, random(300) * 1%, calc(var(--itemZ) * var(--cameraSpeed) * #{$i} * -.5px));
                    }
                }
            }
        }


    }
}

// ----------
// Styling
// ----------



*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Courier New', Courier, monospace;
    background-color: black;
    padding: 0;
    margin: 0;
}

#loading {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

#text {
    position: fixed;
    z-index: 100;
    left: 0;
    bottom: 0;
    width: 150%;
    display: flex;
}

#text {
    position: fixed;
    left: 0;
    // animation: scroll-left 500s linear infinite;
}

.marquee {
    font-size: 60px;
    color: #0f0;
    white-space: nowrap;

}

@keyframes scroll-left {
    0% {
        // transform: translateX(100px);
        left: 0;
    }

    100% {
        // transform: translateX(0);
        left: -3000%
    }
}

@-moz-keyframes scroll-left {
    0% {
        -moz-transform: translateX(100%);
    }

    100% {
        -moz-transform: translateX(-100%);
    }
}



.scene3D {

    >div {
        padding: 5vw;

        h1 {
            color: white;
            font-size: 400px;
            width: 1000vw;
            margin: 0 0 0 -650%;
            text-align: center;
        }

        img {
            width: 150vw;
        }

    }
}