From 461f9b48aa1373de3d1ed7746cc65d5176a7ef98 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 22 Oct 2025 17:41:33 +0200
Subject: [PATCH 1/2] Block out component

---
 .../src/DesignTokens/DesignTokens.svelte      |  2 +
 components/src/DesignTokens/Tokens.ts         |  6 +-
 .../ScrollerSection.stories.svelte            | 56 +++++++++++++++++++
 .../ScrollerSection/ScrollerSection.svelte    | 42 ++++++++++++++
 components/src/ScrollerSection/index.ts       |  2 +
 components/src/index.js                       |  1 +
 6 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 components/src/ScrollerSection/ScrollerSection.stories.svelte
 create mode 100644 components/src/ScrollerSection/ScrollerSection.svelte
 create mode 100644 components/src/ScrollerSection/index.ts

diff --git a/components/src/DesignTokens/DesignTokens.svelte b/components/src/DesignTokens/DesignTokens.svelte
index 2ed5ea1b..97cc1005 100644
--- a/components/src/DesignTokens/DesignTokens.svelte
+++ b/components/src/DesignTokens/DesignTokens.svelte
@@ -61,6 +61,7 @@
 		--color-pageFill: var(--pageFill-light);
 		--color-surfaceFill: var(--surfaceFill-light);
 		--color-surfaceBorder: var(--surfaceBorder-light);
+		--color-dropShadow: var(--dropShadow-light);
 
 		&[data-theme='dark'] {
 			--color-logoFill: var(--logoFill-dark);
@@ -70,6 +71,7 @@
 			--color-textPrimary: var(--textPrimary-dark);
 			--color-textSecondary: var(--textSecondary-dark);
 			--color-textSecondaryHover: var(--textSecondaryHover-dark);
+			--color-dropShadow: var(--dropShadow-dark);
 		}
 
 		--swr-text: 'SWR-VAR-Text', sans-serif;
diff --git a/components/src/DesignTokens/Tokens.ts b/components/src/DesignTokens/Tokens.ts
index 88caec31..5466d795 100644
--- a/components/src/DesignTokens/Tokens.ts
+++ b/components/src/DesignTokens/Tokens.ts
@@ -183,11 +183,15 @@ const semantics: ColourMap = {
 	},
 	surfaceBorder: {
 		dark: 'hsl(0, 0%, 35%)',
-		light: shades.gray.base
+		light: shades.gray.light3
 	},
 	pageFill: {
 		dark: '#0C0C0C',
 		light: '#fff'
+	},
+	dropShadow: {
+		dark: 'rgba(0,0,0, 0.25)',
+		light: 'rgba(0,0,0, 0.0375)'
 	}
 };
 
diff --git a/components/src/ScrollerSection/ScrollerSection.stories.svelte b/components/src/ScrollerSection/ScrollerSection.stories.svelte
new file mode 100644
index 00000000..d194258a
--- /dev/null
+++ b/components/src/ScrollerSection/ScrollerSection.stories.svelte
@@ -0,0 +1,56 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	import ScrollerSection from './ScrollerSection.svelte';
+	import Scroller from '../Scroller/Scroller.svelte';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Display/ScrollerSection',
+		component: ScrollerSection,
+		parameters: {
+			viewMode: 'docs',
+			previewTabs: {
+				canvas: { hidden: true }
+			}
+		}
+	});
+
+	let index = $state(0);
+</script>
+
+<Story name="Default" asChild>
+	<DesignTokens theme="dark">
+		<div>
+			<Scroller bind:index>
+				{#snippet background()}
+					<p>
+						This is the background content. It will stay fixed in place while the foreground scrolls
+						over the top. Index: {index}
+					</p>
+				{/snippet}
+
+				{#snippet foreground()}
+					<ScrollerSection
+						>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo earum dolore nam debitis
+						velit aliquam quae, minima praesentium ratione et.
+					</ScrollerSection>
+					<ScrollerSection
+						>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo earum dolore nam debitis
+						velit aliquam quae, minima praesentium ratione et.
+					</ScrollerSection>
+					<ScrollerSection
+						>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo earum dolore nam debitis
+						velit aliquam quae, minima praesentium ratione et.
+					</ScrollerSection>
+				{/snippet}
+			</Scroller>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	p {
+		padding: 0.5rem;
+	}
+</style>
diff --git a/components/src/ScrollerSection/ScrollerSection.svelte b/components/src/ScrollerSection/ScrollerSection.svelte
new file mode 100644
index 00000000..dce86fa6
--- /dev/null
+++ b/components/src/ScrollerSection/ScrollerSection.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	interface SlideContentProps {
+		height?: string;
+		children: Snippet;
+	}
+
+	let { height = '100vh', children }: SlideContentProps = $props();
+</script>
+
+<section class="container" style:height>
+	<div class="inner">
+		{@render children?.()}
+	</div>
+</section>
+
+<style lang="scss">
+	.container {
+		display: flex;
+		align-items: center;
+	}
+	.inner {
+		margin: 0 auto;
+		padding: 1em 1.5em;
+		color: var(--color-textPrimary);
+		max-width: 40em;
+		font-family: var(--swr-sans);
+		font-weight: 400;
+		line-height: 1.5;
+		letter-spacing: 0.01em;
+		font-size: var(--fs-small-1);
+		border-radius: 8px;
+		background: var(--color-surfaceFill);
+		box-shadow: 0 0 8px 1px var(--color-dropShadow);
+		border: 1px solid var(--color-surfaceBorder);
+		@media (min-width: 500px) {
+			padding: 1.25em;
+			margin: 1em auto;
+		}
+	}
+</style>
diff --git a/components/src/ScrollerSection/index.ts b/components/src/ScrollerSection/index.ts
new file mode 100644
index 00000000..f7a183e6
--- /dev/null
+++ b/components/src/ScrollerSection/index.ts
@@ -0,0 +1,2 @@
+import ScrollerSection from './ScrollerSection.svelte';
+export default ScrollerSection;
diff --git a/components/src/index.js b/components/src/index.js
index a6889b34..0796864a 100644
--- a/components/src/index.js
+++ b/components/src/index.js
@@ -12,6 +12,7 @@ export { default as Note } from './Note/Note.svelte';
 // Display
 export { default as Card } from './Card/Card.svelte';
 export { default as Scroller } from './Scroller/Scroller.svelte';
+export { default as ScrollerSection } from './ScrollerSection/ScrollerSection.svelte';
 export { default as SwrHeader } from './SwrHeader/SwrHeader.svelte';
 
 // Chart

From 4855e0915e8e10da70a7a6f5a5143c3f5db04e9a Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 22 Oct 2025 17:49:16 +0200
Subject: [PATCH 2/2] Tweak surfaceBorder token

---
 components/src/DesignTokens/Tokens.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/DesignTokens/Tokens.ts b/components/src/DesignTokens/Tokens.ts
index 5466d795..a5b13450 100644
--- a/components/src/DesignTokens/Tokens.ts
+++ b/components/src/DesignTokens/Tokens.ts
@@ -182,7 +182,7 @@ const semantics: ColourMap = {
 		light: '#ffffff'
 	},
 	surfaceBorder: {
-		dark: 'hsl(0, 0%, 35%)',
+		dark: 'rgba(255,255,255,.15)',
 		light: shades.gray.light3
 	},
 	pageFill: {