theus-cli 0.2.83 → 0.2.85

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

@@ -1,29 +0,0 @@
----
-name: animations
-description: Fundamentos de animación en Remotion
-metadata:
-  tags: animaciones, transiciones, fotogramas, useCurrentFrame
----
-
-TODAS las animaciones DEBEN estar dirigidas por el hook `useCurrentFrame()`.
-Escribe las animaciones en segundos y multiplícalas por el valor `fps` de `useVideoConfig()`.
-
-```tsx
-import { useCurrentFrame } from "remotion";
-
-export const FadeIn = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
-    extrapolateRight: 'clamp',
-  });
-
-  return (
-    <div style={{ opacity }}>¡Hola mundo!</div>
-  );
-};
-```
-
-Las transiciones o animaciones CSS están PROHIBIDAS: no se renderizan correctamente.
-Las clases de animación de Tailwind están PROHIBIDAS: no se renderizan correctamente.

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/assets/charts-bar-chart.tsx

@@ -1,173 +0,0 @@
-import {loadFont} from '@remotion/google-fonts/Inter';
-import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
-
-const {fontFamily} = loadFont();
-
-const COLOR_BAR = '#D4AF37';
-const COLOR_TEXT = '#ffffff';
-const COLOR_MUTED = '#888888';
-const COLOR_BG = '#0a0a0a';
-const COLOR_AXIS = '#333333';
-
-// Tamaño de composición ideal: 1280x720
-
-const Title: React.FC<{children: React.ReactNode}> = ({children}) => (
-	<div style={{textAlign: 'center', marginBottom: 40}}>
-		<div style={{color: COLOR_TEXT, fontSize: 48, fontWeight: 600}}>
-			{children}
-		</div>
-	</div>
-);
-
-const YAxis: React.FC<{steps: number[]; height: number}> = ({
-	steps,
-	height,
-}) => (
-	<div
-		style={{
-			display: 'flex',
-			flexDirection: 'column',
-			justifyContent: 'space-between',
-			height,
-			paddingRight: 16,
-		}}
-	>
-		{steps
-			.slice()
-			.reverse()
-			.map((step) => (
-				<div
-					key={step}
-					style={{
-						color: COLOR_MUTED,
-						fontSize: 20,
-						textAlign: 'right',
-					}}
-				>
-					{step.toLocaleString()}
-				</div>
-			))}
-	</div>
-);
-
-const Bar: React.FC<{
-	height: number;
-	progress: number;
-}> = ({height, progress}) => (
-	<div
-		style={{
-			flex: 1,
-			display: 'flex',
-			flexDirection: 'column',
-			justifyContent: 'flex-end',
-		}}
-	>
-		<div
-			style={{
-				width: '100%',
-				height,
-				backgroundColor: COLOR_BAR,
-				borderRadius: '8px 8px 0 0',
-				opacity: progress,
-			}}
-		/>
-	</div>
-);
-
-const XAxis: React.FC<{
-	children: React.ReactNode;
-	labels: string[];
-	height: number;
-}> = ({children, labels, height}) => (
-	<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
-		<div
-			style={{
-				display: 'flex',
-				alignItems: 'flex-end',
-				gap: 16,
-				height,
-				borderLeft: `2px solid ${COLOR_AXIS}`,
-				borderBottom: `2px solid ${COLOR_AXIS}`,
-				paddingLeft: 16,
-			}}
-		>
-			{children}
-		</div>
-		<div
-			style={{
-				display: 'flex',
-				gap: 16,
-				paddingLeft: 16,
-				marginTop: 12,
-			}}
-		>
-			{labels.map((label) => (
-				<div
-					key={label}
-					style={{
-						flex: 1,
-						textAlign: 'center',
-						color: COLOR_MUTED,
-						fontSize: 20,
-					}}
-				>
-					{label}
-				</div>
-			))}
-		</div>
-	</div>
-);
-
-export const MyAnimation = () => {
-	const frame = useCurrentFrame();
-	const {fps, height} = useVideoConfig();
-
-	const data = [
-		{month: 'Ene', price: 2039},
-		{month: 'Mar', price: 2160},
-		{month: 'May', price: 2327},
-		{month: 'Jul', price: 2426},
-		{month: 'Sep', price: 2634},
-		{month: 'Nov', price: 2672},
-	];
-
-	const minPrice = 2000;
-	const maxPrice = 2800;
-	const priceRange = maxPrice - minPrice;
-	const chartHeight = height - 280;
-	const yAxisSteps = [2000, 2400, 2800];
-
-	return (
-		<AbsoluteFill
-			style={{
-				backgroundColor: COLOR_BG,
-				padding: 60,
-				display: 'flex',
-				flexDirection: 'column',
-				fontFamily,
-			}}
-		>
-			<Title>Precio del oro 2024</Title>
-
-			<div style={{display: 'flex', flex: 1}}>
-				<YAxis steps={yAxisSteps} height={chartHeight} />
-				<XAxis height={chartHeight} labels={data.map((d) => d.month)}>
-					{data.map((item, i) => {
-						const progress = spring({
-							frame: frame - i * 5 - 10,
-							fps,
-							config: {damping: 18, stiffness: 80},
-						});
-
-						const barHeight =
-							((item.price - minPrice) / priceRange) * chartHeight * progress;
-
-						return (
-							<Bar key={item.month} height={barHeight} progress={progress} />
-						);
-					})}
-				</XAxis>
-			</div>
-		</AbsoluteFill>
-	);
-};

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/assets/text-animations-typewriter.tsx

