Showcase — UI primitives

Button

The system's primary action: 4 variants, 3 sizes and disabled states.

Badge

Compact status or metadata label; color is never the only channel.

NeutralAccentDanger

Card

Composable container (header, title, content) for case studies and results.

Case study

Composition via children: header, title and content.

Loading state

Empty state

No results yet. Generate your first image to see it here.

Error state

Couldn't load the result. Check your connection.

Form (Field + Input + Select)

Accessible fields: label, hint and error linked via aria-describedby.

Prompt

Describe the image to generate.

Aspect ratio

With error

This field is required.

Disabled

Field not editable on this plan.

Disabled select

Tabs

APG tabs with roving tabindex; panels stay mounted (no state loss on switch).

Preview content.

{ "status": "ok" }

@nicobehm/media-kit

Media components from the own package: CompareSlider (drag/hover, color/B&W) and MediaLightbox with zoom.

Desaturated version of the photo — mode="drag" — drag the divider

mode="hover" — follows the pointer without clicking

Black and white portrait — Simulated colorization — a single bitmap; the B&W side is derived with filter: grayscale(1). AI-generated portrait.

Simulated colorization — a single bitmap; the B&W side is derived with filter: grayscale(1). AI-generated portrait.

Comparison modes

The same compareMode prop behind the two demos above adds three more comparison axes: onion skin, blink and side-by-side.

Desaturated version of the landscape photo — compareMode="wipe" | "onion" | "blink" | "side-by-side" — same landscape photo, four ways to compare it.

compareMode="wipe" | "onion" | "blink" | "side-by-side" — same landscape photo, four ways to compare it.

Spotlight reveal

A lens that reveals color under the pointer — same trick as the comparisons above: one bitmap, one CSS filter for the black & white side.

Black and white version of the neon portrait — SpotlightReveal — move the pointer (or use the arrow keys) to reveal color under the lens.

SpotlightReveal — move the pointer (or use the arrow keys) to reveal color under the lens.

Video scrub preview

Scrub through a video without playing it: move the pointer (or use the arrow keys) to jump to any frame, like YouTube thumbnail previews.

AI-generated example gallery

Images (Google NBP, Seedream 5 Pro), video (Google Veo, Kling V3) and music generated with AI. Filter by type, search by model or title, and open any example in fullscreen HD.

Google NBP — Neon portrait
Google NBP — Alpine sunrise
Google NBP — Studio still life
Google NBP — Street in the rain
Seedream 5 Pro — Isometric city
Seedream 5 Pro — Butterfly macro
Seedream 5 Pro — Brutalism
Seedream 5 Pro — Fashion editorial
Google Veo — Coast at sunset
Google Veo — Urban timelapse
Google Veo — Snowy forest
Kling V3 — Cinematic portrait
Kling V3 — Steaming coffee
Google Lyria — Lo-fi for coding
Google Lyria — Epic theme
Google Lyria — Synthwave

API player

A simulated real call: hit Run to watch the request travel through pending → streaming → done, with image, video, audio and error examples.

Endpoint

POST/v1/ai/text-to-image

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

The response will appear here — press Run