Social Proof Live

sa-rotating-results-ticker v2026-06-15

Flat-dark (navy background) rotating case-results ticker. Fades through 16 amounts $14M→$2.5M on a 48-second loop with a More Results link to /about-us/our-results/. Distinct from sa-life-changing-results (the photo-backed variant).

Source skill: sa-case-results-ticker · Updated 2026-06-15 13:06:05

Edit

Live preview

Open ↗

When to use

Practice-area pages and homepage. Once per page. Never paired with sa-life-changing-results. Use near the top of the content flow on pages/posts, after the first proof snippet or TOC when present.

Rules & constraints

1. Flat-dark variant (navy bg). Distinct from sa-life-changing-results (photo-backed).
2. Same 16 amounts $14M→$2.5M, 48-second loop, fixed order.
3. More Results link points to /about-us/our-results/.
4. One per page — never paired with sa-life-changing-results.
Title/headline text and case-type labels render in full uppercase via scoped CSS. Place results elements high on pages and posts, ideally after the opening proof snippet or TOC and before deep body sections. Do not park results strips near the footer or bottom proof block.

Live reference

https://aguiarinjurylawyers.com/

Deployment notes

Copy verbatim. Replace bracketed placeholders. Run pre-publish-qa, playwright-visual-qa (desktop 1280 / mobile 390), sa-content-rot-detector, and sa-css-leak-guard after deploy. Log via content-publish-logger and notify search engines via batch-indexnow. See the source skill for full rules. 2026-06-15: Added uppercase headline/case-type casing standard and high-placement rule for pages and posts.

HTML

<section class="sa-results-ticker" aria-label="Life-Changing Results">
  <div class="sa-results-ticker-inner">
    <span class="sa-results-label">Life-Changing Results:</span>
    <div class="sa-results-stage">
      <div class="sa-result-slide">$14,000,000 <em>Insurance Dispute</em></div>
      <div class="sa-result-slide">$12,000,000 <em>Wrongful Death</em></div>
      <div class="sa-result-slide">$6,800,000 <em>Car Accident</em></div>
      <div class="sa-result-slide">$6,250,000 <em>Commercial Vehicle</em></div>
      <div class="sa-result-slide">$6,100,000 <em>Box Truck Accident</em></div>
      <div class="sa-result-slide">$6,000,000 <em>Semi-Truck Accident</em></div>
      <div class="sa-result-slide">$6,000,000 <em>Wrongful Death</em></div>
      <div class="sa-result-slide">$6,000,000 <em>Premises Liability</em></div>
      <div class="sa-result-slide">$5,600,000 <em>Wrongful Death</em></div>
      <div class="sa-result-slide">$5,200,000 <em>Trucking Accident</em></div>
      <div class="sa-result-slide">$4,100,000 <em>Car Accident</em></div>
      <div class="sa-result-slide">$4,000,000 <em>Trucking, Brain Injury</em></div>
      <div class="sa-result-slide">$3,600,000 <em>Trucking Accident</em></div>
      <div class="sa-result-slide">$3,300,000 <em>Insurance Dispute</em></div>
      <div class="sa-result-slide">$3,000,000 <em>Trucking Accident</em></div>
      <div class="sa-result-slide">$2,500,000 <em>Motor Vehicle Accident</em></div>
    </div>
    <a class="sa-results-link" href="/about-us/our-results/">See More Results →</a>
  </div>
</section>

CSS

.sa-results-ticker{background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:#fff;padding:32px 20px;text-align:center}
.sa-results-ticker-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.sa-results-label{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(26px,4vw,40px);letter-spacing:1px;text-transform:uppercase;color:#D97706;line-height:1.1}
.sa-results-stage{position:relative;height:78px;width:100%;max-width:560px;overflow:hidden}
.sa-result-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;text-align:center;font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(22px,3.5vw,32px);color:#fff;opacity:0;animation:sa-result-fade 48s infinite}
.sa-result-slide em{display:block;font-style:normal;font-weight:500;font-size:.6em;color:#D97706;margin-left:0}
.sa-result-slide:nth-child(1){animation-delay:0s}
.sa-result-slide:nth-child(2){animation-delay:3s}
.sa-result-slide:nth-child(3){animation-delay:6s}
.sa-result-slide:nth-child(4){animation-delay:9s}
.sa-result-slide:nth-child(5){animation-delay:12s}
.sa-result-slide:nth-child(6){animation-delay:15s}
.sa-result-slide:nth-child(7){animation-delay:18s}
.sa-result-slide:nth-child(8){animation-delay:21s}
.sa-result-slide:nth-child(9){animation-delay:24s}
.sa-result-slide:nth-child(10){animation-delay:27s}
.sa-result-slide:nth-child(11){animation-delay:30s}
.sa-result-slide:nth-child(12){animation-delay:33s}
.sa-result-slide:nth-child(13){animation-delay:36s}
.sa-result-slide:nth-child(14){animation-delay:39s}
.sa-result-slide:nth-child(15){animation-delay:42s}
.sa-result-slide:nth-child(16){animation-delay:45s}
@keyframes sa-result-fade{0%,5%{opacity:0;transform:translateY(10px)}1%,4%{opacity:1;transform:translateY(0)}6%,100%{opacity:0}}
.sa-results-link{display:inline-block;font-family:Poppins,sans-serif;font-weight:600;font-size:15px;color:#D97706;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.sa-results-link:hover{border-bottom-color:#D97706}

/* Results ticker casing and placement standard, 2026-06-15. */
.sa-result-slide em{
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
}