> ## Documentation Index
> Fetch the complete documentation index at: https://icons.mzrdev.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Typing Effects

> Add dynamic typing animations to your profile.

## Overview

Typing Effects allow you to create animated SVGs that simulate a typing and deleting effect.

## Visual Examples

### Font Comparison

Choose between a smooth rounded font or a technical mono font.

<Tabs>
  <Tab title="Nunito (Default)">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/typing?text=Beautiful+rounded+font&font=Nunito)
    ```

    <Frame>
      <img src="https://icon.mzrdev.com/typing?text=Beautiful+rounded+font&font=Nunito&height=80" alt="Nunito Font" />
    </Frame>
  </Tab>

  <Tab title="Fira Code (Mono)">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/typing?text=Technical+monospace+font&font=Fira+Code)
    ```

    <Frame>
      <img src="https://icon.mzrdev.com/typing?text=Technical+monospace+font&font=Fira+Code&height=80" alt="Fira Code Font" />
    </Frame>
  </Tab>
</Tabs>

### Color Styles

Customize the text appearance with gradients or solid hex colors.

<Tabs>
  <Tab title="Gradient">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/typing?text=Vibrant+Gradients)
    ```

    <Frame>
      <img src="https://icon.mzrdev.com/typing?text=Vibrant+Gradients&height=80" alt="Gradient Effect" />
    </Frame>
  </Tab>

  <Tab title="Solid Color">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/typing?text=Clean+Solid+Color&color=3b82f6)
    ```

    <Frame>
      <img src="https://icon.mzrdev.com/typing?text=Clean+Solid+Color&color=3b82f6&height=80" alt="Solid Color Effect" />
    </Frame>
  </Tab>
</Tabs>

## Advanced Usage

### Persistent Prefix

Use a colon `:` to define a prefix that stays while the rest of the text cycles.

```markdown theme={null}
![](https://icon.mzrdev.com/typing?text=I+am+a:Developer;Designer;Creator)
```

<Frame>
  <img src="https://icon.mzrdev.com/typing?text=I+am+a:Developer;Designer;Creator&height=80" alt="Persistent Prefix" />
</Frame>

## Customization Options

| Parameter    | Description                                    | Default       |
| :----------- | :--------------------------------------------- | :------------ |
| `text`       | Semicolon-separated lines. Use `:` for prefix. | `Hello there` |
| `font`       | `Nunito` or `Fira Code`                        | `Nunito`      |
| `fontSize`   | Font size in pixels                            | `52`          |
| `color`      | Solid text color (hex)                         | Gradient      |
| `align`      | `left` or `center`                             | `left`        |
| `background` | Background color (hex)                         | `transparent` |
| `speed`      | Typing speed (ms per char)                     | `85`          |
| `pause`      | Pause at end of line (ms)                      | `1100`        |