motion-variants

import * as motion from "motion/react-client";
import type { Variants } from "motion/react";

export default function Page() {

    const container: Variants = {
        invisible: { opacity: 0, },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.1
            }
        }
    }

    const item: Variants = {
        invisible: {
            opacity: 0, filter: "blur(8px)",
        },
        visible: {
            opacity: 1, filter: "blur(0px)",
        }
    }

    const images = [
        "https://cdn.pixabay.com/photo/2023/03/15/16/17/feather-7854908_1280.jpg",
        "https://cdn.pixabay.com/photo/2022/08/05/10/22/purple-bells-7366491_1280.jpg",
        "https://cdn.pixabay.com/photo/2023/03/02/03/01/bird-7824442_1280.jpg",
        "https://cdn.pixabay.com/photo/2022/10/24/09/31/flower-7543035_1280.jpg",
        "https://cdn.pixabay.com/photo/2024/12/18/01/27/lightning-9274136_1280.jpg",
        "https://cdn.pixabay.com/photo/2025/06/23/18/09/blossom-9676411_1280.jpg",
        "https://cdn.pixabay.com/photo/2023/03/08/13/20/nature-7837757_1280.jpg",
        "https://cdn.pixabay.com/photo/2019/01/22/16/38/winter-3948461_1280.jpg",
    ];

    return (
        <motion.div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5"
                    variants={ container }
                    initial="invisible"
                    animate="visible">
            {
                images.map((src, idx) => (
                    <motion.img className="w-full aspect-video object-center cursor-pointer"
                                src={ src }
                                variants={ item }
                                key={ idx }
                                alt=""/>
                ))
            }
        </motion.div>
    )
}