Viewer Template: Cinematic
What
Film. Image dominates everything. Text is minimal — like subtitles in a foreign film.
When to Use
- Visual-heavy stories where images carry the narrative weight
- Photojournalism-style investigations with short, punchy captions
- Art-first content where narration averages < 80 chars per panel
- When you want the viewer to FEEL something before they UNDERSTAND something
- Atmospheric pieces — war zones, landscapes, industrial decay, cityscapes
Design Philosophy
Cinema does not explain. It shows. The cinematic template strips away every piece of UI chrome and lets the image occupy the entire viewport. Text appears only as subtitles — two lines max, centered at the bottom, semi-transparent. The letterbox bars reinforce the film frame. The viewer should forget they are in a browser. This is a screening room.
Layout System
Image Treatment
- Full viewport,
object-fit: cover — no borders, no frames, no containment
- Slow Ken Burns drift: 35s cycle (slower than magazine's 25s — cinematic patience)
- Scale range: 1.0 to 1.05 — minimal movement, maximum atmosphere
- No panel numbers, no stage labels — the image IS the panel
Text Treatment
- Bottom 15% of viewport only, horizontally centered
- Max 2 lines visible at any time — if narration is longer, it scrolls within the subtitle area
- Semi-transparent backdrop:
rgba(0,0,0,0.6) — visible enough to read, transparent enough to see through
- Text fades in on panel entry (0.6s ease), fades out before transition
- Max-width: 70% of viewport — subtitles should never stretch edge to edge
- Auto-advance option: 8 seconds per panel (configurable, default off)
Typography
- Subtitles: Inter, 1.0rem, font-weight 400, letter-spacing 0.03em, #f0f0f0
- Nothing else. No headers, no labels, no panel numbers. If there is text, it is subtitle.
- Line-height: 1.6 — generous for readability against moving images
Color Approach
- Letterbox bars: pure black (#000)
- Subtitle backdrop:
rgba(0,0,0,0.6) — NOT a box, just a gradient wash
- Text: near-white (#f0f0f0)
- No accent colors — cinema has no brand colors. The image provides all color.
Transitions
- Crossfade: 1.2s ease-in-out — slow dissolve between panels
- No page-flip, no cut — crossfade only. Cinema dissolves.
- Subtitle fades out 0.3s before image transition, fades in 0.5s after new image settles
Presentation Block
{
"layout": "cinematic",
"show_speaker_badge": false,
"image_sizing": "cover",
"text_position": "overlay-bottom",
"transition": "crossfade",
"typewriter_speed": 0,
"viewer_style": "cinematic"
}
Note: typewriter_speed: 0 means no typewriter effect — text appears via fade, not character by character. Subtitles should not typewrite.
Key CSS Patterns
/* Letterbox bars — cinematic framing */
.letterbox-top,
.letterbox-bottom {
position: fixed;
left: 0; right: 0;
height: 8vh;
background: #000;
z-index: 10;
pointer-events: none;
}
.letterbox-top { top: 0; }
.letterbox-bottom { bottom: 0; }
/* Full-bleed image */
.panel-image {
position: absolute;
inset: 0;
width: 100%;
height: 100vh;
object-fit: cover;
}
/* Slow Ken Burns — cinematic patience */
.panel-image.active {
animation: ken-burns-slow 35s ease-in-out infinite alternate;
}
@keyframes ken-burns-slow {
from { transform: scale(1.0); }
to { transform: scale(1.05) translate(-0.5%, -0.5%); }
}
/* Subtitle area */
.subtitle-container {
position: fixed;
bottom: 10vh;
left: 50%;
transform: translateX(-50%);
max-width: 70%;
text-align: center;
z-index: 5;
}
/* Subtitle text */
.subtitle-text {
font-family: 'Inter', sans-serif;
font-size: 1.0rem;
font-weight: 400;
letter-spacing: 0.03em;
color: #f0f0f0;
line-height: 1.6;
padding: 0.6rem 1.2rem;
background: linear-gradient(transparent, rgba(0,0,0,0.6) 20%, rgba(0,0,0,0.6) 80%, transparent);
border-radius: 4px;
opacity: 0;
transition: opacity 0.6s ease;
}
.subtitle-text.visible {
opacity: 1;
}
/* Crossfade transition */
.panel-exit {
animation: fade-out 1.2s ease-in-out forwards;
}
.panel-enter {
animation: fade-in 1.2s ease-in-out forwards;
}
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Auto-advance indicator (thin progress bar) */
.auto-advance-bar {
position: fixed;
bottom: 8vh;
left: 15%;
width: 70%;
height: 2px;
background: rgba(255,255,255,0.1);
z-index: 6;
}
.auto-advance-progress {
height: 100%;
background: rgba(255,255,255,0.3);
transition: width linear;
}
/* Kill ALL UI chrome */
.progress-bar,
.panel-counter,
.stage-label,
.speaker-badge,
.navigation-arrows {
display: none !important;
}
Common Mistakes
- Adding ANY UI elements — panel numbers, progress bars, navigation arrows destroy the cinematic feel
- Typewriter effect on subtitles — subtitles fade in, they do not typewrite
- Too much text — if narration averages > 80 chars, this is the wrong template. Use magazine instead
- Letterbox bars too thick — 8vh is the sweet spot. More than 10vh feels claustrophobic
- Subtitle backdrop too opaque — the image must show through. 0.6 opacity max
- Fast transitions — crossfade must be at least 1.0s. Cinema takes its time
- Using accent colors — this template has NO brand colors. The image is the entire palette
- Speaker badges — never. If there are multiple speakers, use immersive template instead
Reference
Path to the HTML reference template: viewer-templates/cinematic.html