⬢ HEXGUARD ⬢

"Don't Sign Blindly. Decode the Hex. Protect the Wallet."

Overview • Key Features • Tech Stack • Installation • Architecture

---

🔮 Overview

HexGuard is a next-generation Web3 security interface designed to sit between the user and the blockchain. It uses advanced simulation and AI heuristics to analyze Ethereum transactions before you sign them.

Built with a Cyber-Security First aesthetic, HexGuard doesn't just scan code; it visualizes the threat landscape using immersive 3D environments and reactive data interfaces.

---

⚡ Key Features

1. Immersive 3D HexGrid Environment

• Powered by Three.js & React-Three-Fiber: A living, breathing background that reacts to user interaction.
• Particle Systems: 5,001 individual floating particles generated via maath random generators, rendering a "digital dust" atmosphere.
• Performance Optimized: Uses Float32Array buffers and GPU-accelerated instances for 60FPS performance.

2. Real-Time Transaction Intelligence

• Deep Scanning: Input any Transaction Hash (TxHash) or Contract Address.
• Simulation Engine: Decode method calls and predict state changes before they happen.
• Visual Feedback: Reactive UI elements that pulse and glow during the "Decoding" phase.

3. AI-Driven Risk Scoring

• Neural Analysis: Simulates an LLM-based audit of smart contract bytecode.
• Risk Assessment: 0-100 grading system with detailed threat vectors.
• Visual Danger Cues: Color-coded risk levels (🟢 Safe, 🟡 Warning, 🔴 Critical).

4. Cinematic Cyber-Dark UI

• Glassmorphism: Backdrop filters and translucent layers for a premium feel.
• Micro-Interactions: Hover states and transitions powered by Framer Motion.
• Neon Accents: High-contrast Emerald/Cyan themed interface.

---

🛠 Tech Stack

Layer	Technology	Purpose
Framework	Next.js 14	App Router, SSR, & Optimization
Language	TypeScript	Type-Safe Professional Codebase
Styling	Tailwind CSS	Modern Utility-First Design
3D Engine	Three.js / R3F	WebGL Rendering & Camera Control
Animation	Framer Motion	UI Transitions & Interactive Effects
Math	Maath	3D Vector Math & Random Generation

---

🚀 Getting Started

Follow these steps to ignite the HexGuard laboratory on your local machine.

Prerequisites

• Node.js 18+
• npm, yarn, or bun

Installation

1. Clone the repository

   git clone https://github.com/yourusername/hex-guard.git
   cd hex-guard

2. Initialize the Grid (Install dependencies)

   npm install

3. Ignite the Server

   npm run dev

Open http://localhost:3000 in your browser to enter the simulation.

---

🏗 Architecture

graph TD
    A[User Input: TxHash/Contract] --> B{Simulation Engine}
    B -->|Decode CallData| C[AI Risk Analysis]
    B -->|Predict State| D[Threat Detection]
    C --> E[Neural Risk Score]
    D --> F[Vulnerability Report]
    E --> G[Visual UI Feedback]
    F --> G
    H[3D Canvas Background] -->|Reactive State| G

Loading

---

📁 Project Structure

hex-guard/
├── app/                # Main Next.js App Router
├── components/         # React Components
│   ├── 3d/             # Three.js / R3F Scenes
│   ├── ui/             # Reusable UI Primitives
│   └── ...             # Feature Components
├── public/             # Static Assets
└── assets/             # Branding & README Images

---

🛡 Roadmap

• Mainnet Integration: Connect to real Alchemy/Infura RPCs.
• Wallet Connect: "Snap" integration for MetaMask to scan before popup.
• Mobile Port: optimize 3D canvas for mobile GPUs.
• Dynamic Heuristics: Update AI analysis with real-time exploit databases.

---

HexGuard © 2026. Secure the Future.