Infinite Marquee

High-performance rAF continuous translation loop with modulo wrap, exponential hover damping, and zero external animation libraries.

CLI Installation

React

$pnpm dlxexhumaaddinfinite-marquee--flavor=react

// 01Workbench

Interactive Specification & Studio

layouts

Preset:

Viewport

Fluid 100%

120Hz ProMotionKineticActive

Zero Runtime DepsPureLocked

Modulo Wrap SeamMathC0/C1

13 TargetsUniversal13/13

Sub-pixel TranslationEKMHardware

Parameters

10 Props

speed

direction

pauseOnHover

gap

showFadeEdges

fadeWidth

fadeEdgeColor

fadeEdgeColorDark

scrollCoupling

directionHysteresis

// 02Usage

Quick Start & Consumer Example

Copy-paste ready implementation for React (.tsx). Automatically updates when you modify parameters in the Workbench above.

App.tsx

React (.tsx)

import React from 'react';
import { InfiniteMarquee } from './components/ui/InfiniteMarquee';

const TECH_STACK = [
  { label: '120Hz ProMotion', tag: 'Kinetic', status: 'Active' },
  { label: 'Sub-pixel Translation', tag: 'Hardware', status: 'GPU' },
  { label: 'Modulo Wrap Seam', tag: 'Math', status: 'Ω(1)' },
  { label: 'Zero Runtime Deps', tag: 'Pure', status: 'Locked' },
  { label: '13 Target Ecosystems', tag: 'Universal', status: '13/13' },
];

export default function App() {
  return (
    <div className="min-h-screen bg-background text-foreground py-16">
      <div className="max-w-4xl mx-auto px-6 mb-8 text-center">
        <h1 className="text-3xl font-bold">Infinite Kinetic Rail</h1>
      </div>

      <InfiniteMarquee
        speed={40}
        direction="left"
        pauseOnHover={true}
        gap={24}
        showFadeEdges={true}
        fadeWidth={48}
        fadeEdgeColor="#ffffff"
        fadeEdgeColorDark="#09090b"
      >
        {TECH_STACK.map((item, idx) => (
          <div
            key={idx}
            className="flex items-center gap-3 rounded-2xl border border-border/80 bg-card px-5 py-3 text-xs font-semibold shadow-xs"
          >
            <span className="h-2 w-2 rounded-full bg-primary" />
            <span className="font-mono font-medium">{item.label}</span>
            <span className="text-muted-foreground font-mono text-[10px]">{item.tag}</span>
          </div>
        ))}
      </InfiniteMarquee>
    </div>
  );
}

// 03API Contract

Props & Configuration

Exhaustive parameter contract for Infinite Marquee. Validated in the live Studio workbench above and statically checked across all 13 ecosystem templates.

Prop	Type	Default	Description
speed	number	40	Scroll speed in pixels per second.
direction	select	left	Direction of marquee translation.
pauseOnHover	boolean	true	Smoothly decelerate to zero when hovered.
gap	number	24	Spacing between items and repeated tracks in pixels.
showFadeEdges	boolean	true	Show subtle gradient mask at boundaries for graceful entry and exit.
fadeWidth	number	48	Width of the edge gradient fade in pixels.
fadeEdgeColor	color	#ffffff	Custom edge gradient color. When empty, an alpha mask is used.
fadeEdgeColorDark	color	#09090b	Edge gradient color when dark mode is active. Falls back to fadeEdgeColor.
scrollCoupling	boolean	false	Marquee speed couples to page scroll velocity.
directionHysteresis	boolean	false	Smooth direction reversal on scroll direction change.

speed

number

Scroll speed in pixels per second.

Default:40

direction

select

Direction of marquee translation.

Default:left

pauseOnHover

boolean

Smoothly decelerate to zero when hovered.

Default:true

gap

number

Spacing between items and repeated tracks in pixels.

Default:24

showFadeEdges

boolean

Show subtle gradient mask at boundaries for graceful entry and exit.

Default:true

fadeWidth

number

Width of the edge gradient fade in pixels.

Default:48

fadeEdgeColor

color

Custom edge gradient color. When empty, an alpha mask is used.

Default:#ffffff

fadeEdgeColorDark

color

Edge gradient color when dark mode is active. Falls back to fadeEdgeColor.

Default:#09090b

scrollCoupling

boolean

Marquee speed couples to page scroll velocity.

Default:false

directionHysteresis

boolean

Smooth direction reversal on scroll direction change.

Default:false

// 04Source Code

Component Source

Component source definition for React (.tsx). Toggle between the clean wrapper and the standalone ejected engine micro-kernel.

InfiniteMarquee.tsx

