A lightweight, zero-dependency OutSystems Block to create professional typing animations for any text or title.

1. Features

• Plug & Play: No complex setup. Just drop the block and add text.

• Smart Fallback: If no input is provided, it automatically animates the text inside the placeholder.

• Multi-Phrase Support: Pass a list of phrases (comma-separated) to cycle through them.

• Adaptive Styling: The cursor (|) automatically matches the font size, color, and weight of the parent text using CSS currentColor.

• Clean Exit: The cursor automatically disappears when the animation finishes (if Loop is set to False).

• SEO Friendly: The initial text is present in the DOM, ensuring search engines can crawl your content.

2. Component Structure (Widget Tree)

To ensure the best performance and accuracy, the block is structured as follows:

• TypewriterWrapper (Container): The main anchor for the JavaScript.

• Content (Placeholder): Where you drop your Text, Title, or Expression widget.

Note: The Placeholder has a mandatory class typewriter-content to allow the script to target the text correctly.

3. Input Parameters

4. How to Use

Simple Setup (Single Phrase)

1. Search for TypewriterEffect in your dependencies and add it.

2. Drag the block to your screen.

3. Type your text directly into the Content placeholder (e.g., inside a Text widget or Heading).

4. Publish. The component will detect the text and animate it at 100ms speed.

Advanced Setup (Rotating Phrases)

1. Drag the block to your screen.

2. In the FullText input, write your phrases: "Creative Design, Clean Code, Fast Delivery".

3. Set Loop to True to keep the cycle going.

4. Set Speed to 80 for a snappier feel.

5. Technical Notes

• OnReady Logic: The component uses a MutationObserver and a small initial delay to ensure the OutSystems platform has finished rendering the placeholder content before the animation starts.

• CSS Animation: The blinking cursor uses a high-performance CSS keyframe animation (step-end) to mimic a real terminal cursor without causing layout shifts.

• Resource Footprint: Extremely low. The entire logic is contained within a single client-side action and a minimal CSS sheet.

6. Troubleshooting

• Cursor not appearing: Ensure the typewriter-content class is present on the placeholder (default in the block).

• Text not animating: Check if the WidgetId in the OnReady action is correctly mapped to TypewriterWrapper.Id.

• Layout jumping: Ensure you have defined a min-height or a fixed height for the container if your phrases have very different lengths.