| name | loop-video-gen |
| description | Create a seamless infinite horizontal-scroll loop video (mp4) from a few images, stitched side-by-side so the last frame matches the first with no visible jump. Camera pans at a constant speed. Renders with Remotion. Use when the user asks for a "루프 비디오", "loop video", "무한 루프 스크롤", "loop-video-gen", "이미지 이어붙여 영상", "seamless scrolling loop", or an endlessly-repeating horizontal-pan ad/banner from still images.
|
loop-video-gen
Stitch images horizontally and render a seamless infinite-loop horizontal
scroll mp4. The composition lays the images out twice in a row and translates
by (t * pxPerSec) mod totalWidth, with durationInFrames set to exactly one
full loop — so the video's end frame is identical to its start frame. Loops
forever with no seam.
Reference: @heenj_visual style "infinite loop scroll" ad — last frame ties back
to the first, camera pans right→left at constant speed.
What this does (and does NOT do)
- DOES: constant-speed horizontal pan over your images, mathematically perfect
seamless loop, configurable resolution/speed/direction.
- DOES NOT: reproduce AI image-to-video + VFX floating objects from the original
reference. That original used per-object motion/parallax. This is the simplified
"tile + scroll" version. Be honest with the user about this limit.
Environment (reuse — do NOT npm install)
- Remotion 4.0.261 + react 18 live in
../video-gen/node_modules, symlinked here
as ./node_modules. Same version, safe.
- Renderer: chromium at
/usr/bin/chromium-browser, ffmpeg at ~/.local/bin/ffmpeg.
Same setup as video-gen.
Workflow
1. Collect images
Gather the still images the user wants in the scroll (any order; they tile
left→right). PNG/JPG/WEBP. For a clean loop they should be similar height; the
composition does objectFit: cover to the tile box.
2. (Optional) Pre-process with image-gen to reduce tile seams
Seams appear where one image's right edge meets the next image's left edge.
Two ways to mitigate, both via the image-gen skill (~/2lab.ai/skills/image-gen/SKILL.md):
3. Render
cd ~/2lab.ai/skills/loop-video-gen
bash scripts/make-loop.sh -i /path/to/imgdir -o out/loop.mp4 \
--tile-width 1080 --px-per-sec 300 --width 1920 --height 1080 \
--fps 30 --direction rtl
-i accepts a directory OR a comma-separated list of files. The script copies
images into public/loop-images/, writes public/loop-props.json, runs the
Remotion render, and prints the absolute mp4 path to stdout.
4. Send to 지혁
mcp__send-file__send_document filePath=<abs mp4> caption="..."
Parameters
| Flag | Default | Meaning |
|---|
-i | (required) | image dir OR comma-separated files |
-o | (required) | output mp4 path |
--tile-width | 1080 | per-image tile width (px) |
--px-per-sec | 200 | scroll speed (px/sec) |
--width | 1920 | video width (1080 for vertical) |
--height | 1080 | video height (1920 for vertical) |
--fps | 30 | frames/sec |
--direction | rtl | rtl = camera pans right→left; ltr = opposite |
--background | #000000 | fill behind tiles |
Duration is computed automatically: durationInFrames = round(tiles*tileWidth / pxPerSec * fps)
= exactly one loop. Do not try to set duration manually — that breaks seamlessness.
Vertical (Shorts/Reels): --width 1080 --height 1920.
Floating-object mode (optional, advanced)
For the reference's drifting cutouts: cut out objects (--background transparent
in image-gen), place them as a second layer over a single continuous background
tile, and give each its own translateX derived from the same modulo so it also
wraps seamlessly. Not yet wired into the composition — implement only if asked;
the horizontal-scroll loop is the guaranteed-working core.
Troubleshooting
- Visible seam at tile joins → use image-gen background extension so edges
match, or pick images with matching/abstract edges. Single repeating tile also
loops perfectly.
- Image squished/cropped → tiles use
objectFit: cover at tileWidth × height.
Set --tile-width to the image's natural aspect for that height, or pre-resize.
- Render fails / chromium → confirm
/usr/bin/chromium-browser exists and the
node_modules symlink points at ../video-gen/node_modules.
- Loop not seamless → never hand-edit duration; it must equal one full loop.
Files
src/LoopScroll.tsx — the composition (the seamless-scroll math).src/Root.tsx — registers LoopScroll, computes durationInFrames.scripts/make-loop.sh — CLI wrapper (collect → copy → props.json → render).scripts/render.mjs — programmatic Remotion render (chromium flags).public/loop-props.json — generated per run.
Spirit (ponytail)
Minimal working implementation first. The core scroll loop must render real mp4s.
Don't over-engineer the floating-object mode until it's actually requested.
