Viewer Template: Comic
What
Graphic novel. Panel grid. Multiple panels visible at once. Speech bubbles.
When to Use
- True sequential art — action sequences, character confrontations, visual storytelling
- Manga-style or graphic novel presentations
- Stories where the ARRANGEMENT of panels creates meaning (juxtaposition, pacing)
- Content with speech bubbles and caption boxes
- When showing multiple moments simultaneously matters (compare, contrast, sequence)
- Action-heavy investigations where visual rhythm beats reading rhythm
Design Philosophy
The comic template breaks from single-panel-per-viewport and shows multiple panels at once in a CSS grid — like a physical comic page. Panels have borders, gutters between them, and text lives INSIDE panels as speech bubbles or caption boxes, not in separate overlays. This is the only template where the reader sees 2-3 panels simultaneously, creating the juxtaposition and rhythm that makes comics a distinct medium. Key moments get full-page splash panels.
Layout System
Image Treatment
- Panel grid: CSS grid, typically 2 columns for standard panels
- Each panel: bordered, contained within grid cell
object-fit: cover within panel bounds — images fill their cell- NO Ken Burns — comic panels are static, fixed, like print
- Splash panels: span full grid width for dramatic moments (key reveals, climaxes)
- Panel aspect ratio varies: standard (4:3), tall (3:4), wide (16:9), splash (full-width)
Text Treatment
- Text lives INSIDE the panel — not below, not beside, not in an overlay
- Speech bubbles: white rounded rectangles with tail pointing at speaker, black text
- Caption boxes: rectangular, positioned top-left or bottom of panel, amber background, italic narration
- Sound effects: large, bold, rotated, integrated into the image composition
- No typewriter — text appears instantly. Comics are read, not watched.
Typography
- Speech bubbles: Inter, 0.85rem, line-height 1.4, #1a1a1a on white
- Caption boxes: Crimson Pro italic, 0.8rem, line-height 1.5, #1a1a1a on amber
- Sound effects: Impact or similar bold sans, 2-4rem, color varies, rotated, text-stroke
- Panel labels (optional): Inter, 0.65rem, #666, bottom-right of panel
Color Approach
- Gutter/background: #0a0a0a — dark gap between panels
- Panel borders: 2px solid #222
- Speech bubble: #f5f5f0 with 1px solid #333
- Caption box: rgba(212,168,67,0.9) background
- Sound effects: per-context (red for impacts, yellow for explosions, blue for tech)
Transitions
- Page turn: entire grid of panels transitions as a unit (the "page" turns)
- No crossfade between individual panels — panels are static on the page
- Page transition: 0.5s slide-left or page-flip
- Scroll variant: continuous vertical scroll through comic pages (optional)
Presentation Block
{
"layout": "comic",
"show_speaker_badge": false,
"image_sizing": "cover",
"text_position": "in-panel",
"transition": "page-turn",
"typewriter_speed": 0,
"viewer_style": "comic"
}
Key CSS Patterns
/* Comic page container */
.comic-page {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
max-width: 1100px;
margin: 0 auto;
padding: 8px;
background: #0a0a0a;
min-height: 100vh;
}
/* Standard panel */
.comic-panel {
position: relative;
border: 2px solid #222;
overflow: hidden;
background: #111;
min-height: 300px;
}
.comic-panel img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Splash panel — full width, key moment */
.comic-panel.splash {
grid-column: 1 / -1;
min-height: 500px;
}
/* Tall panel */
.comic-panel.tall {
grid-row: span 2;
}
/* Speech bubble */
.speech-bubble {
position: absolute;
background: #f5f5f0;
border: 1px solid #333;
border-radius: 16px;
padding: 0.6rem 1rem;
max-width: 55%;
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
line-height: 1.4;
color: #1a1a1a;
z-index: 3;
}
/* Speech bubble tail */
.speech-bubble::after {
content: '';
position: absolute;
bottom: -10px;
left: 20%;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 12px solid #f5f5f0;
}
.speech-bubble.tail-right::after {
left: auto;
right: 20%;
}
/* Caption box (narration) */
.caption-box {
position: absolute;
top: 8px;
left: 8px;
background: rgba(212, 168, 67, 0.9);
padding: 0.4rem 0.8rem;
max-width: 60%;
font-family: 'Crimson Pro', serif;
font-style: italic;
font-size: 0.8rem;
line-height: 1.5;
color: #1a1a1a;
z-index: 3;
}
.caption-box.bottom {
top: auto;
bottom: 8px;
left: auto;
right: 8px;
}
/* Sound effect */
.sfx {
position: absolute;
font-family: 'Impact', 'Arial Black', sans-serif;
font-size: 3rem;
font-weight: 900;
color: #ff4444;
text-transform: uppercase;
-webkit-text-stroke: 2px #000;
transform: rotate(-8deg);
z-index: 4;
pointer-events: none;
}
/* Gutter — the dark space between panels */
.comic-page {
gap: 8px;
background: #0a0a0a;
}
/* Page turn transition */
.comic-page.exiting {
animation: page-slide-out 0.5s ease-in forwards;
}
.comic-page.entering {
animation: page-slide-in 0.5s ease-out forwards;
}
@keyframes page-slide-out {
to { transform: translateX(-100%); opacity: 0; }
}
@keyframes page-slide-in {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
Common Mistakes
- Text outside panels — in the comic template, ALL text lives inside the panel as bubbles or captions. No overlays, no side panels
- Ken Burns on panels — comic panels are static. Movement destroys the comic page illusion
- Single panel per viewport — that is the magazine or cinematic template. Comics show multiple panels simultaneously
- Gutters too small — 8px minimum. The dark gap between panels is what makes it feel like a printed page
- All panels same size — vary the grid: standard, tall, wide, splash. Layout variety is pacing in comics
- Speech bubbles too large — max 55% of panel width. Bubbles that dominate the panel obscure the art
- Forgetting splash panels — key moments (reveals, climaxes) MUST break the grid and go full-width
Reference
Path to the HTML reference template: viewer-templates/comic.html