# Client Proof Sheet > A clients and logos section printed like a two-ink riso proof: a ruled sheet of client wordmarks where each marked case re-inks a live halftone photo and its story from the side you picked it. Canonical: https://gsapvault.com/sections/client-proof-sheet-section Live demo: https://gsapvault.com/demos/client-proof-sheet-section/index.html | Property | Value | |----------|-------| | Type | section | | Tier | paid | | Price | Included only in the Vault | | Difficulty | advanced | | Plugins | Core GSAP only | | Techniques | canvas, halftone, duotone, interruptible-transitions, progressive-enhancement, keyboard-navigation, container-queries, responsive-section | | Uses Lenis | No | ## Overview Client Proof Sheet Section shows who a business has worked with and what it made for a few of them. The client wordmarks sit in one ruled grid on a saturated yellow stock, like a print proof with registration marks at its corners, under a heading set large enough to act as the section's structure. Clients with a case carry a case number; picking one prints that case into the proof beside the logos. The proof is the signature. The case photograph is screened live on a canvas into two halftone plates at different screen angles, fluorescent pink for the mid-tones and black for the shadows, overprinted on the paper colour. Each new selection lifts the ink from the current print and re-inks the next one in a wave that starts from the logo you picked, with the black plate landing a beat late and out of register before it settles. The copy plate carries the client's wordmark, a one-line proof of the work, what was made and a link. The fictional Tandem Press, a design and riso print studio, shows twelve clients and five cases with generated photographs. Everything is ordinary markup: a list of clients, each with a logo image, a sector, a link and an optional case. Counts, case numbers and the proof's navigation all come from that list, and without JavaScript every case reads in full beneath its logo. ## Features - Ruled logo sheet on a committed riso palette: yellow stock, fluorescent pink spot ink, black key ink - Live two-plate halftone of each case photo on canvas, screened at two angles with auto levels - Re-inking wave that starts from the chosen logo, with a late, misregistered black plate that settles - Rapid picks, reversal mid-print and prev/next all settle on the last choice - Case numbers, count and navigation derived from the client list; empty cells fill the last row - Twelve fictional wordmarks supplied as plain SVG files, replaceable with any logo image - Readable fallback without JavaScript: every case written out with a duotone photo - Keyboard, touch and reduced-motion support, live status for screen readers - Container-query layout from a wide proof beside the logos to a phone column - Independent instances, root-scoped brand variables and exact teardown ## Use Cases - Design studios, printers and agencies showing clients alongside the work - Freelancers and small practices with a handful of case studies among many clients - Venues, festivals and publishers listing partners and what they did together - Any client or partner logo wall that needs to say more than a row of logos ## 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 The client list is the source of truth. The script reads every client and every case from the markup, adds a picker button to each case cell and builds the proof in the space the grid reserves for it. A small boot snippet reserves that space before first paint, so nothing jumps when the script mounts, and hands the page back to the readable list if the script never runs. For each case the photograph is drawn once, cover-cropped at its focus point, into a small sampling canvas. Its luminance is stretched to full range and turned into two rotated grids of dots: a pink plate whose dots grow with every mid-tone and a black plate that only prints the shadows. Both are drawn with multiply blending on the paper colour. A single GSAP tween drives print progress; each dot's place in the wave is its distance from the chosen logo, and it lands with a small overshoot. The black plate follows the pink and slides into register as it settles. A selection during a print lifts the ink from wherever it has reached, and a selection while the ink is lifting or a photo is loading only changes the target, so any burst of input ends on the last choice. Reduced motion swaps instantly, including when the preference changes while the section is mounted. If the photo's pixels cannot be read, the proof keeps a flat duotone photo instead. ## 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 Files to copy: _Code snippet omitted: it ships with the download._ 1. Load the fonts, the stylesheet, GSAP and the script: _Code snippet omitted: it ships with the download._ 2. Copy everything between `CLIENT PROOF SHEET SECTION: EXTRACT START` and `EXTRACT END` in `index.html`: the small boot `