@@ -1,100 +0,0 @@
-import {
-	AbsoluteFill,
-	interpolate,
-	useCurrentFrame,
-	useVideoConfig,
-} from 'remotion';
-
-const COLOR_BG = '#ffffff';
-const COLOR_TEXT = '#000000';
-const FULL_TEXT = 'Del prompt al motion graphics. Esto es Remotion.';
-const PAUSE_AFTER = 'Del prompt al motion graphics.';
-const FONT_SIZE = 72;
-const FONT_WEIGHT = 700;
-const CHAR_FRAMES = 2;
-const CURSOR_BLINK_FRAMES = 16;
-const PAUSE_SECONDS = 1;
-
-// Tamaño de composición ideal: 1280x720
-
-const getTypedText = ({
-	frame,
-	fullText,
-	pauseAfter,
-	charFrames,
-	pauseFrames,
-}: {
-	frame: number;
-	fullText: string;
-	pauseAfter: string;
-	charFrames: number;
-	pauseFrames: number;
-}): string => {
-	const pauseIndex = fullText.indexOf(pauseAfter);
-	const preLen =
-		pauseIndex >= 0 ? pauseIndex + pauseAfter.length : fullText.length;
-
-	let typedChars = 0;
-	if (frame < preLen * charFrames) {
-		typedChars = Math.floor(frame / charFrames);
-	} else if (frame < preLen * charFrames + pauseFrames) {
-		typedChars = preLen;
-	} else {
-		const postPhase = frame - preLen * charFrames - pauseFrames;
-		typedChars = Math.min(
-			fullText.length,
-			preLen + Math.floor(postPhase / charFrames),
-		);
-	}
-	return fullText.slice(0, typedChars);
-};
-
-const Cursor: React.FC<{
-	frame: number;
-	blinkFrames: number;
-	symbol?: string;
-}> = ({frame, blinkFrames, symbol = '▌'}) => {
-	const opacity = interpolate(
-		frame % blinkFrames,
-		[0, blinkFrames / 2, blinkFrames],
-		[1, 0, 1],
-		{extrapolateLeft: 'clamp', extrapolateRight: 'clamp'},
-	);
-
-	return <span style={{opacity}}>{symbol}</span>;
-};
-
-export const MyAnimation = () => {
-	const frame = useCurrentFrame();
-	const {fps} = useVideoConfig();
-
-	const pauseFrames = Math.round(fps * PAUSE_SECONDS);
-
-	const typedText = getTypedText({
-		frame,
-		fullText: FULL_TEXT,
-		pauseAfter: PAUSE_AFTER,
-		charFrames: CHAR_FRAMES,
-		pauseFrames,
-	});
-
-	return (
-		<AbsoluteFill
-			style={{
-				backgroundColor: COLOR_BG,
-			}}
-		>
-			<div
-				style={{
-					color: COLOR_TEXT,
-					fontSize: FONT_SIZE,
-					fontWeight: FONT_WEIGHT,
-					fontFamily: 'sans-serif',
-				}}
-			>
-				<span>{typedText}</span>
-				<Cursor frame={frame} blinkFrames={CURSOR_BLINK_FRAMES} />
-			</div>
-		</AbsoluteFill>
-	);
-};

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/assets/text-animations-word-highlight.tsx

