Out tech stack is React/Typescript for a web app for with focused on mobile so design a mobile home screen for a cyberpunk endless runner game. Use a dark background with neon blue and magenta accents optimized for mobile display. At the top, place "HOME" text with digital glitch effect, with coin counter (left) and level indicator (right) designed as small, tap-friendly UI elements with cyberpunk styling. Create a prominent horizontal carousel of 3 selectable avatars centered on screen, each featuring cyberpunk character designs (cyborg, hacker, rebel) in hexagonal frames with neon effects. Size avatars appropriately for touch interaction. When a user taps an avatar, display a floating info card showing: character name, rarity indicator with neon color coding, and brief description in monospace terminal font. Ensure tap targets are at least 44x44 pixels. At the bottom, include a fixed navigation bar with large, easily tappable buttons for: "MARKET", "PLAY", "RANKING" and "PROFILE", each with minimalist neon icons. Highlight the active button with stronger glow. Optimize the entire layout for portrait orientation and one-handed mobile interaction.
Cyberpunk Endless Runner Mobile Home Screen
I'll create a mobile-optimized home screen for your cyberpunk endless runner game with all the requested elements: dark theme, neon accents, avatar carousel, and touch-friendly navigation.
Key Features
Cyberpunk Aesthetic
- Dark background with neon blue (
#00ffff) and magenta (#ff00ff) accents - Grid background with low opacity for depth
- Glitch effect on the "HOME" text using CSS animations and text-shadow
- Dark background with neon blue (
Mobile-Optimized UI
- All touch targets are at least 44x44 pixels (buttons are 64x64px)
- Responsive layout that works well in portrait orientation
- Optimized for one-handed interaction
Character Selection
- Horizontal carousel with 3 cyberpunk characters (Cyborg, Hacker, Rebel)
- Hexagonal-style frames with neon glow effects
- Tap interaction to display character information
Game Stats Display
- Coin counter in the top-left with cyberpunk styling
- Level indicator in the top-right with matching design
- Both elements have neon glow effects
Navigation Bar
- Large, easily tappable buttons (64x64px)
- Clear icons with labels for Market, Play, Ranking, and Profile
- Active button highlighted with stronger glow effect
- Consistent cyberpunk styling
The implementation uses React with TypeScript and is fully responsive for mobile devices. The UI elements follow cyberpunk design principles with neon colors, glitch effects, and futuristic styling.
Improve the last code to add this play functionality: This should work as a modal when you click the PLAY button so create a mobile "PLAY" screen for a cyberpunk endless runner. Use a futuristic cityscape background with neon lights and digital rain effects optimized for vertical phone orientation. At the top, display "PLAY" in futuristic typography with digital interference effect. Design a central section titled "MAPS" with pulsing neon border containing two map options sized for easy touch interaction:
An unlocked map showing a cyberpunk night city with skyscrapers and holographic ads A locked map with glitch effect featuring a prominent "UNLOCK for 5 coins" button with terminal styling and red neon frame
Include a brief description below each map in monospace font describing features and difficulty. Add a clearly visible "X" close button in the upper right corner with red neon effect. Ensure all touch targets are large enough for mobile interaction (minimum 44x44 pixels). Maintain the same bottom navigation bar as the Home screen, with the "PLAY" button highlighted to indicate current screen. Design the entire layout for portrait mode with comfortable thumb reach zones.
Cyberpunk Runner Play Screen Modal
I'll enhance the previous code by adding a Play screen modal that appears when the PLAY button is clicked, featuring map selection with unlockable content and maintaining the cyberpunk aesthetic.
Enhanced Features
I've implemented the Play screen modal with all the requested features while maintaining the cyberpunk aesthetic:
Play Modal
Modal Activation
- Opens when the PLAY button is clicked in the navigation bar
- Maintains the active state of the PLAY button when modal is open
Cyberpunk Visual Effects
- Futuristic cityscape background with overlay
- Animated digital rain effect that pulses for depth
- "PLAY" title with digital interference animation
- Neon-styled borders and glowing elements
Maps Section
Two map options with distinct styling:
- Unlocked map (Night City) with full visibility
- Locked map (Corporate Sector) with lock overlay and unlock button
- Each map has a descriptive text in monospace font
- Pulsing neon border around the MAPS section title
Interactive Elements
- Large close button (X) with red neon effect in the top-right corner
- "UNLOCK for 5 coins" button with terminal styling and red neon frame
- All touch targets are at least 44x44 pixels for mobile-friendly interaction
- Glitch hover effect on interactive elements
Functional Logic
- Coin system that deducts coins when unlocking a map
- State management to track unlocked maps
- Smooth animations for opening/closing the modal
The implementation maintains the same navigation bar as the Home screen with the PLAY button highlighted to indicate the current screen. The entire layout is optimized for portrait mode with comfortable thumb reach zones.
Design a mobile "PROFILE" screen for a cyberpunk endless runner. Use a digital circuit background with subtle animated data lines optimized for vertical phone display. At the top, show "PROFILE" in futuristic typography with 3D hologram effect. In the upper section, include two mobile-friendly information cards:
"COIN BALANCE" - A digital coin counter with bright yellow neon styling "LEVEL & SCORE" - A level indicator with digital progress bar and best score in green neon
In the central section, display "YOUR AVATARS COLLECTION:" in terminal font, followed by a grid of unlocked avatars with hexagonal neon-lit frames sized for comfortable touch interaction. Place each avatar's name underneath in cyberpunk typography. When tapping any avatar, display a slide-up detail card showing: name, rarity (with corresponding neon color), and description in terminal font with digital scrolling effect. Keep the bottom navigation bar with the "PROFILE" button highlighted to indicate current screen. Ensure the entire layout works in portrait orientation with all interactive elements within easy thumb reach.
