> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt
> Use this file to discover all available pages before exploring further.
# Text Typing
> A typewriter-style text animation component with an animated cursor that progressively reveals text character by character.
# Text Typing
The `TextTyping` component creates a classic typewriter effect that reveals text one character at a time, complete with an animated blinking cursor. Perfect for hero sections, introductions, and dynamic content reveals.
## Installation
```bash theme={null}
npm install @craftdotui/components
```
## Import
```tsx theme={null}
import TextTyping from "@craftdotui/components";
```
## Usage
```tsx Basic Usage theme={null}
import TextTyping from "@craftdotui/components";
export default function Example() {
return (
Hello, welcome to our website!
);
}
```
```tsx Custom Speed theme={null}
import TextTyping from "@craftdotui/components";
export default function Example() {
return (
Fast typing effect
);
}
```
```tsx As Heading theme={null}
import TextTyping from "@craftdotui/components";
export default function Example() {
return (
Welcome to the Future
);
}
```
```tsx Slow Dramatic Reveal theme={null}
import TextTyping from "@craftdotui/components";
export default function Example() {
return (
Every character matters...
);
}
```
## Props
The text to display with the typing animation.
Speed of typing in milliseconds per character. Lower values = faster typing.
Additional CSS classes. Component uses `font-mono` by default.
## Animation Details
### Character Reveal
The text is revealed progressively using substring slicing:
```tsx theme={null}
useEffect(() => {
let currentIndex = 0;
const intervalId = setInterval(() => {
if (currentIndex <= text.length) {
setDisplayedText(text.slice(0, currentIndex));
currentIndex++;
} else {
clearInterval(intervalId);
}
}, typingSpeed);
return () => clearInterval(intervalId);
}, [text, typingSpeed]);
```
### Cursor Animation
The cursor uses Framer Motion for smooth blinking:
```tsx theme={null}
|
```
The cursor blinks continuously throughout the typing animation and after completion.
## Examples
### Hero Section
```tsx theme={null}
import TextTyping from "@craftdotui/components";
export default function Hero() {
return (
);
}
```
### Terminal Interface
```tsx theme={null}
import TextTyping from "@craftdotui/components";
export default function Terminal() {
return (
user@system:~$
npm install @craftdotui/components
);
}
```
### Multi-Line Typing
```tsx theme={null}
import { useState, useEffect } from "react";
import TextTyping from "@craftdotui/components";
export default function MultiLine() {
const [currentLine, setCurrentLine] = useState(0);
const lines = [
"Initializing application...",
"Loading dependencies...",
"Connecting to server...",
"Ready!",
];
useEffect(() => {
const timer = setTimeout(() => {
if (currentLine < lines.length - 1) {
setCurrentLine(currentLine + 1);
}
}, (lines[currentLine].length * 100) + 500);
return () => clearTimeout(timer);
}, [currentLine]);
return (
{lines.slice(0, currentLine + 1).map((line, i) => (
{i === currentLine ? (
{line}
) : (
{line}
)}
))}
function
greet
(
name: string
);
}
```
### Testimonial Reveal
```tsx theme={null}
import TextTyping from "@craftdotui/components";
import { Quote } from "lucide-react";
export default function Testimonial() {
return (
This product changed the way we work. Highly recommended!
— Jane Doe, CEO
);
}
```
### Interactive Chat Bot
```tsx theme={null}
import { useState } from "react";
import TextTyping from "@craftdotui/components";
export default function ChatBot() {
const [messages, setMessages] = useState([
"Hi! How can I help you today?"
]);
return (
{messages.map((msg, i) => (
{i === messages.length - 1 ? (
{msg}
) : (
{msg}
)}
))}