Communitygithub.com

bsnegi008/10-estilos-de-video

Crea un video renderizado con código (Remotion/React + SVG) en uno de 10 estilos artísticos: Pixel Art, Clay, Paper Cutout, Low Poly, Voxel, Isometric, Neon, Blueprint, Retro VHS, Doodle. Úsalo cuando el usuario pida un video, reel, animación o gráfico en movimiento y nombre uno de estos estilos, o pregunte '¿qué estilos puedes hacer?'.

¿Qué es 10-estilos-de-video?

Este skill permite a un agente de IA generar videos animados en 10 estilos artísticos distintos, todos basados en la misma geometría de sujeto (polígonos y círculos planos). Cada estilo transforma radicalmente la apariencia visual: desde chunky pixels y animación a 10 fps (Pixel Art) hasta formas suaves de plastilina con efecto de stop-motion (Clay), pasando por capas de papel recortado con sombras y grano (Paper Cutout), triángulos planos sombreados por dirección de luz (Low Poly), construcción isométrica de cubos 3D (Voxel), maqueta limpia de ciudad en miniatura (Isometric), líneas brillantes sobre fondo oscuro con efecto neón (Neon), dibujo técnico de ingeniería con líneas de cota (Blueprint), estética de video casero de los 90 con franjas de color y ruido (Retro VHS), y trazo a bolígrafo sobre hoja de cuaderno (Doodle). Está diseñado para plataformas como Claude Code, Cursor y Codex, y se basa en la librería Remotion con React y SVG. El flujo de trabajo es: pedir o inferir sujeto, estilo y formato; dibujar el sujeto una vez con datos de puntos; aplicar la receta del estilo (fondo, tratamiento, movimiento, tipografía); renderizar un fotograma de prueba antes del render completo. Incluye reglas comunes como mantener el sujeto en el 60% central del encuadre, fondos en movimiento (paralaje, scrolling), identificadores únicos en filtros SVG y un modo 'mini' para vistas previas.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/bsnegi008/Claude-10-animation-skill/tree/HEAD/ten-video-styles

Preguntar en tu IA favorita

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

Documentación

10 Estilos de Video

Recetas para hacer que el MISMO sujeto luzca como 10 estilos artísticos genuinamente diferentes en un video renderizado con código. Un estilo no es solo un cambio de color: cada uno tiene su propia y geometría, textura, movimiento y tipografía. Si un fotograma de tu escena pudiera confundirse con arte vectorial plano, el estilo aún no está terminado.

Cómo usar

  1. Pregunta (o infiere) tres cosas: el sujeto (ej. un auto-rickshaw), el estilo (uno de los 10 siguientes) y el formato (por defecto 1080x1920, 30 fps).
  2. Dibuja el sujeto UNA VEZ como polígonos planos + círculos (listas de puntos, sin curvas). Cada estilo de abajo re-renderiza esos mismos datos de puntos, así que el sujeto se mantiene reconocible entre estilos.
  3. Construye la escena con la receta del estilo elegido: fondo, tratamiento del sujeto, movimiento, tipografía.
  4. Renderiza 1 imagen fija por escena y MÍRALA antes del render completo. Corrige, luego renderiza.

Fórmula de prompt que el usuario puede escribir: [sujeto] ka video banao, [ESTILO] style mein + estado de ánimo + cámara + propósito.

Reglas para cada estilo

  • El sujeto se sitúa en el 60% central del encuadre; mantén el texto fuera de los 220 px superiores y los 380 px inferiores (la interfaz de Reels los cubre).
  • El título usa una tipografía que pertenece al estilo (listada por estilo). Carga las fuentes como archivos locales; no dependas de las predeterminadas del sistema.
  • El fondo debe moverse (carretera que se desplaza, paralaje, rejilla) para que el sujeto se sienta como si estuviera viajando incluso cuando permanece centrado.
  • Asigna identificadores únicos a todos los filtros SVG; varios estilos en una misma pantalla comparten un documento.
  • Los filtros SVG pesados se rompen cuando la escena se reduce (miniaturas). Proporciona un modo mini que los elimine.

Las 10 recetas

