Installation

npx vayu-ui init #one time only

npx vayu-ui add marquee

npx vayu-ui add -t marquee #with test case needs

Usage

<Marquee pauseOnHover label="Featured technologies">
  <MarqueeItem>React</MarqueeItem>
  <MarqueeItem>TypeScript</MarqueeItem>
  <MarqueeItem>Tailwind CSS v4</MarqueeItem>
  <MarqueeItem>Next.js</MarqueeItem>
</Marquee>

<Marquee speed="fast" direction="right" label="Fast scrolling right">
  <MarqueeItem>Fast 1</MarqueeItem>
  <MarqueeItem>Fast 2</MarqueeItem>
</Marquee>

<Marquee loopMode="ping-pong" label="Ping-pong scrolling content">
  <MarqueeItem>Item 1</MarqueeItem>
  <MarqueeItem>Item 2</MarqueeItem>
</Marquee>

Anatomy

import { Marquee, MarqueeItem } from 'vayu-ui';

export default () => (
  <Marquee pauseOnHover label="Marquee Label">
    <MarqueeItem>Item 1</MarqueeItem>
    <MarqueeItem>Item 2</MarqueeItem>
  </Marquee>
);

Accessibility

• Keyboard support: Tab to focus on the pause/play control button. Enter or Space toggles the play/pause state.
• ARIA attributes: Uses role="region", aria-roledescription="marquee", and aria-label for semantic meaning. The pause button uses aria-pressed and aria-label.
• Focus behavior: Focus indicator is clearly visible on the pause control button. Animation pauses on hover or when interacting with controls, fulfilling WCAG 2.2.2 (Level A). Respects prefers-reduced-motion settings (WCAG 2.3.3).

Screen reader behavior

Screen readers will announce the component as a "marquee" region with the provided accessible label. Users can interact with the pause/play button securely, enabling them to control the scrolling animation independently to read the content without a time constraint.

Component Folder Structure

Marquee/
├── index.ts
├── types.ts
├── Marquee.tsx
├── MarqueeItem.tsx
└── README.md

Props

Marquee

MarqueeItem