Change the animation to draw a line by line... like drawing a line from its start point to its end point instead of current animation that shows the whole line instantly.
'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: 0.5, ease: "easeInOut" }
        }
    };

    const staggerContainer = {
        hidden: { opacity: 1 },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.3,
                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}
                        fillRule="evenodd"
                        clipRule="evenodd"
                        d={path}
                        className={`fill-${color}`}
                    />
                ))}
            </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);