A portable react component to render a blurry fade-in from bottom animation, using motion/react

blurry-fade-in-wrapper.tsx

"use client";

import { motion, type Transition, type Variants } from "motion/react";
import type React from "react";

const fadeVariants = Object.freeze({
  hidden: { opacity: 0, y: 15, filter: "blur(3px)" },
  shown: { opacity: 1, y: 0, filter: "blur(0)" },
}) satisfies Variants;

const fadeTransition = Object.freeze({
  type: "spring",
  bounce: 0,
  duration: 1,
}) satisfies Transition;

export function BlurryFadeInWrapper({
  delay,
  ...restProps
}: React.ComponentProps<typeof motion.div> & {
  /* Alternative to staggerChildren */
  delay?: number;
}) {
  return (
    <motion.div
      key="greeting"
      variants={fadeVariants}
      transition={{ ...fadeTransition, delay }}
      initial="hidden"
      animate="shown"
      {...restProps}
    />
  );
}