🌌 Monad Element

An immersive 3D ecosystem explorer for the Monad blockchain

✨ Features

🎯 Core Functionality

• 3D Monad Tunnel Visualization - Interactive particle system forming the iconic Monad shape
• AI-Powered Search - Semantic search using Google Gemini 2.0 Flash
• 305+ Ecosystem Projects - Comprehensive database of Monad ecosystem dApps
• Real-time Interaction - Click on data markers to explore project details
• Voice Commands - Navigate using voice
• Hand Gestures - Control with hand tracking (Coming Soon)

🎨 Visual Design

• Holographic Tunnel Effect - Particles arranged in Monad's signature shape
• Purple Gradient Theme - Monad brand colors (#831dff, #00ffff)
• Smooth Animations - Butter-smooth 60fps Three.js rendering
• Responsive UI - Works on desktop and mobile
• Glassmorphism - Modern frosted glass UI elements

🤖 AI Integration

• Hunter AI Assistant - Futuristic AI persona for search results
• Semantic Understanding - Finds projects by concept, not just keywords
• Smart Matching - "betting" → finds gambling, prediction markets, casino projects
• JSON Data Processing - Optimized 305-project database

🚀 Quick Start

Prerequisites

• Node.js 18+
• Yarn or npm
• Google Gemini API key

Installation

# Clone the repository
git clone <your-repo-url>
cd temp_app

# Install dependencies
yarn install

# Set up environment variables
cp .env.local.example .env.local
# Add your GEMINI_API_KEY to .env.local

# Run development server
yarn dev

Open http://localhost:3000 to see the magic! ✨

🔧 Tech Stack

Frontend

• Next.js 16.0 - React framework with Turbopack
• React Three Fiber - Three.js for React
• Three.js - 3D graphics library
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling

AI & Data

• Google Gemini 2.0 Flash - AI semantic search
• JSON Database - 305 Monad ecosystem projects
• Custom Tunnel Math - Monad shape positioning algorithms

UI Components

• MonadScene - Main 3D canvas with tunnel particles
• MonadParticles - Particle system forming tunnel shape
• MonadLogo3D - Interactive 3D Monad logo core
• SearchBar - AI-powered search interface
• HunterAI - AI assistant popup
• ResultsPanel - Project details display

📁 Project Structure

temp_app/
├── app/
│   ├── page.tsx              # Main application
│   ├── layout.tsx            # Root layout
│   └── api/
│       └── gemini/
│           └── route.ts      # AI search API endpoint
├── components/
│   ├── MonadScene.tsx        # 3D scene container
│   ├── MonadParticles.tsx    # Tunnel particle system
│   ├── MonadLogo3D.tsx       # 3D logo core
│   ├── SearchBar.tsx         # Search interface
│   ├── HunterAI.tsx          # AI assistant
│   ├── ControlPanel.tsx      # Voice/Hand controls
│   ├── ResultsPanel.tsx      # Project details
│   └── HandGestureController.tsx  # Coming Soon popup
├── utils/
│   ├── monadTunnelMath.ts    # Tunnel shape calculations
│   └── sphereMath.ts         # Legacy sphere math
├── public/
│   └── data.json             # 305 ecosystem projects
└── tailwind.config.ts        # Monad theme colors

🎮 How to Use

Search

1. Type in the search bar - e.g., "DeFi", "NFT", "Gaming"
2. AI analyzes your query - Semantic understanding
3. Hunter AI scans - Finds matching projects
4. Results appear - Click markers or grid items

Interact

• Click data markers - View project details
• Click Monad core - Reset view
• Rotate scene - Drag with mouse
• Zoom - Scroll wheel

Voice & Gestures (Coming Soon)

• Click control panel buttons to see "Coming Soon" modal

🔑 Environment Variables

Create .env.local in the root directory:

GEMINI_API_KEY=your_gemini_api_key_here

Get your API key from Google AI Studio

🎨 Customization

Change Colors

Edit tailwind.config.ts:

colors: {
  'monad-purple': '#831dff',  // Primary purple
  'monad-cyan': '#00ffff',    // Accent cyan
}

Adjust Tunnel Size

Edit utils/monadTunnelMath.ts:

const outerCurve = createMonadShape(3.0, 0.9, Math.PI / 8);
// Change 3.0 to adjust size

Modify Particle Count

Edit components/MonadParticles.tsx:

const count = 1500; // Increase for denser tunnel

🐛 Troubleshooting

AI Search Returns "AI CORE FAILED"

• Check your GEMINI_API_KEY in .env.local
• Ensure the file is UTF-8 encoded (not UTF-16)
• Verify API key is valid at Google AI Studio

Tunnel Not Appearing

• Clear browser cache
• Check console for errors
• Ensure data.json exists in /public

Performance Issues

• Reduce particle count in MonadParticles.tsx
• Disable bloom effects in MonadScene.tsx
• Use a more powerful GPU

📊 Data Format

public/data.json structure:

[
  {
    "name": "Project Name",
    "logo": "https://...",
    "type": "DeFi",
    "tags": ["DEX", "AMM"],
    "socials": {
      "x": "https://x.com/...",
      "web": "https://..."
    },
    "banner": "https://...",
    "description": "Project description..."
  }
]

🚧 Roadmap

• 3D Monad tunnel visualization
• AI semantic search
• 305+ ecosystem projects
• Interactive data markers
• Voice command navigation
• Hand gesture controls
• VR/AR support
• Mobile app
• Real-time ecosystem updates
• Social sharing
• Project submission portal

🤝 Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📄 License

MIT License - feel free to use this project however you'd like!

🙏 Credits

• Monad - For the amazing blockchain ecosystem
• Google Gemini - AI-powered search
• Three.js - 3D graphics magic
• Next.js - React framework excellence

📞 Support

• Issues: Just create a PR in this repo with your issue or create issue in the issue section..
• Twitter: @YourHandle
• Discord Username: fazalurrehman0

---

Built with 💜 for the Monad ecosystem

Explore. Discover. Connect.