Промпт

Промпт


Role: Expert Creative Technologist and Frontend Developer.

Task: Create a single-page immersive web application that features a high-fidelity 3D model viewer controlled by hand gestures via the webcam.

Design Aesthetic:

Vibe: Similar to igloo.inc or Apple's product pages, minimalist, premium, smooth motion, and highly responsive.

Background: Deep dark grey/black flexible gradient or blurred ambient lights to make the 3D model pop.

Typography: Clean sans-serif fonts (Inter or SF Pro).

Core Tech Stack:

Framework: React (Next.js App Router preferred).

3D Engine: React Three Fiber (R3F) + Drei.

Styling: Tailwind CSS.

Computer Vision: Google MediaPipe Hands (specifically @mediapipe/tasks-vision) or react-webcam with a hand tracking model.

Functional Requirements:

3D Scene:

Initialize a canvas with a realistic environment map (lighting).

Load a placeholder 3D model (a simple geometry for now, but configured to accept a .glb or .gltf file of an Apple Vision Pro later).

The model should float in the center with a gentle idle animation (sine wave hovering).

Webcam & Hand Tracking:

Ask for camera permissions immediately on load with a sleek UI overlay.

Display a small, stylized video feed in the corner (circular mask) so the user can see their hand.

Detect hand landmarks in real-time.

Report Page