1. Pixel Art - "como un videojuego viejo"

  • Aspecto: píxeles cuadrados y gruesos, contorno oscuro marcado, colores planos brillantes.
  • Cómo: dibuja la escena normalmente, luego pixeliza todo el grupo con un filtro SVG: feFlood (2x2 px en offset 5,5) -> feComposite (12x12) -> feTile -> feComposite in=SourceGraphic operator=in -> feMorphology dilate radius=5. Esto da celdas de 12 px. Añade un trazo oscuro de 8 px al sujeto primero.
  • Movimiento: paso de tiempo a 10 fps (floor(frame/3)), ajusta las posiciones a la cuadrícula de 12 px, y haz que rebote exactamente una celda.
  • Extras: sol y nubes bloqueadas con rectángulos, hierba de cuadros, monedas flotantes.
  • Tipografía: Press Start 2P, blanco con sombra de desplazamiento duro.

2. Clay - "hecho a mano"

  • Aspecto: formas suaves y esponjosas, luz desde arriba a la izquierda, superficie mate, sombras de contacto.
  • Cómo: redondea cada forma (trazo de 14 px del mismo color, uniones redondas). Por parte, aplica un filtro: feTurbulence de baja frecuencia + feDisplacementMap (escala 12, bordes ondulados) -> feGaussianBlur (7) como mapa de altura -> feDiffuseLighting multiplicado sobre el color + un poco de feSpecularLighting -> ruido fino para textura de huella dactilar -> feDropShadow.
  • Movimiento: stop-motion. Actualiza solo cada 3er fotograma, tiembla la posición 1-3 px por paso, cicla la semilla de turbulencia (3 valores) para que los bordes "hiervan".
  • Paleta: melocotón pastel, salvia, mostaza. Tipografía: Fredoka Bold.

3. Paper Cutout - "capas de papel"

  • Aspecto: hojas planas apiladas con sombras entre ellas, bordes rugosos, grano.
  • Cómo: cada capa recibe feDisplacementMap (escala 5) + feDropShadow (dy 9, blur 5, 38%). Termina con un rectángulo de ruido a pantalla completa en modo de mezcla multiply.
  • Movimiento: 3-4 capas de colinas desplazándose a diferentes velocidades (paralaje), nubes colgando de hilos finos y balanceándose, el sujeto se mece 1-2 grados como una marioneta.
  • Paleta: papel de manualidades: verde azulado, mostaza, terracota, crema. Tipografía: Alfa Slab One.

4. Low Poly - "pocas formas, 3D limpio"

  • Aspecto: todo hecho de triángulos sombreados planos, sin contornos, sin degradados.
  • Cómo: triangula cada polígono como un abanico desde un centro ligeramente alterado. Sombrea cada triángulo de manera diferente: un término de dirección de luz más un pequeño desplazamiento aleatorio. Traza cada triángulo con su propio relleno para ocultar juntas. Construye el cielo como una cuadrícula alterada de triángulos coloreados por altura; montañas = dos triángulos cada una (lado iluminado, lado oscuro).
  • Movimiento: suave; las capas de montañas se desplazan con paralaje, el sol facetado rota.
  • Tipografía: Oxanium ExtraBold, mayúsculas.

5. Voxel - "mundo de cubos pequeños"

  • Aspecto: el sujeto está construido a partir de cubos pequeños, vistos desde un ángulo isométrico.
  • Cómo: describe el sujeto como una cuadrícula 3D de celdas coloreadas (aproximadamente 14x7x9). Proyecta con sx=(x-y)*u*0.866, sy=(x+y)*u*0.5-z*u. Dibuja 3 caras por cubo (la superior más clara, la izquierda media, la derecha más oscura), omite caras ocultas por un vecino, ordena por x+y+z antes de dibujar.
  • Movimiento: el suelo es un tablero de diamantes de ajedrez que se desplaza a lo largo del eje de la carretera; los árboles de cubos pasan; el sujeto da un pequeño salto.
  • Tipografía: Bungee con sombra de bloque duro.

