Editorial Story Spread

Quick Start

Keep index.html and assets/ together and serve through your usual web server. No buyer build step. The demo loads GSAP 3.15.0 core and ScrollTrigger from jsDelivr, and Literata/Work Sans from Google Fonts.

For an existing page, copy the complete <section class="tw-story" data-tw-story> between the extractable boundary comments. Include its stylesheet, the font link, GSAP core, ScrollTrigger and readable script once. Preserve asset paths or adjust them for your host. The standalone preview includes gentle Lenis wheel smoothing, driven from the same GSAP clock as ScrollTrigger. Touch scrolling remains native. Reduced motion disables it, including preference changes while mounted; ?smooth=off uses native scrolling for comparison. The Lenis tag and preview initializer outside the extractable section are demo context: omit them when embedding, letting your host own page scrolling. window.destroyTideworkPreview() removes the preview smoother and its clock/listeners.

The outer <main> and inline body style are standalone preview context; omit them when the host already provides its main landmark and page styling.

Code snippet omitted: it ships with the download.

The supplied inline script inside the root is an optional first-paint guard, scoped to that story's photographs. Keep it when extracting the whole root. It releases at DOM readiness even if GSAP or the main section script fails; with no JavaScript or reduced motion it never hides the photos. Removing the inline guard leaves the static-to-enhanced layout visible briefly during startup without changing functionality.

Make it yours

Edit the story title, deck, chapter headings, prose, captions and disclosure directly in HTML. The classes carry typography; use the heading levels your host needs. The native contents and return links are ordinary local anchors.

Brand controls are grouped on .tw-story: ground, ink, secondary, rule and accent; RGB triples; serif/sans font roles; maximum width, gutter, reading measure, gap and corner. For example:

Code snippet omitted: it ships with the download.

Measure contrast after changing colors. Meaningful text uses solid grounds; the initial ink/ground measures 9.24:1 and secondary/ground 6.00:1. One finished sage design ships, with no demo theme picker.

Replace photographs

Every [data-tw-chapter] article owns one ordinary [data-tw-photo] figure, with an <img> and <figcaption>. Desktop enhancement temporarily moves those figures into the section's own rail, then restores them at teardown. Edit the original figure in the article.

File	Recommended source	Focal position
assets/img/rockpool.webp	Landscape, at least 1536px wide	50% 55%
assets/img/seaweed.webp	Portrait, about 900 × 1350	50% 50%
assets/img/shoreline.webp	Landscape, about 1200 × 800	67% 50%

Use any suitably licensed local photo. Change src, intrinsic width/height, descriptive alt, and the adjacent caption. The figure's --tw-position controls the image focal point in both the live rail and static frame. --tw-ratio controls the static desktop frame; the named container rules choose phone ratios. The live desktop rail deliberately uses one large frame for all subjects. Crop and preview your replacement at that frame size and on phones. No subject-specific SVG path, image generation or animation change is needed.

The first image loads promptly. Enhancement preloads the later photographs before they can enter the rail. Lazy loading remains available in the static markup/fallback.

Add, remove or reorder chapters

Add a [data-tw-chapter] article with a unique authored ID, one [data-tw-photo] figure, and a .tw-prose block containing its heading/text. Add one matching [data-tw-link] contents anchor whose href="#chapter-id" points to that article. Remove or reorder an article and its matching contents link together. Counts, chapter lengths, photo handoffs and selection are derived from that markup; no duplicate content array or fixed count needs editing.

A single chapter opens and holds its image without a redundant closing handoff. There is no enforced maximum; use enough writing to give each photograph a meaningful reading beat. Longer copy extends its natural chapter and recalculates the aperture range.

Multiple no-JavaScript instances need unique authored title IDs, aria-labelledby, chapter IDs and matching hrefs. With GSAP available, the runtime assigns unique IDs per instance and restores the authored values on teardown.

Motion and lifecycle

Set these options on the root separately from brand tokens:

• data-aperture-scrub="0.14": seconds of scrub smoothing; 0 links the response directly to scroll.
• data-aperture-scale="1.42": initial close-view scale, clamped from 1 to 1.8. Set 1 to keep the image scale constant while the frame opens.

Desktop reading progress drives an open/hold/close envelope through each actual chapter, with the next image exchanged behind the closed aperture. The last chapter holds open as the reader leaves. The photo rail uses CSS sticky; no ScrollTrigger pin, Lenis or custom wheel owner is installed. Below 900px root width, each local photo opens while entering the viewport, holds visibly, and closes as it leaves. Captions and prose remain outside the moving crop.

Code snippet omitted: it ships with the download.

Repeated mounting does not stack triggers/listeners. Each story owns its GSAP/media contexts, resize observer, load listeners, generated rail/wrappers and moved-node homes. Font, image and container changes refresh its measurements. Teardown restores full photography, original markup placement and authored attributes while preserving unrelated host animations.

Accessibility and integration

Native anchors support keyboard and touch, with visible focus and 44px minimum hit heights. Every passage remains in ordinary reading order. No panel selection hides text. Reduced motion presents the complete static essay with all photographs open; changing the preference while mounted rebuilds that static state. Missing dependencies and no JavaScript retain all content and native links.

Desktop sticky needs an ancestor that permits sticky positioning; an overflow-clipping host ancestor can prevent the rail from holding. The body keeps its full natural scroll length and releases at its own end. Phones and narrow columns use in-flow photos. The catalogue's previewScroll setting supplies internal reading scroll in the canonical preview; an ordinary buyer page simply uses its native document scroll.

Source checks cover desktop/laptop/mobile/narrow states, aperture progression and reversal, keyboard/touch, reduced-motion changes, no-JavaScript/blocked scripts, independent instances, teardown/remount, chapter edits and ordinary photo replacement. This does not promise compatibility with every framework, CSP or arbitrary color choice.

Dependencies and credits

• GSAP core and ScrollTrigger. Source uses 3.15.0, with a GSAP 3.12+ compatibility floor; follow GSAP's applicable license.
• Literata and Work Sans via Google Fonts, under the SIL Open Font License. Self-host them if your host's privacy/CSP requirements need it.
• Three original AI-generated concept photographs from built-in imagegen. They do not document a real location, writer, event or client outcome; no exclusivity is claimed. Use is subject to the product license.
• Tidework and the essay are fictional sample content. Replace the visible disclosure with accurate credits for your own published story.