theus-cli 0.2.83 → 0.2.85

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/timing.md

@@ -1,179 +0,0 @@
----
-name: timing
-description: Curvas de interpolación en Remotion - lineal, easing y animaciones spring
-metadata:
-  tags: spring, rebote, easing, interpolacion
----
-
-Una interpolación lineal simple se hace con la función `interpolate`.
-
-```ts title="Ir de 0 a 1 en 100 fotogramas"
-import {interpolate} from 'remotion';
-
-const opacity = interpolate(frame, [0, 100], [0, 1]);
-```
-
-Por defecto, los valores no están acotados, así que el valor puede salirse del rango [0, 1].
-Así se acotan:
-
-```ts title="Ir de 0 a 1 en 100 fotogramas con extrapolación acotada"
-const opacity = interpolate(frame, [0, 100], [0, 1], {
-  extrapolateRight: 'clamp',
-  extrapolateLeft: 'clamp',
-});
-```
-
-## Animaciones spring
-
-Las animaciones spring tienen un movimiento más natural.
-Van de 0 a 1 a lo largo del tiempo.
-
-```ts title="Animación spring de 0 a 1 en 100 fotogramas"
-import {spring, useCurrentFrame, useVideoConfig} from 'remotion';
-
-const frame = useCurrentFrame();
-const {fps} = useVideoConfig();
-
-const scale = spring({
-  frame,
-  fps,
-});
-```
-
-### Propiedades físicas
-
-La configuración por defecto es: `mass: 1, damping: 10, stiffness: 100`.
-Esto hace que la animación tenga un poco de rebote antes de asentarse.
-
-La configuración puede sobrescribirse así:
-
-```ts
-const scale = spring({
-  frame,
-  fps,
-  config: {damping: 200},
-});
-```
-
-La configuración recomendada para un movimiento natural sin rebote es: `{ damping: 200 }`.
-
-Algunas configuraciones habituales:
-
-```tsx
-const smooth = {damping: 200}; // Suave, sin rebote (revelados sutiles)
-const snappy = {damping: 20, stiffness: 200}; // Ágil, rebote mínimo (elementos de UI)
-const bouncy = {damping: 8}; // Entrada con rebote (animaciones juguetonas)
-const heavy = {damping: 15, stiffness: 80, mass: 2}; // Pesada, lenta, rebote pequeño
-```
-
-### Retraso
-
-La animación empieza inmediatamente por defecto.
-Usa el parámetro `delay` para retrasarla un número de fotogramas.
-
-```tsx
-const entrance = spring({
-  frame: frame - ENTRANCE_DELAY,
-  fps,
-  delay: 20,
-});
-```
-
-### Duración
-
-Un `spring()` tiene una duración natural derivada de sus propiedades físicas.
-Para estirar la animación a una duración concreta, usa el parámetro `durationInFrames`.
-
-```tsx
-const spring = spring({
-  frame,
-  fps,
-  durationInFrames: 40,
-});
-```
-
-### Combinar spring() con interpolate()
-
-Mapea la salida del spring (0-1) a rangos personalizados:
-
-```tsx
-const springProgress = spring({
-  frame,
-  fps,
-});
-
-// Mapear a rotación
-const rotation = interpolate(springProgress, [0, 1], [0, 360]);
-
-<div style={{rotate: rotation + 'deg'}} />;
-```
-
-### Sumar springs
-
-Los springs devuelven simples números, así que se pueden operar matemáticamente:
-
-```tsx
-const frame = useCurrentFrame();
-const {fps, durationInFrames} = useVideoConfig();
-
-const inAnimation = spring({
-  frame,
-  fps,
-});
-const outAnimation = spring({
-  frame,
-  fps,
-  durationInFrames: 1 * fps,
-  delay: durationInFrames - 1 * fps,
-});
-
-const scale = inAnimation - outAnimation;
-```
-
-## Easing
-
-Se puede añadir easing a la función `interpolate`:
-
-```ts
-import {interpolate, Easing} from 'remotion';
-
-const value1 = interpolate(frame, [0, 100], [0, 1], {
-  easing: Easing.inOut(Easing.quad),
-  extrapolateLeft: 'clamp',
-  extrapolateRight: 'clamp',
-});
-```
-
-El easing por defecto es `Easing.linear`.
-Existen otras convexidades:
-
-- `Easing.in` para empezar lento y acelerar
-- `Easing.out` para empezar rápido y frenar
-- `Easing.inOut`
-
-y curvas (ordenadas de más lineal a más curvada):
-
-- `Easing.quad`
-- `Easing.sin`
-- `Easing.exp`
-- `Easing.circle`
-
-Las convexidades y las curvas deben combinarse para formar una función de easing:
-
-```ts
-const value1 = interpolate(frame, [0, 100], [0, 1], {
-  easing: Easing.inOut(Easing.quad),
-  extrapolateLeft: 'clamp',
-  extrapolateRight: 'clamp',
-});
-```
-
-También se admiten curvas Bézier cúbicas:
-
-```ts
-const value1 = interpolate(frame, [0, 100], [0, 1], {
-  easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
-  extrapolateLeft: 'clamp',
-  extrapolateRight: 'clamp',
-});
-```

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/transcribe-captions.md

