Bounce

1"use client";
2import React from "react";
3import { motion, useInView, type Variants } from "motion/react";
4 
5interface BounceProps {
6  children: React.ReactNode;
7  delay?: number;
8  duration?: number;
9  bounceHeight?: number;
10  className?: string;
11  once?: boolean;
12}
13 
14const Bounce: React.FC<BounceProps> = ({
15  children,
16  delay = 0,
17  duration = 0.5,
18  bounceHeight = 20,
19  className = "",
20  once = true,
21}) => {
22  const ref = React.useRef<HTMLDivElement>(null);
23  const isInView = useInView(ref, { once, amount: 0.1 });
24 
25  const variants: Variants = {
26    hidden: { opacity: 0, y: bounceHeight },
27    visible: {
28      opacity: 1,
29      y: 0,
30      transition: {
31        delay,
32        duration,
33        type: "spring",
34        stiffness: 200,
35        damping: 10,
36      },
37    },
38  };
39 
40  return (
41    <motion.div
42      ref={ref}
43      initial="hidden"
44      animate={isInView ? "visible" : "hidden"}
45      variants={variants}
46      className={className}
47    >
48      {children}
49    </motion.div>
50  );
51};
52 
53export default Bounce;