import * as React from 'react';
import * as InfiniteMarqueePrimitive from '@exhuma/core';
import { clsx } from 'clsx';

export interface InfiniteMarqueeProps extends React.ComponentPropsWithoutRef<typeof InfiniteMarqueePrimitive.InfiniteMarquee> {
  className?: string;
}

export const InfiniteMarquee = React.forwardRef<HTMLDivElement, InfiniteMarqueeProps>(
  ({ className, children, ...props }, ref) => (
    <InfiniteMarqueePrimitive.InfiniteMarquee
      ref={ref}
      className={clsx(
        'relative flex overflow-hidden select-none w-full py-4 [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]',
        className
      )}
      {...props}
    >
      {children}
    </InfiniteMarqueePrimitive.InfiniteMarquee>
  )
);
InfiniteMarquee.displayName = 'InfiniteMarquee';

// 05Architecture

Lifecycle Safety & Performance

Engineered for high-frequency user interactions with zero memory leaks.

Teardown

Deterministic Cleanup

All pointer event listeners, scroll handlers, and resize observers are cleanly destroyed on component unmount, preventing lingering background processes.

Compositor

GPU Compositor Acceleration

Transform and opacity modifications run directly on the GPU compositor thread using will-change: transform without triggering browser layout recalculations.

// 06a11y

Accessibility Considerations

Fully compliant with WCAG guidelines and respects user motion preferences.

Motion

prefers-reduced-motion Support

When a user has prefers-reduced-motion: reduce enabled in their operating system, Exhuma components automatically disable 3D gyroscope tilt and spring animations, rendering static accessible content.

import React from 'react'; import { InfiniteMarquee } from './components/ui/InfiniteMarquee'; const TECH_STACK = [ { label: '120Hz ProMotion', tag: 'Kinetic', status: 'Active' }, { label: 'Sub-pixel Translation', tag: 'Hardware', status: 'GPU' }, { label: 'Modulo Wrap Seam', tag: 'Math', status: 'Ω(1)' }, { label: 'Zero Runtime Deps', tag: 'Pure', status: 'Locked' }, { label: '13 Target Ecosystems', tag: 'Universal', status: '13/13' }, ]; export default function App() { return ( <div className="min-h-screen bg-background text-foreground py-16"> <div className="max-w-4xl mx-auto px-6 mb-8 text-center"> <h1 className="text-3xl font-bold">Infinite Kinetic Rail</h1> </div> <InfiniteMarquee speed={40} direction="left" pauseOnHover={true} gap={24} showFadeEdges={true} fadeWidth={48} fadeEdgeColor="#ffffff" fadeEdgeColorDark="#09090b" > {TECH_STACK.map((item, idx) => ( <div key={idx} className="flex items-center gap-3 rounded-2xl border border-border/80 bg-card px-5 py-3 text-xs font-semibold shadow-xs" > <span className="h-2 w-2 rounded-full bg-primary" /> <span className="font-mono font-medium">{item.label}</span> <span className="text-muted-foreground font-mono text-[10px]">{item.tag}</span> </div> ))} </InfiniteMarquee> </div> ); }

Prop

Type

Default

Description

speed

number

Scroll speed in pixels per second.

direction

select

left

Direction of marquee translation.

pauseOnHover

boolean

true

Smoothly decelerate to zero when hovered.

gap

number

Spacing between items and repeated tracks in pixels.

showFadeEdges

boolean

true

Show subtle gradient mask at boundaries for graceful entry and exit.

fadeWidth

number

Width of the edge gradient fade in pixels.

fadeEdgeColor

color

#ffffff

Custom edge gradient color. When empty, an alpha mask is used.

fadeEdgeColorDark

color

#09090b

Edge gradient color when dark mode is active. Falls back to fadeEdgeColor.

scrollCoupling

boolean

false

Marquee speed couples to page scroll velocity.

directionHysteresis

boolean

false

Smooth direction reversal on scroll direction change.

import * as React from 'react'; import * as InfiniteMarqueePrimitive from '@exhuma/core'; import { clsx } from 'clsx'; export interface InfiniteMarqueeProps extends React.ComponentPropsWithoutRef<typeof InfiniteMarqueePrimitive.InfiniteMarquee> { className?: string; } export const InfiniteMarquee = React.forwardRef<HTMLDivElement, InfiniteMarqueeProps>( ({ className, children, ...props }, ref) => ( <InfiniteMarqueePrimitive.InfiniteMarquee ref={ref} className={clsx( 'relative flex overflow-hidden select-none w-full py-4 [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]', className )} {...props} > {children} </InfiniteMarqueePrimitive.InfiniteMarquee> ) ); InfiniteMarquee.displayName = 'InfiniteMarquee';