@@ -1,19 +0,0 @@
----
-name: transcribe-captions
-description: Transcribir audio para generar subtítulos en Remotion
-metadata:
-  tags: captions, transcribir, whisper, audio, speech-to-text
----
-
-# Transcribir audio
-
-Remotion ofrece varias opciones integradas para transcribir audio y generar subtítulos:
-
-- `@remotion/install-whisper-cpp` - Transcribe localmente en un servidor usando Whisper.cpp. Rápido y gratuito, pero requiere infraestructura de servidor.
-  <https://remotion.dev/docs/install-whisper-cpp>
-
-- `@remotion/whisper-web` - Transcribe en el navegador usando WebAssembly. No necesita servidor y es gratuito, pero es más lento por la sobrecarga de WASM.
-  <https://remotion.dev/docs/whisper-web>
-
-- `@remotion/openai-whisper` - Usa la API de Whisper alojada en la nube. Rápido y sin servidor propio, pero es un servicio de pago.
-  <https://remotion.dev/docs/openai-whisper/openai-whisper-api-to-captions>

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/transitions.md

@@ -1,122 +0,0 @@
----
-name: transitions
-description: Transiciones de escena a pantalla completa para Remotion.
-metadata:
-  tags: transiciones, fade, slide, wipe, escenas
----
-
-## Transiciones a pantalla completa
-
-Usa `<TransitionSeries>` para animar entre múltiples escenas o clips.
-Esto posiciona a los hijos de forma absoluta.
-
-## Requisitos previos
-
-Primero debe estar instalado el paquete @remotion/transitions.
-Si no lo está, usa el siguiente comando:
-
-```bash
-npx remotion add @remotion/transitions # Si el proyecto usa npm
-bunx remotion add @remotion/transitions # Si el proyecto usa bun
-yarn remotion add @remotion/transitions # Si el proyecto usa yarn
-pnpm exec remotion add @remotion/transitions # Si el proyecto usa pnpm
-```
-
-## Ejemplo de uso
-
-```tsx
-import {TransitionSeries, linearTiming} from '@remotion/transitions';
-import {fade} from '@remotion/transitions/fade';
-
-<TransitionSeries>
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneA />
-  </TransitionSeries.Sequence>
-  <TransitionSeries.Transition presentation={fade()} timing={linearTiming({durationInFrames: 15})} />
-  <TransitionSeries.Sequence durationInFrames={60}>
-    <SceneB />
-  </TransitionSeries.Sequence>
-</TransitionSeries>;
-```
-
-## Tipos de transición disponibles
-
-Importa las transiciones desde sus módulos correspondientes:
-
-```tsx
-import {fade} from '@remotion/transitions/fade';
-import {slide} from '@remotion/transitions/slide';
-import {wipe} from '@remotion/transitions/wipe';
-import {flip} from '@remotion/transitions/flip';
-import {clockWipe} from '@remotion/transitions/clock-wipe';
-```
-
-## Transición slide con dirección
-
-Especifica la dirección del deslizamiento para las animaciones de entrada/salida.
-
-```tsx
-import {slide} from '@remotion/transitions/slide';
-
-<TransitionSeries.Transition presentation={slide({direction: 'from-left'})} timing={linearTiming({durationInFrames: 20})} />;
-```
-
-Direcciones: `"from-left"`, `"from-right"`, `"from-top"`, `"from-bottom"`
-
-## Opciones de timing
-
-```tsx
-import {linearTiming, springTiming} from '@remotion/transitions';
-
-// Timing lineal - velocidad constante
-linearTiming({durationInFrames: 20});
-
-// Timing spring - movimiento orgánico
-springTiming({config: {damping: 200}, durationInFrames: 25});
-```
-
-## Cálculo de duración
-
-Las transiciones solapan escenas adyacentes, por lo que la duración total de la composición es **más corta** que la suma de las duraciones de las secuencias.
-
-Por ejemplo, con dos secuencias de 60 fotogramas y una transición de 15 fotogramas:
-
-- Sin transiciones: `60 + 60 = 120` fotogramas
-- Con transición: `60 + 60 - 15 = 105` fotogramas
-
-La duración de la transición se resta porque ambas escenas se reproducen simultáneamente durante la transición.
-
-### Obtener la duración de una transición
-
-Usa el método `getDurationInFrames()` del objeto de timing:
-
-```tsx
-import {linearTiming, springTiming} from '@remotion/transitions';
-
-const linearDuration = linearTiming({durationInFrames: 20}).getDurationInFrames({fps: 30});
-// Devuelve 20
-
-const springDuration = springTiming({config: {damping: 200}}).getDurationInFrames({fps: 30});
-// Devuelve la duración calculada según la física del spring
-```
-
-Para `springTiming` sin un `durationInFrames` explícito, la duración depende de `fps` porque calcula cuándo se asienta la animación spring.
-
-### Calcular la duración total de la composición
-
-```tsx
-import {linearTiming} from '@remotion/transitions';
-
-const scene1Duration = 60;
-const scene2Duration = 60;
-const scene3Duration = 60;
-
-const timing1 = linearTiming({durationInFrames: 15});
-const timing2 = linearTiming({durationInFrames: 20});
-
-const transition1Duration = timing1.getDurationInFrames({fps: 30});
-const transition2Duration = timing2.getDurationInFrames({fps: 30});
-
-const totalDuration = scene1Duration + scene2Duration + scene3Duration - transition1Duration - transition2Duration;
-// 60 + 60 + 60 - 15 - 20 = 145 fotogramas
-```

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/trimming.md

