Posted on Jul 19 • Originally published at thinkthroo.com

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

#typewritereffect #opensource #api #gitmcp

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

What is typewriter-effect?
typewriter-effect package.
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.

DEV Community