Typewriter

Animated typewriter effect that cycles through words.

Usage

tsx

import { Typewriter } from "fromsrc/client";

<Typewriter words={["developer", "designer", "creator"]} />;

Adjust typing speed in milliseconds:

tsx

<Typewriter words={["fast", "typing"]} speed={50} />

<Typewriter words={["slow", "typing"]} speed={200} />

Time before deleting and typing next word:

tsx

<Typewriter words={["hello", "world"]} delay={3000} />

Disable looping to stop after last word:

tsx

<Typewriter words={["first", "second", "final"]} loop={false} />

Combine with static text:

tsx

<p>
  I am a <Typewriter words={["developer", "designer", "creator"]} />
</p>

prop	type	default	description
words	string[]	required	Words to cycle through
speed	number	100	Typing speed in ms
delay	number	2000	Pause before deleting
loop	boolean	true	Loop after last word

Animated typewriter effect that cycles through words.

tsx

import { Typewriter } from "fromsrc/client";

<Typewriter words={["developer", "designer", "creator"]} />;

Adjust typing speed in milliseconds:

tsx

<Typewriter words={["fast", "typing"]} speed={50} />

<Typewriter words={["slow", "typing"]} speed={200} />

Time before deleting and typing next word:

tsx

<Typewriter words={["hello", "world"]} delay={3000} />

Disable looping to stop after last word:

tsx

<Typewriter words={["first", "second", "final"]} loop={false} />

Combine with static text:

tsx

<p>
  I am a <Typewriter words={["developer", "designer", "creator"]} />
</p>

prop	type	default	description
words	string[]	required	Words to cycle through
speed	number	100	Typing speed in ms
delay	number	2000	Pause before deleting
loop	boolean	true	Loop after last word