Feature Cards Marquee
Data Display
Layout
Infinite scrolling feature cards with icons and descriptions.
Preview
Hover to pause animation
AI-Powered
Smart automation
Secure
Enterprise-grade
Fast
Real-time processing
Global
Multi-region support
Scalable
Unlimited storage
Private
SOC 2 compliant
API-First
Developer friendly
Analytics
Deep insights
AI-Powered
Smart automation
Secure
Enterprise-grade
Fast
Real-time processing
Global
Multi-region support
Scalable
Unlimited storage
Private
SOC 2 compliant
API-First
Developer friendly
Analytics
Deep insights
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
features | Feature[] | Default features | Array of features to display |
duration | number | 45 | Animation duration in seconds |
pauseOnHover | boolean | true | Pause animation on hover |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
import { FeatureCardsMarquee } from '@/components/marquee'
<FeatureCardsMarquee
features={[
{ icon: Brain, label: 'AI-Powered', desc: 'Smart automation' },
{ icon: Shield, label: 'Secure', desc: 'Enterprise-grade' },
{ icon: Zap, label: 'Fast', desc: 'Real-time processing' },
{ icon: Globe, label: 'Global', desc: 'Multi-region support' },
]}
/>This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Card-based feature showcase: Rich cards with icons, labels, and descriptions
- Icon badges: Gradient background icon containers
- Slow animation: 45s duration for readability
- Shadow effects on hover: Cards lift on hover interaction
- Gradient fade edges: Smooth edge transitions
- Pause on hover: Stop animation to read content
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="list" for feature containeraria-label for feature itemsKeyboard Navigation
| Key | Action |
|---|---|
| Hover | Pause animation |
Notes
- Slow animation allows time to read
- Pause on hover for full reading
- Icons are decorative with text labels