theus-cli-linux-x64 0.2.84

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

@@ -0,0 +1,104 @@
+---
+name: calculate-metadata
+description: Definir dinámicamente duración, dimensiones y props de la composición
+metadata:
+  tags: calculateMetadata, duracion, dimensiones, props, dinamico
+---
+
+# Uso de calculateMetadata
+
+Usa `calculateMetadata` en una `<Composition>` para definir dinámicamente la duración, las dimensiones y transformar las props antes de renderizar.
+
+```tsx
+<Composition id="MyComp" component={MyComponent} durationInFrames={300} fps={30} width={1920} height={1080} defaultProps={{videoSrc: 'https://remotion.media/video.mp4'}} calculateMetadata={calculateMetadata} />
+```
+
+## Definir la duración según un video
+
+Usa una función auxiliar `getMediaMetadata()` construida con Mediabunny (ver [get-video-duration.md](get-video-duration.md) y [get-video-dimensions.md](get-video-dimensions.md)) para obtener la duración del video:
+
+```tsx
+import {CalculateMetadataFunction} from 'remotion';
+import {getMediaMetadata} from '../get-media-metadata';
+
+const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
+  const {durationInSeconds} = await getMediaMetadata(props.videoSrc);
+
+  return {
+    durationInFrames: Math.ceil(durationInSeconds * 30),
+  };
+};
+```
+
+## Igualar las dimensiones de un video
+
+```tsx
+const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
+  const {durationInSeconds, dimensions} = await getMediaMetadata(props.videoSrc);
+
+  return {
+    durationInFrames: Math.ceil(durationInSeconds * 30),
+    width: dimensions?.width ?? 1920,
+    height: dimensions?.height ?? 1080,
+  };
+};
+```
+
+## Definir la duración según varios videos
+
+```tsx
+const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
+  const metadataPromises = props.videos.map((video) => getMediaMetadata(video.src));
+  const allMetadata = await Promise.all(metadataPromises);
+
+  const totalDuration = allMetadata.reduce((sum, meta) => sum + meta.durationInSeconds, 0);
+
+  return {
+    durationInFrames: Math.ceil(totalDuration * 30),
+  };
+};
+```
+
+## Definir un outName por defecto
+
+Define el nombre del archivo de salida por defecto en función de las props:
+
+```tsx
+const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
+  return {
+    defaultOutName: `video-${props.id}.mp4`,
+  };
+};
+```
+
+## Transformar props
+
+Obtén datos o transforma las props antes de renderizar:
+
+```tsx
+const calculateMetadata: CalculateMetadataFunction<Props> = async ({props, abortSignal}) => {
+  const response = await fetch(props.dataUrl, {signal: abortSignal});
+  const data = await response.json();
+
+  return {
+    props: {
+      ...props,
+      fetchedData: data,
+    },
+  };
+};
+```
+
+El `abortSignal` cancela las peticiones obsoletas cuando las props cambian en el Studio.
+
+## Valor de retorno
+
+Todos los campos son opcionales. Los valores devueltos sobrescriben las props de `<Composition>`:
+
+- `durationInFrames`: número de fotogramas
+- `width`: ancho de la composición en píxeles
+- `height`: alto de la composición en píxeles
+- `fps`: fotogramas por segundo
+- `props`: props transformadas que se pasan al componente
+- `defaultOutName`: nombre de archivo de salida por defecto
+- `defaultCodec`: códec por defecto para el renderizado

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

