Parallax illusion effects in html css and js under 30 seconds.

.warp-container {
    display: flex;
    width: 100%;
    height: 100%;
}

.warp-section {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.warp-effect {
    position: absolute;
    width: 90%;
    height: 90%;
    filter: url(#warpFilter);
}

.left .warp-effect {
    background: linear-gradient(45deg, cyan, blue, purple);
}

.right .warp-effect {
    background: linear-gradient(45deg, red, orange, yellow);
}

.center-orb {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 0, 255, 0.8), rgba(0, 255, 255, 0.6));
    border-radius: 50%;
    filter: blur(20px) drop-shadow(0 0 30px rgba(255, 0, 255, 0.8));
    animation: morph 5s infinite alternate ease-in-out, pulse 3s infinite;
}

@keyframes morph {
    0% { border-radius: 50%; transform: scale(1) rotate(0deg); }
    50% { border-radius: 40% 60% 50% 50%; transform: scale(1.1) rotate(30deg); }
    100% { border-radius: 60% 40% 50% 50%; transform: scale(1) rotate(-30deg); }
}

@keyframes pulse {
    0% { filter: blur(10px) drop-shadow(0 0 20px rgba(255, 0, 255, 0.9)); }
    50% { filter: blur(25px) drop-shadow(0 0 40px rgba(0, 255, 255, 0.9)); }
    100% { filter: blur(10px) drop-shadow(0 0 20px rgba(255, 0, 255, 0.9)); }
}

svg {
    position: absolute;
    width: 0;
    height: 0;
}