Hashgraph Ventures - Static Interactive Site

A high-fidelity, self-contained interactive static mirror of the Hashgraph Ventures website. The site is an immersive portfolio and manifesto experience built with modern WebGL, ambient audio, and responsive interactive elements.

🚀 Live Demo

• Production Deployment: https://hashgraphvccom2026-06-02-07-45-28.vercel.app
• GitHub Repository: shiva24082/hashgraphvc

---

✨ Key Features & Technology Stack

1. Interactive 3D WebGL Canvas

The website features a continuous background 3D canvas powered by Three.js / WebGL / WebGPU configurations.

• 3D Assets (/gl): Includes custom GLB models (logo.glb, rocks.glb, human_2.glb, portfolio.glb, and section-specific environments like intro_compressed.glb and investors_compressed.glb).
• Advanced Shaders & Textures: Uses custom textures (perlin.webp, blue-noise.png, waternormals.jpg) and a looped video texture (caustics.mp4) for dynamic lighting effects.
• Performance optimization: Integrates Draco and Basis transcoders (/draco and /basis) to decode complex 3D meshes and compressed textures efficiently.
• Background Worker: Offloads heavy particle calculations onto a separate thread (_nuxt/particleWorker-KawRrRyh.js) to ensure a smooth 60 FPS experience.

2. Immersive Ambient Audio

• Ambient Soundtracks: A continuous background track (Music_Ambient_Loop) that plays WebM/MP3 depending on browser support.
• Micro-interactions: Interactive elements have customized sound feedback for mouse hovers, clicks, intro animations, screen transitions, and 3D environment expansion/retraction (sfx_rock_extend, sfx_rock_retract).
• Sound Controls: A globally persistent sound toggle button in the header with custom HSL gradient lines and CSS morphing indicators.

3. Sleek Typography & Modern Design

• Custom Typography (/fonts): Styled with premium typefaces including PP Neue Montreal, Hashgraph-Title, and Parabole.
• Rich Aesthetics: Curated dark mode color scheme utilizing HSL variables, smooth linear gradients, glassmorphism card panels, and high-performance SVG filters.
• Lenis Smooth Scroll: Fluid page scroll physics with dynamic vertical scrollbar progress trackers.

4. Custom Single Page Routing (Nuxt SPA)

• Client-Side Hydration: Powered by a Nuxt static export that requests page payloads (e.g., companies/debyt/_payload.json, privacy-policy/_payload.json) client-side.
• SiteSaver Shim: Custom interceptor shims mapping original domain fetch/XHR calls to relative local directories so the entire experience works completely offline and on custom domains.
• Vercel SPA Configuration: Preconfigured with a vercel.json routing configuration to rewrite subpage URLs (like /privacy-policy or /companies/debyt) directly to index.html to prevent 404s on browser reloads.

---

📂 Project Structure

├── _data/              # Data configuration files
├── _external/          # Sanity CDN cached image assets downloaded locally
├── _nuxt/              # Nuxt runtime, components, styles, and page chunks
├── basis/              # Basis texture transcoders
├── companies/          # Company route payloads (e.g., /companies/debyt)
├── draco/              # Draco mesh decoders
├── favicons/           # Light/dark mode browser favicons & manifest files
├── fonts/              # Custom brand typography (WOFF2)
├── gl/                 # 3D GLB models, particle textures, and video files
├── images/             # Static social share cards & banners
├── privacy-policy/     # Privacy policy data payloads
├── sounds/             # Sound loops and interface FX (WebM/MP3)
├── index.html          # Main site entry point with SiteSaver shims
├── vercel.json         # Vercel SPA routing rewrite configurations
└── .gitignore          # Git exclusion file

---

💻 Local Development

To run the project locally on your machine, serve the folder using any simple static HTTP server.

For example, using Node's serve package:

npx serve

Then open http://localhost:3000 in your web browser.

---

📤 Deploying Changes

Because the project is connected to Vercel via GitHub, deployment is fully automated:

1. Stage your changes:

   git add .

2. Commit your changes:

   git commit -m "Update website features"

3. Push to GitHub:

   git push origin main

Vercel will detect the push to main, rebuild, and deploy the changes to production automatically.