Technical Documentation

1. Logic & Implementation

The component creates a pseudo-element (::after) that acts as a linear-gradient mask.

• The Path: The element starts at -150% left and moves to 150% left, ensuring it fully clears the container regardless of its width.

• The Angle: The reflection is tilted at a 30-degree angle for a more natural, realistic light behavior.

• Variable Injection: The JavaScript node maps OutSystems inputs to CSS Variables (--shiny-speed, etc.), allowing for real-time adjustments without re-rendering the DOM.

2. Setup Instructions

1. Drag the ShinyReflection block to your Screen.

2. Place a Card or Container inside the Content placeholder.

3. If your card has rounded corners, the component will automatically respect them (ensure the parent container has no conflicting overflow settings).

3. CSS Customization

The block includes a default display: block. If you are wrapping an inline element (like a small button), you may want to change the wrapper's display to inline-block via Extended Properties.

4. Accessibility & SEO

This is a purely visual layer. It does not alter the HTML structure of your content, meaning it is 100% SEO-friendly and does not impact screen readers or accessibility labels.

Champion Tip: For a "Luxury Gold" effect, set the ShineColor to rgba(255, 215, 0, 0.3). For a "Cyberpunk" look, try a neon pink like rgba(255, 0, 255, 0.5).