@@ -0,0 +1,75 @@
+---
+name: can-decode
+description: Comprobar si el navegador puede decodificar un video usando Mediabunny
+metadata:
+  tags: decodificar, validacion, video, audio, compatibilidad, navegador
+---
+
+# Comprobar si un video se puede decodificar
+
+Usa Mediabunny para comprobar si el navegador puede decodificar un video antes de intentar reproducirlo.
+
+## La función `canDecode()`
+
+Esta función puede copiarse y pegarse en cualquier proyecto.
+
+```tsx
+import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
+
+export const canDecode = async (src: string) => {
+  const input = new Input({
+    formats: ALL_FORMATS,
+    source: new UrlSource(src, {
+      getRetryDelay: () => null,
+    }),
+  });
+
+  try {
+    await input.getFormat();
+  } catch {
+    return false;
+  }
+
+  const videoTrack = await input.getPrimaryVideoTrack();
+  if (videoTrack && !(await videoTrack.canDecode())) {
+    return false;
+  }
+
+  const audioTrack = await input.getPrimaryAudioTrack();
+  if (audioTrack && !(await audioTrack.canDecode())) {
+    return false;
+  }
+
+  return true;
+};
+```
+
+## Uso
+
+```tsx
+const src = "https://remotion.media/video.mp4";
+const isDecodable = await canDecode(src);
+
+if (isDecodable) {
+  console.log("El video se puede decodificar");
+} else {
+  console.log("Este navegador no puede decodificar el video");
+}
+```
+
+## Uso con Blob
+
+Para subidas de archivos o arrastrar y soltar, usa `BlobSource`:
+
+```tsx
+import { Input, ALL_FORMATS, BlobSource } from "mediabunny";
+
+export const canDecodeBlob = async (blob: Blob) => {
+  const input = new Input({
+    formats: ALL_FORMATS,
+    source: new BlobSource(blob),
+  });
+
+  // Misma lógica de validación que arriba
+};
+```

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

@@ -0,0 +1,58 @@
+---
+name: charts
+description: Patrones de gráficas y visualización de datos para Remotion. Úsalo al crear gráficas de barras, de pastel, histogramas, barras de progreso o cualquier animación basada en datos.
+metadata:
+  tags: graficas, datos, visualizacion, barras, pastel
+---
+
+# Gráficas en Remotion
+
+Puedes crear gráficas de barras en Remotion con código React normal: HTML y SVG están permitidos, así como D3.js.
+
+## Ninguna animación fuera de `useCurrentFrame()`
+
+Desactiva todas las animaciones de librerías de terceros.
+Provocan parpadeos durante el renderizado.
+En su lugar, dirige todas las animaciones desde `useCurrentFrame()`.
+
+## Animaciones de gráficas de barras
+
+Consulta el [ejemplo de gráfica de barras](assets/charts-bar-chart.tsx) para una implementación básica.
+
+### Barras escalonadas
+
+Puedes animar la altura de las barras y escalonarlas así:
+
+```tsx
+const STAGGER_DELAY = 5;
+const frame = useCurrentFrame();
+const {fps} = useVideoConfig();
+
+const bars = data.map((item, i) => {
+  const delay = i * STAGGER_DELAY;
+  const height = spring({
+    frame,
+    fps,
+    delay,
+    config: {damping: 200},
+  });
+  return <div style={{height: height * item.value}} />;
+});
+```
+
+## Animación de gráfica de pastel
+
+Anima los segmentos usando stroke-dashoffset, empezando desde las 12 en punto.
+
+```tsx
+const frame = useCurrentFrame();
+const {fps} = useVideoConfig();
+
+const progress = interpolate(frame, [0, 100], [0, 1]);
+
+const circumference = 2 * Math.PI * radius;
+const segmentLength = (value / total) * circumference;
+const offset = interpolate(progress, [0, 1], [segmentLength, 0]);
+
+<circle r={radius} cx={center} cy={center} fill="none" stroke={color} strokeWidth={strokeWidth} strokeDasharray={`${segmentLength} ${circumference}`} strokeDashoffset={offset} transform={`rotate(-90 ${center} ${center})`} />;
+```

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

