Logo marquee strip

Install kit: "Logo marquee strip"
Library page: https://astro.baysixmedia.com/components/logo-marquee-strip/
Files: 1 required, 1 supporting

Write each block below to the path named in its header, relative to the project root. A block marked (required) is one the component does not work without; (supporting) is documentation. Nothing here needs downloading except a block that says so in as many words.

===== FILE (required): src/components/LogoMarqueeStrip.astro =====
---
/**
 * LogoMarqueeStrip
 *
 * A trust strip: a centred bold line ("10,000+ trusted customers…") between
 * two hairlines, over a row of logo cards that scrolls left forever. Two
 * looks: `"plain"` (white cards on the band) and `"tray"` (the cards sit in
 * a pale rounded tray that clips them at its edges).
 *
 * The marquee is a CSS animation over two copies of the list; the second copy
 * is hidden from assistive technology. Hovering or focusing inside pauses it.
 * Under reduced motion it stops and the logos wrap onto as many rows as they
 * need, so none are hidden off-screen.
 *
 * Ships no logos: pass `logos` (drawn glyph + name, or `src` for a real
 * client logo). With none it renders nothing.
 *
 * Reads the --tw-* tokens from any ancestor, with fallbacks.
 */

export type LogoGlyph = "sun" | "arch" | "print" | "leaf" | "stack" | "wave";

export interface MarqueeLogo {
	name: string;
	/** An image replaces the drawn glyph and name. */
	src?: string;
	glyph?: LogoGlyph;
	/** Glyph colour. */
	color?: string;
	href?: string;
}

