Text Velocity Loop

A responsive horizontal text marquee that reacts to scroll direction and speed using GSAP.
SCROLL DOWN

Lunipod UI

Lunipod UI

Lunipod UI

Lunipod UI

Lunipod UI

SCROLL UP

Props

PropertyTypeDefaultDescription
scrollContainerRefRefObject<HTMLDivElement>windowOptional custom scroll container reference. Defaults to the global `window` object if not provided.
itemsstring[]["Lunipod UI"]An array of strings to be repeated and animated in the horizontal loop.
repeatCountnumber5The number of times the `items` array should be repeated to form the scrolling loop.
speednumber0.8Base speed of the scrolling animation. Higher values make it faster.
reversedbooleantrueDetermines the initial direction of the scroll animation. If true, scrolls right to left.
fontSizenumber50Font size for the default item renderer (in pixels).
classNamestring""Additional Tailwind or custom CSS classes to apply to the outer container.
renderItem(item: string, index: number) => ReactNodeundefinedOptional custom render function for each item. If not provided, defaults to a white `h4` element.

Made withby this guy