Showcase — UI primitives

Button

Acción principal del sistema: 4 variantes, 3 tamaños y estados deshabilitados.

Badge

Etiqueta compacta de estado o metadatos; el color nunca es el único canal.

NeutralAccentDanger

Card

Contenedor componible (header, título, contenido) para casos de estudio y resultados.

Caso de estudio

Composición por children: header, título y contenido.

Estado loading

Estado vacío

Sin resultados todavía. Genera tu primera imagen para verla aquí.

Estado error

No se pudo cargar el resultado. Comprueba tu conexión.

Formulario (Field + Input + Select)

Campos accesibles: label, hint y error enlazados con aria-describedby.

Prompt

Describe la imagen a generar.

Relación de aspecto

Con error

Este campo es obligatorio.

Deshabilitado

Campo no editable en este plan.

Select deshabilitado

Tabs

Pestañas APG con roving tabindex; los paneles persisten montados (sin perder estado al cambiar).

Contenido del preview.

{ "status": "ok" }

@nicobehm/media-kit

Componentes media del paquete propio: CompareSlider (drag/hover, color/B-N) y MediaLightbox con zoom.

Versión desaturada de la foto — mode="drag" — arrastra el divisor

Retrato en blanco y negro — Colorización simulada — un único bitmap; el B-N se deriva con filter: grayscale(1). Retrato generado con IA.

Colorización simulada — un único bitmap; el B-N se deriva con filter: grayscale(1). Retrato generado con IA.

Modos de comparación

La misma prop compareMode que hay detrás de las dos demos de arriba añade tres ejes de comparación más: onion skin, parpadeo y lado a lado.

Versión desaturada de la foto del paisaje — compareMode="wipe" | "onion" | "blink" | "side-by-side" — la misma foto de paisaje, cuatro formas de compararla.

compareMode="wipe" | "onion" | "blink" | "side-by-side" — la misma foto de paisaje, cuatro formas de compararla.

Revelado con foco (spotlight)

Una lupa que revela el color bajo el puntero — el mismo truco que las comparaciones de arriba: un único bitmap, un filtro CSS para el lado en blanco y negro.

Versión en blanco y negro del retrato neón — SpotlightReveal — mueve el puntero (o usa las flechas) para revelar el color bajo la lupa.

SpotlightReveal — mueve el puntero (o usa las flechas) para revelar el color bajo la lupa.

Vista previa con scrub de vídeo

Recorre un vídeo sin reproducirlo: mueve el puntero (o usa las flechas) para saltar a cualquier fotograma, como en las miniaturas de YouTube.

VideoScrubPreview — mueve el puntero, o enfócalo y pulsa las flechas, Inicio o Fin.

Galería de ejemplos generados con IA

Imágenes (Google NBP, Seedream 5 Pro), vídeo (Google Veo, Kling V3) y música generados con IA. Filtra por tipo, busca por modelo o título y abre cualquier ejemplo a pantalla completa en calidad HD.

Google NBP — Retrato neón
Google NBP — Amanecer alpino
Google NBP — Bodegón de estudio
Google NBP — Calle bajo la lluvia
Seedream 5 Pro — Ciudad isométrica
Seedream 5 Pro — Macro de mariposa
Seedream 5 Pro — Brutalismo
Seedream 5 Pro — Editorial de moda
Google Veo — Costa al atardecer
Google Veo — Timelapse urbano
Google Veo — Bosque nevado
Kling V3 — Retrato cinematográfico
Kling V3 — Café humeante
Google Lyria — Lo-fi para programar
Google Lyria — Tema épico
Google Lyria — Synthwave

API player

Simulación de una llamada real: pulsa Run para ver la petición viajar por pending → streaming → done, con ejemplos de imagen, vídeo, audio y error.

Endpoint

POST/v1/ai/text-to-image

{
  "prompt": "A serene mountain landscape at golden hour",
  "aspect_ratio": "widescreen_16_9",
  "seed": 42
}

La respuesta aparecerá aquí — pulsa Run