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

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

In this article, we will review how git-mcp.io shows the typewriter effect on its landing page. We will look at: 

  1. What is typewriter-effect?

  2. typewriter-effect package.

  3. typewriter-effect usage in git-mcp codebase

What is typewriter-effect?

This above GIF demonstrate what a typewriter-effect is on a webpage. 

GIF is downloaded from this typewriter package.

typewriter-effect package

typewriter-effect is asimple yet powerful native javascript plugin for a cool typewriter effect.

Installation

You can install typewriter-effect with just one command and you’re good to go


# with npm
npm i typewriter-effect

# with yarn
yarn add typewriter-effect

Example

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();
  }}
/>

You can learn more about the options. 

Learn more about methods.

typewriter-effect usage in git-mcp codebase.

At line 110, in git-mcp/app/routes/_index.tsx, you will find the following code. 

  <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: "",
                  }}
                />

Typewriter is imported as shown below:

import Typewriter from "typewriter-effect";

This component renders the typewriter-effect in gitmcp.io

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Want to learn from open-source? Solve challenges inspired by open-source projects.

References:

  1. https://github.com/idosal/git-mcp/blob/main/app/routes/_index.tsx#L110

  2. https://github.com/idosal/git-mcp/blob/main/app/routes/_index.tsx#L3

  3. https://gitmcp.io/

  4. https://www.npmjs.com/package/typewriter-effect

  5. https://github.com/tameemsafi/typewriterjs/blob/HEAD/preview.gif

  6. https://github.com/tameemsafi/typewriterjs

  7. https://github.com/tameemsafi/typewriterjs?tab=readme-ov-file#options

  8. https://github.com/tameemsafi/typewriterjs?tab=readme-ov-file#methods