Media framework laboratory

This technical appendix isolates the complete implementation matrix from the business-oriented showcase. Use it to inspect individual variants, fallbacks, and resolved framework decisions.

Return to the business showcase

Technical appendix: media laboratory

Every public media control, resolved decision, progressive fallback, and actionable invalid state is collected here as a secondary technical reference after the business showcase.

Motion and static fallbacks

Three freshly baked sourdough loaves on a flour-dusted table. — motion: hover-zoom

motion: hover-zoom

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Text link

motion: none

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Text link

Artisan baker shaping sourdough loaves in a warm workshop. — motion: parallax-medium

motion: parallax-medium

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Text link

motion: parallax-strong

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Text link

motion: parallax-subtle

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Text link

motion: reveal

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Text link

Media pattern coverage

Media pattern coverage
Media pattern coverage	Reference
`asset-purpose-formats`	`[data-media-axis-matrix]`
`semantics-alt-caption-credit`	`[data-media-lab-group="aspects"]`
`box-viewport-frame-fit`	`[data-media-lab-group="fits"]`
`inline-standalone-figures`	`[data-media-lab-group="aspects"]`
`image-cards`	`[data-media-lab-group="card-arrangements"]`
`editorial-offset-overlap`	`[data-media-lab-group="section-layouts"]`
`full-bleed-hero-backdrop`	`[data-media-lab-group="surfaces"]`
`crop-focal-art-direction`	`[data-media-lab-group="focal-points"]`
`grid-mosaic-scroll-gallery`	`.media-gallery`
`lightbox`	`[data-media-lightbox]`
`informative-video`	`[data-media-lab-video="informative"]`
`decorative-video`	`[data-media-lab-video="decorative"]`
`hover-zoom`	`.media-motion-hover-zoom`
`reveal-motion`	`.media-motion-reveal`
`parallax`	`.media-motion-parallax-subtle`
`responsive-delivery-art-direction`	`[data-media-profile]`
`loading-performance-stability`	`[data-media-explain]`
`failure-empty-transitional-states`	`[data-media-invalid-states]`

Axis

Technical appendix: media laboratory
Axis	Value	Resolved behavior
aspect	`auto`	auto
aspect	`classic`	4/3
aspect	`landscape`	3/2
aspect	`portrait`	4/5
aspect	`square`	1/1
aspect	`tall`	3/4
aspect	`vertical`	9/16
aspect	`widescreen`	16/9
fit	`cover`	cover
fit	`contain`	contain
layout	`card-bleed`	card-bleed
layout	`card-contained`	card-contained
layout	`edge-to-edge`	edge-to-edge
layout	`editorial-offset`	editorial-offset
layout	`editorial-split`	editorial-split
layout	`full-bleed`	full-bleed
layout	`gallery-grid`	gallery-grid
layout	`gallery-mosaic`	gallery-mosaic
layout	`inline`	inline
layout	`overlap`	overlap
layout	`section-backdrop`	section-backdrop
layout	`video`	video
overlay	`none`	none / neutral
overlay	`readable`	readable / neutral
motion	`hover-zoom`	progressive
motion	`none`	static
motion	`parallax-medium`	progressive
motion	`parallax-strong`	progressive
motion	`parallax-subtle`	progressive
motion	`reveal`	progressive
treatment	`backdrop`	landscape / cover / none
treatment	`editorial`	landscape / cover / subtle
treatment	`natural`	auto / contain / none
treatment	`poster`	widescreen / cover / none

Aspect ratios

Portrait of Ana, an artisan baker in the workshop. — aspect: portrait

Goldkorn paper bread bag and wrapped sourdough loaf on a transparent background. — aspect: square

Cover and contain

Focal-point movement

focal point: 0.5, 0.35 / portrait source in classic frame

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

focal point: 0.5, 0.35 / portrait source in landscape frame

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

focal point: 0.5, 0.35 / portrait source in widescreen frame

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Declared crop-family alternative

Three artisan bakers together in their workshop. — fixed crop-family alternative: portrait

Card arrangements

Media contract example

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Text link

Media contract example

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Text link

Media contract example

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Text link

Media contract example

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Text link

Section layouts

Media contract example

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Media contract example

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Media contract example

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Media contract example

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Media contract example

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Light and dark media surfaces

media surface: light

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Primary action Text link

media surface: dark

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Primary action Text link

Static grid gallery

Scroll-snap gallery with lightbox

Mosaic gallery

Decorative ambient video

The same semantic content checks hierarchy, spacing, boundaries, and controls across media treatments.

Informative video

Informative video Read transcript

Video transcript

A silent wood-fired oven clip shows bread beside glowing embers.

Resolved behavior

Resolved behavior
Name	Value
asset	`bakery-team`
source	`/img/bakery-team.png`
placement	`figure / informative`
rendition	`feature / 640,768,960,1280,1600`
layout	`inline / inline`
treatment	`editorial`
surface	`none`
priority	`lazy / low`
accessibility	`informative / catalog-default`
fallbacks	`static-responsive-image / unchanged-static-media`
renderer	`media-frame media-relationship-figure media-aspect-landscape media-frame-subtle`

Diagnostic

UNKNOWN_ASSET

[media:UNKNOWN_ASSET] Unknown media asset "missing-media-asset". Path: media-lab.missing-asset.asset. Rejected: "missing-media-asset". Target: media contract v2. Recovery: Select a stable ID declared in src/site/_data/media.yaml.

Path media-lab.missing-asset.asset

Recovery Select a stable ID declared in src/site/_data/media.yaml.

UNSUPPORTED_LAYOUT

[media:UNSUPPORTED_LAYOUT] Layout "full-bleed" does not support relationship "card-media". Path: media-lab.invalid-layout.layout. Rejected: "full-bleed". Target: media contract v2. Recovery: Select a layout declared for this relationship by the accepted skin.

Path media-lab.invalid-layout.layout

Recovery Select a layout declared for this relationship by the accepted skin.