novitckii
← All resources
Free kit · 3 promptsChatGPT · Kling · CodexMediaPipe · webcam

Control a website with your bare hands.

Open your hand and an origami version of your face unfolds. Close it and it crumples into a paper ball — live, through your webcam, no mouse. It looks like months of engineering. It's three prompts across three tools, and I'll give you all of them.

Works with your webcam right in the browser (MediaPipe Hands). Swap your face for any object you like — a shoe, a bottle, your logo. Free prompts + guide + the finished code.

Open hand unfolds · closed hand folds
Your kit · prompts, guide, code

Everything to build your own.

Grab the kit as one zip — the 3 prompts, a step-by-step guide, and the finished site's source code. The prompts are also printed below so you can copy them straight off the page.

The 3 moves · all prompts included

Three prompts, three tools.

A picture, a video, then the code that ties them to your hand. Each prompt is below — swap in your own face (or any object) where it counts.

01

Generate the origami face (ChatGPT · Image 2)

Open ChatGPT, upload a clear front-facing photo of yourself, and paste the prompt below. You get a clean folded-paper portrait on a white background. Swap the photo for any object — a sneaker, a bottle, your logo — and the same prompt folds that into paper instead.

Using this person's appearance, generate a folded photo facial sculpture filter—an origami-like portrait made from a single photo, in an editorial art style. Transform the face into a 3D form physically folded from a tangible photo, with distinct creases, indentations, and bending marks. It belongs to a photo origami effect rather than geometric CGI, with soft distortion at the crease bends and slight misalignment in the folded areas.

The composition is limited to the head, a floating bust with no shoulders, using a slight 3/4 profile perspective to showcase the depth of the creases. There are clear creases on the eyes, nose, and cheeks, and the image is slightly distorted along the creases, featuring fine paper texture and minor imperfections.

Pure white studio background, minimalist and clean. Uses directional studio lighting to highlight the creases, with soft highlights on the paper edges and distinct shadows. Retain natural skin tone but with slightly low saturation. Sharp focus, shallow depth of field. The overall presentation delivers an artistic, sculptural, experimental, and editorial atmosphere. Ultra-high resolution, no watermark. White background, but keep the hairstyle, looking at the camera.
02

Animate it crumbling (image-to-video · Kling 3.0)

Drop the portrait into an image-to-video tool — Kling 3.0 gives the best fold physics — and paste this. Keep the clip short and on the pure-white background so the site can knock the background out cleanly.

Create an animation showing the original portrait made from a folded photograph gradually transforming into a cramped, crumpled origami-like paper form.

The video begins with the neatly folded photo facial sculpture from the original prompt. Then, the face is gradually compressed inward, as if an invisible pair of hands is squeezing and folding the paper.

The face bends, collapses, wrinkles, and shrinks. It eventually becomes a smaller, more twisted paper sculpture, with dense sharp creases, overlapping folds, distorted facial features, and the texture of paper that has been squeezed and crumpled.

Keep the pure white minimalist studio background, head-only composition, 3/4 side angle, editorial magazine-style lighting, and the original photo's natural skin-tone texture.

The motion should feel like a smooth, physical paper-folding process. No camera zoom, no new objects, no visible hands, no text, and no watermark.
03

Build the interactive site (Codex · or any AI coder)

Open Codex (or Cursor, Claude Code — whatever you use), drop in your video, and paste the prompt below. It scaffolds a full-screen hero with a live webcam panel, MediaPipe hand-tracking skeleton lines, and gesture control.

Design a white-themed homepage Hero Section for a designer named Master AI Websites. Create a separate folder and page for it. Use a full-screen layout with no scrolling.

The overall style should be minimal, premium, spacious, and clean, with lots of white space. All text should be black on a white background. Buttons should be black with white text.

At the top navigation bar, place the logo or name AI Coach on the left. In the center, add navigation links: Home, Work, About, Contact. On the right, place two buttons: "View Work" and "Say Hello".

In the upper-left area of the page, add a small tagline with a diamond-shaped icon:
Design & Creative Direction
Make the word Design italic.

In the main visual area, display a bold, eye-catching headline on the left:
Crafting digital experiences, one fold at a time.
Make the final line larger and use an italic serif font to create a strong visual focus.

In the bottom-left area, add a short subtitle describing AI Coach's design direction and creative expression. Add a white pill-shaped button that says: View Work

On the right side of the screen, display a looping video clip with a water-ripple mirror-flip effect as the main visual. Only keep the animation from the video. Remove the video background and make it transparent.

On the left side of the page, include a camera window showing the live webcam feed. Overlay MediaPipe Hands / Gesture Recognition hand-tracking skeleton lines on top of the webcam feed.

The camera should recognize the state of one hand in real time and use gestures to control the progress of the folded-paper character video:
- When the hand is open, the video should move backward, and the crumpled paper ball should unfold back into a human portrait.
- When the hand closes, makes a fist, or pinches, the video should move forward, and the portrait should be crumpled into a paper ball.

The playback should feel smooth, fluid, and free of lag. When no hand is detected, the video should stay on the current frame and should not autoplay.

Use handCloseProgress to map the hand gesture to the video timeline:
0 = hand open
1 = hand closed / fist / pinch

Make video.currentTime update in real time based on the gesture, creating an interactive effect where the user can drag through the video timeline using hand movement.
iHow the control works: MediaPipe reads 21 hand landmarks per frame and collapses them to one number, handCloseProgress (0 = open, 1 = fist). That scrubs the video timeline, so your hand drags the fold in real time. The finished code in the kit pre-renders the clip into a PNG frame sequence for buttery, lag-free scrubbing.
!Ship it while it's fresh. Interactive, gesture-driven hero sites are having a moment — the first ones in a niche get the shares and the “how did you build this?” comments. Post yours before everyone's doing it.
Built one? Send it

Build it with your face — or your product — and tag me, I repost the good ones. If a step trips you up (webcam permissions, the fold physics, the background knock-out), ping me on Instagram or join the weekly call on Skool.

Get the hand-gesture kit — free

Drop your email and the 3 prompts, the guide, and the finished code unlock instantly — plus every other resource in the library. One email a week, unsubscribe anytime.

Build the unbuildable

One email a week. Builds like this.

The AI builds and content trends worth stealing — the prompts, the tools, and the exact steps, while they're still working.