Arcade OS
Retro arcade-inspired portfolio with gaming aesthetics and pixel-perfect design.
Main Features of Arcade OS
How to Use Arcade OS in Next.js
Installation Guide for Arcade OS
Props
Customize the component with these 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). |
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.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
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.