whatisgithub

What is build-gesture-animation?

senlindesign/build-gesture-animation — explained in plain English

Analysis updated 2026-05-18

4JavaScriptAudience · designerComplexity · 3/5LicenseSetup · moderate

In one sentence

An Agent Skill that turns a video of something transforming into an interactive website you control with hand or mouth gestures via webcam.

Mindmap

mindmap
  root((repo))
    What it does
      Video to gesture site
      Frame based playback
      Runs on localhost
    Tech stack
      Python
      FFmpeg
      WebP images
    Use cases
      Interactive art portfolio
      Product teardown demo
      Teaching animation
    Audience
      Designers
      Vibe coders

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Turn a video of a sculpture breaking apart into a site controlled by hand pinch gestures.

USE CASE 2

Build an interactive portfolio page where visitors drive an animation with palm movement.

USE CASE 3

Create a teaching demo of a mechanical part assembling that responds to mouth movement.

What is it built with?

PythonFFmpegJavaScriptWebP

How does it compare?

senlindesign/build-gesture-animationanil-matcha/open-poe-aiarata-ae/purupurupngtuber
Stars444
LanguageJavaScriptJavaScriptJavaScript
Last pushed2026-06-25
MaintenanceActive
Setup difficultymoderatemoderatemoderate
Complexity3/53/53/5
Audiencedesignerdevelopergeneral

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires Python 3.9+, FFmpeg with the libwebp encoder, and a camera-capable browser.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

Build Gesture Animation is a small tool, called an Agent Skill, that plugs into AI coding assistants like Claude Code, Cursor, GitHub Copilot, and OpenAI Codex. It takes a video showing something changing continuously, like an object folding, breaking apart, or melting, and turns it into an interactive website where a viewer controls the animation with their body instead of a play button. The site reads a camera feed in the browser and tracks four kinds of input: opening and closing a palm, pinching thumb and finger together, moving two hands apart, or opening and closing the mouth. Whichever motion is chosen moves the animation forward or backward through the frames of the original video, and the direction can be reversed. The tool has a small system it says is not suited for everything. It fits things like origami, mechanical parts coming together, sculptures cracking, teaching demonstrations, and art portfolios. It does not fit long videos with narration, footage with multiple camera cuts, live physics simulations, or automatic hosting on a cloud service, since the site only runs on the user's own computer through localhost. Behind the scenes the tool checks the source video, pulls out a set number of evenly spaced frames, by default sixty but adjustable between twenty four and one hundred twenty, crops them to a consistent shape, and saves them as compressed image files. It then builds a website around those images and the chosen gesture controls, and checks that everything, including image sizes and configuration references, lines up correctly before it lets the site run. To use it, a person installs it through a command line tool called Skills CLI, or asks their AI agent to clone the repository and run its install script for whichever assistant they use. Running it requires Python 3.9 or newer and FFmpeg with its WebP encoder installed on the machine, along with a browser that supports a webcam. The project is released under the MIT license and has four stars on GitHub.

Copy-paste prompts

Prompt 1
Use build-gesture-animation to turn my video at /path/transformation.mp4 into a palm controlled animation site with 60 frames.
Prompt 2
Help me install the build-gesture-animation Agent Skill for Claude Code using the Skills CLI.
Prompt 3
Explain the difference between the Palm, Pinch, Span, and Mouth controls in build-gesture-animation.
Prompt 4
Walk me through build-gesture-animation's workflow from video check to localhost preview.

Frequently asked questions

What is build-gesture-animation?

An Agent Skill that turns a video of something transforming into an interactive website you control with hand or mouth gestures via webcam.

What language is build-gesture-animation written in?

Mainly JavaScript. The stack also includes Python, FFmpeg, JavaScript.

What license does build-gesture-animation use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is build-gesture-animation to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is build-gesture-animation for?

Mainly designer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.