# 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.