Communitygithub.com

SJbuilds04/vybe-image-to-motion

Anima una imagen estática y la convierte en video. Analiza la imagen, planifica el movimiento y elige la técnica adecuada (programática 2.5D o IA de imagen a video) para generar resultados con música, efectos de sonido y texto en HyperFrames.

¿Qué es vybe-image-to-motion?

Esta habilidad transforma una imagen estática en un video animado, utilizando un proceso en dos fases: análisis y planificación, seguido de la generación de movimiento. En la fase de análisis, examina la imagen para extraer información clave como tamaño, aspecto, tono, paleta de colores, sujeto principal y regiones que podrían moverse. Luego, según la solicitud del usuario, selecciona automáticamente el método más adecuado: movimiento programático 2.5D (desplazamiento de cámara, parallax por mapa de profundidad, separación de capas sujeto/fondo, partículas, niebla, luz) o generación de video mediante IA (Runway Gen-4.5, Veo 3.1, Kling 3.0, Luma Ray 3.2, Gemini Omni Flash). También admite un modo híbrido que combina un clip generado por IA con superposiciones programáticas. El resultado final se compone en HyperFrames añadiendo música, efectos de sonido y texto. La habilidad maneja de forma honesta las limitaciones del movimiento programático (no puede hacer caminar a una persona, sonreír, mover agua, etc.) y etiqueta claramente los clips generados por IA con un archivo `.provenance.json`.

Compatible con~Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/SJbuilds04/VYBE/tree/HEAD/skills/vybe-image-to-motion

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

VYBE Image-to-Motion

I = node <este skill>/scripts/i2m.mjs. Funciona de forma independiente o como etapas 4–5 de /vybe (entonces el directorio de composición es el composition/ del proyecto VYBE).

La regla de honestidad

El movimiento programático mueve una cámara, capas, luz y partículas alrededor de los píxeles originales. No puede hacer que una persona camine, sonría o gire la cabeza, que el agua fluya, o que se vea la parte trasera de un producto. Nunca describas la salida programática como "la persona camina" o "movimiento realista". Si la solicitud necesita movimiento a nivel de píxeles y no se ejecutó ningún proveedor de IA, dilo claramente y entrega la versión de movimiento de cámara tal como es. Los clips de IA llevan un .provenance.json y siempre se etiquetan como generados por IA.

1 · Analizar

I analyze <imagen>            # tamaño, aspecto → formato sugerido, clave tonal, paleta

Luego mira la imagen (visión) y escribe sources/image-analysis.md: sujeto principal y límite, primer plano/plano medio/fondo, perspectiva y horizonte, dirección de la luz, regiones que podrían moverse, rostros (la identidad debe conservarse).

2 · Planificar y elegir el método

I classify "<la solicitud de movimiento del usuario>" [--method programmatic|ai]
I providers                  # qué proveedores de IA están configurados (solo presencia)
La solicitud implicaMétodo
zoom, push-in, pull-out, paneo, sensación de órbita, paralaje, profundidadprogramático
partículas, polvo, nieve, lluvia, niebla, barrido de luz, resplandor, destelloprogramático
fondo moviéndose mientras el sujeto permanece estableprogramático (capas)
balanceo/vaivén suave de un objeto separadoprogramático (capas, subjectSway)
personas/animales moviéndose, expresiones faciales, manosIA
cabello/tela/hojas/llamas moviéndose, agua/humo fluyendoIA
transformaciones (derretirse, florecer, explotar), giros completos de 360°IA

El --method explícito del usuario siempre gana. Un enfoque híbrido (clip de IA + superposiciones programáticas y cámara) suele ser el mejor: genera el movimiento orgánico, luego añade la cámara, luz, tipo y sonido de VYBE en HyperFrames.

Escribe sources/motion-plan.md: movimiento de cámara, movimiento de objeto/fondo, luz, partículas, duración, intensidad, método + motivo, y qué no se moverá.

3a · Programático

