Technical Documentation

1. How it Works

The component utilizes a dual-layer approach. The Container acts as a window with overflow: hidden. Inside, the Track holds your content.

• Cloning: Upon loading, JavaScript reads the inner HTML of your placeholder and appends a copy of it to the end of the track.

• The Loop: The CSS animation moves the track from 0% to -50%. Since the second half is an exact clone of the first, the reset to 0% is visually imperceptible to the user.

2. CSS Logic (Performance)

By using translateX, we offload the animation to the GPU (Graphics Processing Unit) rather than the CPU. This prevents "jank" and keeps the rest of the application responsive while the marquee is running.

3. Best Practices

• Item Spacing: For best results, ensure the items inside the placeholder have consistent horizontal padding.

• Image Sizing: If using logos, give them a consistent height (e.g., height: 50px) using a CSS class to keep the ribbon aligned.

• Content Volume: Ensure you have enough items to fill at least the width of the screen; otherwise, the "infinite" effect may look sparse.

Setup Instructions

1. Drag the InfiniteMarquee block to your Screen or Layout.

2. Place your items (Images, Icons, or a List) inside the Content placeholder.

3. Adjust the Speed and EdgeFade parameters to match your brand's aesthetics

Champion Tip: Use this component for "Social Proof" sections. When users see a moving list of reputable partners, it significantly increases the perceived trust and authority of the application.