> For the complete documentation index, see [llms.txt](https://docs.supademo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.supademo.com/customize/edit-html/typewriter-and-input-rules.md).

# Typewriter and Input Rules

Make your demos more engaging and interactive with animated text input. These features let you simulate realistic typing and create interactive moments where viewers must participate.

The **Typewriter Effect** automatically types text into input fields character-by-character, just like a real person typing. Perfect for showing viewers exactly what to enter without them having to imagine it.

**Benefits**

* Draws attention to important input fields
* Guides viewers through form completion
* Creates a polished, professional demo experience
* Reduces confusion by showing exact values to enter

**How to use**

{% @supademo/embed demoId="cmk456mf552e0gmn81bvnj7y2" url="<https://app.supademo.com/demo/cmk456mf552e0gmn81bvnj7y2>" %}

**Pro tip: Chain multiple animations**

Have several fields to fill? Use "Animate After" to make them type in sequence — first name, then last name, then email —\
creating a natural flow.

***

#### Input Rules

{% @supademo/embed demoId="cmk45nxfy53cggmn89segr9b0" url="<https://app.supademo.com/demo/cmk45nxfy53cggmn89segr9b0>" %}

**What it does**

Pauses your demo until the viewer types specific text. The demo only continues when they enter the correct input, ensuring active participation.

**Benefits**

* Increases engagement by requiring viewer interaction
* Reinforces learning through hands-on practice
* Validates understanding before moving forward
* Creates memorable training experiences

***

When to use each feature

| Use Case                              | Recommended Feature |
| ------------------------------------- | ------------------- |
| Product tours showing form completion | Typewriter Effect   |
| Search functionality demos            | Typewriter Effect   |
| Training that requires practice       | Input Trigger       |
| Password or command tutorials         | Input Trigger       |
| Onboarding walkthroughs               | Typewriter Effect   |
| Certification or quiz demos           | Input Trigger       |

***

**Best practices**

* Keep typewriter text concise — Long paragraphs can feel slow even at fast speed
* Add a small delay before typing starts so viewers notice the animation
* Use input triggers sparingly — Too many interruptions can frustrate viewers
* Provide clear instructions in your hotspot text about what users should type
* Test your demo to ensure timing feels natural

***

**Example use cases**

**Product Demo**

Show how easy it is to search your product by animating a query like "quarterly sales report" into the search bar, then\
displaying results.

**Employee Training**

Require new hires to type the correct support ticket category before showing them how to handle that ticket type.

**Feature Tutorial**

Walk users through creating their first project by auto-filling the project name and description fields.

**Security Training**

Have employees practice typing strong passwords that meet your organization's requirements.