imgcli

¿Qué hace imgcli?

Componentes copia-y-pega para videos en Remotion. Los componentes se instalan mediante shadcn y se colocan en components/imgcli/ — tú eres dueño del código.

Instalación

Requisitos: un proyecto Remotion (npx create-video@latest).

# Instalar desde el registry de Imgcli
npx shadcn@latest add https://imgcli.com/r/text-reveal.json

# El componente se coloca en components/imgcli/text-reveal.tsx

Para usar la forma corta @imgcli/<name>, mapea @imgcli a https://imgcli.com/r/{name}.json en components.json. Consulta la guía de instalación para la configuración del proyecto.

Las dependencias se instalan automáticamente

Muchos componentes traen otros mediante registryDependencies — shadcn los instala de forma transitiva. Por ejemplo, instalar search-typing también instala snap-cn-ui, input y caret.

• @imgcli/snap-cn-ui es la librería compartida principal (hook fold de línea de tiempo, contexto de tema, matemática de colores). La mayoría de las Primitivas UI dependen de ella. Rara vez la instalas directamente.

Dos niveles

Imgcli tiene dos tipos de componentes — tienen APIs diferentes:

• Nivel de Animación (escenas y animaciones) — animaciones de texto, transiciones, fondos, simulaciones de bloques UI, tarjetas de marca/redes sociales, composiciones completas. Basado en fotogramas. Props compartidas: speed (multiplicador de tiempo), y para texto: fontSize, color, fontWeight.
• Primitivas UI (snap-cn-ui) — primitivas al estilo shadcn basadas en la línea de tiempo. Hoy se envían dos: input y caret. Props basadas en estado (state, style, size, theme) — el estado abierto/escritura es una función pura de la línea de tiempo. Sin prop speed. Construidas sobre @imgcli/snap-cn-ui.

Categorías de componentes

Elige según lo que estés construyendo. El catálogo está dividido en un archivo por componente bajo references/components/. Empieza en references/components/index.md — una tabla de enrutamiento agrupada por estas categorías con una señal Usar para / Evitar para por componente. Escanéala, elige candidatos, luego abre solo los archivos references/components/<name>.md que necesites (props completas, ejemplo, todas las notas de uso / no uso). No leas todos los archivos.

Categoría	Nivel	Componentes
Texto y Títulos	Animación	text-reveal, type-morph, text-swell, text-highlight, text-swap, text-build, text-rewrite, text-select, word-flip, punch-lines, word-gather, word-wheel
Subtítulos	Animación	word-captions, karaoke-captions
Entrada de Chat IA	Animación	prompt-send, search-typing, prompt-zoom, answer-stream, answer-highlight, agent-steps
Pantallas y Dispositivos	Animación	phone-frame, laptop-frame, terminal-simulator, screen-recording, cursor-track
Logos	Animación	logo-assemble, logo-flicker, logo-collapse, logo-drift, block-wordmark, wordmark-cut
Escenas	Animación	announce-title, hero-launch, orbit-gallery, moodboard-reveal, status-cycle, count-grid, roster-grant, orb-swarm, reel-collage, card-rail, cut-lockup, bloom-lockup, gather-lockup, sky-lockup
Prueba Social	Animación	follower-rush, channel-thread
Efectos	Animación	pulsing-border
Primitivas UI	snap-cn-ui	input, caret (+ snap-cn-ui, la librería compartida principal)

Usa el índice de componentes en vivo para confirmar qué nombres son instalables. Las referencias a continuación incluyen nombres antiguos y sus reemplazos.

Patrones de componentes

Las convenciones difieren según el nivel — no asumas props del nivel de animación en una primitiva.

Nivel de Animación (escenas y animaciones)

• Interfaz Props con nombre por componente (ej. TextRevealProps).
• speed?: number — multiplicador global de tiempo (por defecto 1), aplicado como frame * speed.
• Componentes de texto: fontSize, color, fontWeight.
• Las transiciones entre escenas no están en este registry — usa las propias de Remotion @remotion/transitions (slide, wipe, fade, flip) dentro de un <TransitionSeries>.
• className?: string en el elemento raíz.

Primitivas UI (snap-cn-ui)

• Basadas en estado, no basadas en speed: state (ej. "open" / "closed"), style, variant, size, theme?: Partial<SnapCnTheme>.
• El estado abierto/cerrado/activo es una función pura de la línea de tiempo (presets con keyframes).
• Compón primitivas de capa modal (dialog, alert-dialog, drawer) con un elemento desencadenante — consulta el ejemplo de cada componente.

API de Animación

import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";

const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
const scale = spring({ fps, frame, config: { damping: 12, mass: 1, stiffness: 100 } });

// Aleatoriedad determinista (NUNCA Math.random())
import { random } from "@remotion/random";
const jitter = random(`seed-${frame}`);

Estructura de composición

import { Sequence, Series } from "remotion";

<Sequence from={30} durationInFrames={60}>
  <TextReveal text="Envíalo en React" />
</Sequence>

<Series>
  <Series.Sequence durationInFrames={60}><SceneA /></Series.Sequence>
  <Series.Sequence durationInFrames={60}><SceneB /></Series.Sequence>
</Series>

Lienzo y temporización