@@ -1,108 +0,0 @@
-import {loadFont} from '@remotion/google-fonts/Inter';
-import React from 'react';
-import {
-	AbsoluteFill,
-	spring,
-	useCurrentFrame,
-	useVideoConfig,
-} from 'remotion';
-
-/*
- * Resalta una palabra de una frase con un efecto de barrido animado con spring.
- */
-
-// Tamaño de composición ideal: 1280x720
-
-const COLOR_BG = '#ffffff';
-const COLOR_TEXT = '#000000';
-const COLOR_HIGHLIGHT = '#A7C7E7';
-const FULL_TEXT = 'Esto es Remotion.';
-const HIGHLIGHT_WORD = 'Remotion';
-const FONT_SIZE = 72;
-const FONT_WEIGHT = 700;
-const HIGHLIGHT_START_FRAME = 30;
-const HIGHLIGHT_WIPE_DURATION = 18;
-
-const {fontFamily} = loadFont();
-
-const Highlight: React.FC<{
-	word: string;
-	color: string;
-	delay: number;
-	durationInFrames: number;
-}> = ({word, color, delay, durationInFrames}) => {
-	const frame = useCurrentFrame();
-	const {fps} = useVideoConfig();
-
-	const highlightProgress = spring({
-		fps,
-		frame,
-		config: {damping: 200},
-		delay,
-		durationInFrames,
-	});
-	const scaleX = Math.max(0, Math.min(1, highlightProgress));
-
-	return (
-		<span style={{position: 'relative', display: 'inline-block'}}>
-			<span
-				style={{
-					position: 'absolute',
-					left: 0,
-					right: 0,
-					top: '50%',
-					height: '1.05em',
-					transform: `translateY(-50%) scaleX(${scaleX})`,
-					transformOrigin: 'left center',
-					backgroundColor: color,
-					borderRadius: '0.18em',
-					zIndex: 0,
-				}}
-			/>
-			<span style={{position: 'relative', zIndex: 1}}>{word}</span>
-		</span>
-	);
-};
-
-export const MyAnimation = () => {
-	const highlightIndex = FULL_TEXT.indexOf(HIGHLIGHT_WORD);
-	const hasHighlight = highlightIndex >= 0;
-	const preText = hasHighlight ? FULL_TEXT.slice(0, highlightIndex) : FULL_TEXT;
-	const postText = hasHighlight
-		? FULL_TEXT.slice(highlightIndex + HIGHLIGHT_WORD.length)
-		: '';
-
-	return (
-		<AbsoluteFill
-			style={{
-				backgroundColor: COLOR_BG,
-				alignItems: 'center',
-				justifyContent: 'center',
-				fontFamily,
-			}}
-		>
-			<div
-				style={{
-					color: COLOR_TEXT,
-					fontSize: FONT_SIZE,
-					fontWeight: FONT_WEIGHT,
-				}}
-			>
-				{hasHighlight ? (
-					<>
-						<span>{preText}</span>
-						<Highlight
-							word={HIGHLIGHT_WORD}
-							color={COLOR_HIGHLIGHT}
-							delay={HIGHLIGHT_START_FRAME}
-							durationInFrames={HIGHLIGHT_WIPE_DURATION}
-						/>
-						<span>{postText}</span>
-					</>
-				) : (
-					<span>{FULL_TEXT}</span>
-				)}
-			</div>
-		</AbsoluteFill>
-	);
-};

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

@@ -1,78 +0,0 @@
----
-name: assets
-description: Importar imágenes, videos, audio y fuentes en Remotion
-metadata:
-  tags: assets, staticFile, imagenes, fuentes, public
----
-
-# Importar assets en Remotion
-
-## La carpeta public
-
-Coloca los assets en la carpeta `public/` en la raíz del proyecto.
-
-## Uso de staticFile()
-
-DEBES usar `staticFile()` para referenciar archivos de la carpeta `public/`:
-
-```tsx
-import {Img, staticFile} from 'remotion';
-
-export const MyComposition = () => {
-  return <Img src={staticFile('logo.png')} />;
-};
-```
-
-La función devuelve una URL codificada que funciona correctamente al desplegar en subdirectorios.
-
-## Uso con componentes
-
-**Imágenes:**
-
-```tsx
-import {Img, staticFile} from 'remotion';
-
-<Img src={staticFile('photo.png')} />;
-```
-
-**Videos:**
-
-```tsx
-import {Video} from '@remotion/media';
-import {staticFile} from 'remotion';
-
-<Video src={staticFile('clip.mp4')} />;
-```
-
-**Audio:**
-
-```tsx
-import {Audio} from '@remotion/media';
-import {staticFile} from 'remotion';
-
-<Audio src={staticFile('music.mp3')} />;
-```
-
-**Fuentes:**
-
-```tsx
-import {staticFile} from 'remotion';
-
-const fontFamily = new FontFace('MyFont', `url(${staticFile('font.woff2')})`);
-await fontFamily.load();
-document.fonts.add(fontFamily);
-```
-
-## URL remotas
-
-Las URL remotas pueden usarse directamente sin `staticFile()`:
-
-```tsx
-<Img src="https://example.com/image.png" />
-<Video src="https://remotion.media/video.mp4" />
-```
-
-## Notas importantes
-
-- Los componentes de Remotion (`<Img>`, `<Video>`, `<Audio>`) garantizan que los assets estén completamente cargados antes de renderizar
-- Los caracteres especiales en los nombres de archivo (`#`, `?`, `&`) se codifican automáticamente

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

