bounce-smiley-animation

1"use client";
2 
3import { motion } from "motion/react";
4 
5export function BounceSmileyAnimation() {
6  return (
7    <svg
8      className="w-full h-full"
9      viewBox="0 0 280 613"
10      xmlns="http://www.w3.org/2000/svg"
11    >
12      <motion.g
13        style={{ transformBox: "view-box", transformOrigin: "113px 113px" }}
14        initial={{ x: 20.182, y: 671.07 }}
15        animate={{ x: [20.182, 24.661], y: [671.07, 109.888] }}
16        transition={{
17          x: {
18            type: "spring",
19            stiffness: 16.5234375,
20            damping: 4.1015625,
21            mass: 1,
22            repeat: Infinity,
23            repeatType: "loop",
24            repeatDelay: 1.567,
25          },
26          y: {
27            type: "spring",
28            stiffness: 16.5234375,
29            damping: 4.1015625,
30            mass: 1,
31            repeat: Infinity,
32            repeatType: "loop",
33            repeatDelay: 1.65,
34          },
35        }}
36      >
37        <svg
38          x={0}
39          y={0}
40          width={226}
41          height={226}
42          viewBox="0 0 226 226"
43          overflow="visible"
44        >
45          <g xmlns="http://www.w3.org/2000/svg" fill="none">
46            <motion.g
47              initial={{ rotate: 0 }}
48              animate={{ rotate: [0, 226.382, 84.284, 100.226] }}
49              transition={{
50                rotate: {
51                  duration: 5,
52                  times: [0, 0.5915, 0.902, 1],
53                  ease: [
54                    [0.42, 0, 0.58, 1],
55                    [0.42, 0, 0.58, 1],
56                    [0.42, 0, 0.58, 1],
57                  ],
58                  repeat: Infinity,
59                  repeatType: "loop",
60                },
61              }}
62              xmlns="http://www.w3.org/2000/svg"
63              filter="url(#filter0_i_bounce_smiley)"
64              style={{ transformBox: "view-box", transformOrigin: "113px 113px" }}
65            >
66              <path
67// … truncated