Arcade OS
Retro arcade-inspired portfolio with gaming aesthetics and pixel-perfect design.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| primaryColor | string | #f43f5e | Primary accent color for buttons and highlights (hex, rgb, or hsl). |
| secondaryColor | string | #433c57 | Secondary color for borders and backgrounds. |
| accentColor | string | #facc15 | Accent color for highlights and special elements. |
| companyName | string | ARCADE.OS | Your company or portfolio name displayed in the header. |
| score | string | $84,230 | Revenue or score value displayed in the header. |
| coins | number | 420 | Coins or cash value displayed in the header. |
| enableCRTEffect | boolean | true | Enable CRT scanline effect for retro aesthetic. |
| animationSpeed | number | 1 | Animation speed multiplier (higher = faster). |
When to Use
Perfect for game developers, creative studios, and Next.js portfolios that want a high-energy, nostalgic 'Arcade' aesthetic. Use this full-page template for an immersive experience with pixel-perfect design and retro gaming UI elements.
Best Practices
Maintain consistent spacing within your design system by pairing this with 8-bit or pixelated typography. Follow React best practices by managed the Recharts data lifecycle for the 'High Score' sections. Optimize for performance by using efficient CSS scanline filters.
Why This Component Matters
Arcade aesthetics tap into deep nostalgia and playful engagement. This production-ready UI template helpsคุณ build an interface that feels energetic and unique, turning a standard portfolio into a playable brand journey.
FAQ
QIs the CRT effect optional?
Yes, the `enableCRTEffect` prop allows you to toggle the scanlines and visual distortion for a cleaner, modern pixel-art look.
QCan I use it for SaaS?
While gaming-focused, its 'High Score' and 'Level' metaphors work exceptionally well for fintech or productivity dashboards that want a gamified feel.
QAre the charts functional?
Yes, the component integrates Recharts to show real-time or static project data with a stylized arcade theme.
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.