Here's how git-mcp.io shows the typewriter effect on its landing page.

# with npm

npm i typewriter-effect



# with yarn

yarn add typewriter-effect

import Typewriter from 'typewriter-effect';



<Typewriter

  onInit={(typewriter) => {

    typewriter.typeString('Hello World!')

      .callFunction(() => {

        console.log('String typed out!');

      })

      .pauseFor(2500)

      .deleteAll()

      .callFunction(() => {

        console.log('All strings were deleted');

      })

      .start();

  }}

/>

  <Typewriter

                  options={{

                    strings: [

                      " confidence",

                      "out hallucinations",

                      " any GitHub project",

                      " MCP documentation",

                    ],

                    autoStart: true,

                    loop: true,

                    delay: 40,

                    deleteSpeed: 15,

                    pauseFor: 4500,

                    wrapperClassName: "font-extrabold",

                    cursor: "",

                  }}

                />

import Typewriter from "typewriter-effect";