BaffleJS Text Effect is a lightweight, dependency-free UI component that allows you to obfuscate and reveal text with a high-tech "glitch" shuffle animation. Perfect for adding a modern, cyberpunk, or secure aesthetic to landing pages, dashboards, and loading states.

Key Features

• Zero Dependencies: Built on the ultra-lightweight Baffle.js library.

• Instant Start: Optimized for "Zero-Moment" obfuscation, ensuring the original text is never spoiled before the animation starts.

• Fully Customizable: Control shuffle speed, duration, delay, and the character set used.

• Reactive Ready: Built-in polling logic to ensure the element is found even with OutSystems' asynchronous rendering.

How to use

1. Prepare the Target: Select the Text or Expression widget you want to animate and give it a Name (e.g., WelcomeMessage).

2. Add the Component: Drag the BaffleEffect block onto your screen (ideally near the target widget).

3. Link the ID: Set the WidgetId parameter to WelcomeMessage.Id.

4. Configure: Adjust Characters, Speed, and Duration to fit your UI style.

Elite Tip: To ensure a perfect "moment-zero" start without any flicker, you can add the CSS class baffle-waiting to your target widget's Style Class property.

Parameters

Credits 

This component is a wrapper for the excellent Baffle.js library created by Cam Wiegert.

• Original Library: Baffle.js on GitHub

• Author: Cam Wiegert (@camwiegert)