Viewer Template: First-Person
What
You ARE the narrator. The investigation speaks directly to you. Intimate, close, unsettling.
When to Use
- Horror and thriller narratives — creeping dread, slow reveals
- Personal narratives and confessional investigation — "I was there. This is what I saw."
- Immersive experiences where the boundary between reader and narrator dissolves
- Content designed to make the reader uncomfortable, reflective, or deeply present
- When the investigation IS the emotional experience, not the data
- Pieces with fewer than 20 panels — this template is intense, it exhausts if too long
Design Philosophy
The first-person template strips away every interface element until nothing remains but image and thought. No progress bar. No panel numbers. No stage labels. No speaker badge. Text appears center-screen, overlaid directly on the image, as if the thoughts are forming in the reader's mind. The heavy vignette creates tunnel vision. The breathing effect on the image makes it feel alive, watching. Click anywhere to advance. That is the only interaction. The reader should feel like they are remembering something, not reading something.
Layout System
Image Treatment
- Full viewport,
object-fit: cover
- Heavy vignette: radial gradient from transparent center to near-black edges
- Breathing effect: subtle scale pulse
1.0 -> 1.02 -> 1.0 over 4s, infinite, ease-in-out
- No Ken Burns — the breathing replaces drift. Drift is cinematic. Breathing is biological.
- Image should feel like it is looking at you, not the other way around
Text Treatment
- Center-screen overlay: absolutely positioned, centered both axes
- Max-width: 500px — narrow column forces intimate reading distance
- Text appears with slow fade-in (0.8s ease-in) — like thoughts forming, not words appearing
- NO typewriter effect — typewriter is performative. Fade-in is internal.
- Heavy text-shadow for readability:
0 0 30px rgba(0,0,0,0.9), 0 0 60px rgba(0,0,0,0.7)
- Text fades out on click (0.3s), new text fades in after image transition (0.5s delay)
Typography
- Main text: Crimson Pro, 1.6rem, line-height 1.9, centered, #f0f0f0
- Nothing else. No headers. No labels. No metadata. Just the voice.
- Letter-spacing: 0.01em — barely perceptible, but adds contemplative spacing
Color Approach
- NO accent colors. No amber. No brass. The template is monochromatic.
- Text: near-white (#f0f0f0)
- Vignette: radial gradient to rgba(0,0,0,0.85)
- Text shadow: pure black at high opacity — for readability, not style
- The image provides all color. The template provides only darkness and text.
Transitions
- Crossfade: 1.5s ease — the slowest transition of any template
- Text fades out 0.3s before image begins to crossfade
- New text fades in 0.5s after image has settled
- The gap between old text vanishing and new text appearing is intentional — the silence between thoughts
Presentation Block
{
"layout": "cinematic",
"show_speaker_badge": false,
"image_sizing": "cover",
"text_position": "overlay-center",
"transition": "crossfade",
"typewriter_speed": 0,
"viewer_style": "first-person"
}
Key CSS Patterns
/* Breathing image */
.fp-image {
position: absolute;
inset: 0;
width: 100%;
height: 100vh;
object-fit: cover;
animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
0%, 100% { transform: scale(1.0); }
50% { transform: scale(1.02); }
}
/* Vignette overlay — tunnel vision */
.vignette {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 30%,
rgba(0, 0, 0, 0.3) 55%,
rgba(0, 0, 0, 0.65) 75%,
rgba(0, 0, 0, 0.85) 100%
);
z-index: 1;
pointer-events: none;
}
/* Center-screen text */
.fp-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 500px;
text-align: center;
font-family: 'Crimson Pro', serif;
font-size: 1.6rem;
line-height: 1.9;
letter-spacing: 0.01em;
color: #f0f0f0;
text-shadow:
0 0 30px rgba(0, 0, 0, 0.9),
0 0 60px rgba(0, 0, 0, 0.7);
z-index: 2;
opacity: 0;
transition: opacity 0.8s ease-in;
}
.fp-text.visible {
opacity: 1;
}
.fp-text.exiting {
transition: opacity 0.3s ease-out;
opacity: 0;
}
/* Kill ALL UI chrome */
.progress-bar,
.panel-counter,
.stage-label,
.speaker-badge,
.navigation-arrows,
.panel-number,
.accent-line,
.header-bar {
display: none !important;
}
/* Click-anywhere to advance */
.fp-viewport {
cursor: none;
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
/* Custom cursor — subtle dot that appears on move */
.fp-viewport::after {
content: '';
position: fixed;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
pointer-events: none;
z-index: 100;
opacity: 0;
transition: opacity 0.3s;
}
.fp-viewport:hover::after {
opacity: 1;
}
/* Slow crossfade */
.fp-image.exiting {
animation: slow-fade-out 1.5s ease forwards;
}
.fp-image.entering {
animation: slow-fade-in 1.5s ease forwards;
}
@keyframes slow-fade-out { to { opacity: 0; } }
@keyframes slow-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* No scrollbar, no overflow */
body.first-person-mode {
overflow: hidden;
margin: 0;
padding: 0;
background: #000;
}
Common Mistakes
- Any visible UI — progress bars, panel numbers, arrows, headers. ALL of them must be hidden. The moment the reader sees interface, the spell breaks
- Typewriter effect — this template uses fade-in. Typewriter is theatrical. Fade-in is psychological.
- Ken Burns drift — breathing replaces drift. Drift makes images feel distant. Breathing makes them feel present.
- Too many panels — this template exhausts the reader. 15-20 panels max. Beyond that, switch to magazine or cinematic
- Accent colors — no amber, no brass, no colored accents. This template is black, white, and whatever the image provides
- Text too small — 1.6rem minimum. The text must be large enough to read without effort. Reading effort breaks immersion
- Vignette too light — the edges must be near-black. The tunnel vision is not optional, it is the design
- Missing text-shadow — without heavy shadow, text becomes unreadable on light images. The shadow is structural, not decorative
- Fast transitions — 1.5s minimum crossfade. This template moves at the speed of thought, not the speed of browsing
Reference
Path to the HTML reference template: viewer-templates/first-person.html