HandBifrost — Control Your PC From Anywhere With Just Your Hands

Prompt

You are a senior front-end designer and brand strategist. Build a complete, production-ready landing page for a hackathon project called "HandBifrost" — a hands-only VR application that lets users control a remote computer from a Meta Quest headset using nothing but hand gestures. ## The Project Context **Concept:** A seated VR experience. The user's PC screen streams into their headset as floating panels. Instead of a keyboard and mouse, the user points, pinches, drags, and swipes with their bare hands (26-joint hand tracking) to control the remote machine. No peripherals. Works from anywhere on Earth. **Hackathon:** Meta VR Start Developer Competition 2026 **Track:** Productivity **Division:** New Experience **Competing for:** Best New Productivity ($70k), Best Accessibility Forward ($25k), Best First Five Minutes ($25k) **Deadline:** 19 Nov 2026 **Hard requirements the project must satisfy:** - Hands-first: entire experience usable without ever pairing a controller - Seated-optimized: all interaction fits in a 2-foot radius - Short loop: a complete session under 10 minutes - Original, not a wrapper: remove the streaming layer, and the gesture-input product still stands **Tech stack to reference:** Immersive Web SDK (IWSDK), WebRTC screen streaming, WebXR Hand Input, Three.js for spatial UI, GitHub Pages for hosting, Meta VR CLI for tooling. ## Your Task Design and build a single self-contained HTML file (Bootstrap 5 + Tailwind CSS via CDN, plus custom CSS) that is a dense, cluttered, beautiful landing page for this project. ## Critical: Use Real Image Assets You have image generation and/or image search capability. Do NOT rely on emoji or CSS-only shapes as the primary visuals. Instead: 1. Generate (or source) and embed the following images directly into the HTML: - A hero image showing a first-person VR view: floating holographic PC screens in front of the user, with two translucent hand silhouettes reaching toward them, cyan/purple glow, dark background, cinematic lighting - A close-up of a hand doing a pinch gesture, with a subtle UI cursor element, glowing accent, dark background - An abstract illustration of a "bridge" or data conduit connecting a VR headset to a desktop monitor, stylized, gradient cyan-to-purple, tech aesthetic - A mockup of three floating virtual monitor panels in a dark VR space, with a small hand cursor hovering over one - A 16:9 demo video thumbnail frame showing a person wearing a Meta Quest headset in a hotel room or café, hands raised mid-gesture, with subtle UI overlay elements 2. Use base64-encoded embedded images OR reliable public image URLs (Unsplash, Pexels, or your own generated images hosted inline). Prioritize embedding directly so the file is fully self-contained and cannot break. 3. Apply proper responsive image handling: `object-fit: cover`, fixed aspect ratios, loading="lazy", descriptive alt text, and srcset where helpful. ## Design Requirements - Dark theme base: #06080d background with ambient blurred gradient orbs (cyan #06b6d4, purple #a855f7, teal #2dd4bf) - Glass morphism cards: rgba(15, 23, 38, 0.6) with backdrop-filter blur, 1px cyan-tinted border, hover lift + glow - Gradient text titles: white → cyan → purple - Dense, cluttered layout — many small cards, tags, stat blocks, progress bars, marquee strips, and micro-features packed tightly together - Section structure: 1. Sticky top nav with logo, status pill, track tags, CTA button 2. Hero: split layout — left = title + description + 4 stat blocks + CTAs + gesture tags; right = hero image + two mini stat cards + build status card with progress bars 3. Infinite marquee strip of feature tags 4. "How gestures work" — 4-column grid: Point / Pinch / Drag / Swipe, each with description, bullet list, and a supporting image 5. "Why this wins" (left, wide) + "Tech stack" (right, narrow) 6. Footer CTA with demo video thumbnail and buttons - Typography: Inter (Google Fonts), heavy weights for headings (800-900), tight tracking - Small tag/pill components with icons throughout (Font Awesome 6) - Micro-interactions: hover states, animated floating elements, subtle pulse glows ## Constraints - Single HTML file, no build step, no external JS frameworks beyond Bootstrap + Tailwind CDN - All images must render — if you cannot generate images, use real Unsplash/Pexels URLs with specific photo IDs, not placeholder services - Must be responsive down to 375px width - No lorem ipsum — all copy is specific to HandBifrost and the Meta VR Start Competition Deliver the complete HTML file. Do not summarize or truncate — output the full file.

A system prompt was added to support web rendering