@@ -0,0 +1,146 @@
+---
+name: compositions
+description: Definir composiciones, stills, carpetas, props por defecto y metadatos dinámicos
+metadata:
+  tags: composicion, still, carpeta, props, metadatos
+---
+
+Una `<Composition>` define el componente, ancho, alto, fps y duración de un video renderizable.
+
+Normalmente se coloca en el archivo `src/Root.tsx`.
+
+```tsx
+import { Composition } from "remotion";
+import { MyComposition } from "./MyComposition";
+
+export const RemotionRoot = () => {
+  return (
+    <Composition
+      id="MyComposition"
+      component={MyComposition}
+      durationInFrames={100}
+      fps={30}
+      width={1080}
+      height={1080}
+    />
+  );
+};
+```
+
+## Props por defecto
+
+Pasa `defaultProps` para dar valores iniciales a tu componente.
+Los valores deben ser serializables a JSON (`Date`, `Map`, `Set` y `staticFile()` están soportados).
+
+```tsx
+import { Composition } from "remotion";
+import { MyComposition, MyCompositionProps } from "./MyComposition";
+
+export const RemotionRoot = () => {
+  return (
+    <Composition
+      id="MyComposition"
+      component={MyComposition}
+      durationInFrames={100}
+      fps={30}
+      width={1080}
+      height={1080}
+      defaultProps={{
+        title: "Hola mundo",
+        color: "#ff0000",
+      } satisfies MyCompositionProps}
+    />
+  );
+};
+```
+
+Usa declaraciones `type` para las props en lugar de `interface` para garantizar la seguridad de tipos de `defaultProps`.
+
+## Carpetas
+
+Usa `<Folder>` para organizar las composiciones en la barra lateral.
+Los nombres de carpeta solo pueden contener letras, números y guiones.
+
+```tsx
+import { Composition, Folder } from "remotion";
+
+export const RemotionRoot = () => {
+  return (
+    <>
+      <Folder name="Marketing">
+        <Composition id="Promo" /* ... */ />
+        <Composition id="Ad" /* ... */ />
+      </Folder>
+      <Folder name="Social">
+        <Folder name="Instagram">
+          <Composition id="Story" /* ... */ />
+          <Composition id="Reel" /* ... */ />
+        </Folder>
+      </Folder>
+    </>
+  );
+};
+```
+
+## Stills
+
+Usa `<Still>` para imágenes de un solo fotograma. No requiere `durationInFrames` ni `fps`.
+
+```tsx
+import { Still } from "remotion";
+import { Thumbnail } from "./Thumbnail";
+
+export const RemotionRoot = () => {
+  return (
+    <Still
+      id="Thumbnail"
+      component={Thumbnail}
+      width={1280}
+      height={720}
+    />
+  );
+};
+```
+
+## Calcular metadatos
+
+Usa `calculateMetadata` para hacer que las dimensiones, la duración o las props sean dinámicas según los datos.
+
+```tsx
+import { Composition, CalculateMetadataFunction } from "remotion";
+import { MyComposition, MyCompositionProps } from "./MyComposition";
+
+const calculateMetadata: CalculateMetadataFunction<MyCompositionProps> = async ({
+  props,
+  abortSignal,
+}) => {
+  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
+    signal: abortSignal,
+  }).then((res) => res.json());
+
+  return {
+    durationInFrames: Math.ceil(data.duration * 30),
+    props: {
+      ...props,
+      videoUrl: data.url,
+    },
+  };
+};
+
+export const RemotionRoot = () => {
+  return (
+    <Composition
+      id="MyComposition"
+      component={MyComposition}
+      durationInFrames={100} // Valor provisional, se sobrescribirá
+      fps={30}
+      width={1080}
+      height={1080}
+      defaultProps={{ videoId: "abc123" }}
+      calculateMetadata={calculateMetadata}
+    />
+  );
+};
+```
+
+La función puede devolver `props`, `durationInFrames`, `width`, `height`, `fps` y valores por defecto relacionados con el códec. Se ejecuta una sola vez antes de que empiece el renderizado.

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

