CONTROL A WEBSITE WITH YOUR HAND — QUICK GUIDE
novitckii.com/resources/hand-gesture-website

WHAT'S IN THIS KIT
  prompts.txt   → the 3 prompts (ChatGPT image, Kling video, Codex code)
  guide.txt     → this file
  source/       → the finished site's code (index.html, script.js, styles.css)

WHAT YOU'RE BUILDING
  A full-screen hero website where a live webcam tracks one hand, and opening /
  closing your hand scrubs a video of an origami version of your face folding and
  unfolding in real time. No mouse.

------------------------------------------------------------
STEP 1 — Generate the origami face  (ChatGPT, Image 2)
------------------------------------------------------------
  1. Open ChatGPT and upload a clear, front-facing photo of yourself.
  2. Paste the IMAGE PROMPT from prompts.txt.
  3. Download the result — a clean, folded-paper portrait on a white background.
  Tip: you can swap your face for ANY object (a shoe, a bottle, a logo). Just
  upload that instead and the same prompt folds it into paper.

------------------------------------------------------------
STEP 2 — Animate it crumbling  (image-to-video, Kling 3.0)
------------------------------------------------------------
  1. Open your image-to-video tool. Kling 3.0 gives the best fold physics.
  2. Upload the origami image from step 1.
  3. Paste the VIDEO PROMPT from prompts.txt.
  4. Generate and download the clip — the portrait crumples into a paper ball.
  Keep it short (3–5s) and on the pure-white background — that's what lets the
  site drop the background out cleanly.

------------------------------------------------------------
STEP 3 — Build the interactive site  (Codex, or any AI coding tool)
------------------------------------------------------------
  1. Open Codex (or Cursor / Claude Code / etc.).
  2. Drop in your video from step 2.
  3. Paste the CODE PROMPT from prompts.txt.
  You'll get a full-screen hero with a live webcam panel, MediaPipe hand-tracking
  skeleton lines, and gesture control: open hand unfolds, closed hand folds.

HOW THE GESTURE CONTROL WORKS (under the hood)
  - MediaPipe Hands reads 21 landmarks from your webcam each frame.
  - Those map to handCloseProgress: 0 = open hand, 1 = fist / pinch.
  - That value drives the video timeline (video.currentTime), so your hand
    "scrubs" the fold animation. When no hand is visible, it holds the frame.
  - Smoothness trick used in the shipped source/: instead of scrubbing the mp4
    directly (which stutters), it pre-renders the clip into a PNG frame sequence
    and paints the right frame to a canvas. Butter-smooth, zero lag.

RUNNING THE INCLUDED SOURCE/
  The code in source/ expects two assets it doesn't ship (they're your face):
    assets/default-paper-portrait.png   (the still from step 1)
    assets/folded-paper-portrait.mp4    (the clip from step 2)
  Add those, serve the folder over http/https (webcam needs a secure origin —
  localhost counts), and open it. For the frame-sequence smoothness, export the
  mp4 to assets/frames/frame-001.png … frame-091.png. Or just re-run the Codex
  prompt with your own video and let it scaffold the whole thing for you.

MOVE FAST — trends like this burn out quickly. Ship it while it still feels new.
