I have created the following animation using nextjs app router and tailwind css...
'use client';

import React from 'react';
import { motion } from 'framer-motion';

const SVG_PATHS = [
    "M4.01522 12.269C2.86939 11.9474 1.66975 11.7852 0.506019 11.6366C0.255369 11.6055 0.0226582 11.7793 0.0047547 12.0242C-0.0310524 12.2693 0.148088 12.4935 0.380834 12.5246C1.50876 12.6677 2.67238 12.8207 3.7645 13.1303C3.99724 13.1974 4.248 13.0592 4.31961 12.8215C4.39123 12.5839 4.24796 12.3363 4.01522 12.269Z",
    "M7.48866 7.71011C5.6446 5.82827 3.56779 4.18866 1.75953 2.25634C1.5984 2.07587 1.31194 2.0662 1.13291 2.23467C0.95387 2.40332 0.936037 2.68691 1.11507 2.86738C2.92333 4.80526 5.00014 6.45024 6.8442 8.33763C7.02324 8.5138 7.30963 8.51631 7.48866 8.343C7.64979 8.16987 7.6677 7.88628 7.48866 7.71011Z",
    "M10.944 0.471933C10.9977 1.54901 11.0513 2.62609 11.105 3.70334C11.105 3.95005 11.32 4.14055 11.5706 4.12855C11.8213 4.11638 12.0002 3.90637 12.0002 3.65948C11.9465 2.58061 11.8929 1.50192 11.8392 0.423234C11.8213 0.176524 11.6064 -0.0127169 11.3557 0.000710753C11.123 0.0141384 10.9261 0.225401 10.944 0.471933Z"
];

const AnimatedTitle = ({
                           text,
                           className = '',
                           textClassName = '',
                           color = 'black',
                       }) => {
    const pathVariants = {
        hidden: { pathLength: 0, opacity: 0 },
        visible: {
            pathLength: 1,
            opacity: 1,
            transition: { duration: 1, ease: "easeInOut" }
        }
    };

    const staggerContainer = {
        hidden: { },
        visible: {
            transition: {
                staggerChildren: 0.6,
                delayChildren: 0.2
            }
        }
    };

    const DecorativeElement = ({ mirror = false }) => (
        <motion.div
            initial="hidden"
            animate="visible"
            variants={staggerContainer}
            className="relative w-[12px] h-[13.15px]"
        >
            <svg
                width="12"
                height="14"
                viewBox="0 0 12 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className={`overflow-visible ${mirror ? 'scale-x-[-1]' : ''}`}
            >
                {SVG_PATHS.map((path, index) => (
                    <motion.path
                        key={index}
                        variants={pathVariants}
                        fill="none" // Remove fill
                        stroke={color} // Add stroke
                        strokeWidth={0.9} // Adjust stroke width as needed
                        d={path}
                        strokeLinecap={"round"}
                        strokeLinejoin={"round"}
                    />
                ))}
            </svg>
        </motion.div>
    );

    return (
        <div
            className={`relative text-center flex mt-12 justify-center items-start mx-auto ${className}`}
        >
            <DecorativeElement />
            <span
                className={`font-cabin font-semibold leading-[24px] text-center select-none ${textClassName}`}
                style={{
                    color: color
                }}
            >
                {text}
            </span>
            <DecorativeElement mirror />
        </div>
    );
};

export default React.memo(AnimatedTitle);
Now I want you to create a new component the takes a word and then animate in the same way the above animation but only below the word.
for the following svg:
<svg xmlns="http://www.w3.org/2000/svg" width="77" height="7" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" stroke-width=".59" d="M33.38 6a181.2 181.2 0 0 1 14.4-.76c2.33-.04 4.79-.02 7.07-.65.12-.03-.25-.04-.37-.06l-.77-.1c-.64-.08-1.28-.14-1.92-.2-2.21-.2-4.43-.34-6.64-.36-6.47-.06-12.8-.05-19.26.61-2.07.21-4.13.47-6.2.71-.48.06-1.91.02-2.24.52-.13.2.44 0 .66-.01h1.16c1.23.06 2.46.03 3.7-.05 3.62-.22 7.26-.33 10.9-.48 7.05-.28 14.1-.96 21.15-1.39 2.1-.13 4.21-.38 6.32-.49 1.18-.06 2.8.08 3.88-.55.23-.13-.5-.07-.75-.1-.45-.07-.89-.13-1.34-.17-1.5-.13-3-.09-4.5-.17-4.34-.25-8.68-.36-13.02-.36-9.05 0-18.25.06-27.27.91-3.54.33-7.72.15-11.1 1.45-.27.1.54.01.82.04.53.05 1.07 0 1.6.04 1.65.12 3.3 0 4.97-.05 4.94-.15 9.9-.17 14.85-.28 5.47-.13 10.91-.74 16.37-1.04 6.22-.33 12.44-.53 18.66-.91 2.93-.18 5.86-.23 8.8-.23.4 0 2.38.27 2.66-.09.2-.24-.58-.1-.87-.15-.66-.11-1.32-.17-1.98-.25a53 53 0 0 0-5.34-.36c-5.44-.08-10.88.15-16.3.04-6-.13-12.06.24-18.06.4-5.4.14-10.82-.17-16.23-.13-5.36.04-10.83 1-16.19.57"/></svg>