@@ -0,0 +1,126 @@
+---
+name: display-captions
+description: Mostrar subtítulos en Remotion con páginas estilo TikTok y resaltado de palabras
+metadata:
+  tags: captions, subtitulos, mostrar, tiktok, resaltado
+---
+
+# Mostrar subtítulos en Remotion
+
+Esta guía explica cómo mostrar subtítulos en Remotion, asumiendo que ya los tienes en el formato `Caption`.
+
+## Requisitos previos
+
+Primero debe estar instalado el paquete @remotion/captions.
+Si no lo está, usa el siguiente comando:
+
+```bash
+npx remotion add @remotion/captions # Si el proyecto usa npm
+bunx remotion add @remotion/captions # Si el proyecto usa bun
+yarn remotion add @remotion/captions # Si el proyecto usa yarn
+pnpm exec remotion add @remotion/captions # Si el proyecto usa pnpm
+```
+
+## Crear páginas
+
+Usa `createTikTokStyleCaptions()` para agrupar los subtítulos en páginas. La opción `combineTokensWithinMilliseconds` controla cuántas palabras aparecen a la vez:
+
+```tsx
+import {useMemo} from 'react';
+import {createTikTokStyleCaptions} from '@remotion/captions';
+import type {Caption} from '@remotion/captions';
+
+// Cada cuánto deben cambiar los subtítulos (en milisegundos)
+// Valores altos = más palabras por página
+// Valores bajos = menos palabras (más palabra a palabra)
+const SWITCH_CAPTIONS_EVERY_MS = 1200;
+
+const {pages} = useMemo(() => {
+  return createTikTokStyleCaptions({
+    captions,
+    combineTokensWithinMilliseconds: SWITCH_CAPTIONS_EVERY_MS,
+  });
+}, [captions]);
+```
+
+## Renderizar con Sequences
+
+Recorre las páginas y renderiza cada una en un `<Sequence>`. Calcula el fotograma de inicio y la duración a partir del timing de la página:
+
+```tsx
+import {Sequence, useVideoConfig, AbsoluteFill} from 'remotion';
+import type {TikTokPage} from '@remotion/captions';
+
+const CaptionedContent: React.FC = () => {
+  const {fps} = useVideoConfig();
+
+  return (
+    <AbsoluteFill>
+      {pages.map((page, index) => {
+        const nextPage = pages[index + 1] ?? null;
+        const startFrame = (page.startMs / 1000) * fps;
+        const endFrame = Math.min(
+          nextPage ? (nextPage.startMs / 1000) * fps : Infinity,
+          startFrame + (SWITCH_CAPTIONS_EVERY_MS / 1000) * fps,
+        );
+        const durationInFrames = endFrame - startFrame;
+
+        if (durationInFrames <= 0) {
+          return null;
+        }
+
+        return (
+          <Sequence
+            key={index}
+            from={startFrame}
+            durationInFrames={durationInFrames}
+          >
+            <CaptionPage page={page} />
+          </Sequence>
+        );
+      })}
+    </AbsoluteFill>
+  );
+};
+```
+
+## Resaltado de palabras
+
+Una página de subtítulos contiene `tokens` que puedes usar para resaltar la palabra que se está pronunciando:
+
+```tsx
+import {AbsoluteFill, useCurrentFrame, useVideoConfig} from 'remotion';
+import type {TikTokPage} from '@remotion/captions';
+
+const HIGHLIGHT_COLOR = '#39E508';
+
+const CaptionPage: React.FC<{page: TikTokPage}> = ({page}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+
+  // Tiempo actual relativo al inicio de la secuencia
+  const currentTimeMs = (frame / fps) * 1000;
+  // Conviértelo a tiempo absoluto sumando el inicio de la página
+  const absoluteTimeMs = page.startMs + currentTimeMs;
+
+  return (
+    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
+      <div style={{fontSize: 80, fontWeight: 'bold', whiteSpace: 'pre'}}>
+        {page.tokens.map((token) => {
+          const isActive =
+            token.fromMs <= absoluteTimeMs && token.toMs > absoluteTimeMs;
+
+          return (
+            <span
+              key={token.fromMs}
+              style={{color: isActive ? HIGHLIGHT_COLOR : 'white'}}
+            >
+              {token.text}
+            </span>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+```