← All Visual Examples
immersive-desktop1440×1000 · 
immersive-mobile390×844 · 
editorial-desktop1440×1000 · 
editorial-mobile390×844 · 
static-desktop1440×1000 · 
static-mobile390×844 ·
draft · pinned-media-story-creative-range-demonstration
Pinned Media Story Creative Range Demonstration
Show three safe Pinned Media Story postures from typed Hugo source: immersive chapters, editorial evidence, and a static accessible story stack.
- Evidence
- demonstration
- Release binding
- unbound
- Core source
dde7da9a7964
Full-size artifacts
Rendered evidence
6 declared viewports. Select an image to inspect it at source resolution.
/pinned-story-directions/fixtures/compatibility/cinematic-campaign-theme-proof/evidence/pinned-story-immersive-desktop.png/pinned-story-directions/fixtures/compatibility/cinematic-campaign-theme-proof/evidence/pinned-story-immersive-mobile.png/pinned-story-directions/fixtures/compatibility/cinematic-campaign-theme-proof/evidence/pinned-story-editorial-desktop.png/pinned-story-directions/fixtures/compatibility/cinematic-campaign-theme-proof/evidence/pinned-story-editorial-mobile.png/pinned-story-directions/fixtures/compatibility/cinematic-campaign-theme-proof/evidence/pinned-story-static-desktop.png/pinned-story-directions/fixtures/compatibility/cinematic-campaign-theme-proof/evidence/pinned-story-static-mobile.pngIntent
Exact declaration
Subjects
Best fit
- choosing whether visual context should persist across chapter copy
- comparing motion-led and static storytelling presets
- reviewing portrait flow and contained-media behavior
Avoid when
- normal document flow communicates more clearly
- a single media interruption is enough
- motion is being added without a visitor-facing purpose
Readiness
Checks and limitations
- accessibility
- partial
- artifact freshness
- not-run
- desktop responsive
- pass
- keyboard
- not-run
- mobile responsive
- pass
- no essential javascript
- partial
- performance
- not-run
- reduced motion
- partial
- rendered route
- pass
- source portability
- pass
- visual acceptance
- not-run
Limitations
- This is source-linked development evidence, not an exact clean release binding.
- Chromium desktop and 390px viewport captures, containment, console, portable rendering, and the three distinct compositions pass; axe-core, JavaScript-disabled capture, reduced-motion capture, performance budgets, Safari, and independent owner review remain promotion gates.
Invalidated by
- Pinned Media Story renderer, semantic CSS, or motion runtime change
- preset or fixture source change
- Core or Distribution release change
- browser evidence change
Portable source
Routes and source ownership
Paths resolve inside exact Core commit dde7da9a7964f8011ecac5cb311f6d5ae2872b46. Private repository links stay private; the mapping remains explicit.
Rendered routes
| Route | Role | Source |
|---|---|---|
/pinned-story-directions/ | immersive, editorial, and static Pinned Media Story comparison | fixtures/compatibility/cinematic-campaign-theme-proof/content/pinned-story-directions/_index.md |
Source mapping
| Role | Path | Use |
|---|---|---|
| copyable Pinned Story typed Hugo source | fixtures/compatibility/cinematic-campaign-theme-proof/content/pinned-story-directions/_index.md | Copyable source |
| portable Pinned Media Story renderer | layouts/partials/blocks/pinned-media-story.html | Framework or evidence source |
| portable Pinned Media Story semantic CSS | assets/css/foundry-base.css | Framework or evidence source |
| progressive motion runtime | assets/js/foundry-motion.js | Framework or evidence source |
| render and browser assertions | fixtures/compatibility/cinematic-campaign-theme-proof/fixture.config.json | Framework or evidence source |