@@ -1,172 +0,0 @@
----
-name: audio
-description: Uso de audio y sonido en Remotion - importación, recorte, volumen, velocidad, tono
-metadata:
-  tags: audio, media, recorte, volumen, velocidad, bucle, tono, silenciar, sonido, sfx
----
-
-# Usar audio 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
-```
-
-## Importar audio
-
-Usa `<Audio>` de `@remotion/media` para añadir audio a tu composición.
-
-```tsx
-import { Audio } from "@remotion/media";
-import { staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Audio src={staticFile("audio.mp3")} />;
-};
-```
-
-Las URL remotas también funcionan:
-
-```tsx
-<Audio src="https://remotion.media/audio.mp3" />
-```
-
-Por defecto, el audio se reproduce desde el inicio, a volumen completo y en toda su duración.
-Se pueden superponer varias pistas añadiendo múltiples componentes `<Audio>`.
-
-## Recorte
-
-Usa `trimBefore` y `trimAfter` para eliminar partes del audio. Los valores se expresan en fotogramas.
-
-```tsx
-const { fps } = useVideoConfig();
-
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    trimBefore={2 * fps} // Omite los primeros 2 segundos
-    trimAfter={10 * fps} // Termina en el segundo 10
-  />
-);
-```
-
-El audio sigue empezando a sonar al inicio de la composición: solo se reproduce la parte indicada.
-
-## Retrasar
-
-Envuelve el audio en un `<Sequence>` para retrasar su inicio:
-
-```tsx
-import { Sequence, staticFile } from "remotion";
-import { Audio } from "@remotion/media";
-
-const { fps } = useVideoConfig();
-
-return (
-  <Sequence from={1 * fps}>
-    <Audio src={staticFile("audio.mp3")} />
-  </Sequence>
-);
-```
-
-El audio empezará a sonar después de 1 segundo.
-
-## Volumen
-
-Define un volumen estático (de 0 a 1):
-
-```tsx
-<Audio src={staticFile("audio.mp3")} 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 (
-  <Audio
-    src={staticFile("audio.mp3")}
-    volume={(f) =>
-      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
-    }
-  />
-);
-```
-
-El valor de `f` empieza en 0 cuando el audio comienza a sonar, no en el fotograma de la composición.
-
-## Silenciar
-
-Usa `muted` para silenciar el audio. Puede definirse dinámicamente:
-
-```tsx
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-
-return (
-  <Audio
-    src={staticFile("audio.mp3")}
-    muted={frame >= 2 * fps && frame <= 4 * fps} // Silencia entre el segundo 2 y el 4
-  />
-);
-```
-
-## Velocidad
-
-Usa `playbackRate` para cambiar la velocidad de reproducción:
-
-```tsx
-<Audio src={staticFile("audio.mp3")} playbackRate={2} /> {/* Velocidad 2x */}
-<Audio src={staticFile("audio.mp3")} playbackRate={0.5} /> {/* Media velocidad */}
-```
-
-La reproducción en reversa no está soportada.
-
-## Bucle
-
-Usa `loop` para reproducir el audio en bucle indefinidamente:
-
-```tsx
-<Audio src={staticFile("audio.mp3")} 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 (valor por defecto)
-- `"extend"`: el contador sigue incrementándose
-
-```tsx
-<Audio
-  src={staticFile("audio.mp3")}
-  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
-<Audio
-  src={staticFile("audio.mp3")}
-  toneFrequency={1.5} // Tono más agudo
-/>
-<Audio
-  src={staticFile("audio.mp3")}
-  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 />`.