Blurry Blob

use leptos::prelude::*;

use crate::components::extensions::blurry_blob::BlurryBlob;

#[component]
pub fn DemoBlurryBlob() -> impl IntoView {
    view! {
        <style>
            "@keyframes blurry_blob {
                0% { transform: scale(1); }
                33% { transform: scale(1.2); }
                66% { transform: scale(0.8); }
                100% { transform: scale(1); }
            }
            .animate-blurry_blob {
                animation: blurry_blob 5s infinite;
            }"
        </style>
        <div class="justify-center items-center w-full bg-white min-h-80">
            <div class="relative w-full max-w-lg">
                <BlurryBlob class="-right-24 -top-28" />
                <BlurryBlob class="-left-40 -top-64" />
            </div>
        </div>
    }
}