Skip to content

A high-end, game-inspired HUD menu component with joystick navigation, glitch animations, and immersive sound effects

Notifications You must be signed in to change notification settings

eryckassis/Nordic-Studio-HUD-menu-nextjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Next.js React TypeScript Tailwind GSAP

🎮 Futuristic Circular Navigation Menu

A high-end, game-inspired HUD menu component with joystick navigation,
glitch animations, and immersive sound effects.

Live Demo


Menu Preview


✨ Features

🎯 Core Features

  • Circular Segment Navigation — 6 interactive pie-slice segments
  • 🕹️ Joystick Control — Drag to select, smooth interpolation
  • 🎬 Glitch Animations — Cyberpunk-style flicker effects
  • 🔊 Immersive Audio — Open, close, and hover sound effects
  • 📱 Fully Responsive — Mobile-first, touch-enabled

🛠️ Technical Excellence

  • 🔷 TypeScript — 100% type-safe codebase
  • ⚛️ React 19 — Latest features & optimizations
  • 🎨 Tailwind CSS 4 — Utility-first styling
  • 🏗️ SOLID Architecture — Clean, maintainable code
  • Accessible — ARIA labels, keyboard navigation



📦 Installation

# Clone the repository
git clone https://github.com/eryckassis/Nordic-Studio-HUD-menu-nextjs.git

# Navigate to project
cd Nordic-Studio-HUD-menu-nextjs

# Install dependencies
npm install

# Start development server
npm run dev

About

A high-end, game-inspired HUD menu component with joystick navigation, glitch animations, and immersive sound effects

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •