Skills Agentes

Svg Character Animation

Anima rigs SVG de personaje con GSAP, transformaciones CSS, control por fotograma de Remotion y previsualizaciones en navegador compatibles con HyperFrames.

Estrellas
49.5k

en todo el repo

Actividad
41

0–100, la ruta de este skill

Actualizado
hace 3 meses

último commit aquí

Commits
0

últimos 90 días

Contexto
420 tok

31 tok en reposo

Paquete
1 archivo

2 KB

Instalar

Funciona con cualquier agente que lea SKILL.md

npx -y skills add calesthio/OpenMontage --skill svg-character-animation --agent claude-code

Se instala solo en este repositorio.

Qué hace

  • Anima rigs SVG de personaje con GSAP y transformaciones CSS
  • Fija reglas por runtime y un patrón de previsualización en navegador compatible con HyperFrames
  • Trae un patrón específico para control por fotograma en Remotion
  • Cierra con una lista de comprobación de calidad

Úsalo cuando

  • Hay que animar un rig SVG de personaje
  • Se necesita previsualización en navegador compatible con HyperFrames
  • Se anima por fotograma dentro de Remotion

No lo uses cuando

    Qué lo activa

    Di cualquiera de estas frases y el agente debería cargar este skill.

    • Anima este rig SVG con GSAP
    • Previsualiza esta animación de personaje en el navegador
    • Controla esta animación por fotograma en Remotion

    SKILL.md

    En inglés

    SVG Character Animation

    Use this skill when animating character rigs made from SVG parts.

    Runtime Rules

    • Animate transforms (x, y, scale, rotation) rather than layout.
    • Use timelines for multi-part acting beats.
    • For SVG elements, use stable pivots (svgOrigin or correctly scoped transform origins).
    • In Remotion, do not let GSAP advance with requestAnimationFrame; drive a paused timeline from the current frame.

    Browser Pattern

    gsap.set("#arm_right", { svgOrigin: "390 310" });
    const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
    tl.to("#head", { rotation: -8, duration: 0.2 })
      .to("#arm_right", { rotation: 35, duration: 0.4 }, "<");
    

    Remotion Pattern

    const frame = useCurrentFrame();
    const progress = frame / durationInFrames;
    timeline.progress(progress);
    

    HyperFrames Pattern

    Use HTML/SVG/GSAP components with deterministic timelines and validate via the HyperFrames CLI before final render.

    Quality Checklist

    • Parts stay connected at pivots during motion.
    • Blinks, gaze, and mouth shapes are separate enough to read.
    • Pose holds are long enough to communicate emotion.
    • Frame sampling shows meaningful deltas, not frozen animation.

    Sources

    Reproducido de calesthio/OpenMontage bajo licencia MIT. Leer esta página en markdown.

    Archivos

    1 archivo en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.

    Detalles

    Creador
    calesthio
    Categoría
    Diseño y UI
    Licencia
    MIT
    Recursos incluidos
    Solo SKILL.md
    Código fuente
    Ver SKILL.md

    Etiquetas

    Más de calesthio/OpenMontage

    Este repo incluye 89 skills. Si instalas uno, normalmente ya tienes los demás.

    Comfyui

    49.5k

    Úsalo al trabajar con workflows de ComfyUI en OpenMontage: comfyui_image/video/music, workflows propios, selección de output_node, modelos que faltan, LoRAs, poca VRAM e importación de workflows de la comunidad.

    Costo de contexto al activarse
    1.9k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 9 días
    diseno ui

    Genera vídeo cinematográfico de 4-30 s con ByteDance Seedance 2.5 por fal.ai, Volcengine Ark, Runway o ComfyUI. Cubre el contrato de prompt 2.5, cortes duros, locks de continuidad y voz.

    Costo de contexto al activarse
    3.2k tok
    Tamaño del paquete
    2 archivos
    Última actualización
    hace 4 días
    diseno ui

    Genera narración expresiva y multilingüe con fish.audio (modelos S1 / S2) y reutiliza voces clonadas mediante reference_id.

    Costo de contexto al activarse
    1.4k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 9 días
    diseno ui

    Genera y edita conversacionalmente vídeos cortos con Google Gemini Omni Flash: itera con ediciones en lenguaje natural, clips de 3-10s a 720p con audio y texto en pantalla, e imágenes de referencia por etiquetas.

    Costo de contexto al activarse
    2.1k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 9 días
    Permisos
    diseno ui

    Genera vídeo con MiniMax H3 (Hailuo 3.0) por la API oficial v2, fal.ai, Runway, nodos partner de ComfyUI o pesos abiertos locales. Clips de 4-15s a 2K con animación de primer/último fotograma.

    Costo de contexto al activarse
    582 tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 9 días
    diseno ui

    Genera, reconstruye, inspecciona y enruta activos 3D de producción para mundos de OpenMontage con Atlas Cloud, fal.ai, catálogos con licencia y Blender.

    Costo de contexto al activarse
    1.2k tok
    Tamaño del paquete
    2 archivos
    Última actualización
    hace 9 días
    diseno ui

    Skills relacionados

    Genera, reconstruye, inspecciona y enruta activos 3D de producción para mundos de OpenMontage con Atlas Cloud, fal.ai, catálogos con licencia y Blender.

    Costo de contexto al activarse
    1.2k tok
    Tamaño del paquete
    2 archivos
    Última actualización
    hace 9 días
    diseno ui

    Acestep

    49.5k

    Generación musical con ACE-Step 1.5: música de fondo, pistas con voz, versiones y extracción de stems para producción de vídeo.

    Costo de contexto al activarse
    2.3k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 4 meses
    diseno ui

    Genera vídeos con IA desde texto usando varias pasarelas — HeyGen, fal.ai, Kling y Gemini — con soporte de imagen a vídeo y comparación entre VEO, Kling, Sora, Runway, Seedance y MiniMax.

    Costo de contexto al activarse
    3k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    el mes pasado
    diseno ui