diff --git a/components/src/Scroller/Scroller.mdx b/components/src/Scroller/Scroller.mdx
new file mode 100644
index 00000000..5d764a22
--- /dev/null
+++ b/components/src/Scroller/Scroller.mdx
@@ -0,0 +1,25 @@
+import { Controls, Meta } from '@storybook/addon-docs/blocks';
+
+import * as ScrollerStories from './Scroller.stories.svelte';
+
+<Meta of={ScrollerStories} />
+
+# Scroller
+
+A scroller component for Svelte apps, based on svelte-scroller by Rich Harris ([license](#original-license)) but using a different approach to positioning (`position: sticky`).
+
+## Properties
+
+<Controls of={ScrollerStories.Default} />
+
+## Original license
+
+Copyright (c) 2018 Rich Harris
+
+Permission is hereby granted by the authors of this software, to any person, to use the software for any purpose, free of charge, including the rights to run, read, copy, change, distribute and sell it, and including usage rights to any patents the authors may hold on it, subject to the following conditions:
+
+This license, or a link to its text, must be included with all copies of the software and any derivative works.
+
+Any modification to the software submitted to the authors may be incorporated into the software under the terms of this license.
+
+The software is provided "as is", without warranty of any kind, including but not limited to the warranties of title, fitness, merchantability and non-infringement. The authors have no obligation to provide support or updates for the software, and may not be held liable for any damages, claims or other liability arising from its use.
diff --git a/components/src/Scroller/Scroller.stories.svelte b/components/src/Scroller/Scroller.stories.svelte
new file mode 100644
index 00000000..7015ad72
--- /dev/null
+++ b/components/src/Scroller/Scroller.stories.svelte
@@ -0,0 +1,101 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { expect } from 'storybook/test';
+
+	import Scroller from './Scroller.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Display/Scroller',
+		component: Scroller,
+		parameters: {
+			viewMode: 'docs',
+			previewTabs: {
+				canvas: { hidden: true }
+			}
+		}
+	});
+
+	let index = $state(0);
+	let offset = $state(0);
+	let progress = $state(0);
+</script>
+
+<Story
+	name="Default"
+	asChild
+	play={async ({ step, canvasElement }) => {
+		await step('Verify state values are set', async () => {
+			expect(index).toBeGreaterThanOrEqual(0);
+			expect(offset).toBeGreaterThanOrEqual(0);
+			expect(progress).toBeGreaterThanOrEqual(0);
+		});
+
+		await step('Foreground content is rendered', async () => {
+			const sections = canvasElement.querySelectorAll('svelte-scroller-foreground section');
+			expect(sections).toHaveLength(5);
+			expect(sections[0]).toHaveTextContent('This is the first section.');
+		});
+
+		await step('Background content is rendered', async () => {
+			const background = canvasElement.querySelector('svelte-scroller-background');
+			expect(background).toBeDefined();
+			expect(background).toHaveTextContent('This is the background content');
+		});
+
+		await step('Index is updated when scrolling', async () => {
+			// Store the event handler function separately
+			const scrollEndHandler = () => {
+				expect(index).toBe(3);
+				// Clean up the event listener after test has run
+				window.removeEventListener('scrollend', scrollEndHandler);
+				// Reset scroll position to top after test
+				window.scrollTo(0, 0);
+			};
+
+			// Add the event listener with the stored function reference
+			window.addEventListener('scrollend', scrollEndHandler);
+
+			const sections = canvasElement.querySelectorAll('svelte-scroller-foreground section');
+			sections[3].scrollIntoView();
+		});
+	}}
+>
+	<div>
+		<Scroller top={0.2} bottom={0.8} bind:index bind:offset bind:progress>
+			{#snippet background()}
+				<p>
+					This is the background content. It will stay fixed in place while the foreground scrolls
+					over the top.
+				</p>
+				<p>
+					<strong>Section {index + 1}</strong> is currently active.
+				</p>
+
+				<p><code>index</code> / {index}</p>
+				<p><code>offset</code> / {offset}</p>
+				<p><code>progress</code> / {progress}</p>
+			{/snippet}
+
+			{#snippet foreground()}
+				<section>This is the first section.</section>
+				<section>This is the second section.</section>
+				<section>This is the third section.</section>
+				<section>This is the fourth section.</section>
+				<section>This is the fifth section.</section>
+			{/snippet}
+		</Scroller>
+	</div>
+</Story>
+
+<style>
+	section {
+		height: 25vh;
+		background: #cccc;
+		padding: 0.5rem;
+		margin-bottom: 50vh;
+	}
+
+	p {
+		padding: 0.5rem;
+	}
+</style>
diff --git a/components/src/Scroller/Scroller.svelte b/components/src/Scroller/Scroller.svelte
new file mode 100644
index 00000000..f6ed8daa
--- /dev/null
+++ b/components/src/Scroller/Scroller.svelte
@@ -0,0 +1,339 @@
+<script module lang="ts">
+	interface ScrollHandler {
+		(): void;
+	}
+
+	interface ScrollerInstance {
+		outerWrapper: HTMLElement;
+		update: ScrollHandler;
+	}
+
+	interface ScrollManager {
+		add(scroller: ScrollerInstance): void;
+		remove(scroller: ScrollerInstance): void;
+	}
+
+	const handlers: ScrollHandler[] = [];
+	let manager: ScrollManager;
+
+	// Global scroll and resize event handling
+	if (typeof window !== 'undefined') {
+		const runAllHandlers = (): void => {
+			handlers.forEach((handler) => handler());
+		};
+
+		window.addEventListener('scroll', runAllHandlers, { passive: true });
+		window.addEventListener('resize', runAllHandlers, { passive: true });
+	}
+
+	// Intersection Observer for performance optimization
+	if (typeof IntersectionObserver !== 'undefined') {
+		const handlerMap = new Map<Element, ScrollHandler>();
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					const update = handlerMap.get(entry.target);
+					if (!update) return;
+
+					const handlerIndex = handlers.indexOf(update);
+
+					if (entry.isIntersecting) {
+						if (handlerIndex === -1) {
+							handlers.push(update);
+						}
+					} else {
+						update();
+						if (handlerIndex !== -1) {
+							handlers.splice(handlerIndex, 1);
+						}
+					}
+				});
+			},
+			{
+				rootMargin: '400px 0px' // TODO why 400?
+			}
+		);
+
+		manager = {
+			add: ({ outerWrapper, update }: ScrollerInstance): void => {
+				const { top, bottom } = outerWrapper.getBoundingClientRect();
+
+				// Add handler if element is initially visible
+				if (top < window.innerHeight && bottom > 0) {
+					handlers.push(update);
+				}
+
+				handlerMap.set(outerWrapper, update);
+				observer.observe(outerWrapper);
+			},
+
+			remove: ({ outerWrapper, update }: ScrollerInstance): void => {
+				const handlerIndex = handlers.indexOf(update);
+				if (handlerIndex !== -1) {
+					handlers.splice(handlerIndex, 1);
+				}
+
+				handlerMap.delete(outerWrapper);
+				observer.unobserve(outerWrapper);
+			}
+		};
+	} else {
+		// Fallback for browsers without IntersectionObserver
+		manager = {
+			add: ({ update }: ScrollerInstance): void => {
+				handlers.push(update);
+			},
+
+			remove: ({ update }: ScrollerInstance): void => {
+				const handlerIndex = handlers.indexOf(update);
+				if (handlerIndex !== -1) {
+					handlers.splice(handlerIndex, 1);
+				}
+			}
+		};
+	}
+</script>
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	/**
+	 * Props interface for the Scroller component
+	 */
+	interface ScrollerProps {
+		/**
+		 * The content to show in the foreground, to be set via `{#snippet foreground()}`. This should contain multiple sections, each matching the `query` selector.
+		 */
+		foreground?: Snippet;
+
+		/**
+		 * The content to show in the background, to be set via `{#snippet background()}`. This will be fixed in place while the foreground scrolls over it.
+		 */
+		background?: Snippet;
+
+		/**
+		 * The vertical position that the top of the foreground must scroll past before the background becomes fixed,
+		 * as a proportion of window height (0 = top of viewport, 1 = bottom of viewport)
+		 */
+		top?: number;
+
+		/**
+		 * The inverse of top — once the bottom of the foreground passes this point, the background becomes unfixed.
+		 * As a proportion of window height (0 = top of viewport, 1 = bottom of viewport)
+		 */
+		bottom?: number;
+
+		/**
+		 * Once a section crosses this point, it becomes 'active'.
+		 * As a proportion of window height (0 = top of viewport, 1 = bottom of viewport)
+		 */
+		threshold?: number;
+
+		/**
+		 * A CSS selector that describes the individual sections of your foreground
+		 */
+		query?: string;
+
+		/**
+		 * If true, the background will scroll such that the bottom edge reaches the bottom at the same time as the foreground.
+		 * This effect can be unpleasant for people with high motion sensitivity, so use it advisedly.
+		 */
+		parallax?: boolean;
+
+		/**
+		 * The index of the currently active section (bindable)
+		 */
+		index?: number;
+
+		/**
+		 * The total number of sections (bindable)
+		 */
+		count?: number;
+
+		/**
+		 * How far the section has scrolled past the threshold, as a value between 0 and 1 (bindable)
+		 */
+		offset?: number;
+
+		/**
+		 * How far the foreground has travelled, where 0 is the top of the foreground crossing top,
+		 * and 1 is the bottom crossing bottom (bindable)
+		 */
+		progress?: number;
+
+		/**
+		 * Whether the scroller is currently visible in the viewport (bindable)
+		 */
+		visible?: boolean;
+	}
+
+	let {
+		// Configuration props (read-only)
+		foreground = null,
+		background = null,
+		top = 0,
+		bottom = 1,
+		threshold = 0.5,
+		query = 'section',
+		parallax = false,
+
+		// Binding props (two-way binding)
+		index = $bindable(0),
+		count = $bindable(0),
+		offset = $bindable(0),
+		progress = $bindable(0),
+		visible = $bindable(false)
+	}: ScrollerProps = $props();
+
+	// Element bindings
+	let outerWrapper = $state<HTMLElement>();
+	let foregroundWrapper = $state<HTMLElement>();
+	let backgroundWrapper = $state<HTMLElement>();
+
+	// Internal state
+	let sections = $state<NodeListOf<Element>>();
+	let windowHeight = $state(0);
+	let offsetTop = $state(0);
+	let containerWidth = $state(1);
+	let containerLeft = $state(0);
+
+	// Computed values
+	let topPx = $derived(Math.round(top * windowHeight));
+	let bottomPx = $derived(Math.round(bottom * windowHeight));
+	let thresholdPx = $derived(Math.round(threshold * windowHeight));
+
+	let backgroundStyle = $derived(`
+		top: ${offsetTop || topPx}px;
+		z-index: ${progress > 1 ? 3 : 1};
+	`);
+
+	// Reactive updates
+	$effect(() => {
+		if (top || bottom || threshold || parallax) {
+			update();
+		}
+	});
+
+	onMount(() => {
+		if (!foregroundWrapper) return;
+
+		sections = foregroundWrapper.querySelectorAll(query);
+		count = sections.length;
+
+		update();
+
+		const scrollerInstance: ScrollerInstance = { outerWrapper, update };
+		manager.add(scrollerInstance);
+
+		return () => {
+			manager.remove(scrollerInstance);
+		};
+	});
+
+	function update(): void {
+		if (!foregroundWrapper || !backgroundWrapper || !outerWrapper) return;
+
+		updateContainerMeasurements();
+		updateScrollProgress();
+		updateActiveSection();
+	}
+
+	function updateContainerMeasurements(): void {
+		const outerRect = outerWrapper.getBoundingClientRect();
+		containerLeft = outerRect.left;
+		containerWidth = outerRect.right - outerRect.left;
+	}
+
+	function updateScrollProgress(): void {
+		const foregroundRect = foregroundWrapper.getBoundingClientRect();
+		const backgroundRect = backgroundWrapper.getBoundingClientRect();
+
+		visible = foregroundRect.top < windowHeight && foregroundRect.bottom > 0;
+
+		const foregroundHeight = foregroundRect.bottom - foregroundRect.top;
+		const backgroundHeight = backgroundRect.bottom - backgroundRect.top;
+		const availableSpace = bottomPx - topPx;
+
+		progress = (topPx - foregroundRect.top) / (foregroundHeight - availableSpace);
+
+		if (parallax) {
+			offsetTop = Math.round(topPx - progress * (backgroundHeight - availableSpace));
+		}
+	}
+
+	function updateActiveSection(): void {
+		if (!sections?.length) return;
+
+		const foregroundRect = foregroundWrapper.getBoundingClientRect();
+
+		for (let i = 0; i < sections.length; i++) {
+			const section = sections[i];
+			const sectionRect = section.getBoundingClientRect();
+			const sectionTop = sectionRect.top;
+
+			const nextSection = sections[i + 1];
+			const sectionBottom = nextSection
+				? nextSection.getBoundingClientRect().top
+				: foregroundRect.bottom;
+
+			offset = (thresholdPx - sectionTop) / (sectionBottom - sectionTop);
+
+			if (sectionBottom >= thresholdPx) {
+				index = i;
+				break;
+			}
+		}
+	}
+</script>
+
+<svelte:window bind:innerHeight={windowHeight} />
+
+<svelte-scroller-outer bind:this={outerWrapper}>
+	<svelte-scroller-background-container class="background-container">
+		<svelte-scroller-background bind:this={backgroundWrapper} style={backgroundStyle}>
+			{@render background()}
+		</svelte-scroller-background>
+	</svelte-scroller-background-container>
+
+	<svelte-scroller-foreground bind:this={foregroundWrapper}>
+		{@render foreground()}
+	</svelte-scroller-foreground>
+</svelte-scroller-outer>
+
+<style>
+	svelte-scroller-outer {
+		display: block;
+		position: relative;
+	}
+
+	svelte-scroller-background {
+		display: block;
+		position: sticky;
+		top: 0;
+		width: 100%;
+	}
+
+	svelte-scroller-foreground {
+		display: block;
+		position: relative;
+		z-index: 2;
+	}
+
+	svelte-scroller-foreground::after {
+		content: '';
+		display: block;
+		clear: both;
+	}
+
+	svelte-scroller-background-container {
+		display: block;
+		position: absolute;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+		pointer-events: none;
+		will-change: transform;
+	}
+</style>
diff --git a/components/src/Scroller/index.ts b/components/src/Scroller/index.ts
new file mode 100644
index 00000000..7603e1f7
--- /dev/null
+++ b/components/src/Scroller/index.ts
@@ -0,0 +1,2 @@
+import Scroller from './Scroller.svelte';
+export default Scroller;
diff --git a/components/src/index.js b/components/src/index.js
index 347844e9..b93bed42 100644
--- a/components/src/index.js
+++ b/components/src/index.js
@@ -11,6 +11,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';
 
 // Chart
 export { default as ChartHeader } from './ChartHeader/ChartHeader.svelte';