# Long-read story on lighthouse keepers

> A typography-led magazine feature on cream paper: a lighthouse at dusk under the headline, pull quotes, margin notes, and a sky that turns from dusk to night as you read. One of 100 single-file pages Claude Opus 5.5 made with no libraries or web fonts.

- Kind: Website
- Live website: https://miaai-lab.github.io/Claude-Opus-5.5-100-HTML-Files/008-lighthouse-longform.html
- Page: https://meetreference.com/v/long-read-story-lighthouse-keepers/
- Ready-to-use agent handoff: https://meetreference.com/v/long-read-story-lighthouse-keepers/agent.txt
- Exact prompt as plain text: https://meetreference.com/v/long-read-story-lighthouse-keepers/prompt.txt
- Authorship: Not stated
- Made with: Not stated
- Model: Claude Opus 5.5
- Built with: HTML and CSS, Plain JavaScript
- Style: Editorial; editorial, long read, serif, scrollytelling, svg illustration, magazine, single html file, night sky
- Shared by @MiaAI_lab in X, Sep 22, 2026: https://x.com/MiaAI_lab/status/2102490829306634560
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

## Recreating this website

These are the creator's published instructions, unedited.

To adapt it: Replace the story ("The Last Keepers — Life at the Edge of the Light", lighthouse keepers) and the palette line with your own subject and colors, and keep the typography and scroll-storytelling sentences. The shared requirements at the end keep it to one file with no libraries.

## Prompt

```text
Design a long-read editorial feature: "The Last Keepers — Life at the Edge of the Light", a fictional magazine story about lighthouse keepers. Write original, evocative literary prose (~900 words), impressionistic rather than presenting invented facts as real history. Typography-led: a classic book serif ("Iowan Old Style", "Palatino Linotype", Palatino, "P052", Georgia, serif) for body text at a comfortable measure, a large Didone-feeling headline, an ornamental drop cap, small-caps bylines, pull quotes that break the column, and marginal notes on wide screens. Palette: cream paper #f6f1e7, ink navy #14213d, signal red #c0392b, fog grey. Hero: a full-bleed SVG illustration of a lighthouse on rocks at dusk with a rotating light beam that sweeps across the headline and a gently animated sea. Scroll storytelling: sections fade and rise in; a reading-progress bar styled as a lighthouse beam; a section where the background shifts from dusk to night as you scroll; and an illustrated "anatomy of a lens" figure (Fresnel lens rings) that assembles on scroll. Footnotes pop up on click. Must read beautifully on phones.

SHARED REQUIREMENTS (apply to every page in this 100-page collection):
1. One standalone HTML5 file. All CSS inline in <style>, all JavaScript inline in <script>. No external resources of any kind: no CDN, no libraries, no web fonts, no external images/SVG/audio files, no network requests. All visuals come from CSS, inline SVG, Canvas and procedural code.
2. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, a viewport meta tag, a meaningful <title> and meta description, well-nested semantic markup, unique ids, labels/aria attributes for controls, <button type="button"> for actions.
3. Typography from local system font stacks only, always ending in a generic family; display lettering may be drawn with SVG or Canvas.
4. Responsive from 360px phones to large desktops with no horizontal page scroll; canvases match their container and devicePixelRatio (capped at 2) and re-layout on resize.
5. Works offline by opening the file directly (file://); no console errors; storage access guarded with try/catch.
6. Smooth motion via requestAnimationFrame and transform/opacity; animation pauses when the tab is hidden where it matters; honours prefers-reduced-motion with a calmer fallback.
7. Pointer events so mouse and touch both work; visible :focus-visible styles; keyboard support where it makes sense.
8. Any sound is synthesized with the Web Audio API, starts only after a user gesture, and has a visible mute/toggle.
9. Premium finish: a deliberate palette and spacing, polished micro-interactions, a beautiful first frame before any interaction, and original copy (no lorem ipsum). Factual content must be accurate; fictional brands, people and data are clearly fictional.
10. Quality bar: visually impressive, bookmark-worthy, showcase-grade, premium, full of delightful details, and clearly distinct from the other 99 pages in concept, layout, palette, typography and motion.
```

## What it looks like

Written by Reference from the recording frames, not by the creator.

A dusk seascape with a red-and-white lighthouse opens the story, then cream pages of serif prose give way to a deep blue night with a moon, a clock, and a keeper's log, before returning to paper for the lens chapter and the notes.

- Color: Cream paper, ink navy, signal red for numerals and accents, and a sky of violet, peach, and indigo.
- Type: A large Didone-style serif headline with an italic "Last", an italic standfirst, small-caps bylines and running heads, a boxed drop cap, red roman chapter numerals, and italic pull quotes.
- Framing: 16:10. A navy masthead with a beam-shaped progress bar stays at the top. Prose runs in one centered column; on the night sections a boxed log sits at the right.
- Structure: Hero titled "The Last Keepers", the standfirst and a drop-cap opening, the pull quote "Darkness was never the enemy. Darkness was the job.", the night watch as the clock runs from 19:40 to 01:59, a wave edge into III The Lens and its diagram, IV The Last Light, the endnotes, and a navy Tidewater Quarterly colophon.

Storyboard, nine frames spread across the recording: https://meetreference.com/media/long-read-story-lighthouse-keepers/storyboard.webp

- Frame 1 at 1.4s: https://meetreference.com/media/long-read-story-lighthouse-keepers/f1.webp
- Frame 2 at 4.2s: https://meetreference.com/media/long-read-story-lighthouse-keepers/f2.webp
- Frame 3 at 6.9s: https://meetreference.com/media/long-read-story-lighthouse-keepers/f3.webp
- Frame 4 at 9.7s: https://meetreference.com/media/long-read-story-lighthouse-keepers/f4.webp
- Frame 5 at 12.5s: https://meetreference.com/media/long-read-story-lighthouse-keepers/f5.webp
- Frame 6 at 15.3s: https://meetreference.com/media/long-read-story-lighthouse-keepers/f6.webp
- Frame 7 at 18.1s: https://meetreference.com/media/long-read-story-lighthouse-keepers/f7.webp
- Frame 8 at 20.8s: https://meetreference.com/media/long-read-story-lighthouse-keepers/f8.webp
- Frame 9 at 23.6s: https://meetreference.com/media/long-read-story-lighthouse-keepers/f9.webp

## How it was made, per the creator

- Reported spend: $482.63 at API prices for all 100 pages, which the creator says came to 75% of a 5-hour limit on a Max 20x plan
- Notes: The creator's own request for the set is only described in the post ("look stunning", "zero repetitive designs", "go full creative mode"), and they replied that it was all one prompt. The repo says each page had its own brief and the work was split across 20 parallel Opus 5.5 agents, so this brief, published as the exact prompt for this page, was most likely written by the orchestrating agent rather than typed by the creator. Every page was rendered in headless Chromium at desktop and phone sizes and reviewed from screenshots before it was accepted.

## Links

- Visit site: https://miaai-lab.github.io/Claude-Opus-5.5-100-HTML-Files/008-lighthouse-longform.html
- Original post: https://x.com/MiaAI_lab/status/2102490829306634560
- All 100 pages with their prompts: https://miaai-lab.github.io/Claude-Opus-5.5-100-HTML-Files/
- Prompt file: https://github.com/MiaAI-Lab/Claude-Opus-5.5-100-HTML-Files/blob/main/008-lighthouse-longform.txt