Overlapping Testimonial Hold
A fanned stack of praise with one voice in focus
Turns your AI into a web-section designer for the overlapping-testimonial-hold pattern — stacks testimonial cards with a deliberate overlap, then holds one testimonial in focus while the rest recede, so a single voice carries the section.
Install it in 3 steps
No sign-up. No CLI tools. Pick your AI, copy one line, paste it over.
Prefer doing it yourself? Buy the skill ($4.99), download the ZIP from your checkout confirmation, unzip it into the directory shown above, restart your AI session — same result. Already bought it? Your AI assistant can download it for you.
What’s inside
One SKILL.md (the playbook) + one starter template. A preview:
Overlapping Testimonial Hold
When to use
- A landing page testimonial section where five similar quotes in a row all blur together and none of them gets read
- A product or service page that needs one strong customer voice to anchor the section, with supporting voices visible but quiet
- A homepage social-proof block where the goal is "read this one" rather than "skim many"
- A case-study or pricing page where a testimonial must sit close to the call to action without pushing it down the page
- A portfolio or agency site where testimonials should feel like a curated stack, not a wall of praise
Workflow
- Pick the hold testimonial (input: your testimonial pool → output: one lead quote)
Choose exactly one testimonial to hold in focus: the one with the most specific outcome, the most recognisable customer, or the sentence a sceptic would find hardest to dismiss. Specificity wins over enthusiasm — "Cut our onboarding from three weeks to four days" beats "Amazing team, highly recommend!" The lead quote should be 25–45 words; longer than that and visitors will not finish it, shorter and it has nothing to hold on to. The remaining testimonials become the supporting stack: 3–5 short quotes (10–20 words each), chosen for variety of role, company size, or use case. - Design the stack (input: lead + supporting quotes → output: stacked layout)
Lay the cards out with a deliberate overlap: each card offset from the one beneath by 16–32 px horizontally and 8–16 px vertically, so every card's top edge and left edge stays visible. The lead card sits on top, full opacity, full size; the supporting cards peek out from behind it like a fanned deck. On desktop the stack reads left-to-right with the lead card front-center; on mobile the stack compresses to a vertical fan with the same offsets scaled down. Use one card style for all testimonials — same border, same radius, same padding — so the overlap, not decoration, creates the hierarchy. The lead card earns exactly one extra distinction: a slightly larger quote font or a small accent bar, never both. - Write the card contents (input: quotes → output: finished card copy)
Each card carries the same four elements in the same order: quote, name, role + company, and one credibility marker (star rating, metric, or company logo). Attribution must be real and complete — first name plus last name or full company name, never "J. S., Marketing" — because anonymous praise reads as invented praise. If a testimonial cannot be fully attributed, it does not go in the stack; it goes nowhere. Keep the lead card's metric in the quote itself ("four days") rather than as a separate badge, so the number lands while the sentence is being read.
Template preview
Overlapping Testimonial Hold — Starter Template
One voice in focus, the rest fanned behind it. Pick the lead testimonial first.
The testimonials
Lead testimonial (25–45 words, specific outcome):
> {quote}
Attribution: {Full name}, {Role}, {Company} Credibility marker: {star rating / metric / logo}
Supporting stack (3–5 quotes, 10–20 words each)
Attribution check: every card has a full name + company? ☐ (If not, it does not go in the stack.)
Layout
- Offset: {16–32 px} horizontal / {8–16 px} vertical between cards
- Lead card distinction (pick ONE): larger quote font ☐ / accent bar ☐
- Section heading: {heading}
