# Typewriter and Input Rules

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.supademo.com/customize/edit-html/typewriter-and-input-rules.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.