Customer Proof Ledger

Quick Start

Load the stylesheet, GSAP core and the section script:

Code snippet omitted: it ships with the download.

Copy from <section class="cpl" data-customer-proof-ledger> through its matching closing tag, including the small inline boot script. That script hides the later stories before the first paint and releases them automatically if the enhancement does not mount. The body background in index.html is preview context, not section code.

Make it yours

Each [data-proof-story] article is one complete edit point. Change its data-customer, data-sector, data-proof and data-announcement values, then edit the photograph, result, heading, quote, attribution and native details content inside the same article. The selector and count are built from those articles, so there is no separate content array to maintain.

The bundled images are ordinary local files:

Story	File	Bundled size	Suggested replacement	Crop control
Tern Cycles	assets/img/tern-cycles.webp	1536 × 1024	Landscape, at least 1536px wide	--cpl-focus: 47% 48% on its article
Redwood Bakery	assets/img/redwood-bakery.webp	1536 × 1024	Landscape, at least 1536px wide	--cpl-focus: 55% 50%
Northlight Press	assets/img/northlight-press.webp	1536 × 1024	Landscape, at least 1536px wide	--cpl-focus: 50% 52%

Replace an image by overwriting the WebP at the same path, or change the src, width, height and alt attributes in that story. Adjust its local --cpl-focus value to keep the subject in the flexible desktop and mobile 4:3 crops. A portrait or unusually wide source still works because the frame uses object-fit: cover; check both crops and write alt text for the replacement. No animation code refers to the photographed subject.

To add a customer, duplicate one complete [data-proof-story] article and update all content and image fields. To remove or reorder customers, remove or move complete articles. One article is supported; its redundant selector is hidden. There is no fixed maximum, although a short set of three to five choices keeps the comparison easy to scan.

Rebrand the variables at the top of assets/style.css:

Code snippet omitted: it ships with the download.

Retest text, focus and accent contrast after changing the palette. The main result works best as a short value plus a short qualifier; longer story headings wrap naturally in the evidence column. The quote and attribution live in the separate .cpl__testimonial below the photograph and evidence. The horizontal customer choices keep the full width available to the active story.

Behaviour and options

data-duration="0.54" on the root controls the photo blend and sequential text reveal in seconds. Set it to 0 for an instant change. Reduced-motion preferences always use the instant path.

Every root mounts independently and exposes an instance API:

Code snippet omitted: it ships with the download.

activate(index, focusTab, announce) uses a zero-based story index. destroy() removes generated controls, IDs, listeners, observer and owned GSAP work, then restores the complete stacked document. Repeated input keeps the current blend smooth and queues only the latest requested story. Photographs blend over an opaque backing; old text fades out before new text appears in the evidence and testimonial areas. Inactive stories reserve the shared grid height while remaining invisible and unavailable to keyboard and assistive technology.

Accessibility and integration

• Pointer, touch and keyboard use the same selection path. Arrow keys wrap; Home and End jump to the first and last story.
• The active button uses roving focus and a polite live region announces the selected fictional customer and result.
• Native working-note disclosures remain operable with keyboard, touch, no JavaScript and blocked GSAP.
• With no JavaScript all three articles are visible. If GSAP is unavailable, the boot gate is removed and the same complete fallback remains.
• Reduced motion changes stories immediately and can change while mounted.
• The section uses an h2; change that tag to fit the host page outline without changing its class.
• The layout is container-aware and works in a narrow host column. It does not pin, intercept scrolling, install smooth scrolling or require full viewport width.
• Two instances can coexist because controls, IDs, measurements and teardown remain inside each root. Destroy an instance before a framework removes it.

Dependencies and credits

• GSAP 3.12+; the demo is pinned to 3.15.0.
• Tern Cycles, Redwood Bakery and Northlight Press are fictional examples. Their quotes and results are illustrative and must be replaced with verified, authorised evidence before publication.
• The three workplace photographs were generated with OpenAI's image generation tool on 20 September 2026. They are concept scenes and do not depict real customers or testimonial subjects. Baked WebP files ship in assets/img/; compressed JPEG masters and prompts remain authoring inputs in assets/img-src/ and are excluded from the buyer download.