Prompt

Role: You are a Senior Creative Developer specializing in Augmented Reality (WebAR), React Three Fiber, and Physics Simulations. You excel at creating "Digital Magic" experiences that feel organic, weighty, and high-quality. Project Goal: Build "The Lyrical Memory Wand (AR Experience)." This is a web-based AR mirror. The user sees their own video feed on the screen. A 3D wooden magic wand is rendered realistically over their actual hand. As they move their hand, a stream of vintage photos slowly and gracefully floats behind the wand tip, like a ribbon floating in water. Visual & Emotional Tone: Vibe: Poetic ("抒情"), Cinematic, Slow-motion, Magical. Physics Feel: Underwater/Zero-gravity. No jerky movements. The wand feels "heavy" and elegant; the photos feel like feathers drifting in a gentle current. Tech Stack: React 19, TypeScript, React Three Fiber, Drei (specifically for VideoTexture/Webcam), MediaPipe (Hand Tracking), Maath (for heavy damping). Core Logic & Architecture The AR Mirror Scene (The Stage): Background: Render the user's webcam feed full-screen. Flip it horizontally (scaleX: -1) so it acts as a mirror. Canvas: Overlay the R3F Canvas with a transparent background on top of the video feed. Lighting: The scene is lit primarily by the "Lumos" light on the tip of the virtual wand. This ensures the 3D elements pop against the video background. The Virtual Wand (The Anchor & Smoothing): Detection: Use MediaPipe to detect the Wrist and Index Finger landmarks. Positioning: Calculate the vector between Wrist and Index Finger to determine the wand's rotation. The wand's handle sits at the palm, and the tip extends outward. Jitter Removal (Crucial): Raw MediaPipe data is too jittery for a "lyrical" experience. Implement Heavy Damping (Lerp) on the wand's movement. Logic: WandRenderPosition = Lerp(CurrentPosition, TargetHandPosition, 0.05) This low factor (0.05) means the wand will slightly "lag" behind the real hand, giving it a feeling of weight and elegance rather than snapping instantly and vibrating. The Photo Stream (The "Slow" Physics): The Chain: The photos form a linked list or "rope" structure. Movement Logic: The Wand Tip is the "Leader." Photo 1 follows the Wand Tip but with High Air Resistance (Drag). It should take 1-2 seconds to catch up if the wand moves quickly. Photo 2 follows Photo 1 with the same drag. Effect: If the user waves the wand quickly, the photos form a large, lazy arc. If the user stops, the photos slowly drift back to cluster around the tip. Constraint: Never allow the photos to move faster than a set MAX_VELOCITY. This ensures the vibe remains soothing and never chaotic. Implementation Details The Wand Model: Use a cylinder geometry with a dark wood texture (Walnut). The Tip: A small sphere at the end with an EmissiveMaterial (Warm Gold) and a high-intensity PointLight attached to it. This light illuminates the photos as they float nearby. The Photo Assets: Visuals: Polaroid-style meshes with a slightly curved geometry (as if the paper is bending in the wind). Material: MeshStandardMaterial with transmission (slight translucency) so the wand light shines through the paper slightly, creating a warm glow. Interaction: Calibrate: When the app starts, ask the user to show their hand. Loss of Tracking: If the hand goes off-screen, the wand should gently float in place (hovering) rather than disappearing instantly, maintaining the immersion. Prompt Requirements for Code Generation Please generate the code structure focusing on: ARSceneSetup: Handles the full-screen webcam background and transparent Canvas setup. SmoothedWand Component: The logic to map MediaPipe landmarks to a 3D Cylinder, specifically applying the Heavy Damping logic to smooth out all jitter. SlowMotionStream Component: The physics engine that makes the photos follow the wand tip with significant drag/lag for that "underwater" feel. LumosShader: A simple glowing shader for the wand tip.

Upload images

Upload your images to the photos directory.

Run Locally

Prerequisites: Node.js

1. Install dependencies: npm install
2. Set the GEMINI_API_KEY in .env.local to your Gemini API key
3. Run the app: npm run dev