{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "testimonial-marquee-scroll",
  "title": "Testimonial — Marquee Scroll",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/testimonial-marquee-scroll/TestimonialMarqueeScroll.svelte",
      "content": "<script lang=\"ts\" module>\n  export interface TestimonialMarqueeScrollProps {\n    class?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Avatar, AvatarFallback } from '$lib/components/ui/avatar'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Card, CardContent } from '$lib/components/ui/card'\n\n  let { class: className }: TestimonialMarqueeScrollProps = $props()\n\n  const quotes = [\n    { quote: 'Close starts from a reconciled position now.', author: 'Erin Walsh', role: 'VP Finance', initials: 'EW' },\n    {\n      quote: 'The request queue went away and stayed away.',\n      author: 'Daniel Brooks',\n      role: 'Head of Analytics',\n      initials: 'DB',\n    },\n    {\n      quote: 'One pipeline definition, two teams, no argument.',\n      author: 'Priya Raman',\n      role: 'RevOps Director',\n      initials: 'PR',\n    },\n    {\n      quote: 'We deleted eleven spreadsheets in one quarter.',\n      author: 'Marcus Ellery',\n      role: 'Staff Engineer',\n      initials: 'ME',\n    },\n    {\n      quote: 'Auditors get a change log instead of a folder.',\n      author: 'Sophie Lindqvist',\n      role: 'Controller',\n      initials: 'SL',\n    },\n    { quote: 'Permissions finally match the org chart.', author: 'Tom Fairbanks', role: 'IT Director', initials: 'TF' },\n    {\n      quote: 'Nobody has written a bespoke extract since March.',\n      author: 'Anna Reyes',\n      role: 'Data Lead',\n      initials: 'AR',\n    },\n    { quote: 'Forecast review is about the forecast again.', author: 'Grace Whitlock', role: 'CFO', initials: 'GW' },\n  ]\n\n  const rows = [quotes.slice(0, 4), quotes.slice(4)]\n</script>\n\n<section data-slot=\"testimonial-marquee-scroll\" class={['bg-background overflow-hidden', className]}>\n  <div class=\"mx-auto max-w-6xl px-6 pt-20 lg:pt-28\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">What people say</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Eight hundred teams, unprompted</h2>\n    </div>\n  </div>\n\n  <!-- Edge masks fade the rows into the page so cards never end mid-cut. -->\n  <div class=\"marquee relative mt-10 space-y-4 pb-20 lg:pb-28\">\n    {#each rows as row, index (index)}\n      <div class=\"marquee__row\">\n        <div class=\"marquee__track\" class:marquee__track--reverse={index === 1}>\n          <!-- Duplicated once so the loop has an identical second half to scroll into. -->\n          {#each [...row, ...row] as entry, i (`${entry.author}-${i}`)}\n            <Card class=\"w-80 shrink-0\">\n              <CardContent class=\"p-5\">\n                <blockquote class=\"text-sm leading-relaxed\">“{entry.quote}”</blockquote>\n                <div class=\"mt-4 flex items-center gap-3\">\n                  <Avatar class=\"size-8\">\n                    <AvatarFallback class=\"text-xs\">{entry.initials}</AvatarFallback>\n                  </Avatar>\n                  <div class=\"min-w-0\">\n                    <p class=\"truncate text-xs font-medium\">{entry.author}</p>\n                    <p class=\"text-muted-foreground truncate text-xs\">{entry.role}</p>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          {/each}\n        </div>\n      </div>\n    {/each}\n  </div>\n</section>\n\n<style>\n  /* Keyframes and the edge mask cannot be expressed as utilities; everything else\n     stays in the template. Matches the approach in logo-ticker-infinite. */\n  @keyframes marquee-scroll {\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(-50%);\n    }\n  }\n\n  .marquee {\n    mask-image: linear-gradient(to right, transparent, black 6rem, black calc(100% - 6rem), transparent);\n  }\n\n  .marquee__row {\n    overflow: hidden;\n  }\n\n  .marquee__track {\n    display: flex;\n    width: max-content;\n    gap: 1rem;\n    animation: marquee-scroll 46s linear infinite;\n  }\n\n  .marquee__track--reverse {\n    animation-direction: reverse;\n  }\n\n  .marquee__row:hover .marquee__track {\n    animation-play-state: paused;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .marquee__track {\n      animation: none;\n    }\n    .marquee__row {\n      overflow-x: auto;\n    }\n  }\n</style>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/testimonial-marquee-scroll/TestimonialMarqueeScroll.svelte"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/avatar.json",
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/card.json"
  ],
  "description": "Two counter-scrolling marquee rows of quote cards that pause on hover and stop entirely under reduced-motion, with edge masks fading the cards into the page.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "testimonial"
}