Tech Stack Marquee
Data Display
Layout
Two-row technology showcase with opposite scroll directions.
Preview
Hover to pause animation
Built with modern technologies
React
TypeScript
Next.js
Tailwind
Node.js
GraphQL
PostgreSQL
Redis
React
TypeScript
Next.js
Tailwind
Node.js
GraphQL
PostgreSQL
Redis
Docker
Kubernetes
AWS
Vercel
GitHub Actions
Terraform
Datadog
Sentry
Docker
Kubernetes
AWS
Vercel
GitHub Actions
Terraform
Datadog
Sentry
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
row1 | Tech[] | Default row 1 | First row of technologies |
row2 | Tech[] | Default row 2 | Second row of technologies |
title | string | "Built with modern technologies" | Header text |
pauseOnHover | boolean | true | Pause animation on hover |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
import { TechStackMarquee } from '@/components/marquee'
<TechStackMarquee
row1={[
{ label: 'React', color: 'bg-teal-500' },
{ label: 'TypeScript', color: 'bg-blue-500' },
{ label: 'Next.js', color: 'bg-slate-800' },
]}
row2={[
{ label: 'Docker', color: 'bg-blue-500' },
{ label: 'AWS', color: 'bg-orange-500' },
{ label: 'Vercel', color: 'bg-slate-800' },
]}
title="Our Tech Stack"
/>This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Dual rows: Two rows scrolling in opposite directions
- Color-coded badges: Custom colors for each technology
- Opposite scroll: Row 1 forward, row 2 reverse
- Different speeds: Fast (20s) and normal (30s) speeds
- Gradient background: Light/dark gradient container
- Pause on hover: Stop animation for reading
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="list" for each rowaria-label for technology itemsKeyboard Navigation
| Key | Action |
|---|---|
| Hover | Pause animation |
Notes
- Technology names are clearly visible
- Pause on hover for reading
- Consider static grid alternative