theus-cli-linux-arm64 0.2.84

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

@@ -0,0 +1,179 @@
+---
+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

@@ -0,0 +1,19 @@
+---
+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

@@ -0,0 +1,122 @@
+---
+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

@@ -0,0 +1,52 @@
+---
+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

@@ -0,0 +1,171 @@
+---
+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 />`.