AI video chained frame by frame, with no jumps, and an animated graphic made in code in every section. With the Off, On and X-ray switch, which shows what is video and what is code.
Site em Movimento is a skill for Claude Code (and Codex) that builds a site whose top is a continuous video: the camera moves forward as the person scrolls the page. The video is generated by AI in short chained clips, and scripts check that there are no jumps between them. Below the film, each section gets an animation made in code that explains what it says. It is for anyone who wants an opening page that feels like a movie. You need Claude Code and, if you want real video, a video generator (Kling, Agnes, Kie or another); without a generator, it builds everything in code.
Each site is designed from scratch. What repeats is the method, the scripts that check the work and the page engine.
Each clip starts on the real last frame of the previous one. Scripts measure whether the generator respected the start and end frames and whether there is a hidden cut in the middle.
Kling through the subscription, Agnes, Kie or your own (a command with start, end, prompt and output). Without a generator, the film becomes scenes in code.
A switch in the corner toggles between Off, On and X-ray. In X-ray, everything that moves gets a label: AI video (with the cost) or code.
No step moves forward without passing its gate. The gates are scripts with no AI, at zero cost.
Asking an image model to "move the camera" usually returns the same photo. The skill crops the center of the previous frame, enlarges it and only redraws the detail: the camera axis is guaranteed.
vetor.py checks the direction of the film before spending; fixacao.py measures whether the generator respected the frames; cortes.py and continuidade.py find cuts and freezes.
Three critics with a clean context judge the captures, never the code: briefing, visual system and craft (against the reference, blind). The verdict is only PASS or FAIL.
The video generator is optional: without it, the site comes out in pure code.
Claude Code (or Codex), ffmpeg, Python 3 with numpy and Pillow, Node 18+ with Playwright.
pip install numpy pillow npx playwright install chromium
One of the engines: kling (CLI through the subscription), agnes or kie (your own key) or custom (any command).
kling login # once kling account -q # balance
For the keyframes: a local server (flux2-klein) at no cost, or the generator you prefer.
curl localhost:8000/health
Real commands. The skill drives everything from step 3 on; the commands below show what happens underneath.
Clone the repository and link the skill folder into Claude Code (and into Codex, if you use it).
git clone https://github.com/inematds/site-movimento ~/projetos/site-movimento ln -s ~/projetos/site-movimento/skill/site-movimento ~/.claude/skills/site-movimento bash ~/.claude/skills/site-movimento/tests/motores-contrato.sh # 4/4 engines OK
Gather 3 to 10 images or links to sites you admire, each chosen for a reason.
/site-movimento I want a moving site about <subject>. The references are attached. Read the references, interview me and use the kling engine.
A single batch of short questions (subject, mood, the camera journey, sections, action, engine). Nothing is spent before your yes.
# Proof plan on Kling 720p: 3 clips + 1 loop = 120 credits (measured) # Standard plan: 5 clips + 2 loops = 210 · Full: 7 + 4 = 330
The first keyframe comes from the prompt; the following ones, by approximation. The sheet shows whether any step turned the camera or stood still.
python3 $S/motores/imagem_local.py kf/kf01.png "<opening scene>" python3 $S/scripts/kf_aproxima.py kf/kf01.png kf/kf02.png "<the scene closer up>" --fator 1.8 python3 $S/scripts/folha_kf.py kf/ # ok / OLHE / QUEBRA? / PARADO
Check the direction for free; then the film comes out in order, each clip starting on the last frame of the previous one.
python3 $S/scripts/vetor.py filme/roteiro.json # PASS before spending MOTOR=kling bash $S/scripts/filme.sh filme/ # fixacao + cortes on every clip python3 $S/scripts/montar.py site filme/clipes/c1.mp4:0:-1 filme/clipes/c2.mp4:1:-1 python3 $S/scripts/continuidade.py site/frames 4 # PASS: a single movement
The page uses the scroll engine and the motion switch. The critics judge captures; the text and the stutters go through gates.
bash $S/scripts/pacote-criticos.sh topo "http://127.0.0.1:8871/site/" node $S/scripts/portao-texto.js site/index.html # clean text node $S/scripts/verificar.js jank "http://127.0.0.1:8871/site/" # max < 50 ms
Any AI plugs in through the custom engine. Test the frame pinning on the first clip before chaining the film.
export MOTOR=custom export MOTOR_CMD='meu-cli --start {inicio} --end {fim} -p {prompt} --sec {segundos} -o {saida}' bash $S/scripts/filme.sh filme/
A test copy of the eventos.inema.pro home. The camera leaves the runway at dusk, enters the terminal and stops at the departures board, and the page's real board rises over the filmed one. Open the pilot.
Kling 720p, 5 s clips: 300 credits in total. 150 for the 1st version (3 clips + loop, one loop redone), 60 to remove the letters from the board (30 wasted: the letters were born in the keyframe, and the 1st redo started from a frame that already had letters) and 90 for the vertical phone film (3 clips at 9:16). Pinning between 0.91 and 0.997, zero cuts, 285 frames on desktop and 361 on mobile.
A frame that slides across the areas, a route with a plane in the schedule, a recording bar, a line that connects the four doors, files entering the folder and a plane that takes off in the footer.
1st round: an empty news list, a faded final sentence, the switch covering content and the film not "landing" on the real board (fixed). 2nd round: garbled letters on the board and black bands while frames load. Both were fixed afterwards (board without letters, sparse frames loaded first and a poster instead of black), but they have not gone through a 3rd round yet. Still open: the colors inherited from eventos (yellow PRO block, salmon buttons).
Same briefing for a fast, cheap model and for the strongest model. Details in 7-delegacao.md (in Portuguese).
15 interface pieces judged blind: the smaller model had 2 of 5 approved, the top model 8 of 10. The smaller one passed every automatic test and got the visual identity wrong.
The three critics run on both models gave the same verdicts and the same biggest difference, in under a minute each.
The smaller model judges and fixes; the top model creates. Ffmpeg, SSIM, cuts, assembly and captures stay with scripts, with no model.
Before inventing an animation, the skill looks in the catalog: ⌘K search, bento grid, playable 404, day and night, footers with physics, curtain, flower, map and block breaker, a menu that transforms, full-screen menu, a jumping navigation, holographic sticker, a mascot that follows the cursor, liquid dock, jelly buttons, a sign marquee, image trail, rotating gallery and a loader that reveals the page. All with X-ray.
Only what was done is marked as done.
montar.py --vertical. On a phone held upright the page uses frames-v/.