Film Reel Timeline
Vertical cinema reel with sprocket-hole borders top and bottom, three-column frames (frame number, scene still, director notes), and an Italianate Playfair display headline. Built for production diaries, film festival retrospectives, and any project broken into named phases.
Film Reel Timeline the 4th of 24 designs in the 24 CSS Timeline Layouts collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<section class="tl4-wrap">
<header class="tl4-head">
<div class="tl4-overline">A Production Diary · Calendar Year MMXXV</div>
<h2 class="tl4-title">The Last <strong>Lighthouse</strong></h2>
<div class="tl4-credits">Dir. Helena Vance · Prod. Auteur Pictures · 35mm</div>
</header>
<div class="tl4-reel">
<article class="tl4-frame">
<div class="tl4-num">
<div class="tl4-n">I</div>
<div class="tl4-num-lbl">Dev</div>
</div>
<div class="tl4-still">
<div class="tl4-scene">
<strong class="tl4-phase">Phase · Development</strong>
The script arrives in seventeen drafts, each <em>quieter</em> than the last.
</div>
<div class="tl4-slate">FEB 2024 — SEP 2024 · 7 months</div>
</div>
<div class="tl4-notes">
<p>Vance options the Carrigan novella in February. By May, the first treatment removes nearly all dialogue from Act II. Greenlit at $4.2M.</p>
<div class="tl4-director">"I want it to feel like the audience is also a guest at the lighthouse, unsure if they should be there." — H.V., production notes</div>
</div>
</article>
<article class="tl4-frame">
<div class="tl4-num">
<div class="tl4-n">II</div>
<div class="tl4-num-lbl">Pre</div>
</div>
<div class="tl4-still">
<div class="tl4-scene">
<strong class="tl4-phase">Phase · Pre-production</strong>
A coastline is chosen for its <em>refusal to behave</em>.
</div>
<div class="tl4-slate">OCT 2024 — JAN 2025 · 4 months</div>
</div>
<div class="tl4-notes">
<p>Location scouting along the Orkney archipelago. Eilean Mòr cleared with Trust for Scotland after three rejections. Cast: McTavish, Okwukwe, Andersson.</p>
<div class="tl4-director">"The lighthouse keeps its own counsel. We adjust to it." — Production designer Imani Royle</div>
</div>
</article>
<article class="tl4-frame">
<div class="tl4-num">
<div class="tl4-n">III</div>
<div class="tl4-num-lbl">Shoot</div>
</div>
<div class="tl4-still">
<div class="tl4-scene">
<strong class="tl4-phase">Phase · Principal Photography</strong>
Forty-two days, nineteen of which are <em>unusable for weather</em>.
</div>
<div class="tl4-slate">FEB 2025 — APR 2025 · 60 days scheduled</div>
</div>
<div class="tl4-notes">
<p>Generator failure on day 8 destroys eight reels of magic-hour exterior. Reshot under impossibly similar light on day 31 — a small miracle credited to gaffer J. Sallows.</p>
<div class="tl4-director">"Day 31 was a gift. We do not deserve day 31." — H.V., daily journal</div>
</div>
</article>
<article class="tl4-frame">
<div class="tl4-num">
<div class="tl4-n">IV</div>
<div class="tl4-num-lbl">Post</div>
</div>
<div class="tl4-still">
<div class="tl4-scene">
<strong class="tl4-phase">Phase · Post-production</strong>
Six months of <em>cutting silence</em>.
</div>
<div class="tl4-slate">MAY 2025 — OCT 2025 · 6 months</div>
</div>
<div class="tl4-notes">
<p>First assembly runs 187 minutes. Final cut at 104. Sound designer L. Mbeki records 38 distinct varieties of wind on a custom rig.</p>
<div class="tl4-director">"You don't edit toward a runtime. You edit toward a heartbeat." — Editor Sofia Larsen</div>
</div>
</article>
<article class="tl4-frame">
<div class="tl4-num">
<div class="tl4-n">V</div>
<div class="tl4-num-lbl">Score</div>
</div>
<div class="tl4-still">
<div class="tl4-scene">
<strong class="tl4-phase">Phase · Scoring</strong>
A composer who promises <em>almost no notes</em>.
</div>
<div class="tl4-slate">AUG 2025 — NOV 2025 · 4 months overlap</div>
</div>
<div class="tl4-notes">
<p>Hildur Stefánsdóttir records with 14 strings and a single bass clarinet. Final score is 31 minutes against a 104-minute film. The silence is the score's instrument too.</p>
<div class="tl4-director">"Most films use music to fill. We use it to make the silence audible." — H.S.</div>
</div>
</article>
<article class="tl4-frame">
<div class="tl4-num">
<div class="tl4-n">VI</div>
<div class="tl4-num-lbl">Out</div>
</div>
<div class="tl4-still">
<div class="tl4-scene">
<strong class="tl4-phase">Phase · Release</strong>
A premiere in <em>October light</em>.
</div>
<div class="tl4-slate">11 OCT 2025 · London Film Festival</div>
</div>
<div class="tl4-notes">
<p>World premiere at the BFI Southbank. Standing ovation: 9 minutes. Picked up by A24 for North American distribution within the week.</p>
<div class="tl4-director">"For two hours, the audience was a fourth keeper at the lighthouse." — Variety review</div>
</div>
</article>
</div>
</section> .tl4-wrap {
background: #1c0e08;
color: #e8d8b8;
font-family: 'Special Elite', ui-monospace, monospace;
padding: 2.5rem 2rem 4rem;
}
.tl4-head {
margin-bottom: 2.5rem;
text-align: center;
}
.tl4-overline {
font-size: 11px;
letter-spacing: 0.4em;
color: #d4a574;
text-transform: uppercase;
margin-bottom: 1rem;
}
.tl4-title {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: clamp(2rem, 6vw, 4rem);
line-height: 1;
color: #f0dfb8;
margin: 0;
}
.tl4-title strong {
font-style: normal;
font-weight: 900;
display: block;
color: #c4391f;
letter-spacing: -0.02em;
text-transform: uppercase;
-webkit-text-stroke: 1px #f0dfb8;
}
.tl4-credits {
font-size: 10px;
color: #a08770;
margin-top: 1rem;
letter-spacing: 0.15em;
}
.tl4-reel {
position: relative;
max-width: 1000px;
margin: 0 auto;
background: #0d0604;
border-top: 22px solid #2a1810;
border-bottom: 22px solid #2a1810;
box-shadow:
inset 0 26px 50px rgba(0,0,0,0.6),
0 24px 60px rgba(0,0,0,0.8);
}
.tl4-reel::before, .tl4-reel::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 22px;
background-image: radial-gradient(circle at 14px center, #f0dfb8 0 5px, transparent 6px);
background-size: 28px 22px;
background-repeat: repeat-x;
}
.tl4-reel::before { top: -22px; }
.tl4-reel::after { bottom: -22px; }
.tl4-frame {
display: grid;
grid-template-columns: 70px 1fr 1fr;
border-bottom: 1px solid #2a1810;
min-height: 180px;
position: relative;
transition: background 0.4s;
cursor: pointer;
}
.tl4-frame:last-child { border-bottom: none; }
.tl4-frame:hover { background: rgba(196,57,31,0.08); }
.tl4-num {
border-right: 1px solid #2a1810;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.25rem 0;
background: #0a0402;
color: #d4a574;
}
.tl4-n {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 2rem;
line-height: 1;
color: #f0dfb8;
}
.tl4-num-lbl {
font-size: 9px;
letter-spacing: 0.25em;
margin-top: 0.75rem;
text-transform: uppercase;
color: #a08770;
writing-mode: vertical-rl;
}
.tl4-still {
border-right: 1px solid #2a1810;
padding: 1.25rem;
background: linear-gradient(135deg, #1a0c06, #0d0604);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tl4-scene {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 1.25rem;
line-height: 1.2;
color: #f0dfb8;
}
.tl4-phase {
font-style: normal;
font-weight: 900;
text-transform: uppercase;
color: #c4391f;
font-size: 12px;
display: block;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
.tl4-slate {
font-size: 10px;
color: #a08770;
letter-spacing: 0.15em;
text-transform: uppercase;
border-top: 1px dashed #5a4030;
padding-top: 0.5rem;
}
.tl4-notes {
padding: 1.25rem;
font-size: 11.5px;
line-height: 1.7;
color: #c4b090;
}
.tl4-notes p { margin: 0 0 0.5rem; }
.tl4-director {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 12.5px;
color: #d4a574;
border-left: 2px solid #c4391f;
padding-left: 0.75rem;
margin-top: 0.75rem;
}
@media (max-width: 720px) {
.tl4-frame { grid-template-columns: 50px 1fr; }
.tl4-notes { grid-column: 1 / -1; border-top: 1px solid #2a1810; }
}