Project photo marquee

Install kit: "Project photo marquee"
Library page: https://astro.baysixmedia.com/components/project-photo-marquee/
Files: 6 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/ProjectPhotoMarquee.astro =====
---
/**
 * ProjectPhotoMarquee
 *
 * A "latest projects" band: a centred orange eyebrow between two short rules
 * and a two-line navy heading over a faint chevron pattern, then a full-bleed
 * strip of tall rounded photo cards that drifts left forever. Each card has a
 * white label bar along its bottom edge.
 *
 * Motion: one full loop of the card set takes `duration` seconds (65 by
 * default, as measured). The set is rendered twice; the copy is aria-hidden
 * and inert. The strip pauses on hover and while anything inside has focus;
 * while a card has keyboard focus the strip snaps to its start so the browser
 * can scroll the focused card into view. On appear the title rises 40px and
 * each label bar slides in from −160px. Under reduced motion the strip is a
 * static, horizontally scrollable row.
 *
 * Reads --tg-* design tokens from any ancestor, with fallbacks.
 */

export interface ProjectCard {
	title: string;
	/** Makes the whole card a link. */
	href?: string;
	image?: { src?: string; alt?: string };
}

export interface ProjectPhotoMarqueeProps {
	eyebrow?: string;
	heading?: string;
	headingLevel?: "h2" | "h3";
	cards?: ProjectCard[];
	/** Seconds for one full loop of the card set. */
	duration?: number;
	/** Accessible name of the card list. */
	listLabel?: string;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends ProjectPhotoMarqueeProps {}

const {
	eyebrow = "Latest Projects",
	heading = "",
	headingLevel = "h2",
	cards = [],
	duration = 65,
	listLabel = "Recent projects",
	fontStylesheet = "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&display=swap",
	class: className,
	id,
} = Astro.props;

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

const Heading = headingLevel;
/* No cards, no band: the eyebrow and heading never render on their own. */
const list = (cards ?? []).filter((c) => c && c.title);
const seconds = Number.isFinite(duration) && duration > 0 ? duration : 65;
---

{list.length > 0 && (
<>
{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section class:list={["ppm", className]} id={id} data-ppm-root style={`--ppm-duration: ${seconds}s;`}>
	<div class="ppm-title" data-ppm-appear>
		{
			eyebrow && (
				<p class="ppm-eyebrow">
					<span class="ppm-rule" aria-hidden="true" />
					<span>{eyebrow}</span>
					<span class="ppm-rule" aria-hidden="true" />
				</p>
			)
		}
		{heading && <Heading class="ppm-heading">{heading}</Heading>}
	</div>

	{
		list.length > 0 && (
			<div class="ppm-viewport" data-ppm-viewport data-ppm-appear>
				<div class="ppm-track">
					{[0, 1].map((copy) => (
						<ul
							class="ppm-set"
							aria-label={copy === 0 ? listLabel : undefined}
							aria-hidden={copy === 1 ? "true" : undefined}
							inert={copy === 1}
							data-ppm-copy={copy === 1 ? "" : undefined}
						>
							{list.map((card) => {
								const src = card.image?.src ?? "";
								const alt = card.image?.alt ?? "";
								const Tag = card.href ? "a" : "div";
								return (
									<li class="ppm-item">
										<Tag class="ppm-card" href={card.href ? safeHref(card.href) : undefined}>
											{src ? (
												<img class="ppm-img" src={src} alt={alt} width="720" height="960" loading="lazy" decoding="async" />
											) : (
												<span class="ppm-ph" role="img" aria-label={`Image placeholder: ${card.title}`}>
													<span class="ppm-ph-text" aria-hidden="true">
														<span class="ppm-ph-label">Image</span>
														<span class="ppm-ph-spec">3:4 · 720 × 960 px</span>
													</span>
												</span>
											)}
											<span class="ppm-label">
												<span class="ppm-label-text">{card.title}</span>
											</span>
										</Tag>
									</li>
								);
							})}
						</ul>
					))}
				</div>
			</div>
		)
	}
</section>
</>
)}

<style>
	.ppm {
		--ppm-navy: var(--tg-navy, #020e28);
		--ppm-orange: var(--tg-orange, #fd5523);
		--ppm-display: var(--tg-font-display, Outfit, "Outfit Placeholder", ui-sans-serif, system-ui, sans-serif);
		--ppm-body: var(--tg-font-body, "DM Sans", "DM Sans Placeholder", ui-sans-serif, system-ui, sans-serif);
		--ppm-ease: cubic-bezier(0.22, 1, 0.36, 1);
		--ppm-card-w: 290px;
		--ppm-gap: 24px;

		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 40px;
		padding: 60px 0;
		overflow: hidden;
		background-color: #f1f2f4;
		/* A faint chevron texture, redrawn rather than copied. */
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 18 12 6l12 12 12-12 12 12' fill='none' stroke='%23020e28' stroke-opacity='.045' stroke-width='1.2'/%3E%3C/svg%3E");
		background-size: 48px 24px;
		color: var(--ppm-navy);
		font-family: var(--ppm-body);
	}

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

	.ppm-title {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		width: 100%;
		max-width: 1293px;
		margin: 0 auto;
		padding: 0 20px;
	}

	.ppm .ppm-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		margin: 0;
		font: 600 16px/1 var(--ppm-display);
		text-transform: uppercase;
		color: var(--ppm-orange);
	}

	.ppm-rule {
		display: none;
		width: 40px;
		height: 1px;
		background: currentColor;
	}

	.ppm-heading {
		margin: 0;
		max-width: 577px;
		font: 600 32px/1.2 var(--ppm-display);
		color: var(--ppm-navy);
		overflow-wrap: anywhere;
	}

	/* ---- the strip ---- */
	.ppm-viewport {
		/* Hidden, not clip: when a card takes keyboard focus the browser must be
		   able to scroll it into view. The script puts scrollLeft back after. */
		overflow-x: hidden;
		padding-block: 6px;
		margin-block: -6px;
	}

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

	.ppm .ppm-set {
		display: flex;
		gap: var(--ppm-gap);
		margin: 0;
		/* Trailing gap inside each set so −50% lands exactly on the copy. */
		padding: 0 var(--ppm-gap) 0 0;
		list-style: none;
	}

	.ppm-item {
		flex: none;
		width: var(--ppm-card-w);
	}

	.ppm-card {
		position: relative;
		display: block;
		aspect-ratio: 3 / 4;
		border-radius: 20px;
		overflow: hidden;
		color: inherit;
		text-decoration: none;
	}

	a.ppm-card:focus-visible {
		outline: 3px solid var(--ppm-orange);
		outline-offset: -3px;
	}

	.ppm-img {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ppm-label {
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 14px;
		display: flex;
		padding: 10px 13px;
		border-radius: 5px;
		background: #fff;
		transition:
			opacity 0.8s var(--ppm-ease),
			transform 0.8s var(--ppm-ease);
	}

	.ppm-label-text {
		font: 600 20px/1.4 var(--ppm-display);
		color: var(--ppm-navy);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	a.ppm-card:focus-visible .ppm-label {
		outline: 2px solid var(--ppm-orange);
	}

	.ppm-ph {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		padding: 16px;
		text-align: center;
		background: repeating-linear-gradient(135deg, #e6e9ee 0 12px, #edf0f3 12px 24px);
		color: rgb(2 14 40 / 0.62);
	}

	.ppm-ph-text {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		margin-bottom: 60px;
	}

	.ppm-ph-label {
		font: 500 12px/1 var(--ppm-body);
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.ppm-ph-spec {
		font: 400 12px/1.2 var(--ppm-body);
	}

	@keyframes ppm-drift {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(-50%);
		}
	}

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

	/* Keyboard focus on a card: stop the drift outright so the track sits at
	   its start and the browser's scroll-into-view lands on the right card. */
	.ppm-viewport:has(:focus-visible) .ppm-track {
		animation: none;
	}

	/* ---- appear: hidden start only once the script marks the root ready ---- */
	.ppm-title {
		transition:
			opacity 0.8s var(--ppm-ease),
			transform 0.8s var(--ppm-ease);
	}

	.ppm[data-ppm-anim] .ppm-title:not([data-in]) {
		opacity: 0;
		transform: translateY(40px);
	}

	.ppm[data-ppm-anim] .ppm-viewport:not([data-in]) .ppm-label {
		opacity: 0;
		transform: translateX(-160px);
	}

	/* ---- tablet ---- */
	@media (min-width: 810px) {
		.ppm {
			--ppm-card-w: 330px;
			--ppm-gap: 30px;

			gap: 50px;
			padding: 90px 0;
		}

		.ppm-title {
			align-items: center;
			text-align: center;
		}

		.ppm-rule {
			display: block;
		}

		.ppm-heading {
			font-size: 40px;
		}

		.ppm-label {
			left: 20px;
			right: 20px;
			bottom: 20px;
			padding: 13px;
		}

		.ppm-label-text {
			font-size: 24px;
			line-height: 34px;
		}
	}

	/* ---- desktop: 360 × 480 cards, 30px apart ---- */
	@media (min-width: 1200px) {
		.ppm {
			--ppm-card-w: 360px;

			gap: 58px;
			padding: 120px 0;
		}

		.ppm .ppm-eyebrow {
			font-size: 18px;
		}

		.ppm-heading {
			font-size: 48px;
			line-height: 57.6px;
		}
	}

	/* ---- reduced motion: a still, scrollable row ---- */
	@media (prefers-reduced-motion: reduce) {
		.ppm-track {
			animation: none;
		}

		.ppm-viewport {
			overflow-x: auto;
			scrollbar-width: thin;
		}

		.ppm .ppm-set[data-ppm-copy] {
			display: none;
		}

		.ppm .ppm-set {
			padding-left: 20px;
		}

		.ppm-title,
		.ppm-label {
			transition: none;
		}
	}

	@media (forced-colors: active) {
		.ppm-card {
			border: 1px solid CanvasText;
		}

		.ppm-label {
			border: 1px solid CanvasText;
		}

		.ppm-rule {
			background: CanvasText;
		}
	}
</style>

<script>
	/*
	 * Appear on scroll, plus one clean-up for keyboard users. One
	 * IntersectionObserver per instance watches the title and the strip and
	 * sets `data-in` on each once. When focus leaves the strip, the scroll the
	 * browser made to reveal a focused card is put back to 0 so the resumed
	 * drift starts from a clean origin. Everything is released on
	 * astro:before-swap. The drift itself is pure CSS and runs without JS.
	 */
	function initProjectPhotoMarquee(root: HTMLElement) {
		if (root.dataset.ppmReady !== undefined) return;
		root.dataset.ppmReady = "";

		const controller = new AbortController();
		const { signal } = controller;
		const viewport = root.querySelector<HTMLElement>("[data-ppm-viewport]");
		const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

		if (viewport && !reduced) {
			// The browser leaves a half-visible card where it is; bring the
			// whole focused card into the strip (horizontal only).
			viewport.addEventListener(
				"focusin",
				(event) => {
					const card = (event.target as HTMLElement).closest<HTMLElement>(".ppm-card");
					if (!card) return;
					requestAnimationFrame(() => {
						const v = viewport.getBoundingClientRect();
						const c = card.getBoundingClientRect();
						if (c.right > v.right) viewport.scrollLeft += c.right - v.right + 16;
						else if (c.left < v.left) viewport.scrollLeft -= v.left - c.left + 16;
					});
				},
				{ signal },
			);
			viewport.addEventListener(
				"focusout",
				(event) => {
					const next = (event as FocusEvent).relatedTarget as Node | null;
					if (!next || !viewport.contains(next)) viewport.scrollLeft = 0;
				},
				{ signal },
			);
		}

		if (!reduced && "IntersectionObserver" in window) {
			// The hidden start pose applies only from here on.
			root.dataset.ppmAnim = "";
			const observer = new IntersectionObserver(
				(entries) => {
					for (const entry of entries) {
						if (!entry.isIntersecting) continue;
						(entry.target as HTMLElement).dataset.in = "";
						observer.unobserve(entry.target);
					}
				},
				{ threshold: 0.15 },
			);
			root.querySelectorAll<HTMLElement>("[data-ppm-appear]").forEach((el) => observer.observe(el));
			signal.addEventListener("abort", () => observer.disconnect());
		}

		document.addEventListener(
			"astro:before-swap",
			() => {
				controller.abort();
				delete root.dataset.ppmReady;
				delete root.dataset.ppmAnim;
			},
			{ once: true, signal },
		);
	}

	const boot = () =>
		document.querySelectorAll<HTMLElement>("[data-ppm-root]").forEach(initProjectPhotoMarquee);

	if (document.readyState === "loading") {
		document.addEventListener("DOMContentLoaded", boot, { once: true });
	} else {
		boot();
	}

	document.addEventListener("astro:page-load", boot);
</script>

===== END src/components/ProjectPhotoMarquee.astro =====

===== FILE (supporting): src/components/ProjectPhotoMarquee.md =====
# Project photo marquee

A "latest projects" band: a centred eyebrow between two short rules and a
two-line heading over a faint chevron texture, then a full-bleed strip of tall
rounded photo cards, each with a white label bar, drifting left forever.

Catalog page: `/components/project-photo-marquee`

## Purpose

Show off work without a carousel's controls: the strip moves on its own,
stops when someone points at it, and every card can link to a case study.
Part of the Northpass (Transigo-style) family; reads the `--tg-*` tokens.

## Files required

**`ProjectPhotoMarquee.astro`** — the whole component. No imports.

`ProjectPhotoMarquee.md` — this file.

`public/project-photo-marquee/project-1.webp` … `project-5.webp` (720×960) —
optional demo photos, passed by the catalog demo.

## Basic usage

```astro
<ProjectPhotoMarquee
  heading="Recent Lanes We Planned, Moved And Delivered"
  cards={[
    { title: "Ocean Freight", href: "/work/ocean", image: { src: "/img/ship.webp", alt: "Container ship at berth" } },
    { title: "Warehousing", href: "/work/warehouse", image: { src: "/img/racks.webp", alt: "Pallet racking" } },
  ]}
/>
```

Use at least four cards: the set is doubled for the loop, and a short set on a
wide screen leaves the loop seam easy to spot.

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow` | `string?` | `"Latest Projects"` | Generic label, shown only alongside cards. `""` drops it. |
| `heading` | `string?` | `""` | Max 577px wide, centred from 810px. Empty drops it. |
| `headingLevel` | `"h2" \| "h3"?` | `"h2"` | |
| `cards` | `ProjectCard[]?` | `[]` | `{ title, href?, image?: { src?, alt? } }`. With `href` the whole card is a link. A card without `title` is dropped. With no cards the band renders nothing. |
| `duration` | `number?` | `65` | Seconds for one full loop of the set. |
| `listLabel` | `string?` | `"Recent projects"` | Accessible name of the list. |
| `fontStylesheet` | `string?` | Outfit + DM Sans | `""` skips the link. |
| `class`, `id` | `string?` | — | |

`image.src: ""` (or no image) renders a labelled 3:4 placeholder.

## Behaviour

| Element | Effect | Measured / chosen |
| :--- | :--- | :--- |
| Strip | `translateX(0)` → `-50%` of a doubled set, linear, infinite | full loop ≈ 65s, as measured |
| Strip hover / focus-within | `animation-play-state: paused` | approximation |
| Card with keyboard focus | drift stops at its origin; the script scrolls the strip so the whole focused card is visible, and resets that scroll when focus leaves | accessibility addition |
| Title appear | fades up from `translateY(40px)` | as measured |
| Label bars appear | slide in from `translateX(-160px)` and fade, clipped by the card | −160.198px measured |

The drift is pure CSS and runs without JS. The script (one
IntersectionObserver plus focusin/focusout on the strip, all on one
AbortController released on `astro:before-swap`) handles the appear and the
focus scroll; the hidden label pose exists only while the root has
`data-ppm-anim`.

## Accessibility

- A real `<ul>` with an accessible name. The duplicate set is `aria-hidden`
  and `inert`, so it is neither read nor tabbable.
- Link cards get a 3px inset orange focus ring plus a ring on the label bar.
- Moving content can be paused (hover or focus), satisfying WCAG 2.2.2's
  pause requirement for pointer and keyboard users; reduced-motion users get
  no motion at all.
- Under `forced-colors: active` cards and labels get real borders.

## Reduced motion

The copy set is removed, the animation is off, and the strip becomes a still,
horizontally scrollable row (thin scrollbar) with a 20px leading inset.

## Responsive

| Width | Cards | Gap | Heading | Title block |
| :--- | :--- | :--- | :--- | :--- |
| ≥ 1200 | 360 × 480 | 30 | 48/57.6 | centred with rules |
| 810–1199 | 330 × 440 | 30 | 40 | centred with rules |
| < 810 | 290 × 387 | 24 | 32 | left-aligned, no rules (as the phone capture) |

Label bars sit 20px in from the card edges (14px on a phone), Outfit 24/34
(20px on a phone), 13px padding, 5px radius, as measured.

## Images and credits

All five photos are from Unsplash (Unsplash License — free for commercial use,
no attribution required), optimised to WebP at 720×960:

- `project-1.webp` — `U0YDKlJCec0`
- `project-2.webp` — `Beg5nxwR9tA`
- `project-3.webp` — `82ZiY5pzl1c`
- `project-4.webp` — `GK8x_XCcDZg`
- `project-5.webp` — `w0U2ckN9wig`

## Approximations

- **Pause on hover/focus** was not observed on the reference; added for
  accessibility and flagged as such.
- **Label timing.** The −160px start pose is measured; the 0.8s ease is not.
  Labels all enter together when the strip enters view (the reference's
  per-card trigger could not be sampled).
- **Background.** The reference's SVG pattern is redrawn as a faint 48×24
  chevron texture on `#f1f2f4`.
- **Phone card size** (290 wide, 3:4) is read from the 390px screenshot; the
  capture clips the bottom of the strip.
- Tablet layout is inferred.

===== END src/components/ProjectPhotoMarquee.md =====

===== FILE (required): public/project-photo-marquee/project-1.webp =====
[binary asset — download https://astro.baysixmedia.com/project-photo-marquee/project-1.webp and save it to public/project-photo-marquee/project-1.webp]

===== FILE (required): public/project-photo-marquee/project-2.webp =====
[binary asset — download https://astro.baysixmedia.com/project-photo-marquee/project-2.webp and save it to public/project-photo-marquee/project-2.webp]

===== FILE (required): public/project-photo-marquee/project-3.webp =====
[binary asset — download https://astro.baysixmedia.com/project-photo-marquee/project-3.webp and save it to public/project-photo-marquee/project-3.webp]

===== FILE (required): public/project-photo-marquee/project-4.webp =====
[binary asset — download https://astro.baysixmedia.com/project-photo-marquee/project-4.webp and save it to public/project-photo-marquee/project-4.webp]

===== FILE (required): public/project-photo-marquee/project-5.webp =====
[binary asset — download https://astro.baysixmedia.com/project-photo-marquee/project-5.webp and save it to public/project-photo-marquee/project-5.webp]

--- 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: event-tested only. Handlers respond to dispatched lifecycle events; this has NOT been certified against a real <ClientRouter /> transition.

--- 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.

“Project photo marquee” from my Astro Component Library:
https://astro.baysixmedia.com/components/project-photo-marquee/

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.