6. Isometric - "vista oblicua desde arriba"

  • Aspecto: una manzana de ciudad en miniatura limpia sobre una losa flotante, cajas suaves (no gris), colores pastel, sombra suave debajo de la losa.
  • Cómo: misma proyección que Voxel pero con cajas grandes y suaves: edificios con cuadrículas de ventanas en ambas caras visibles, una carretera, árboles, un quiosco, una farola. El sujeto tiene 8-10 cajas y conduce por la carretera.
  • Movimiento: los edificios se elevan desde el suelo con un rebasamiento, escalonados; la losa completa flota hacia arriba y hacia abajo lentamente.
  • Tipografía: Oxanium, texto oscuro sobre fondo claro.

7. Neon - "vibra cyberpunk nocturna"

  • Aspecto: noche oscura, contorno brillante, suelo de rejilla synthwave.
  • Cómo: sujeto = solo trazos (4-5 px) con el relleno configurado al color de fondo para que las partes aún se oculten entre sí. Filtro de brillo = combinación de un desenfoque amplio (14), un desenfoque ajustado (4) y la fuente nítida. Suelo = líneas que se abren en abanico desde un punto de fuga + líneas horizontales espaciadas por p*p que se desplazan hacia la cámara.
  • Movimiento: parpadeo estilo letrero en los primeros 8 fotogramas, líneas de luz que se extienden, estrellas titilantes, sol rayado en el horizonte.
  • Paleta: cian, magenta, amarillo sobre púrpura casi negro. Tipografía: Tilt Neon con sombras de texto magenta apiladas.

8. Blueprint - "dibujo de ingeniero"

  • Aspecto: hoja azul, rejilla fina + principal, dibujo técnico de líneas blancas finas.
  • Cómo: sujeto = trazos blancos de 3 px, relleno = color de la hoja. Dibuja las líneas con pathLength=1 + strokeDasharray animado, escalonado por parte. Luego añade líneas de cota con puntas de flecha y valores mm, líneas de centro de punto-raya en las ruedas, líneas guía con etiquetas y un marco de borde.
  • Movimiento: dibujado primero (0,5 s), las cotas se extienden desde su centro, luego solo las ruedas giran lentamente. Nada rebota.
  • Tipografía: Share Tech Mono, mayúsculas.

9. Retro VHS - "cinta de los años 90"

  • Aspecto: video casero de los 90: franjas de color, imagen suave, líneas de exploración, ruido de cinta.
  • Cómo: un filtro sobre toda la escena: desplazamiento del canal rojo +9 px, desplazamiento verde+azul -7 px, mezcla screen, desenfoque horizontal (2.6, 0.6), saturación 1.25. Encima: patrón de líneas de exploración, ruido por fotograma, una banda de seguimiento que viaja hacia abajo del encuadre con su contenido desplazado lateralmente, una tira rasgada en el borde inferior, viñeta y "PLAY" + un contador en ejecución como texto en pantalla.
  • Movimiento: temblor horizontal de 2 px con un salto más grande ocasional.
  • Paleta: atardecer púrpura, rosa, naranja. Tipografía: VT323 con sombras rojo/cian.

10. Doodle - "el garabato detrás de la copia"

  • Aspecto: bolígrafo sobre una página de cuaderno rayado con margen rojo.
  • Cómo: solo trazos, relleno = color del papel, patrones de sombreado con rayas para la sombra. Un feTurbulence + feDisplacementMap (escala 11) sobre todas las líneas del bolígrafo, y cambia la semilla cada 4 fotogramas para que las líneas "hiervan".
  • Movimiento: las líneas se dibujan rápidamente, el sol en espiral gira en pasos, las estrellas se tambalean, líneas de velocidad detrás del sujeto, una palabra escrita a mano como "¡vroom!".
  • Tipografía: Caveat Bold.

Mostrando estilos lado a lado

Cuando el video compara estilos, mantén UN elemento idéntico en cada escena (por ejemplo, un cuadro de prompt donde solo cambia la palabra del estilo) y usa cortes abruptos en el ritmo de la narración. Eso es lo que hace visible que "solo una palabra cambió".

Antes de entregar

  • Cada escena pasa la prueba: "¿alguien nombraría este estilo sin el título?"
  • El sujeto tiene la misma forma y tamaño en cada estilo.
  • El título y el subtítulo son legibles en un teléfono, dentro del área segura.
  • Se verificaron imágenes fijas de cada escena antes del render completo.

Skills relacionados