# Remotion Html In Canvas

> Úsala al crear o modificar videos de Remotion con efectos HTML-en-canvas: el componente HtmlInCanvas, postprocesado Canvas 2D/WebGL/WebGPU, transiciones personalizadas y renderizado con @remotion/web-renderer.

Fuente: https://skillsagentes.com/skills/rbrown101010/rileys-skills/remotion-html-in-canvas
Markdown: https://skillsagentes.com/skills/rbrown101010/rileys-skills/remotion-html-in-canvas.md

Repositorio: https://github.com/rbrown101010/rileys-skills
Autor: rbrown101010
Licencia: no declarada
Actualizado: hace 3 meses
Coste de contexto: 59 tok instalada, 868 tok al activarse, 920 tok con todos los archivos del bundle
Bundle: 2 archivos, 4 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 rbrown101010/rileys-skills --skill remotion-html-in-canvas --agent claude-code
# Cursor
npx -y skills add rbrown101010/rileys-skills --skill remotion-html-in-canvas --agent cursor
# Codex
npx -y skills add rbrown101010/rileys-skills --skill remotion-html-in-canvas --agent codex
# Gemini CLI
npx -y skills add rbrown101010/rileys-skills --skill remotion-html-in-canvas --agent gemini
# Windsurf
npx -y skills add rbrown101010/rileys-skills --skill remotion-html-in-canvas --agent windsurf
# Cline
npx -y skills add rbrown101010/rileys-skills --skill remotion-html-in-canvas --agent cline
```

## Qué hace

- Dibuja composiciones React/HTML en vivo dentro de un canvas de Remotion para postprocesado
- Aplica efectos como desenfoque, distorsión, ampliación, tratamiento vintage o glitch
- Soporta shaders WebGL y WebGPU mediante el componente `<HtmlInCanvas>`
- Gestiona el renderizado vía CLI de Remotion, Studio, Lambda, Vercel o server-side

## Cuándo usarla

- Crear o modificar videos de Remotion que necesiten efectos HTML-en-canvas
- Aplicar postprocesado Canvas 2D, WebGL o WebGPU sobre una composición de Remotion
- Construir transiciones personalizadas con `@remotion/web-renderer`

## Qué la activa

- "Añade un efecto de desenfoque con canvas a esta composición de Remotion"
- "Crea una transición con shader WebGL en Remotion"
- "Usa HtmlInCanvas para un efecto glitch en este video"

## Antes de instalar

- Necesita Remotion 4.0.455 o superior, y para previsualizar en Studio, Chrome Canary 149+ con el flag `chrome://flags/#canvas-draw-element` activado.

## Archivos

- SKILL.md — 3 KB
- agents/openai.yaml — 208 B

## SKILL.md

No se reproduce aquí. Léelo en https://github.com/rbrown101010/rileys-skills/blob/main/remotion-html-in-canvas/SKILL.md

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [rbrown101010](https://skillsagentes.com/creators/rbrown101010.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

- [Docimations](https://skillsagentes.com/skills/rbrown101010/rileys-skills/docimations.md): Crea diagramas animados SVG a GIF para Google Docs: flowcharts, diagramas de proceso, líneas de tiempo, árboles de decisión y mapas de contexto listos para insertar en un Doc nativo.
- [Firebase Cli](https://skillsagentes.com/skills/rbrown101010/rileys-skills/firebase-cli.md): Trabaja con Firebase desde la terminal: repara o instala el CLI, autentica, selecciona proyectos, gestiona bases Firestore y Realtime Database, registra apps e imprime la config del SDK.
- [Mobile App](https://skillsagentes.com/skills/rbrown101010/rileys-skills/mobile-app.md): Crea, prototipa, despliega, previsualiza, firma e instala apps móviles. Cubre proyectos móviles con Vibecode CLI, prototipos de diseño local y herramientas integradas de build/firma/instalación para iOS.
- [Notion Full Control](https://skillsagentes.com/skills/rbrown101010/rileys-skills/notion-full-control.md): Acceso directo y completo a la API de Notion fuera del conector integrado: buscar páginas y bases de datos, inspeccionar esquemas, consultar filas, crear o actualizar páginas, añadir bloques y peticiones raw.
- [Chronicle](https://skillsagentes.com/skills/rbrown101010/rileys-skills/chronicle.md): Permite ver la pantalla del usuario y varias horas de historial. Debe usarse para resolver ambigüedad en una petición, o si el usuario pregunta sobre Chronicle o qué se ve en su pantalla.

---

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