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.Make it yours. 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.
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.
- Claude Opus 5.5
- HTML and CSS
- Plain JavaScript
- $482.63 API, 100 pages
How it was made
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.
$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
Claude Opus 5.5 · HTML and CSS · Plain JavaScript
Source and credit
X · Sep 22, 2026 · 3.9k likes · 595k views · 187 comments
Authorship not stated by the source
Published instructions: 008-lighthouse-longform.txt in the repo, under "PROMPT (exact prompt used)"
Look notesby Reference
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.
