Text Gradient Animator Documentation

The Text Gradient Animator is a high-performance UI utility that applies a moving linear gradient to text elements. It uses a CSS-first approach, leveraging the browser's GPU for smooth animations while keeping the JavaScript footprint minimal.

1. Technical Overview

The component works by creating a background gradient larger than the text itself (300% size) and shifting its position over time.

• Masking: Uses -webkit-background-clip: text to ensure the gradient only appears within the glyphs of the text.

• Animation: Uses CSS Keyframes (background-position) to create the "flow" effect.

• Initialization: A small JavaScript snippet handles the hand-off between OutSystems input parameters and CSS variables.

2. Component Setup

Widget Tree Structure

To ensure the component targets the text correctly, your widget tree must look like this:

1. TextGradientAnimator (The Block)

2. GradientWrapper (Container, Name: GradientWrapper)

3. Content (Placeholder, Style Class: gradient-content)

Important: Always place a Text, Expression, or Heading widget directly inside the Content placeholder for optimal results.

3. Input Parameters

4. Detailed Usage Guide

Step-by-Step Implementation

1. Drag the TextGradientAnimator block to your Screen.

2. Inside the placeholder, add your text (e.g., a "Welcome" message).

3. In the Colors input, define your brand palette: "#FF5733, #C70039, #900C3F".

4. Adjust the Duration to 8000 if you want a slower, more subtle movement.

5. Performance & Compatibility

• GPU Acceleration: By animating background-position, the browser offloads the work to the GPU, ensuring that even complex gradients don't cause "jank" or lag during page scrolls.

• Browser Support: Supported in all modern browsers (Chrome, Safari, Edge, Firefox).

• Fallback: In very old browsers that do not support background-clip: text, the text will simply render with its default CSS color, ensuring the content remains readable.

6. Styling Tips

• Bold is Better: Gradient effects are significantly more visible on font weights of 700 (Bold) or higher.

• Monospace Fonts: For a "coding" or "cyber" aesthetic, try using a monospace font with a neon-colored gradient.

• Layering: You can place this block inside other OutSystems patterns (like Cards or Hero Containers) without any layout conflicts.

7. Troubleshooting

• Text is invisible: Ensure that your Colors input contains valid CSS color codes and that they are separated by commas.

• Animation not starting: Check if the WidgetId in the OnReady action is correctly mapped to GradientWrapper.Id.

• Flickering: Ensure you are not applying other conflicting background styles to the same text element via external CSS classes.