# Customer Proof Ledger

> A photography-led customer story section pairing three clear customer choices with a large workplace image, illustrative result, quote and expandable working note.

Canonical: https://gsapvault.com/sections/customer-proof-ledger-section
Live demo: https://gsapvault.com/demos/customer-proof-ledger-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | accessible-tabs, generated-photography, crossfade, queued-transitions, progressive-enhancement, responsive-section |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

Customer Proof Ledger turns customer evidence into an editorial case-study spread rather than another row of testimonial cards. Three fictional customer stories pair a large photograph of the work with one legible outcome, a concise quote and a native working-note disclosure. Every image, claim and attribution is explicitly presented as sample content.

A horizontal customer index sits above a spacious two-column spread. The photograph and outcome have their own space, while the quote and attribution form a separate full-width testimonial below. Warm paper, restrained labels and serif-led headlines establish the hierarchy without a boxed card. Generated workplace photography makes each example specific without implying a real customer portrait.

Selection is accessible by pointer, touch and keyboard. Motion connects the chosen index entry to its photograph and story with a smooth photo blend and sequential text reveal; repeated input settles on the latest request, and reduced motion changes stories instantly. Without JavaScript or GSAP, all three complete stories remain readable in document order.

## Features

- Three complete fictional customer stories with large generated workplace photographs
- Spacious image-and-outcome spread with a separate full-width testimonial and expandable working note
- Clear customer index with Arrow key, Home and End navigation
- Smooth photo blends and sequential story reveals that settle on the latest choice
- Native details disclosures for longer challenge and change notes
- Complete stacked fallback with no JavaScript or blocked GSAP
- Instant reduced-motion state changes and visible keyboard focus
- Root-scoped brand tokens, container-aware layouts, independent instances and teardown

## Use Cases

- SaaS and platform customer-story sections
- Agency and consultancy outcome-led case studies
- Manufacturers documenting workflow improvements
- Nonprofits presenting programme stories with verified evidence

## Vibe-Code Ready Setup

This website section includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

Each story combines its own customer identity, photograph, outcome, quote and working note. The customer index changes that complete composition as one state, so the selected image and evidence never drift apart. A smooth photo blend and sequential text reveal keep the evidence and testimonial areas steady during each exchange, while rapid changes always resolve to the final choice.

The section keeps every story in the page as real semantic content. With enhancement available, the index becomes an accessible tab interface and only the chosen spread is shown. Reduced motion keeps the same selection experience without transition, while a missing dependency or disabled JavaScript leaves all three stories available as a readable sequence.

The worked example uses generated concept photography and explicitly fictional claims. Buyers replace those ordinary local images and the adjacent story copy with authorised customer material; adding or removing a complete story automatically updates the selector and count.

## Documentation

How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### 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](https://gsap.com/) 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.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This website section is included only in the Vault, for existing and new owners. It is not sold individually. The standard licence covers unlimited personal and commercial projects; bundled assets retain their own licence requirements.

- [Get the Vault](https://gsapvault.com/pricing)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt