# Svg Character Animation

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

Fuente: https://skillsagentes.com/skills/calesthio/openmontage/svg-character-animation
Markdown: https://skillsagentes.com/skills/calesthio/openmontage/svg-character-animation.md

Repositorio: https://github.com/calesthio/OpenMontage
Autor: calesthio
Licencia: MIT
Actualizado: hace 3 meses
Coste de contexto: 31 tok instalada, 420 tok al activarse, 420 tok con todos los archivos del bundle
Bundle: 1 archivo, 2 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add calesthio/OpenMontage --skill svg-character-animation --agent claude-code
# Cursor
npx -y skills add calesthio/OpenMontage --skill svg-character-animation --agent cursor
# Codex
npx -y skills add calesthio/OpenMontage --skill svg-character-animation --agent codex
# Gemini CLI
npx -y skills add calesthio/OpenMontage --skill svg-character-animation --agent gemini
# Windsurf
npx -y skills add calesthio/OpenMontage --skill svg-character-animation --agent windsurf
# Cline
npx -y skills add calesthio/OpenMontage --skill svg-character-animation --agent cline
```

## 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

## Cuándo usarla

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

## Qué la activa

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

## Archivos

- SKILL.md — 2 KB

## SKILL.md

Reproducido tal cual desde calesthio/OpenMontage bajo MIT. Esta sección es el documento original y está 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

```js
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

```tsx
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

- GSAP core transform properties and SVG handling:
  https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/
- GSAP timelines and sequencing:
  https://gsap.com/docs/v3/GSAP/Timeline/
- Remotion `useCurrentFrame`:
  https://www.remotion.dev/docs/use-current-frame

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [calesthio](https://skillsagentes.com/creators/calesthio.md) — 0 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Seedance 2 5](https://skillsagentes.com/skills/calesthio/openmontage/seedance-2-5.md): 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.
- [Comfyui](https://skillsagentes.com/skills/calesthio/openmontage/comfyui.md): Ú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.
- [Fish Audio Tts](https://skillsagentes.com/skills/calesthio/openmontage/fish-audio-tts.md): Genera narración expresiva y multilingüe con fish.audio (modelos S1 / S2) y reutiliza voces clonadas mediante reference_id.
- [Minimax H3](https://skillsagentes.com/skills/calesthio/openmontage/minimax-h3.md): 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.
- [Gemini Omni](https://skillsagentes.com/skills/calesthio/openmontage/gemini-omni.md): 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.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)