@@ -1,52 +0,0 @@
----
-name: trimming
-description: Patrones de recorte en Remotion - cortar el inicio o el final de una animación
-metadata:
-  tags: sequence, recorte, clip, corte, offset
----
-
-Usa `<Sequence>` con un valor `from` negativo para recortar el inicio de una animación.
-
-## Recortar el inicio
-
-Un valor `from` negativo desplaza el tiempo hacia atrás, haciendo que la animación empiece ya avanzada:
-
-```tsx
-import { Sequence, useVideoConfig } from "remotion";
-
-const fps = useVideoConfig();
-
-<Sequence from={-0.5 * fps}>
-  <MyAnimation />
-</Sequence>
-```
-
-La animación aparece con 15 fotogramas de progreso: los primeros 15 fotogramas quedan recortados.
-Dentro de `<MyAnimation>`, `useCurrentFrame()` empieza en 15 en lugar de 0.
-
-## Recortar el final
-
-Usa `durationInFrames` para desmontar el contenido tras una duración determinada:
-
-```tsx
-
-<Sequence durationInFrames={1.5 * fps}>
-  <MyAnimation />
-</Sequence>
-```
-
-La animación se reproduce durante 45 fotogramas y después el componente se desmonta.
-
-## Recortar y retrasar
-
-Anida secuencias para recortar el inicio y, a la vez, retrasar cuándo aparece:
-
-```tsx
-<Sequence from={30}>
-  <Sequence from={-15}>
-    <MyAnimation />
-  </Sequence>
-</Sequence>
-```
-
-La secuencia interna recorta 15 fotogramas del inicio y la externa retrasa el resultado 30 fotogramas.

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/videos.md