• Lienzo estándar: 1280×720 @ 30fps. Los componentes están diseñados para ello.
• Ajusta cada Sequence a la duración natural del componente — la columna Length en components/index.md (y la Natural length de cada archivo). Sub-presupuestar recorta la animación; sobre-presupuestar deja tiempo muerto.
• Coincidencia de tono: cada entrada del catálogo lleva una etiqueta vibe (tech/premium/data/clean/ playful/social) — elige componentes cuyo tono se alinee con la marca.
• Paleta y fuentes: mantente dentro de los tokens de la librería (references/design.md → tokens) para que tus propios elementos no choquen.

Valores predeterminados de diseño — evita la estética IA genérica

Cuando escribas tu propio texto, cromo de escena o tarjetas (no los componentes preconstruidos), mantén la mesura:

• Sin letter-spacing decorativo en el texto de cuerpo/título que añadas.
• Sin text-transform: uppercase / MAYÚSCULAS por defecto — prefiere mayúscula inicial (Lanzamiento, no LANZAMIENTO).
• Sin rellenos degradados ni lavados degradados decorativos — los degradados solo como fondos intencionales.
• Sin brillos / sombras paralelas coloreadas o radios de desenfoque grandes (blur > ~24px, extensión, multicapa) — solo elevación sutil de 1px.

Excepción: nunca elimines estos efectos de componentes cuya esencia es el efecto — el degradado de word-flip, la paleta de colores de block-wordmark, el brillo de announce-title, el propio pulsing-border, y los contornos gruesos de los presets de subtítulos son legítimos. Las reglas rigen tus adiciones, no la librería.

Ejemplos completos de hacer/evitar: references/design.md. Para calidad de movimiento (temporización, anticipación, escenificación, easing), consulta references/motion-principles.md.

Advertencias (Imgcli-específicas)

• No se envían componentes de transición — un cambio de escena es <TransitionSeries.Transition> de @remotion/transitions, no un componente Imgcli. text-swap intercambia una línea, no una escena.
• El desplazamiento del terminal es instantáneo — translateY de función escalón, nunca spring/ease el desplazamiento.
• overflow: hidden en diseños divididos — evita que el contenido se rompa durante animaciones de ancho.
• El parpadeo del cursor es determinista — Math.floor(frame / 15) % 2 === 0, no intervalos.
• Los archivos estáticos van en public/ — cárgalos mediante staticFile('cursor.svg'), no con imports.
• Las tarjetas sociales se renderizan sin conexión — avatarUrl="" / coverUrl="" caen en degradados; sin fetch.

Las reglas generales de Remotion (sin Math.random(), sin setInterval, animar transform no top/left, cargar fuentes antes de renderizar) están en las skills propias de Remotion, no en esta: npx skills add remotion-dev/skills.

Componer un video

No sueltes componentes — compón una historia. Cuando te pidan construir un video completo ("haz una demo de producto", "video de changelog", "intro para mi landing"):

1. Decide la estrategia — plantilla lista vs componer desde componentes vs construir un nuevo componente. Consulta references/anatomy.md §1.
2. Sigue los latidos — una demo de producto es: Gancho → Posicionamiento → Revelación del producto → Características → Prueba → CTA (los dos últimos opcionales). Consulta references/anatomy.md §2.
3. Usa la receta — references/archetypes/index.md enruta a construcciones por arquetipo: contrato de contenido (inferir → preguntar → marcador de posición), variantes de duración, slots de latido→componente y un esqueleto trabajado de <TransitionSeries>.
4. Elige el componente de cada latido de references/components/index.md; empareja la etiqueta vibe con la marca y ajusta cada <Sequence durationInFrames> alrededor de su duración natural.
5. Revisa el estándar de calidad — un acento, tipografía cinética en mayúscula inicial, contenido real, sin halos de brillo, sin enumeración de lista de características, sin lavado degradado decorativo detrás del texto. Consulta references/anatomy.md §3.

Flujos de trabajo

Para un video completo, usa la Skill de flujo de trabajo correspondiente cuando esté disponible. Cada una compone componentes Imgcli latido por latido y verifica el resultado en Remotion. La guía de agente cubre la instalación y el descubrimiento público de componentes.

• remotion-launch-video para videos de lanzamiento, anuncios, promos de Product Hunt / X.
• remotion-product-demo para tutoriales a partir de una grabación de pantalla real, demos de CLI y apps IA.
• remotion-motion-graphics para tipografía cinética, animaciones de logo, estadísticas y aperturas cortas.
• remotion-kinetic-typography para texto animado y tarjetas de título.
• remotion-logo-animation para revelaciones de logo, animaciones de introducción y cierre.
• remotion-explainer-video para videos explicativos narrados con subtítulos incrustados.

Referencia

• references/anatomy.md — componer un video completo: estrategia (plantilla/componer/nuevo), los latidos de demo de producto, y el estándar de calidad bueno vs genérico.
• references/archetypes/index.md — enrutador a recetas de construcción por arquetipo (product-demo insignia + changelog, feature-announcement, oss-showcase, cli-tool-demo, testimonial-reel, year-in-review, pricing-reveal, logo-bumper): contrato de contenido, variantes de duración, mapa de latido→slot.
• references/components/index.md — tabla de enrutamiento (todos los componentes, agrupados por categoría, con Usar para / Evitar para). Abre references/components/<name>.md para las props completas, ejemplo y notas de uso / no uso de un componente.
• references/design.md — valores predeterminados de diseño anti-genérico (hacer/evitar) + tokens de diseño (paleta, fuentes, lienzo).
• references/motion-principles.md — principios de diseño de movimiento adaptados a Imgcli + Remotion.
• references/anti-patterns.md — errores comunes de generación y sus soluciones.