I scaffold --image <img> --prompt "<solicitud>" --composition <dir> [--mode layers|depth] [--format f] [--duration s]
cd <dir> && npx hyperframes check && npx hyperframes snapshot --frames 5 -o ../previews/i2m
  • capas (por defecto): npx hyperframes remove-background recorta el sujeto y un plano de fondo; el agujero del sujeto se rellena con una copia borrosa; el plano, la niebla, el sujeto, las partículas y la luz se mueven con paralaje escalado por profundidad. Mejor cuando hay un sujeto claro.
  • profundidad: un shader de Three.js desplaza la imagen mediante un mapa de profundidad (máscara del sujeto + gradiente del suelo) mientras una cámara virtual se mueve — verdadero paralaje 2.5D en todo el cuadro. Mejor para paisajes, interiores, escenas sin un solo sujeto. Mantén intensity ≤ 1 para rostros (los desplazamientos fuertes los distorsionan).
  • Ajusta a través del JSON #i2m-config en index.html (cámara: push · pull · pan-left · pan-right · rise · orbit; intensidad 0.5–1.5; efectos: particles · snow · rain · fog · light-sweep; subjectSway).
  • Sin un recorte (eliminación no disponible) se degrada a movimiento de una sola capa — informa de ello.

3b · IA de imagen a video

I generate --provider <p> --image <img> --prompt "<mensaje de movimiento>" --out sources/clip.mp4 --duration 5 --aspect 16:9 --dry-run   # inspeccionar solicitud (claves redactadas)
I generate --provider <p> --image <img> --prompt "<mensaje de movimiento>" --out sources/clip.mp4 --duration 5 --aspect 16:9
I compose --clip sources/clip.mp4 --composition <dir> [--title "…"]
ProveedorModelosNotas
runwaygen4.5 (por defecto), gen4_turbo, veo3.1, veo3.1_fast, kling3.0_pro, kling3.0_standarduna clave llega a Runway, Google Veo 3.1 y Kling 3.0; duraciones 2–10s (Veo 4/6/8, Kling 3–15)
lumaray-3.25s con un fotograma de inicio; prefiere una --image-url pública, datos en línea para archivos pequeños
geminigemini-omni-1.1-flashAPI de Interacciones, 16:9 o 9:16; los modelos preview de Veo 3.1 fueron retirados el 22/10/2026
klingkling-v2-1 (directo)experimental adaptador (endpoint de documentación secundaria); prefiere runway + kling3.0_pro

Escribe el mensaje de movimiento como una descripción de toma: sujeto + acción + cámara + ambiente + "mantén la identidad y composición del sujeto". La generación cuesta dinero: confirma con el usuario antes de una llamada paga iniciada por el agente a menos que hayan solicitado movimiento con IA explícitamente. Nunca reintentes una generación paga fallida más de una vez sin preguntar. Los errores (autenticación, cuota, moderación, tiempo de espera) se informan textualmente.

Detalles, fuentes y advertencias: references/providers.md.

4 · Entregar

La composición recibe el tratamiento normal de VYBE: vybe audio (música/SFX/voz; los marcadores están presentes), vybe render, vybe qc, vybe finalize. De forma independiente: npx hyperframes render --output out.mp4 en el directorio de composición. Conserva la imagen original, las capas, el mapa de profundidad, i2m-plan.json y cualquier .provenance.json.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

SJbuilds04/vybe-audio-design

Sound design and music direction for VYBE / HyperFrames videos — choosing music by mood and arc, spotting sound effects to picture, voiceover direction and provider choice (HeyGen, ElevenLabs, Kokoro, Gemini), ducking, loudness targets, beat-synced editing and caption sync. Use when planning or fixing the audio of a video, when a video feels silent, cheap, cluttered or out of sync, or when choosing a voice or music provider.

SJbuilds04/vybe-cinematic-3d

Deterministic Three.js / WebGL for HyperFrames videos — 3D scenes, particle systems, procedural geometry, product turntables, scientific models (molecules, planets, black holes), lighting rigs, camera paths and camera cuts, rendered frame-exactly from HyperFrames time. Use when a VYBE storyboard calls for 3D, depth, particles, space, a rotating product, a data sculpture, or when a Three.js layer renders black, flickers or differs between renders.

SJbuilds04/vybe-motion-design

Motion design craft for VYBE / HyperFrames videos — animation principles, easing and timing, choreography and staggering, scene transitions, camera movement, and visual effects (blur, glow, masks, grain, light leaks), written as seek-safe GSAP recipes. Use when designing or fixing how things move in a video — entrances, exits, transitions between scenes, camera moves, rhythm, or when motion feels generic, floaty, stiff or repetitive.

SJbuilds04/vybe-typography

Typography for motion — type systems, font pairing with bundled OFL fonts, scale and readability rules for video, kinetic typography techniques, per-letter/word animation, captions design and safe zones, in HyperFrames compositions. Use when choosing fonts, sizing or animating text in a VYBE video, building kinetic type or lyric videos, styling captions, or when text overlaps, clips, is unreadable or looks generic.

Skills relacionados