export interface LogoMarqueeStripProps {
	/** Bold lead-in in orange, e.g. "10,000+". `""` drops it. */
	highlight?: string;
	/** The rest of the line. `""` drops the whole line. */
	caption?: string;
	logos?: MarqueeLogo[];
	variant?: "plain" | "tray";
	/** Seconds for one full loop. */
	duration?: number;
	background?: string;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends LogoMarqueeStripProps {}

const {
	highlight = "",
	caption = "",
	logos: rawLogos = [],
	variant = "plain",
	duration = 32,
	background = "#ffffff",
	fontStylesheet = "https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Noto+Sans:wght@400;500;600;700&family=Inter:wght@500;600;700&display=swap",
	class: className,
	id,
} = Astro.props;

const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");

const GLYPHS: Record<LogoGlyph, string> = {
	sun: "M16 10a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z M16 2v5 M16 25v5 M2 16h5 M25 16h5 M6 6l3.5 3.5 M22.5 22.5 26 26 M6 26l3.5-3.5 M22.5 9.5 26 6",
	arch: "M5 28V16a11 11 0 0 1 22 0v12 M10 28V16a6 6 0 0 1 12 0v12 M15 28V16a1 1 0 0 1 2 0v12",
	print: "M16 4a12 12 0 0 1 12 12v10 M16 9a7 7 0 0 1 7 7v10 M16 14a2 2 0 0 1 2 2v10 M16 4A12 12 0 0 0 4 16v10 M16 9a7 7 0 0 0-7 7v10 M14 16v10",
	leaf: "M16 3l4 6-4 6-4-6Z M16 17l4 6-4 6-4-6Z M3 16l6-4 6 4-6 4Z M17 16l6-4 6 4-6 4Z",
	stack: "M4 10l12-6 12 6-12 6Z M4 16l12 6 12-6 M4 22l12 6 12-6",
	wave: "M3 12c4-6 9-6 13 0s9 6 13 0 M3 20c4-6 9-6 13 0s9 6 13 0",
};

const renderList = [0, 1];
/* A logo without a name has no accessible name: dropped. No logos, no strip (the line alone would be a claim). */
const logos = rawLogos.filter((logo) => logo?.name);
---

{logos.length > 0 && (
<>
{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section
	class:list={["lms", `lms--${variant}`, className]}
	id={id}
	style={`--lms-band:${background};--lms-duration:${duration}s`}
	aria-label={caption ? `${highlight} ${caption}`.trim() : "Customers"}
>
	{
		caption && (
			<p class="lms-caption">
				{highlight && <span class="lms-hl">{highlight}</span>} {caption}
			</p>
		)
	}
	<div class="lms-viewport">
		<div class="lms-track">
			{
				renderList.map((copy) => (
					<ul class="lms-list" aria-hidden={copy === 1 ? "true" : undefined}>
						{logos.map((logo) => {
							const inner = logo.src ? (
								<img src={logo.src} alt={copy === 1 ? "" : logo.name} height="40" loading="lazy" decoding="async" />
							) : (
								<>
									<svg viewBox="0 0 32 32" aria-hidden="true" style={`color:${logo.color ?? "currentColor"}`}>
										<path d={GLYPHS[logo.glyph ?? "sun"]} fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
									</svg>
									<span>{logo.name}</span>
								</>
							);
							return (
								<li class="lms-card">
									{logo.href ? (
										<a href={safeHref(logo.href)} tabindex={copy === 1 ? -1 : undefined}>
											{inner}
										</a>
									) : (
										<span class="lms-logo">{inner}</span>
									)}
								</li>
							);
						})}
					</ul>
				))
			}
		</div>
	</div>
</section>
</>
)}

<style>
	.lms {
		--lms-navy: var(--tw-navy, #0b4654);
		--lms-accent: var(--tw-accent, #ff6d45);
		--lms-surface: var(--tw-surface, #f0f8fa);
		--lms-card-font: var(--tw-card, Inter, ui-sans-serif, system-ui, sans-serif);
		--lms-gap: 10px;

		padding: 40px 0 48px;
		overflow: hidden;
		background: var(--lms-band);
		color: var(--lms-navy);
	}

	.lms *,
	.lms *::before,
	.lms *::after {
		box-sizing: border-box;
	}

	.lms-caption {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.3em;
		max-width: 1310px;
		margin: 0 auto 22px;
		padding: 0 16px;
		color: #000;
		font: 700 16px/1.4 var(--lms-card-font);
		letter-spacing: -0.64px;
		text-align: center;
	}

	.lms-caption::before,
	.lms-caption::after {
		content: "";
		flex: 1 1 0;
		max-width: 440px;
		height: 1px;
		background: rgb(11 70 84 / 0.14);
	}

	.lms-caption::before {
		margin-right: 20px;
	}

	.lms-caption::after {
		margin-left: 20px;
	}

	.lms-hl {
		color: var(--lms-accent);
	}

	.lms-viewport {
		overflow: hidden;
	}

	.lms--tray .lms-viewport {
		max-width: 1320px;
		margin: 0 16px;
		padding: 10px;
		border-radius: 20px;
		background: var(--lms-surface);
	}

	.lms--plain .lms-viewport {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	}

	.lms-track {
		display: flex;
		width: max-content;
		animation: lms-scroll var(--lms-duration) linear infinite;
	}

	.lms:hover .lms-track,
	.lms:focus-within .lms-track {
		animation-play-state: paused;
	}

	@keyframes lms-scroll {
		to {
			transform: translateX(-50%);
		}
	}

	.lms-list {
		display: flex;
		gap: var(--lms-gap);
		margin: 0;
		padding: 0 var(--lms-gap) 0 0;
		list-style: none;
	}

	.lms-card {
		flex: none;
		width: 220px;
		height: 120px;
		border-radius: 20px;
		background: #fff;
	}

	.lms--plain .lms-card {
		box-shadow: inset 0 0 0 1px rgb(11 70 84 / 0.06);
	}

	.lms-card a,
	.lms-logo {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		color: inherit;
		font: 700 22px/1 var(--lms-card-font);
		letter-spacing: -0.6px;
		text-decoration: none;
		text-transform: uppercase;
	}

	.lms-card a:focus-visible {
		outline: 2px solid var(--lms-accent);
		outline-offset: -2px;
	}

	.lms-card svg {
		flex: none;
		width: 36px;
		height: 36px;
	}

	.lms-card img {
		max-width: 80%;
		max-height: 44px;
		object-fit: contain;
	}

	@media (min-width: 810px) {
		.lms {
			padding: 50px 0 60px;
		}

		.lms-caption {
			font-size: 18px;
			letter-spacing: -0.72px;
		}

		.lms--tray .lms-viewport {
			margin: 0 40px;
		}

		.lms-card {
			width: 252px;
			height: 140px;
		}
	}

	@media (min-width: 1200px) {
		.lms--tray .lms-viewport {
			margin: 0 auto;
			width: min(1320px, calc(100% - 120px));
		}

		.lms--plain .lms-card {
			width: 276px;
			height: 153px;
		}
	}

	/* Reduced motion: no scroll, one copy, wrapped so every logo shows. */
	@media (prefers-reduced-motion: reduce) {
		.lms-track {
			width: auto;
			animation: none;
		}

		.lms-list {
			flex-wrap: wrap;
			justify-content: center;
			padding: 0;
		}

		.lms-list[aria-hidden="true"] {
			display: none;
		}

		.lms--plain .lms-viewport {
			-webkit-mask-image: none;
			mask-image: none;
		}
	}
</style>

===== END src/components/LogoMarqueeStrip.astro =====

===== FILE (supporting): src/components/LogoMarqueeStrip.md =====
# Logo marquee strip

A trust strip: a bold centred line ("10,000+ trusted customers…") between two
hairlines, over a row of logo cards scrolling left forever. `variant="plain"`
puts white cards straight on the band (the home-page look); `"tray"` sits
them in a pale rounded tray that clips them at its edges (the about-page look).

Catalog page: `/components/logo-marquee-strip`

## Files required

- **`LogoMarqueeStrip.astro`** — the whole component. No script.
- `LogoMarqueeStrip.md` — this file.

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `highlight` | `string?` | `""` | Orange lead-in. Only a real figure. |
| `caption` | `string?` | `""` | `""` drops the line. No trust claim is shown unless you pass one. |
| `logos` | `{ name, src?, glyph?, color?, href? }[]` | `[]` | `glyph`: sun, arch, print, leaf, stack, wave. `src` replaces glyph and name. A logo without `name` is dropped. With no logos the strip renders nothing, caption included. |
| `variant` | `"plain" \| "tray"` | `"plain"` | |
| `duration` | `number?` | `32` | Seconds per loop. |
| `background` | `string?` | `#ffffff` | |
| `fontStylesheet`, `class`, `id` | | | |

## Behaviour

- Two copies of the list slide left by 50% over `duration` seconds, linear,
  forever. The second copy is `aria-hidden` with its links out of the tab order.
- Hover or focus inside pauses the loop.
- Reduced motion: no loop; one copy, wrapped and centred so every logo shows.

## Approximations

- The reference's loop speed could not be measured reliably (the capture
  landed on a wrap). 32s per loop is a comfortable reading speed.
- The reference logos are third-party brand marks; the catalog demo passes
  generic drawn glyphs with made-up names (none ship as defaults). Use real client logos only with permission.

===== END src/components/LogoMarqueeStrip.md =====

--- VERIFIED IN THE COMPONENT LIBRARY ---
Enrolled for verification but never run.
No verification run has been recorded.
No checks have passed yet.
No usable source fingerprint, so these results cannot be tied to the files below.

--- NOT PROVEN ---
- ClientRouter: not applicable — this component ships no script.

--- WHAT THIS DOES NOT CERTIFY ---
Verification was performed on the unmodified component, in an isolated fixture, in the
library. It says nothing about this project's CSS, routes, layout or data, and nothing
about the component once you adapt it. A verified component is a good starting point,
not a guarantee about the installation you are about to build.

--- TEST IN THIS PROJECT AFTER INSTALLING OR CUSTOMISING ---
- Horizontal overflow at 1440, 1280, 1024, 834, 390 and 320px.
- Keyboard operation end to end, including visible focus.
- The no-JavaScript render.
- prefers-reduced-motion: reduce.
- Two instances on one page, if this project renders more than one.
- If this project uses <ClientRouter />: teardown and reinitialisation across a real navigation.

“Logo marquee strip” from my Astro Component Library:
https://astro.baysixmedia.com/components/logo-marquee-strip/

Use the existing library component as the implementation source. Preserve its design structure, layout, proportions, spacing system, responsive behavior, visual effects, animations, transitions, hover states, interactions, and accessibility.

The copy, colors, typography, images, and other content may be adapted to match the destination website. Do not redesign, simplify, or reinterpret the component’s underlying design build or effects.