Rebuild hero as immersive 8-bit mini-game HUD with SFX, CRT, and accessibility toggles#5
Open
cto-new[bot] wants to merge 4 commits into
Open
Conversation
…mified UX Refactored all landing, layout, NavBar, and Footer components to adopt a pixel-themed, 8-bit UI in line with a gaming/quest adventure feel. This change modernizes visual identity and amplifies engagement on the landing page. - Introduced new `PixelPanel`, `PixelButton`, `PixelTag`, and `PixelProgress` primitives for consistent 8-bit style - Overhauled NavBar, Footer, and wrappers to use pixel components and grid backgrounds, ensuring routing/session logic is preserved - Redesigned hero section featuring animated pixel-art landscape with React Three Fiber and gamified CTAs - Refactored features/steps into quest-style cards and tracker, using gamified copy and visuals - Enhanced layout spacing, backgrounds, and breakpoints for responsiveness with the new retro aesthetic No breaking changes or migrations required. User-visible overhaul of landing experience.
Rebuild Landing Page with Pixel-Themed, Gamified UI/UX
Reimagined the Hero component for an interactive, accessible 8-bit minigame experience, making the landing more engaging and customizable. - Integrated a layered R3F Canvas mini-game scene with voxel blocks and parallax backgrounds, lazy-loaded for LCP optimization - Added dynamic CRT scanline overlay and UI SFX with accessible PixelToggle controls, persisting user preferences via localStorage and new usePixelPreferences() hook - Created PixelSprite component for crisp pixel-art rendering and imported/created hero pixel/sprite/audio assets - Provided mobile and prefers-reduced-motion fallbacks with a static pixel illustration - Improved HUD micro-interactions using Framer Motion and maintained 8px grid for snap feedback The change is user-visible and improves immersion and accessibility across devices.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
💡 Enable Vercel Agent with $100 free credit for automated AI reviews |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR redesigns the Hero section into an interactive, layered 8-bit minigame experience, integrating an immersive voxel R3F Canvas, dynamic CRT/SFX toggles, and accessibility features, with mobile/reduced-motion fallbacks.
Details
next/dynamicfor LCP performanceusePixelPreferenceslocalStorage hook