Skip to Content (Press Enter)
Community › Forge › Assets list › Text Scrambler
text-scrambler
Reactive icon

Text Scrambler

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 7 Apr (20 hours ago)
 by 
4.0
 (1 rating)
text-scrambler

Text Scrambler

Documentation
1.0.0

Text Scrambler (Decoder Effect) Documentation

The Text Scrambler block provides a high-performance character-shuffling animation to reveal text. It is built using modern JavaScript techniques to ensure smooth transitions and full compatibility with the OutSystems Reactive and Mobile platforms.

1. Core Logic

The component works by calculating the progress of a reveal over a set Duration.

  • Scrambling phase: For each frame, the script replaces "yet-to-be-revealed" characters with random symbols from a defined set.

  • Locking phase: As the animation progresses, characters from the original text are "locked" into place from left to right.

  • Performance: Unlike setInterval, this component uses requestAnimationFrame, which syncs the animation with the browser's refresh rate (usually 60fps), preventing UI lag.

2. Component Setup

Widget Tree Requirement

To ensure the JavaScript targets the correct element, follow this structure:

  1. Enclose the Placeholder inside a Container named ScramblerWrapper.

  2. The Placeholder must have the Style Class scrambler-content.

  3. Pass ScramblerWrapper.Id to the WidgetId input of the OnReady JavaScript node.

3. Input Parameters Reference

ParameterTypeDefaultDescription
FullTextText""(Optional) List of phrases to cycle through. If blank, the block reads the text placed directly in the placeholder.
DurationInteger1500(Optional) Total time in milliseconds for the scramble-to-reveal transition per phrase.
CharactersText""(Optional) The pool of characters used for the scramble effect. Example: 01 for a binary look or ABC#@$ for a standard look.
LoopBooleanTrue(Optional) Whether the animation should restart after the last phrase is revealed.

4. Usage Guide

Scenario A: Single Static Title

  1. Drag the block to your screen.

  2. Place a Title or Text widget inside the Content placeholder.

  3. Leave all inputs as default.

  4. The title will scramble once upon page load and stay fixed.

Scenario B: Rotating Feature List

  1. Set the FullText input to: "Secure Data, Real-time Alerts, AI Powered".

  2. Set Loop to True.

  3. Set Duration to 1000 for a faster, snappier reveal.

5. CSS Customization

The component is styled to be as flexible as possible:

  • Font Choice: We highly recommend using a Monospace font (like Courier, Roboto Mono, or Consolas). This prevents "text jumping" because every character (scrambled or final) occupies the exact same width.

  • Cursor Styling: The cursor color is controlled via the color property of the text. To change the cursor blink speed, modify the tw-blink animation in the block's CSS.