Sticky project stack

Install kit: "Sticky project stack"
Library page: https://astro.baysixmedia.com/components/sticky-project-stack/
Files: 4 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/StickyProjectStack.astro =====
---
/**
 * StickyProjectStack
 *
 * A navy projects section: outlined eyebrow on the left, a big white
 * uppercase heading on the right, then a stack of wide project cards. From
 * 810px each card is `position: sticky` 120px from the top, so scrolling
 * slides the next card up over the one before — pure CSS, no script needed
 * for the stacking. Each card carries two pills, a title, a paragraph, an
 * orange pill link and a photo with a chamfered top-left corner.
 *
 * Heading words rise in and the stack lifts in the first time it scrolls into
 * view.
 *
 * Heading syntax: wrap the orange words in asterisks.
 *
 * Reads the --tw-* tokens from any ancestor, with fallbacks.
 */

export interface StickyProject {
	title: string;
	text?: string;
	/** Orange pill. */
	category?: string;
	/** Translucent pill, e.g. a year. */
	meta?: string;
	cta?: { label: string; href: string } | null;
	/** `src: ""` renders a labelled placeholder. */
	image?: { src?: string; alt?: string };
}

export interface StickyProjectStackProps {
	eyebrow?: string;
	heading?: string;
	headingLevel?: "h2" | "h3";
	projects?: StickyProject[];
	/** Distance from the viewport top where each card sticks. Clear your fixed header. */
	stickyTop?: string;
	background?: string;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends StickyProjectStackProps {}

const {
	eyebrow = "Our Projects",
	heading = "",
	headingLevel = "h2",
	projects: rawProjects = [],
	stickyTop = "120px",
	background = "#0b4654",
	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 words = heading
	.split("*")
	.flatMap((seg, i) => seg.split(/\s+/).filter(Boolean).map((w) => ({ w, accent: i % 2 === 1 })));

/* A project without a title is dropped. No projects, no section: the eyebrow alone says nothing. */
const projects = rawProjects.filter((p) => p?.title);

const Heading = headingLevel;
const Title = headingLevel === "h2" ? "h3" : "h4";
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");
---

{projects.length > 0 && (
<>
{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section class:list={["sps", className]} id={id} style={`--sps-band:${background};--sps-top:${stickyTop}`} data-sps-root>
	<div class="sps-inner">
		<div class="sps-head">
			{eyebrow && <p class="sps-eyebrow">{eyebrow}</p>}
			{words.length > 0 && (
			<Heading class="sps-heading" data-sps-reveal="words">
				{
					words.map((t, i) => (
						<>
							{i > 0 && " "}
							<span class:list={["sps-w", { "sps-accent": t.accent }]} style={`--i:${i}`}>
								{t.w}
							</span>
						</>
					))
				}
			</Heading>
			)}
		</div>

		<ol class="sps-stack" data-sps-reveal="up">
			{
				projects.map((p, i) => {
					const img = p.image ?? { src: "" };
					return (
						<li class="sps-card" style={`--n:${i}`}>
							<div class="sps-copy">
								{(p.category || p.meta) && (
									<p class="sps-pills">
										{p.category && <span class="sps-pill sps-pill--accent">{p.category}</span>}
										{p.meta && <span class="sps-pill">{p.meta}</span>}
									</p>
								)}
								<Title class="sps-title">{p.title}</Title>
								{p.text && <p class="sps-text">{p.text}</p>}
								{p.cta && (
									<a class="sps-btn" href={safeHref(p.cta.href)}>
										<span>{p.cta.label}</span>
										<span class="sps-sr">: {p.title}</span>
										<span class="sps-btn-ic" aria-hidden="true">
											<svg viewBox="0 0 24 24"><path d="M8 5l10 7-10 7 3-7Z" fill="currentColor" /></svg>
										</span>
									</a>
								)}
							</div>
							<div class="sps-media">
								{img.src ? (
									<img src={img.src} alt={img.alt ?? ""} width="1160" height="934" loading="lazy" decoding="async" />
								) : (
									<div class="sps-ph" role="img" aria-label={`Image placeholder: ${p.title}`}>
										<span>Image · 1160 × 934</span>
									</div>
								)}
							</div>
						</li>
					);
				})
			}
		</ol>
	</div>
</section>
</>
)}

<style>
	.sps {
		--sps-navy: var(--tw-navy, #0b4654);
		--sps-card: var(--tw-navy-2, #15505e);
		--sps-deep: var(--tw-navy-deep, #052931);
		--sps-accent: var(--tw-accent, #ff6d45);
		--sps-display: var(--tw-display, Outfit, ui-sans-serif, system-ui, sans-serif);
		--sps-body: var(--tw-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
		--sps-card-font: var(--tw-card, Inter, ui-sans-serif, system-ui, sans-serif);
		--sps-ease: cubic-bezier(0.44, 0, 0.56, 1);
		--sps-cut: 70px;

		background: var(--sps-band);
		color: #fff;
		font-family: var(--sps-body);
	}

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

	.sps-inner {
		max-width: 1440px;
		margin: 0 auto;
		padding: 64px 16px;
	}

	.sps-head {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 18px;
		text-align: center;
	}

	.sps-eyebrow {
		margin: 0;
		padding: 4px 14px;
		border: 1px solid var(--sps-accent);
		border-radius: 999px;
		color: var(--sps-accent);
		font: 500 15px/24px var(--sps-body);
		letter-spacing: -0.3px;
		text-transform: uppercase;
	}

	.sps-heading {
		max-width: 680px;
		margin: 0;
		font: 700 28px/1.2 var(--sps-display);
		letter-spacing: -0.56px;
		text-transform: uppercase;
	}

	.sps-w {
		display: inline-block;
	}

	.sps-accent {
		color: var(--sps-accent);
	}

	.sps-stack {
		display: grid;
		gap: 20px;
		margin: 40px 0 0;
		padding: 0;
		list-style: none;
	}

	.sps-card {
		display: flex;
		flex-direction: column;
		gap: 28px;
		padding: 22px;
		border: 1px solid rgb(255 255 255 / 0.08);
		border-radius: 20px;
		background: var(--sps-card);
	}

	.sps-copy {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		min-width: 0;
	}

	.sps-pills {
		display: flex;
		gap: 10px;
		margin: 0 0 18px;
	}

	.sps-pill {
		padding: 4px 12px;
		border-radius: 18px;
		background: rgb(255 255 255 / 0.1);
		font: 400 12px/19.2px var(--sps-body);
		letter-spacing: -0.24px;
		text-transform: uppercase;
	}

	.sps-pill--accent {
		background: var(--sps-accent);
	}

	.sps-title {
		margin: 0;
		font: 700 24px/1.35 var(--sps-card-font);
		letter-spacing: -0.96px;
		text-transform: uppercase;
	}

	.sps-text {
		max-width: 580px;
		margin: 12px 0 0;
		font: 400 15px/24px var(--sps-body);
		letter-spacing: -0.3px;
	}

	.sps-btn {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		height: 50px;
		margin-top: 28px;
		padding: 0 8px 0 25px;
		border-radius: 999px;
		background: var(--sps-accent);
		color: #fff;
		font: 400 16px/25.6px var(--sps-body);
		letter-spacing: -0.32px;
		text-decoration: none;
		transition: background-color 0.3s var(--sps-ease);
	}

	.sps-btn:hover {
		background: var(--sps-deep);
	}

	.sps-btn-ic {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: #fff;
		color: var(--sps-accent);
		transition: transform 0.3s var(--sps-ease);
	}

	.sps-btn-ic svg {
		width: 18px;
		height: 18px;
	}

	.sps-btn:hover .sps-btn-ic {
		transform: rotate(-45deg);
	}

	.sps-btn:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 3px;
	}

	.sps-media {
		aspect-ratio: 580 / 467;
		min-width: 0;
	}

	.sps-media img,
	.sps-ph {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 20px;
		clip-path: polygon(var(--sps-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--sps-cut));
	}

	.sps-ph {
		display: grid;
		place-items: center;
		background: repeating-linear-gradient(135deg, #1b5a68 0 12px, #20616f 12px 24px);
		font: 500 13px/1.4 var(--sps-body);
	}

	.sps-sr {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	[data-sps-reveal="up"] {
		transition:
			opacity 0.8s var(--sps-ease),
			transform 0.8s var(--sps-ease);
	}

	.sps[data-sps-ready] [data-sps-reveal="up"]:not([data-in]) {
		opacity: 0;
		transform: translateY(80px);
	}

	.sps-w {
		transition:
			opacity 0.6s var(--sps-ease) calc(var(--i) * 0.06s),
			transform 0.6s var(--sps-ease) calc(var(--i) * 0.06s);
	}

	.sps[data-sps-ready] [data-sps-reveal="words"]:not([data-in]) .sps-w {
		opacity: 0;
		transform: translateY(10px);
	}

	@media (min-width: 810px) {
		.sps-inner {
			padding: 90px 40px;
		}

		.sps-head {
			flex-direction: row;
			align-items: flex-start;
			justify-content: space-between;
			text-align: left;
		}

		.sps-eyebrow {
			margin-top: 40px;
		}

		.sps-heading {
			width: 58%;
			font-size: 38px;
			letter-spacing: -0.76px;
		}

		/* The stack: every card sticks at the same offset, later ones on top. */
		.sps-card {
			position: sticky;
			top: var(--sps-top);
			flex-direction: row;
			gap: 40px;
			min-height: 460px;
			padding: 36px;
		}

		.sps-copy {
			flex: 1 1 0;
		}

		.sps-text {
			margin-top: auto;
		}

		.sps-title {
			margin-bottom: 40px;
			font-size: 30px;
		}

		.sps-media {
			flex: 1 1 0;
			aspect-ratio: auto;
		}
	}

	@media (min-width: 1200px) {
		.sps-inner {
			padding: 100px 65px 110px;
		}

		.sps-eyebrow {
			margin: 48px 0 0 15px;
		}

		.sps-heading {
			width: 700px;
			font-size: 50px;
			line-height: 60px;
			letter-spacing: -1px;
		}

		.sps-stack {
			margin-top: 110px;
		}

		.sps-card {
			min-height: 556px;
			padding: 45px 50px;
			gap: 50px;
		}

		.sps-copy {
			flex: 0 0 530px;
			padding-top: 5px;
		}

		.sps-title {
			font-size: 36px;
			line-height: 50.4px;
			letter-spacing: -1.44px;
		}

		.sps-media {
			flex: 1 1 auto;
			height: 467px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		[data-sps-reveal="up"],
		.sps-w,
		.sps-btn,
		.sps-btn-ic {
			transition: none;
		}

		.sps-btn:hover .sps-btn-ic {
			transform: none;
		}
	}
</style>

<script>
	/* Appear-on-scroll; one observer per instance, torn down on astro:before-swap.
	   The sticky stacking itself is CSS and needs no script. */
	function initStickyProjectStack(root: HTMLElement) {
		if (root.dataset.spsReady === "") return;
		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window)) return;
		const controller = new AbortController();
		root.dataset.spsReady = "";
		const io = new IntersectionObserver(
			(entries) => {
				for (const entry of entries) {
					if (!entry.isIntersecting) continue;
					(entry.target as HTMLElement).dataset.in = "";
					io.unobserve(entry.target);
				}
			},
			{ threshold: 0, rootMargin: "0px 0px -10% 0px" },
		);
		root.querySelectorAll<HTMLElement>("[data-sps-reveal]").forEach((t) => io.observe(t));
		controller.signal.addEventListener("abort", () => io.disconnect());
		document.addEventListener(
			"astro:before-swap",
			() => {
				controller.abort();
				delete root.dataset.spsReady;
			},
			{ once: true, signal: controller.signal },
		);
	}

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

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

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

===== END src/components/StickyProjectStack.astro =====

===== FILE (supporting): src/components/StickyProjectStack.md =====
# Sticky project stack

A navy projects section: outlined eyebrow and a big white uppercase heading,
then wide project cards that stack as you scroll. From 810px every card is
`position: sticky` at `stickyTop` (120px), so each one slides up over the
last. Each card: two pills, a title, a paragraph, an orange pill link and a
photo with a chamfered top-left corner.

Catalog page: `/components/sticky-project-stack`

## Files required

- **`StickyProjectStack.astro`** — the component. The stacking is CSS; the
  script is only the appear observer.
- `public/sticky-project-stack/desert-truck.webp`, `aerial-ship.webp`,
  `container-ship.webp` — optional demo photos, passed by the catalog demo.
- `StickyProjectStack.md` — this file.

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow` | `string?` | `"Our Projects"` | Generic label; shown only alongside projects. Empty drops it. |
| `heading` | `string?` | `""` | Orange words in `*asterisks*`. Empty drops the heading. |
| `headingLevel` | `"h2" \| "h3"` | `"h2"` | |
| `projects` | `{ title, text?, category?, meta?, cta?, image? }[]` | `[]` | `category` is the orange pill, `meta` the translucent one. A project without `title` is dropped. With no projects the section renders nothing. |
| `stickyTop` | `string?` | `"120px"` | Where cards stick. Clear your fixed header. |
| `background` | `string?` | `#0b4654` | |
| `fontStylesheet`, `class`, `id` | | | |

## Behaviour (measured)

- **Stacking:** cards are 556px tall with 20px between them and stick at
  120px, so each covers the previous one entirely (as the reference does).
- **Pill hover:** `#ff6d45` → `#052931`, arrow rotates −45°.
- The stack lifts in from 80px on first view; heading words rise from 10px.

## Integration

- Any ancestor with `overflow: hidden/auto/clip` between the section and the
  page scroller breaks `position: sticky`. Check wrappers first if the cards
  do not stack.
- Each link's accessible name includes the project title.

## Images and credits

| File | Size | Credit |
| :--- | :--- | :--- |
| `desert-truck.webp` | 1160 × 934 | Unsplash Rhwj3CPwc6o, Unsplash License |
| `aerial-ship.webp` | 1160 × 934 | Unsplash r1AIp7Vj3Mg, Unsplash License |
| `container-ship.webp` | 1160 × 934 | Unsplash bOGNLYidRXY, Unsplash License |

## Approximations

- The card border (`1px rgba(255,255,255,.08)`) is read off the screenshot.
- The photo chamfer is a clip-path, so its other corners are square.

===== END src/components/StickyProjectStack.md =====

===== FILE (required): public/sticky-project-stack/desert-truck.webp =====
[binary asset — download https://astro.baysixmedia.com/sticky-project-stack/desert-truck.webp and save it to public/sticky-project-stack/desert-truck.webp]

===== FILE (required): public/sticky-project-stack/aerial-ship.webp =====
[binary asset — download https://astro.baysixmedia.com/sticky-project-stack/aerial-ship.webp and save it to public/sticky-project-stack/aerial-ship.webp]

===== FILE (required): public/sticky-project-stack/container-ship.webp =====
[binary asset — download https://astro.baysixmedia.com/sticky-project-stack/container-ship.webp and save it to public/sticky-project-stack/container-ship.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.

“Sticky project stack” from my Astro Component Library:
https://astro.baysixmedia.com/components/sticky-project-stack/

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.