@@ -1,171 +0,0 @@
----
-name: videos
-description: Incrustar videos en Remotion - recorte, volumen, velocidad, bucle, tono
-metadata:
-  tags: video, media, recorte, volumen, velocidad, bucle, tono
----
-
-# Usar videos en Remotion
-
-## Requisitos previos
-
-Primero debe estar instalado el paquete @remotion/media.
-Si no lo está, usa el siguiente comando:
-
-```bash
-npx remotion add @remotion/media # Si el proyecto usa npm
-bunx remotion add @remotion/media # Si el proyecto usa bun
-yarn remotion add @remotion/media # Si el proyecto usa yarn
-pnpm exec remotion add @remotion/media # Si el proyecto usa pnpm
-```
-
-Usa `<Video>` de `@remotion/media` para incrustar videos en tu composición.
-
-```tsx
-import { Video } from "@remotion/media";
-import { staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Video src={staticFile("video.mp4")} />;
-};
-```
-
-Las URL remotas también funcionan:
-
-```tsx
-<Video src="https://remotion.media/video.mp4" />
-```
-
-## Recorte
-
-Usa `trimBefore` y `trimAfter` para eliminar partes del video. Los valores se expresan en fotogramas.
-
-```tsx
-const { fps } = useVideoConfig();
-
-return (
-  <Video
-    src={staticFile("video.mp4")}
-    trimBefore={2 * fps} // Omite los primeros 2 segundos
-    trimAfter={10 * fps} // Termina en el segundo 10
-  />
-);
-```
-
-## Retrasar
-
-Envuelve el video en un `<Sequence>` para retrasar cuándo aparece:
-
-```tsx
-import { Sequence, staticFile } from "remotion";
-import { Video } from "@remotion/media";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Sequence from={1 * fps}>
-    <Video src={staticFile("video.mp4")} />
-  </Sequence>
-);
-```
-
-El video aparecerá después de 1 segundo.
-
-## Tamaño y posición
-
-Usa la prop `style` para controlar el tamaño y la posición:
-
-```tsx
-<Video
-  src={staticFile("video.mp4")}
-  style={{
-    width: 500,
-    height: 300,
-    position: "absolute",
-    top: 100,
-    left: 50,
-    objectFit: "cover",
-  }}
-/>
-```
-
-## Volumen
-
-Define un volumen estático (de 0 a 1):
-
-```tsx
-<Video src={staticFile("video.mp4")} volume={0.5} />
-```
-
-O usa un callback para un volumen dinámico basado en el fotograma actual:
-
-```tsx
-import { interpolate } from "remotion";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Video
-    src={staticFile("video.mp4")}
-    volume={(f) =>
-      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
-    }
-  />
-);
-```
-
-Usa `muted` para silenciar el video por completo:
-
-```tsx
-<Video src={staticFile("video.mp4")} muted />
-```
-
-## Velocidad
-
-Usa `playbackRate` para cambiar la velocidad de reproducción:
-
-```tsx
-<Video src={staticFile("video.mp4")} playbackRate={2} /> {/* Velocidad 2x */}
-<Video src={staticFile("video.mp4")} playbackRate={0.5} /> {/* Media velocidad */}
-```
-
-La reproducción en reversa no está soportada.
-
-## Bucle
-
-Usa `loop` para reproducir el video en bucle indefinidamente:
-
-```tsx
-<Video src={staticFile("video.mp4")} loop />
-```
-
-Usa `loopVolumeCurveBehavior` para controlar cómo se comporta el contador de fotogramas al hacer bucle:
-
-- `"repeat"`: el contador vuelve a 0 en cada bucle (para el callback de `volume`)
-- `"extend"`: el contador sigue incrementándose
-
-```tsx
-<Video
-  src={staticFile("video.mp4")}
-  loop
-  loopVolumeCurveBehavior="extend"
-  volume={(f) => interpolate(f, [0, 300], [1, 0])} // Fundido de salida a lo largo de varios bucles
-/>
-```
-
-## Tono
-
-Usa `toneFrequency` para ajustar el tono sin afectar la velocidad. Los valores van de 0.01 a 2:
-
-```tsx
-<Video
-  src={staticFile("video.mp4")}
-  toneFrequency={1.5} // Tono más agudo
-/>
-<Video
-  src={staticFile("video.mp4")}
-  toneFrequency={0.8} // Tono más grave
-/>
-```
-
-El cambio de tono solo funciona durante el renderizado en servidor, no en la vista previa de Remotion Studio ni en el `<Player />`.