Interactive Marquee
Data Display
Interactive
Marquee with speed controls and play/pause functionality.
Preview
Control speed and playback state
AI Capabilities
Natural Language Processing
Computer Vision
Speech Recognition
Recommendation Systems
Anomaly Detection
Time Series Forecasting
Sentiment Analysis
Image Classification
Natural Language Processing
Computer Vision
Speech Recognition
Recommendation Systems
Anomaly Detection
Time Series Forecasting
Sentiment Analysis
Image Classification
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | string[] | Default items | Array of items to display |
title | string | "AI Capabilities" | Header title text |
defaultSpeed | 'slow' | 'normal' | 'fast' | "normal" | Initial animation speed |
defaultPaused | boolean | false | Start in paused state |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
import { InteractiveMarquee } from '@/components/marquee'
<InteractiveMarquee
items={[
'Natural Language Processing',
'Computer Vision',
'Speech Recognition',
'Recommendation Systems',
]}
title="AI Capabilities"
defaultSpeed="normal"
/>
// Speed options:
// 'slow' - 50s animation duration
// 'normal' - 30s animation duration
// 'fast' - 15s animation durationThis block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Speed controls: Slow, normal, and fast speed options
- Play/pause button: User-controlled playback state
- Control panel header: Title and controls in header bar
- Item badges: Styled badge elements for each item
- Dynamic animation speed: Smooth transition between speeds
- User-controlled playback: Full control over animation state
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="marquee" for scrolling contentaria-label for control buttonsaria-pressed for play/pause stateKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between controls |
| Space/Enter | Activate speed/play buttons |
Notes
- Speed controls are keyboard accessible
- Play/pause provides full user control
- Respects reduced motion preferences