Neon Arena is a cutting-edge cyberpunk-themed gaming hub landing page that delivers an immersive first impression with advanced 3D graphics, interactive animations, and stunning visual effects. Built with modern web technologies to create a premium gaming experience.
- 🎨 Cyberpunk Design: Immersive neon aesthetic with glassmorphism effects
- 🤖 3D Bot Element: Interactive 3D character with real-time animations
- ✨ Particle System: Dynamic particles responding to mouse movement
- 🎭 Canvas Graphics: Custom WebGL-powered visual effects
- 📜 Scroll Animations: Smooth parallax and object animations
- 🎮 3D Tilt Effects: GPU-accelerated interactive elements
- 📱 Responsive Design: Adaptive layout for all screen sizes
- ♿ WCAG 2.1 AA: Fully accessible with proper ARIA labels
- ⚡ 60fps Performance: Optimized animations with adaptive quality
- Framework: Next.js 16.1.6 with App Router
- UI Library: React 19.2.3 with TypeScript
- Styling: TailwindCSS 4.0 with custom neon theme
- Animations: Framer Motion for 60fps animations
- 3D Graphics: Three.js & React Three Fiber
- Smooth Scrolling: Lenis for buttery-smooth navigation
- Language: TypeScript 5.0 with strict mode
- Package Manager: npm with modern dependencies
- Code Quality: ESLint & Prettier configuration
- Testing: Vitest + Playwright for comprehensive coverage
neon-arena/
├── app/
│ ├── components/
│ │ ├── ui/
│ │ │ ├── buttons/ # Neon button components
│ │ │ ├── cards/ # Glassmorphism cards
│ │ │ └── navigation/ # Tubelight navigation
│ │ ├── layout/ # Header, Footer, MainLayout
│ │ └── features/hero/ # Hero section components
│ ├── sections/ # Page sections (hero, features, etc.)
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ └── styles/ # Global styles and CSS variables
├── public/ # Static assets
├── tests/ # Component and E2E tests
└── docs/ # Documentation
- Real-time Animation: Smooth character movements
- Mouse Interaction: Bot responds to cursor position
- Performance Optimized: GPU-accelerated rendering
- Dynamic Particles: 50+ animated particles
- Mouse Tracking: Particles follow cursor movement
- Collision Detection: Interactive particle behaviors
- WebGL Rendering: Hardware-accelerated graphics
- Real-time Updates: Smooth 60fps animations
- Custom Shaders: Advanced visual effects
- Parallax Effects: Multi-layer depth perception
- Object Animations: Scroll-triggered element movements
- Smooth Transitions: Seamless section navigation
/* Neon Color Palette */
--neon-cyan: #00ffff;
--neon-magenta: #ff00ff;
--neon-yellow: #ffff00;
--neon-green: #00ff00;
--neon-blue: #0088ff;
/* Glassmorphism Effects */
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--glass-blur: 12px;- NeonButton: Glowing buttons with hover effects
- GlassmorphismCard: Blur effects with neon borders
- NeonNavigation: Tubelight-style navigation bar
- 3D Elements: Interactive components with tilt effects
- Mobile: < 768px (simplified animations)
- Tablet: 768px - 1024px (medium complexity)
- Desktop: > 1024px (full feature set)
- Adaptive Quality: Device capability detection
- Lazy Loading: Images and 3D assets
- Memory Management: Efficient particle systems
- 60fps Target: Optimized animation loops
- Node.js 18+ and npm
- Modern web browser with WebGL support
# Clone the repository
git clone https://github.com/yourusername/neon-arena.git
# Navigate to project directory
cd neon-arena
# Install dependencies
npm install
# Start development server
npm run dev# Create .env.local file
NEXT_PUBLIC_SITE_URL=http://localhost:3000
NEXT_PUBLIC_API_URL=http://localhost:3000/api# Run component tests
npm run test
# Run tests with coverage
npm run test:coverage# Run end-to-end tests
npm run test:e2e
# Run tests in headed mode
npm run test:e2e:headed- LCP: < 2.5s (Good)
- FID: < 100ms (Good)
- CLS: < 0.1 (Good)
- Target FPS: 60fps
- Particle Count: 50 (adaptive)
- Memory Usage: < 50MB
- GPU Acceleration: Enabled
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- WebGL 2.0 support
- ES6+ JavaScript
- CSS Grid & Flexbox
- RequestAnimationFrame API
- Fork the repository
- Create feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Run tests (
npm run test) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open Pull Request
- Use TypeScript strict mode
- Follow ESLint configuration
- Write meaningful commit messages
- Add tests for new features
This project is licensed under the MIT License - see the LICENSE file for details.
- Three.js for 3D graphics capabilities
- Framer Motion for smooth animations
- TailwindCSS for utility-first styling
- Lenis for buttery-smooth scrolling
🎮 Built with passion for the gaming community 🎮