Long-Form Story Template Template
A one-page long read laid out for reading: a single 68-character measure on a pale celery ground, a sticky chapter spine with a scrubbed plum progress thread, inline-SVG figures that break the column, and four principle cards that stack into a deck as the section pins.
About This Template
A production-ready one-page site for a single long read, built around a reading experience rather than a business type. It ships as a fictional publication, Fieldnote, carrying a first-person account of rebuilding a small manufacturing workshop over four years, so what you open is a finished article and not a skeleton with placeholder headings.
The page is one ground and one measure throughout: pale celery paper, near-black ink, a plum accent that is dark enough to carry body copy, and a single raised card surface. Prose sits at a real reading size in a column of about sixty-eight characters, and the only things allowed out of that column are two figures drawn entirely in inline SVG, a plotted quarterly timeline and an annotated section through the workshop.
Two pieces of behaviour carry it. A sticky chapter spine runs down the left margin above 1100px, its tick expanding and its chapter name unfurling as you pass, with a plum thread that fills the rule by stroke-dashoffset as you descend; below 1100px the spine becomes a slim fixed progress bar at the top of the viewport. Then the principles section pins and its four cards stack over one another, each incoming card sliding up, overshooting a few pixels and settling while the cards beneath scale down, dim and lean in sequence, so a visible deck builds under your thumb.
Making it yours is a copy job and a four-value repaint. Replace the article text, the chapter titles and the two figures' data; change the four colour tokens and their RGB triples in the token block and the whole page reskins with no stray literals left behind. Every section is found by a data attribute and guarded, so a buyer can delete the figures, the principles, the evidence table or the endnote and the rest still runs.
What's Included
- A complete long read as shipped copy: opening with a hairline meta rule, four chapters of real prose with a drop cap, a stacking principles section, two pull quotes with a five-row ledger, endnote, about block and footer
- Signature scroll stack: the principles section pins and four cards build into a deck, the locking card overshooting and relaxing while the cards beneath compress in a stagger and a live counter reports the position
- Sticky chapter spine above 1100px with real anchor links, an expanding tick, an unfurling chapter name, and a plum reading thread drawn by stroke-dashoffset with no extra plugin
- Slim fixed reading-progress bar below 1100px, whose measured height is what the pinned section starts below so the deck is never hidden underneath it
- Two designed inline-SVG figures that break the reading column: a plotted quarterly timeline with a called-out event, and an annotated cross-section with dimensions, a hatched ground and a scale bar
- One measure everywhere, set as a token: prose at a real reading size in about sixty-eight characters a line, with a three-column grid that lets a figure break out without a negative margin
- Four-token palette with RGB triples and every measured contrast ratio written into the stylesheet header, so a reskin is four values and a reader never lands on unreadable type
- Hairline-ruled data table with a real caption and row headers, scrollable on a phone rather than crushed
- Lenis smooth scrolling wired in, kept in lockstep with the pinned stack, anchors routed through it, and entirely optional
- Accessible throughout: the stack degrades to a plain readable list with no JavaScript, under reduced motion and on viewports too short to hold a deck; following a spine link moves keyboard focus into the chapter; every figure has a title and description
Perfect For
- Company or founder stories that need to read as an essay rather than an about page
- Case studies and project write-ups where the argument matters more than the screenshots
- Research summaries, white papers and technical write-ups with charts and diagrams in the flow of the text
- Annual reviews and impact reports that want figures inside the prose instead of a slide deck
- Independent publications and newsletters publishing one long piece at a time
- Product stories and manufacturing or process pieces where a timeline and a schematic do the explaining
How It Works
Structure
One script initialises every section inside a single gsap.context with one gsap.matchMedia, keyed on motion preference, width and viewport height so exactly one branch runs on every device including a phone. Each section is found by a data attribute and guarded, so deleting the figures, the stack, the table or the endnote leaves everything else working. The whole page is a complete static document before any script runs: the article, the figures and the four cards are all markup.
The reading chrome
A single ScrollTrigger spanning the article drives both the spine thread and the mobile progress bar. The thread is a plain SVG path carrying pathLength="1", so its dash units are normalised and the script only has to set stroke-dashoffset between 1 and 0, no drawing plugin involved. A second set of triggers, one per chapter with contiguous bands, marks the current chapter: exactly one is ever current, so jumping straight to an anchor still lands inside a band.
The card stack
The stage pins below the fixed progress bar, whose height is measured live rather than assumed, and a scrubbed timeline slides each card up into place. The locking card overshoots four pixels and relaxes; the cards already locked drop one depth level each, scaling, dimming and leaning with a small stagger so the deck compresses in sequence rather than snapping as a block. Every distance is a function with invalidateOnRefresh, everything moves on pixel y rather than a mix of units, and the first card stays in normal flow so the deck's height is measured rather than guessed.
Reduced motion and short screens
The plain vertical list of four cards is the default, in both the markup and the CSS; the pinned deck is a class the script adds. So a reduced-motion visitor, and anyone on a viewport too short to show a card with the deck behind it, gets the readable list instead of a frozen pin, and the depth offsets and number of visible cards are reduced below 700px so the deck can never overflow a phone. Reading progress and the chapter spy still run in the reduced-motion branch, because they report position rather than animate.
Without JavaScript
The gating class goes on in the head before first paint, so reveal start states apply to the first frame and nothing is painted visible and then hidden; the script removes that class if GSAP is missing, so a blocked CDN degrades to the plain document rather than hiding content forever. With scripting off the chapter spine is still a working list of anchor links with its thread drawn full, the progress bar is hidden rather than left empty, the cards are a plain list, and both figures render exactly as drawn.