diff --git a/docs/package.json b/docs/package.json
index 8b9f669d..20c4dbe1 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,12 +14,12 @@
 		"@fontsource-variable/eb-garamond": "^5.2.5",
 		"@fontsource-variable/jetbrains-mono": "^5.2.5",
 		"@fontsource/plus-jakarta-sans": "^5.0.18",
-		"@neodrag/core": "workspace:*",
 		"@neodrag/svelte": "workspace:*",
 		"astro-seo": "^0.8.4",
 		"lightningcss": "^1.30.1",
 		"melt": "^0.34.0",
 		"popmotion": "^11.0.5",
+		"shiki": "^3.7.0",
 		"svelte-inview": "^4.0.1",
 		"zod": "^3.25.64"
 	},
diff --git a/docs/src/components/nav/Dock.svelte b/docs/src/components/nav/Dock.svelte
index 81681e33..e9d7bba0 100644
--- a/docs/src/components/nav/Dock.svelte
+++ b/docs/src/components/nav/Dock.svelte
@@ -67,13 +67,15 @@
 		vue: VueIcon,
 	};
 
+	const dockDrag = new Draggable({
+		plugins: [controls({ allow: ControlFrom.selector('.handle') })],
+	});
+
 	const is_tablet = new MediaQuery('(max-width: 967px)');
 
 	onMount(() => {
 		return on(window, 'astro:after-swap', (e) => console.log(e));
 	});
-
-	const drag_0 = new Draggable({ plugins: [controls({ allow: ControlFrom.selector('.handle') })] });
 </script>
 
 <div class={['overlay', menu_view.open && 'visible']}></div>
@@ -81,7 +83,7 @@
 <section class="dock-container">
 	<div
 		class={['dock-el', menu_view.open && 'menu-open']}
-		{@attach drag_0.attachment}
+		{@attach dockDrag.attachment}
 		{@attach interact_outside(() => menu_view.close())}
 	>
 		<div class="mobile expanded-menu">
diff --git a/docs/src/components/playground/LiveCodePanel.svelte b/docs/src/components/playground/LiveCodePanel.svelte
index a5d0c3e0..10bafc5d 100644
--- a/docs/src/components/playground/LiveCodePanel.svelte
+++ b/docs/src/components/playground/LiveCodePanel.svelte
@@ -1,208 +1,212 @@
 <script lang="ts">
-	import { copy } from '$attachments/copy';
-	import {
-		framework_meta,
-		PLAYGROUND_FRAMEWORKS,
-		type FrameworkId,
-	} from './frameworks';
+	import type { Framework } from '$helpers/constants';
+	import type { Snippet } from 'svelte';
+	import CheckIcon from '~icons/mdi/check';
+	import ContentCopyIcon from '~icons/mdi/content-copy';
+	import { FRAMEWORK_TABS } from './frameworks';
 	import { get_snippet } from './snippet-templates';
 	import type { WorldId } from './worlds';
-	import { WORLDS } from './worlds';
 
 	type Props = {
-		worldId: WorldId;
+		world: WorldId;
+		framework: Framework;
+		onframework: (id: Framework) => void;
+		snippets?: Snippet;
 	};
 
-	const { worldId }: Props = $props();
+	const { world, framework, onframework, snippets }: Props = $props();
 
-	let framework = $state<FrameworkId>('svelte');
-
-	const meta = $derived(WORLDS.find((w) => w.id === worldId)!);
-	const fw = $derived(framework_meta(framework));
-	const snippet = $derived(get_snippet(worldId, framework));
+	const snippet_text = $derived(get_snippet(world, framework));
 
 	let copied = $state(false);
+	let copy_timer: ReturnType<typeof setTimeout> | undefined;
+	let snippets_host: HTMLDivElement | undefined;
+
+	async function copy_snippet() {
+		await navigator.clipboard.writeText(snippet_text);
+		copied = true;
+		clearTimeout(copy_timer);
+		copy_timer = setTimeout(() => (copied = false), 1600);
+	}
+
+	const docs_href = $derived(
+		FRAMEWORK_TABS.find((t) => t.id === framework)?.docsPath ?? '/docs/svelte',
+	);
+
+	function sync_visible_snippet() {
+		if (!snippets_host) return;
+
+		for (const block of snippets_host.querySelectorAll<HTMLElement>('.playground-snippet')) {
+			const match =
+				block.dataset.world === world && block.dataset.framework === framework;
+			block.toggleAttribute('hidden', !match);
+		}
+	}
+
+	$effect(() => {
+		world;
+		framework;
+		sync_visible_snippet();
+	});
 </script>
 
-<aside class="code-panel">
-	<header class="code-header">
-		<div>
-			<p class="world-name">{meta.label}</p>
-			<p class="world-hint">{meta.hint}</p>
+<aside class="code-panel" aria-label="Code for this scene">
+	<header class="code-head">
+		<span class="label h3">Source</span>
+		<div class="head-actions">
+			<button type="button" class="icon-btn" title="Copy snippet" onclick={copy_snippet}>
+				{#if copied}
+					<CheckIcon />
+				{:else}
+					<ContentCopyIcon />
+				{/if}
+			</button>
+			<a class="docs-link unstyled" href={docs_href}>Docs</a>
 		</div>
 	</header>
 
-	<div class="framework-tabs" role="tablist" aria-label="Framework">
-		{#each PLAYGROUND_FRAMEWORKS as fw_option}
+	<div class="tabs" role="tablist" aria-label="Framework">
+		{#each FRAMEWORK_TABS as tab (tab.id)}
 			<button
 				type="button"
 				role="tab"
-				class="fw-tab"
-				class:active={framework === fw_option.id}
-				aria-selected={framework === fw_option.id}
-				data-framework={fw_option.id}
-				onclick={() => (framework = fw_option.id)}
+				aria-selected={framework === tab.id}
+				class:selected={framework === tab.id}
+				data-framework={tab.id}
+				onclick={() => onframework(tab.id)}
 			>
-				{fw_option.label}
+				{tab.label}
 			</button>
 		{/each}
 	</div>
 
-	<p class="demo-note">Demo runs in Svelte — snippet matches your stack.</p>
-
-	{#key `${worldId}-${framework}`}
-		<pre class="snippet"><code>{snippet}</code></pre>
-	{/key}
-
-	<div class="actions">
-		<button
-			type="button"
-			class="copy"
-			class:copied
-			{@attach copy({
-				text: snippet,
-				onCopy: () => {
-					copied = true;
-					setTimeout(() => (copied = false), 1500);
-				},
-			})}
-		>
-			{copied ? 'Copied' : 'Copy'}
-		</button>
-		<a class="docs-link" href={fw.docs}>Docs →</a>
+	<div class="code-body" bind:this={snippets_host}>
+		{#if snippets}
+			{@render snippets()}
+		{/if}
 	</div>
 </aside>
 
 <style>
+	@import './playground-chrome.css';
+
 	.code-panel {
 		display: flex;
 		flex-direction: column;
+		min-width: 0;
 		min-height: 0;
-		border-left: 1px solid color-mix(in lch, var(--app-color-dark), transparent 88%);
-		background: color-mix(in lch, var(--app-color-shell), var(--app-color-dark) 2%);
+		padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 2.5vw, 1.5rem) 0;
 	}
 
-	.code-header {
-		padding: 0.85rem 1rem 0.35rem;
-		flex-shrink: 0;
+	.code-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		margin-bottom: 0.85rem;
 	}
 
-	.world-name {
+	.label {
 		margin: 0;
-		font-family: var(--app-font-heading);
-		font-size: 1rem;
-		font-weight: 600;
 	}
 
-	.world-hint {
-		margin: 0.15rem 0 0;
-		font-size: 0.75rem;
-		opacity: 0.65;
-	}
-
-	.framework-tabs {
+	.head-actions {
 		display: flex;
-		flex-wrap: wrap;
-		gap: 0.25rem;
-		padding: 0 0.75rem 0.5rem;
-		flex-shrink: 0;
-	}
-
-	.fw-tab {
-		padding: 0.25rem 0.5rem;
-		border-radius: 0.4rem;
-		font-size: 0.65rem;
-		font-family: var(--app-font-mono);
-		cursor: pointer;
-		color: var(--app-color-dark);
-		opacity: 0.7;
-		transition:
-			background 0.12s ease,
-			opacity 0.12s ease;
+		align-items: center;
+		gap: 0.65rem;
 	}
 
-	.fw-tab:hover {
-		opacity: 1;
-		background: color-mix(in lch, var(--app-color-dark), transparent 92%);
-	}
-
-	.fw-tab.active[data-framework='svelte'] {
-		background: color-mix(in lch, var(--app-color-brand-svelte), transparent 15%);
-		color: var(--app-color-brand-svelte);
-	}
+	.icon-btn {
+		display: grid;
+		place-items: center;
+		width: 2.25rem;
+		height: 2.25rem;
+		border-radius: 0.5rem;
+		color: color-mix(in lch, var(--app-color-dark), transparent 20%);
 
-	.fw-tab.active[data-framework='react'] {
-		background: color-mix(in lch, var(--app-color-brand-react), transparent 15%);
-		color: var(--app-color-brand-react);
+		&:hover {
+			background: color-mix(in lch, var(--app-color-dark), transparent 92%);
+		}
 	}
 
-	.fw-tab.active[data-framework='vue'] {
-		background: color-mix(in lch, var(--app-color-brand-vue), transparent 15%);
-		color: var(--app-color-brand-vue);
+	.icon-btn :global(svg) {
+		width: 1.15rem;
+		height: 1.15rem;
 	}
 
-	.fw-tab.active[data-framework='solid'] {
-		background: color-mix(in lch, var(--app-color-brand-solid), transparent 15%);
-		color: var(--app-color-brand-solid);
-	}
-
-	.fw-tab.active[data-framework='vanilla'] {
-		background: color-mix(in lch, var(--app-color-brand-vanilla), transparent 15%);
-		color: var(--app-color-brand-vanilla);
-	}
-
-	.demo-note {
-		margin: 0;
-		padding: 0 1rem 0.35rem;
-		font-size: 0.65rem;
-		opacity: 0.55;
-		flex-shrink: 0;
-	}
+	.docs-link {
+		padding: 0.4rem 0.9rem;
+		border-radius: 0.5rem;
+		font-size: 0.88rem;
+		font-weight: 600;
+		color: var(--app-color-primary) !important;
+		background-color: color-mix(in lch, var(--app-color-primary), transparent 92%) !important;
+		background-image: none !important;
+		border: 0.2px solid color-mix(in lch, var(--app-color-primary), transparent 60%);
 
-	.snippet {
-		flex: 1;
-		margin: 0;
-		padding: 0 1rem 0.75rem;
-		overflow: auto;
-		font-family: var(--app-font-mono);
-		font-size: 0.68rem;
-		line-height: 1.45;
-		white-space: pre;
-		color: var(--app-color-dark);
-		min-height: 0;
+		&:hover,
+		&:focus-visible {
+			color: var(--app-color-primary) !important;
+			background-color: color-mix(in lch, var(--app-color-primary), transparent 84%) !important;
+			border-radius: 0.5rem;
+		}
 	}
 
-	.actions {
+	.tabs {
 		display: flex;
-		gap: 0.5rem;
-		padding: 0.65rem 1rem 0.85rem;
-		border-top: 1px solid color-mix(in lch, var(--app-color-dark), transparent 90%);
-		flex-shrink: 0;
-	}
-
-	.copy {
-		padding: 0.35rem 0.75rem;
-		border-radius: 0.45rem;
-		font-size: 0.8rem;
-		background: color-mix(in lch, var(--app-color-primary), transparent 85%);
-		color: var(--app-color-primary);
-		cursor: pointer;
-	}
-
-	.copy.copied {
-		background: color-mix(in lch, #28c840, transparent 80%);
-		color: #1a6b2e;
+		flex-wrap: wrap;
+		gap: 0.35rem;
+		margin-bottom: 1rem;
+		padding-bottom: 0.85rem;
+		border-bottom: 0.2px solid color-mix(in lch, var(--app-color-dark), transparent 85%);
 	}
 
-	.docs-link {
-		padding: 0.35rem 0.75rem;
+	.tabs button {
+		padding: 0.4rem 0.85rem;
+		border-radius: 0.5rem;
 		font-size: 0.8rem;
-		color: var(--app-color-primary);
-		text-decoration: none;
-		border-radius: 0.45rem;
-	}
-
-	.docs-link:hover {
-		background: color-mix(in lch, var(--app-color-primary), transparent 92%);
+		font-weight: 600;
+		font-family: var(--app-font-mono);
+		border: 0.2px solid transparent;
+		color: color-mix(in lch, var(--app-color-dark), transparent 35%);
+		background: transparent;
+
+		&:hover:not(.selected) {
+			color: color-mix(in lch, var(--app-color-dark), transparent 12%);
+			background: color-mix(in lch, var(--app-color-dark), transparent 94%);
+		}
+
+		&.selected {
+			background: color-mix(in lch, var(--app-color-dark), transparent 90%);
+			color: color-mix(in lch, var(--app-color-dark), transparent 5%);
+			border-color: color-mix(in lch, var(--app-color-dark), transparent 82%);
+		}
+
+		&[data-framework='svelte'].selected {
+			color: var(--app-color-brand-svelte);
+		}
+		&[data-framework='react'].selected {
+			color: var(--app-color-brand-react);
+		}
+		&[data-framework='vue'].selected {
+			color: var(--app-color-brand-vue);
+		}
+		&[data-framework='solid'].selected {
+			color: var(--app-color-brand-solid);
+		}
+		&[data-framework='vanilla'].selected {
+			color: var(--app-color-brand-vanilla);
+		}
+	}
+
+	.code-body {
+		flex: 1;
+		min-height: 14rem;
+		overflow: auto;
+		padding: 0.75rem 0.85rem;
+		border-radius: 0.6rem;
+		background-color: color-mix(in lch, var(--app-color-dark), transparent 94%);
+		font-size: clamp(0.78rem, 1.2vw, 0.9rem);
+		line-height: 1.5;
 	}
 </style>
diff --git a/docs/src/components/playground/PlaygroundCodeSnippets.astro b/docs/src/components/playground/PlaygroundCodeSnippets.astro
new file mode 100644
index 00000000..3e344bcb
--- /dev/null
+++ b/docs/src/components/playground/PlaygroundCodeSnippets.astro
@@ -0,0 +1,71 @@
+---
+import { Code } from 'astro/components';
+import type { Framework } from '$helpers/constants';
+import { FRAMEWORK_TABS } from './frameworks';
+import { get_snippet, LANG_BY_FRAMEWORK } from './snippet-templates';
+import { WORLDS, type WorldId } from './worlds';
+
+const SHIKI_THEMES = {
+	light: 'github-light',
+	dark: 'github-dark',
+} as const;
+---
+
+<div class="playground-snippets">
+	{
+		WORLDS.map((world) =>
+			FRAMEWORK_TABS.map((tab) => (
+				<div
+					class="playground-snippet"
+					data-world={world.id}
+					data-framework={tab.id}
+					hidden
+				>
+					<Code
+						code={get_snippet(world.id as WorldId, tab.id as Framework)}
+						lang={LANG_BY_FRAMEWORK[tab.id]}
+						themes={SHIKI_THEMES}
+						wrap
+					/>
+				</div>
+			)),
+		)
+	}
+</div>
+
+<style>
+	.playground-snippets {
+		position: relative;
+		min-height: 100%;
+	}
+
+	.playground-snippet[hidden] {
+		display: none !important;
+	}
+
+	.playground-snippet:not([hidden]) {
+		display: block;
+	}
+
+	.playground-snippet :global(pre.astro-code) {
+		margin: 0;
+		padding: 0;
+		overflow-x: auto;
+		background: transparent !important;
+		font-size: inherit !important;
+		line-height: inherit !important;
+	}
+
+	.playground-snippet :global(pre.astro-code code) {
+		display: block;
+		font-family: var(--app-font-mono);
+		background: transparent;
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+
+	.playground-snippet :global(.astro-code .line) {
+		display: inline-block;
+		width: 100%;
+	}
+</style>
diff --git a/docs/src/components/playground/PlaygroundHome.svelte b/docs/src/components/playground/PlaygroundHome.svelte
index 6431bb8d..103b872f 100644
--- a/docs/src/components/playground/PlaygroundHome.svelte
+++ b/docs/src/components/playground/PlaygroundHome.svelte
@@ -1,60 +1,122 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { browser } from '$helpers/utils';
+	import { theme } from '$state/user-preferences.svelte';
 	import LiveCodePanel from './LiveCodePanel.svelte';
+	import PlaygroundIntro from './PlaygroundIntro.svelte';
 	import PlaygroundStage from './PlaygroundStage.svelte';
-	import ScenarioStrip from './ScenarioStrip.svelte';
-	import { DEFAULT_WORLD, world_from_hash, type WorldId } from './worlds';
+	import { DEFAULT_FRAMEWORK } from './frameworks';
+	import type { Framework } from '$helpers/constants';
+	import {
+		DEFAULT_WORLD,
+		parse_world_from_hash,
+		type WorldId,
+	} from './worlds';
 
-	let worldId = $state<WorldId>(DEFAULT_WORLD);
+	type Props = {
+		snippets?: Snippet;
+	};
+
+	const { snippets }: Props = $props();
+
+	theme.current;
+
+	let world = $state<WorldId>(DEFAULT_WORLD);
+	let framework = $state<Framework>(DEFAULT_FRAMEWORK);
+
+	function sync_from_hash() {
+		if (!browser) return;
+		const from_hash = parse_world_from_hash(location.hash);
+		if (from_hash) world = from_hash;
+	}
 
 	function select_world(id: WorldId) {
-		worldId = id;
-		if (typeof location !== 'undefined') {
+		world = id;
+		if (browser) {
 			history.replaceState(null, '', `#${id}`);
 		}
 	}
 
-	onMount(() => {
-		const from_hash = world_from_hash(location.hash);
-		if (from_hash) worldId = from_hash;
-
-		const on_hash = () => {
-			const next = world_from_hash(location.hash);
-			if (next) worldId = next;
-		};
+	$effect(() => {
+		if (!browser) return;
+		sync_from_hash();
+		const on_hash = () => sync_from_hash();
 		window.addEventListener('hashchange', on_hash);
 		return () => window.removeEventListener('hashchange', on_hash);
 	});
 </script>
 
-<div id="playground-home" class="playground">
-	<ScenarioStrip active={worldId} onselect={select_world} />
-	<PlaygroundStage {worldId} />
-	<LiveCodePanel {worldId} />
+<div class="home-playground">
+	<PlaygroundIntro {world} onworld={select_world} />
+
+	<section class="play-canvas" aria-label="Try dragging">
+		<div class="stage-column">
+			<p class="stage-hint">Drag the windows — they stay inside the desk.</p>
+			<PlaygroundStage {world} />
+		</div>
+
+		<div class="playground-divider divider" aria-hidden="true"></div>
+
+		<LiveCodePanel {world} {framework} onframework={(id) => (framework = id)} {snippets} />
+	</section>
 </div>
 
 <style>
-	.playground {
-		display: grid;
-		grid-template-columns: 4.75rem minmax(0, 1fr) min(20rem, 34vw);
-		height: calc(100dvh - 5rem);
+	@import './playground-chrome.css';
+
+	.home-playground {
+		display: flex;
+		flex-direction: column;
 		width: 100%;
-		max-width: 100vw;
+		max-width: min(1600px, 100%);
+		margin: 0 auto;
+		padding: clamp(0.75rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2.5rem) 8rem;
 		box-sizing: border-box;
-		overflow: hidden;
+		min-height: calc(100dvh - 6rem);
 	}
 
-	@media (max-width: 900px) {
-		.playground {
-			grid-template-columns: 3.5rem minmax(0, 1fr);
-			grid-template-rows: minmax(0, 1fr) auto;
+	.play-canvas {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) 1px minmax(320px, 34vw);
+		gap: 0;
+		flex: 1;
+		min-height: clamp(28rem, 62vh, 44rem);
+	}
+
+	.stage-column {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		min-height: 0;
+	}
+
+	.stage-hint {
+		margin: 0 0 0.75rem;
+		font-family: var(--app-font-mono);
+		font-size: clamp(0.8rem, 1.5vw, 0.95rem);
+		color: color-mix(in lch, var(--app-color-dark), transparent 38%);
+	}
+
+	.divider {
+		width: 1px;
+		height: auto;
+		align-self: stretch;
+	}
+
+	@media (max-width: 1100px) {
+		.play-canvas {
+			grid-template-columns: 1fr;
+			grid-template-rows: 1fr auto;
+			min-height: clamp(24rem, 55vh, 36rem);
+		}
+
+		.divider {
+			width: auto;
+			height: 1px;
 		}
 
-		.playground :global(.code-panel) {
-			grid-column: 1 / -1;
-			max-height: 38vh;
-			border-left: none;
-			border-top: 1px solid color-mix(in lch, var(--app-color-dark), transparent 88%);
+		.home-playground :global(.code-panel) {
+			min-height: 16rem;
 		}
 	}
 </style>
diff --git a/docs/src/components/playground/PlaygroundIntro.svelte b/docs/src/components/playground/PlaygroundIntro.svelte
new file mode 100644
index 00000000..6f30f115
--- /dev/null
+++ b/docs/src/components/playground/PlaygroundIntro.svelte
@@ -0,0 +1,154 @@
+<script lang="ts">
+	import { DEFAULT_WORLD, WORLDS, type WorldId } from './worlds';
+	import ScenarioStrip from './ScenarioStrip.svelte';
+
+	type Props = {
+		world?: WorldId;
+		onworld?: (id: WorldId) => void;
+	};
+
+	const { world = DEFAULT_WORLD, onworld }: Props = $props();
+
+	const world_meta = $derived(WORLDS.find((w) => w.id === world));
+</script>
+
+<header class="masthead">
+	<div class="brand">
+		<h1>Neodrag</h1>
+		<p class="tagline h4">One draggable to rule them all</p>
+		<p class="plugin-line">Everything&rsquo;s a plugin — mostly built-ins, plus your own.</p>
+		{#if world_meta}
+			<p class="scene-caption">{world_meta.label} · {world_meta.tagline}</p>
+		{/if}
+	</div>
+
+	<div class="masthead-side">
+		<div class="actions">
+			<a class="cta unstyled" href="/docs/svelte">Getting started</a>
+			<a
+				class="cta unstyled"
+				href="https://github.com/PuruVJ/neodrag"
+				target="_blank"
+				rel="external"
+			>
+				GitHub
+			</a>
+		</div>
+
+		{#if onworld}
+			<ScenarioStrip active={world} onselect={onworld} />
+		{/if}
+	</div>
+</header>
+
+<style>
+	.masthead {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		align-items: end;
+		gap: clamp(2rem, 6vw, 5rem);
+		padding: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(1.5rem, 4vw, 2.5rem);
+	}
+
+	.brand {
+		display: grid;
+		gap: 0.5rem;
+		max-width: 42rem;
+	}
+
+	h1 {
+		margin: 0;
+		font-size: clamp(3rem, 14vw, 7.5rem);
+		line-height: 1.05;
+		background-image: var(--app-color-primary-gradient);
+		background-clip: text;
+		-webkit-text-fill-color: transparent;
+		width: max-content;
+	}
+
+	.tagline {
+		margin: 0;
+	}
+
+	.plugin-line,
+	.scene-caption {
+		margin: 0;
+		font-size: clamp(0.95rem, 1.8vw, 1.15rem);
+		color: color-mix(in lch, var(--app-color-dark), transparent 32%);
+	}
+
+	.scene-caption {
+		font-family: var(--app-font-mono);
+		font-size: 0.9rem;
+		margin-top: 0.25rem;
+	}
+
+	.masthead-side {
+		display: grid;
+		gap: 1.25rem;
+		justify-items: end;
+		min-width: min(100%, 22rem);
+	}
+
+	.actions {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1rem;
+		width: min(100%, 22rem);
+	}
+
+	/* Override global link hover (white on light gradient) */
+	.actions .cta {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 1rem 1.5rem;
+		border-radius: 1rem;
+		font-size: clamp(1rem, 2vw, 1.35rem);
+		font-weight: 600;
+		text-align: center;
+		color: var(--app-color-primary) !important;
+		background-image: none !important;
+		background-color: color-mix(in lch, var(--app-color-primary), transparent 92%);
+		border: 0.2px solid color-mix(in lch, var(--app-color-primary), transparent 65%);
+		transition:
+			background-color 160ms ease,
+			border-color 160ms ease,
+			color 160ms ease;
+
+		&:hover,
+		&:focus-visible {
+			color: var(--app-color-primary) !important;
+			background-color: color-mix(in lch, var(--app-color-primary), transparent 84%) !important;
+			border-color: color-mix(in lch, var(--app-color-primary), transparent 35%);
+			border-radius: 1rem;
+		}
+	}
+
+	@media (max-width: 960px) {
+		.masthead {
+			grid-template-columns: 1fr;
+			align-items: start;
+		}
+
+		.masthead-side {
+			justify-items: start;
+			width: 100%;
+		}
+
+		.actions {
+			width: 100%;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.actions {
+			grid-template-columns: 1fr;
+		}
+
+		.actions .cta {
+			font-size: 1rem;
+			padding: 0.75rem 1rem;
+		}
+	}
+</style>
diff --git a/docs/src/components/playground/PlaygroundStage.svelte b/docs/src/components/playground/PlaygroundStage.svelte
index e066424b..b3d003e0 100644
--- a/docs/src/components/playground/PlaygroundStage.svelte
+++ b/docs/src/components/playground/PlaygroundStage.svelte
@@ -1,36 +1,28 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
-	import type { WorldId } from './worlds';
-	import { WORLD_COMPONENTS } from './worlds';
+	import { WORLDS, WORLD_COMPONENTS, type WorldId } from './worlds';
 
 	type Props = {
-		worldId: WorldId;
+		world: WorldId;
 	};
 
-	const { worldId }: Props = $props();
+	const { world }: Props = $props();
 
-	const Scene = $derived(WORLD_COMPONENTS[worldId]);
+	const meta = $derived(WORLDS.find((w) => w.id === world)!);
+	const Scene = $derived(WORLD_COMPONENTS[world]);
 </script>
 
-<div class="stage">
-	{#key worldId}
-		<div class="scene" in:fade={{ duration: 200 }}>
-			<Scene {worldId} />
-		</div>
-	{/key}
+<div class="stage playground-well">
+	<Scene world={meta} />
 </div>
 
 <style>
+	@import './playground-chrome.css';
+
 	.stage {
-		position: relative;
-		min-width: 0;
+		flex: 1;
 		min-height: 0;
-		height: 100%;
+		min-width: 0;
+		position: relative;
 		overflow: hidden;
 	}
-
-	.scene {
-		height: 100%;
-		min-height: 0;
-	}
 </style>
diff --git a/docs/src/components/playground/ScenarioStrip.svelte b/docs/src/components/playground/ScenarioStrip.svelte
index bca88bd2..01419cdf 100644
--- a/docs/src/components/playground/ScenarioStrip.svelte
+++ b/docs/src/components/playground/ScenarioStrip.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import type { WorldId } from './worlds';
-	import { WORLDS } from './worlds';
+	import { WORLDS, type WorldId } from './worlds';
 
 	type Props = {
 		active: WorldId;
@@ -10,75 +9,62 @@
 	const { active, onselect }: Props = $props();
 </script>
 
-<nav class="strip" aria-label="Playground worlds">
-	{#each WORLDS as world}
+<nav class="scenes" aria-label="Playground scenarios">
+	{#each WORLDS as world (world.id)}
 		<button
 			type="button"
-			class="world-btn"
-			class:active={active === world.id}
+			class:selected={active === world.id}
 			class:locked={!world.available}
 			disabled={!world.available}
-			title={world.available ? world.hint : `${world.label} — coming soon`}
-			aria-current={active === world.id ? 'true' : undefined}
+			title={world.available ? world.tagline : 'Coming soon'}
 			onclick={() => world.available && onselect(world.id)}
 		>
-			<span class="glyph" aria-hidden="true">{world.glyph}</span>
-			<span class="label">{world.label}</span>
+			{world.label}
+			{#if !world.available}
+				<span class="soon">soon</span>
+			{/if}
 		</button>
 	{/each}
 </nav>
 
 <style>
-	.strip {
+	.scenes {
 		display: flex;
-		flex-direction: column;
-		gap: 0.35rem;
-		padding: 0.75rem 0.5rem;
-		border-right: 1px solid color-mix(in lch, var(--app-color-dark), transparent 88%);
-		background: color-mix(in lch, var(--app-color-shell), var(--app-color-dark) 3%);
-		min-height: 0;
-		overflow-y: auto;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		justify-content: flex-end;
 	}
 
-	.world-btn {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 0.25rem;
-		padding: 0.5rem 0.35rem;
-		border-radius: 0.65rem;
-		cursor: pointer;
-		transition:
-			background 0.15s ease,
-			opacity 0.15s ease;
-		opacity: 0.85;
-	}
-
-	.world-btn:hover:not(:disabled) {
-		background: color-mix(in lch, var(--app-color-primary), transparent 88%);
-		opacity: 1;
-	}
+	button {
+		padding: 0.45rem 0.9rem;
+		border-radius: 0.5rem;
+		font-family: var(--app-font-mono);
+		font-size: 0.78rem;
+		font-weight: 600;
+		border: 0.2px solid transparent;
+		color: color-mix(in lch, var(--app-color-dark), transparent 25%);
+		background: color-mix(in lch, var(--app-color-dark), transparent 94%);
 
-	.world-btn.active {
-		background: color-mix(in lch, var(--app-color-primary), transparent 82%);
-		opacity: 1;
-	}
+		&:hover:not(:disabled):not(.selected) {
+			color: color-mix(in lch, var(--app-color-dark), transparent 8%);
+			background: color-mix(in lch, var(--app-color-dark), transparent 88%);
+			border-color: color-mix(in lch, var(--app-color-dark), transparent 82%);
+		}
 
-	.world-btn.locked {
-		opacity: 0.35;
-		cursor: not-allowed;
-	}
+		&.selected {
+			color: var(--app-color-primary-contrast);
+			background: var(--app-color-primary);
+			border-color: color-mix(in lch, var(--app-color-primary), var(--app-color-anti-mixer) 20%);
+		}
 
-	.glyph {
-		font-size: 1.35rem;
-		line-height: 1;
+		&.locked {
+			opacity: 0.45;
+			cursor: not-allowed;
+		}
 	}
 
-	.label {
-		font-size: 0.6rem;
-		text-align: center;
-		line-height: 1.2;
-		max-width: 4.5rem;
-		color: var(--app-color-dark);
+	.soon {
+		margin-left: 0.25rem;
+		opacity: 0.75;
 	}
 </style>
diff --git a/docs/src/components/playground/frameworks.ts b/docs/src/components/playground/frameworks.ts
index 301b3a76..003aba5e 100644
--- a/docs/src/components/playground/frameworks.ts
+++ b/docs/src/components/playground/frameworks.ts
@@ -1,17 +1,17 @@
-export const PLAYGROUND_FRAMEWORKS = [
-	{ id: 'svelte', label: 'Svelte', docs: '/docs/svelte' },
-	{ id: 'react', label: 'React', docs: '/docs/react' },
-	{ id: 'vue', label: 'Vue', docs: '/docs/vue' },
-	{ id: 'solid', label: 'Solid', docs: '/docs/solid' },
-	{ id: 'vanilla', label: 'Vanilla', docs: '/docs/vanilla' },
-] as const;
+import type { Framework } from '$helpers/constants';
 
-export type FrameworkId = (typeof PLAYGROUND_FRAMEWORKS)[number]['id'];
+export type FrameworkTab = {
+	id: Framework;
+	label: string;
+	docsPath: string;
+};
 
-export function is_framework_id(value: string): value is FrameworkId {
-	return PLAYGROUND_FRAMEWORKS.some((f) => f.id === value);
-}
+export const FRAMEWORK_TABS: FrameworkTab[] = [
+	{ id: 'svelte', label: 'Svelte', docsPath: '/docs/svelte' },
+	{ id: 'react', label: 'React', docsPath: '/docs/react' },
+	{ id: 'vue', label: 'Vue', docsPath: '/docs/vue' },
+	{ id: 'solid', label: 'Solid', docsPath: '/docs/solid' },
+	{ id: 'vanilla', label: 'Vanilla', docsPath: '/docs/vanilla' },
+];
 
-export function framework_meta(id: FrameworkId) {
-	return PLAYGROUND_FRAMEWORKS.find((f) => f.id === id)!;
-}
+export const DEFAULT_FRAMEWORK: Framework = 'svelte';
diff --git a/docs/src/components/playground/playground-chrome.css b/docs/src/components/playground/playground-chrome.css
new file mode 100644
index 00000000..0b920823
--- /dev/null
+++ b/docs/src/components/playground/playground-chrome.css
@@ -0,0 +1,25 @@
+/* Recessed play area — same language as Hero .container, no heavy drop shadow */
+.playground-well {
+	background-color: color-mix(in lch, var(--app-color-dark), transparent 90%);
+	border-radius: 1rem;
+	box-shadow: inset 0 1px 0 color-mix(in lch, var(--gray-1), transparent 85%);
+}
+
+/* Abstract window — flat shell card, hairline edge only */
+.playground-window {
+	background-color: var(--app-color-shell);
+	border-radius: 1rem;
+	overflow: hidden;
+	border: 0.2px solid color-mix(in lch, var(--app-color-dark), transparent 78%);
+	box-shadow: none;
+}
+
+.playground-window-chrome {
+	padding: 0.55rem 1rem;
+	border-bottom: 0.2px solid color-mix(in lch, var(--app-color-dark), transparent 70%);
+	background-color: color-mix(in lch, var(--app-color-dark), transparent 94%);
+}
+
+.playground-divider {
+	background-color: color-mix(in lch, var(--app-color-dark), transparent 70%);
+}
diff --git a/docs/src/components/playground/scenarios/ComingSoon.svelte b/docs/src/components/playground/scenarios/ComingSoon.svelte
index 10e36bb8..9ff15795 100644
--- a/docs/src/components/playground/scenarios/ComingSoon.svelte
+++ b/docs/src/components/playground/scenarios/ComingSoon.svelte
@@ -1,57 +1,46 @@
 <script lang="ts">
-	import type { WorldId } from '../worlds';
-	import { WORLDS } from '../worlds';
+	import type { WorldMeta } from '../worlds';
 
 	type Props = {
-		worldId: WorldId;
+		world: WorldMeta;
 	};
 
-	const { worldId }: Props = $props();
-
-	const meta = $derived(WORLDS.find((w) => w.id === worldId)!);
+	const { world }: Props = $props();
 </script>
 
 <div class="coming-soon">
-	<span class="glyph">{meta.glyph}</span>
-	<p class="title">{meta.label}</p>
-	<p class="hint">This world is next in the queue.</p>
-	<p class="sub">Try <strong>Night desk</strong> — drag and resize the windows.</p>
+	<p class="h2">{world.label}</p>
+	<p class="lede">{world.tagline}</p>
+	<p class="muted">This world is on the way. Night desk is ready to play now.</p>
 </div>
 
 <style>
 	.coming-soon {
 		display: grid;
 		place-content: center;
-		place-items: center;
-		height: 100%;
+		align-content: center;
+		justify-items: center;
+		gap: 0.75rem;
+		min-height: 100%;
+		padding: 3rem;
 		text-align: center;
-		gap: 0.5rem;
-		padding: 2rem;
-		color: rgb(255 255 255 / 0.85);
-	}
-
-	.glyph {
-		font-size: 3rem;
-		line-height: 1;
-		opacity: 0.9;
 	}
 
-	.title {
+	.h2 {
 		margin: 0;
-		font-family: var(--app-font-heading);
-		font-size: clamp(1.5rem, 4vw, 2rem);
+		font-size: clamp(1.75rem, 5vw, 2.5rem);
 	}
 
-	.hint,
-	.sub {
+	.lede {
 		margin: 0;
-		font-size: 0.95rem;
-		opacity: 0.75;
-		max-width: 28ch;
+		font-size: 1.15rem;
+		color: color-mix(in lch, var(--app-color-dark), transparent 20%);
 	}
 
-	.sub strong {
-		color: #fff;
-		font-weight: 600;
+	.muted {
+		margin: 0;
+		font-family: var(--app-font-mono);
+		font-size: 0.9rem;
+		color: color-mix(in lch, var(--app-color-dark), transparent 40%);
 	}
 </style>
diff --git a/docs/src/components/playground/scenarios/NightDesk.svelte b/docs/src/components/playground/scenarios/NightDesk.svelte
index 01511ed6..0effcd01 100644
--- a/docs/src/components/playground/scenarios/NightDesk.svelte
+++ b/docs/src/components/playground/scenarios/NightDesk.svelte
@@ -1,368 +1,49 @@
 <script lang="ts">
-	import { Length, Neodrag } from '@neodrag/core';
-	import { Draggable } from '@neodrag/svelte';
-	import { ControlFrom, controls } from '@neodrag/svelte/plugins';
-	import { Resizable, resizeHandles } from '@neodrag/svelte/resize';
+	import type { WorldMeta } from '../worlds';
+	import PanelWindow from './PanelWindow.svelte';
 
-	type DeskWindow = {
-		id: string;
-		title: string;
-		left: string;
-		top: string;
-		width: string;
-		height: string;
-		z: number;
-		variant: 'finder' | 'notes';
+	type Props = {
+		world: WorldMeta;
 	};
 
-	let windows = $state<DeskWindow[]>([
-		{
-			id: 'finder',
-			title: 'Finder — Documents',
-			left: 'clamp(1rem, 8vw, 4rem)',
-			top: 'clamp(1.5rem, 10vh, 3rem)',
-			width: 'min(480px, 75vw)',
-			height: 'min(320px, 55vh)',
-			z: 2,
-			variant: 'finder',
-		},
-		{
-			id: 'notes',
-			title: 'Neodrag — readme',
-			left: 'clamp(8rem, 38vw, 22rem)',
-			top: 'clamp(6rem, 28vh, 10rem)',
-			width: 'min(340px, 70vw)',
-			height: 'min(240px, 45vh)',
-			z: 1,
-			variant: 'notes',
-		},
-	]);
+	const { world: _world }: Props = $props();
 
-	const engine = new Neodrag({ dev: false });
-	const length = new Length({ units: 'preserve' });
+	const panels = [
+		{ id: 'notes', title: 'Notes', body: 'Drag me anywhere on the desk.' },
+		{ id: 'tasks', title: 'Tasks', body: 'Bounds keep windows inside the desk.' },
+	] as const;
 
-	function create_window_bindings() {
-		const drag = new Draggable({
-			engine,
-			plugins: [controls({ allow: ControlFrom.selector('[data-window-drag]') })],
-			threshold: null,
-		});
-		const resize = new Resizable({
-			engine,
-			length,
-			minSize: { width: 200, height: 120 },
-			maxSize: { width: '94%', height: '88%' },
-			plugins: [resizeHandles({ edges: 'all', size: 10, cornerSize: 20 })],
-		});
-		return { drag, resize };
-	}
-
-	const finder = create_window_bindings();
-	const notes = create_window_bindings();
+	let z_counter = $state(2);
+	let z_by_id = $state<Record<string, number>>({
+		notes: 1,
+		tasks: 2,
+	});
 
-	function bindings_for(id: string) {
-		return id === 'finder' ? finder : notes;
-	}
-
-	function focus_window(id: string) {
-		const max_z = Math.max(...windows.map((w) => w.z));
-		windows = windows.map((w) => (w.id === id ? { ...w, z: max_z + 1 } : w));
+	function bring_to_front(id: string) {
+		z_counter += 1;
+		z_by_id = { ...z_by_id, [id]: z_counter };
 	}
 </script>
 
 <div class="desk">
-	<header class="desk-chrome">
-		<h1 class="brand">Neodrag</h1>
-		<p class="tagline">Drag the title bar · resize from the edges</p>
-	</header>
-
-	<div class="desk-surface">
-		{#each windows as win (win.id)}
-			{@const { drag, resize } = bindings_for(win.id)}
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class="window-shell"
-				style:left={win.left}
-				style:top={win.top}
-				style:width={win.width}
-				style:height={win.height}
-				style:z-index={win.z}
-				{@attach drag.attachment}
-				{@attach resize.attachment}
-				onpointerdown={() => focus_window(win.id)}
-			>
-				<div class="window">
-					<header class="titlebar">
-						<div class="titlebar-body" data-window-drag>
-							<div class="traffic" aria-hidden="true">
-								<span class="dot close"></span>
-								<span class="dot min"></span>
-								<span class="dot max"></span>
-							</div>
-							<span class="title">{win.title}</span>
-						</div>
-					</header>
-
-					{#if win.variant === 'finder'}
-						<div class="toolbar">
-							<span class="tb-btn">‹</span>
-							<span class="tb-btn">›</span>
-							<span class="tb-path">Macintosh HD · Documents</span>
-						</div>
-						<div class="content finder-content">
-							<div class="sidebar">
-								<p class="side-label">Favorites</p>
-								<ul>
-									<li class="active">Documents</li>
-									<li>Downloads</li>
-									<li>Desktop</li>
-								</ul>
-							</div>
-							<div class="files">
-								<div class="file">📁 Playground</div>
-								<div class="file">📄 readme.md</div>
-							</div>
-						</div>
-					{:else}
-						<div class="content notes-content">
-							<p>One engine for drag, drop, sort, and resize.</p>
-							<p class="dim">Pick a world on the left — more scenes ship one by one.</p>
-						</div>
-					{/if}
-				</div>
-			</div>
-		{/each}
-	</div>
+	{#each panels as panel, i (panel.id)}
+		<PanelWindow
+			id={panel.id}
+			title={panel.title}
+			body={panel.body}
+			stack={i}
+			z={z_by_id[panel.id]}
+			onactivate={() => bring_to_front(panel.id)}
+		/>
+	{/each}
 </div>
 
 <style>
 	.desk {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		min-height: 0;
-		font-family:
-			-apple-system,
-			BlinkMacSystemFont,
-			'SF Pro Text',
-			system-ui,
-			sans-serif;
-	}
-
-	.desk-chrome {
-		flex-shrink: 0;
-		padding: 0.75rem 1rem 0.5rem;
-		color: rgb(255 255 255 / 0.9);
-	}
-
-	.brand {
-		margin: 0;
-		font-family: var(--app-font-heading);
-		font-size: 1.25rem;
-		font-weight: 600;
-		letter-spacing: 0.02em;
-	}
-
-	.tagline {
-		margin: 0.15rem 0 0;
-		font-size: 0.8rem;
-		opacity: 0.7;
-	}
-
-	.desk-surface {
 		position: relative;
-		flex: 1;
-		min-height: 0;
-		margin: 0 0.75rem 0.75rem;
-		border-radius: 0.75rem;
-		overflow: hidden;
-		background:
-			radial-gradient(ellipse 120% 80% at 20% 0%, #5b8fd9 0%, transparent 55%),
-			radial-gradient(ellipse 90% 70% at 90% 10%, #c084fc 0%, transparent 50%),
-			linear-gradient(165deg, #1a3a5c 0%, #2d1b4e 40%, #0f172a 100%);
-		box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
-	}
-
-	.window-shell {
-		position: absolute;
-		touch-action: none;
-	}
-
-	.window-shell :global([data-neodrag-resize-handle]) {
-		pointer-events: auto;
-		z-index: 1000;
-	}
-
-	.window {
 		width: 100%;
 		height: 100%;
-		display: flex;
-		flex-direction: column;
-		border-radius: 10px;
-		overflow: hidden;
-		box-shadow:
-			0 0 0 0.5px rgb(255 255 255 / 0.12),
-			0 28px 70px rgb(0 0 0 / 0.45),
-			0 8px 20px rgb(0 0 0 / 0.25);
-		background: #ececec;
-		color: #1d1d1f;
-		pointer-events: none;
-	}
-
-	.titlebar {
-		position: relative;
-		flex-shrink: 0;
-		height: 36px;
-		background: linear-gradient(180deg, #e8e8e8 0%, #dcdcdc 100%);
-		border-bottom: 1px solid #b8b8b8;
-		pointer-events: none;
-	}
-
-	.titlebar-body {
-		position: absolute;
-		inset: 8px 18px 0;
-		display: flex;
-		align-items: center;
-		gap: 0.65rem;
-		padding: 0 0.5rem;
-		cursor: grab;
-		user-select: none;
-		pointer-events: auto;
-	}
-
-	.titlebar-body:active {
-		cursor: grabbing;
-	}
-
-	.traffic {
-		display: flex;
-		gap: 6px;
-	}
-
-	.dot {
-		width: 11px;
-		height: 11px;
-		border-radius: 50%;
-		box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.12);
-	}
-
-	.close {
-		background: #ff5f57;
-	}
-	.min {
-		background: #febc2e;
-	}
-	.max {
-		background: #28c840;
-	}
-
-	.title {
-		flex: 1;
-		text-align: center;
-		font-size: 0.75rem;
-		font-weight: 600;
-		color: #3a3a3c;
-		margin-right: 2.5rem;
-		pointer-events: none;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.toolbar {
-		display: flex;
-		align-items: center;
-		gap: 0.35rem;
-		padding: 0.3rem 0.5rem;
-		background: #f5f5f7;
-		border-bottom: 1px solid #d1d1d6;
-		font-size: 0.7rem;
-		color: #636366;
-		flex-shrink: 0;
-	}
-
-	.tb-btn {
-		width: 1.1rem;
-		text-align: center;
-	}
-
-	.tb-path {
-		flex: 1;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.content {
-		flex: 1;
-		min-height: 0;
-		background: #fff;
-	}
-
-	.finder-content {
-		display: flex;
-	}
-
-	.sidebar {
-		width: 6.5rem;
-		padding: 0.45rem 0.3rem;
-		border-right: 1px solid #e5e5ea;
-		background: #fbfbfc;
-		font-size: 0.65rem;
-		flex-shrink: 0;
-	}
-
-	.side-label {
-		margin: 0 0 0.3rem 0.35rem;
-		color: #8e8e93;
-		font-weight: 600;
-		text-transform: uppercase;
-	}
-
-	.sidebar ul {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
-
-	.sidebar li {
-		padding: 0.15rem 0.4rem;
-		border-radius: 4px;
-	}
-
-	.sidebar li.active {
-		background: #007aff;
-		color: #fff;
-	}
-
-	.files {
-		flex: 1;
-		padding: 0.6rem;
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
-		gap: 0.5rem;
-		align-content: start;
-		font-size: 0.65rem;
-	}
-
-	.file {
-		text-align: center;
-		padding: 0.25rem;
-		border-radius: 5px;
-	}
-
-	.notes-content {
-		padding: 0.85rem 1rem;
-		font-size: 0.8rem;
-		line-height: 1.5;
-	}
-
-	.notes-content p {
-		margin: 0 0 0.5rem;
-	}
-
-	.dim {
-		opacity: 0.65;
-		font-size: 0.75rem;
+		min-height: 100%;
+		box-sizing: border-box;
 	}
 </style>
diff --git a/docs/src/components/playground/scenarios/PanelWindow.svelte b/docs/src/components/playground/scenarios/PanelWindow.svelte
new file mode 100644
index 00000000..ebfb887a
--- /dev/null
+++ b/docs/src/components/playground/scenarios/PanelWindow.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { Draggable } from '@neodrag/svelte';
+	import { bounds, BoundsFrom, events } from '@neodrag/svelte/plugins';
+
+	type Props = {
+		id: string;
+		title: string;
+		body: string;
+		stack: number;
+		z: number;
+		onactivate: () => void;
+	};
+
+	const { title, body, stack, z, onactivate }: Props = $props();
+
+	const drag = new Draggable({
+		plugins: [
+			bounds(BoundsFrom.parent()),
+			events({
+				onDragStart: () => onactivate(),
+			}),
+		],
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<article
+	class="window playground-window"
+	style:--stack={stack}
+	style:z-index={z}
+	{@attach drag.attachment}
+	onpointerdown={onactivate}
+>
+	<div class="playground-window-chrome">
+		<span class="window-title">{title}</span>
+	</div>
+	<div class="window-body">
+		<p>{body}</p>
+	</div>
+</article>
+
+<style>
+	@import '../playground-chrome.css';
+
+	.window {
+		position: absolute;
+		width: min(17rem, 76%);
+		touch-action: none;
+		cursor: grab;
+
+		top: calc(16% + var(--stack) * 11%);
+		left: calc(14% + var(--stack) * 13%);
+
+		&:active {
+			cursor: grabbing;
+		}
+	}
+
+	.window-title {
+		font-family: var(--app-font-heading);
+		font-size: 1rem;
+		font-weight: 600;
+		color: color-mix(in lch, var(--app-color-dark), transparent 10%);
+	}
+
+	.window-body {
+		padding: 1rem 1.1rem 1.15rem;
+	}
+
+	.window-body p {
+		margin: 0;
+		font-size: 0.95rem;
+		line-height: 1.55;
+		color: color-mix(in lch, var(--app-color-dark), transparent 22%);
+	}
+</style>
diff --git a/docs/src/components/playground/snippet-templates.ts b/docs/src/components/playground/snippet-templates.ts
index 5e3ba6f2..3f734c11 100644
--- a/docs/src/components/playground/snippet-templates.ts
+++ b/docs/src/components/playground/snippet-templates.ts
@@ -1,149 +1,88 @@
-import type { FrameworkId } from './frameworks';
+import type { Framework } from '$helpers/constants';
 import type { WorldId } from './worlds';
 
-const PLACEHOLDER = `// This world is not built yet.
-// Pick Night desk (moon) to play.`;
+const SNIPPETS: Record<WorldId, Record<Framework, string>> = {
+	'night-desk': {
+		svelte: `<script lang="ts">
+  import { Draggable } from '@neodrag/svelte';
+  import { bounds, BoundsFrom } from '@neodrag/svelte/plugins';
 
-const NIGHT_DESK: Record<FrameworkId, string> = {
-	svelte: `import { Neodrag } from '@neodrag/core';
-import { Draggable } from '@neodrag/svelte';
-import { ControlFrom, controls } from '@neodrag/svelte/plugins';
-import { Resizable, resizeHandles } from '@neodrag/svelte/resize';
-
-const engine = new Neodrag();
-const drag = new Draggable({
-  engine,
-  plugins: [controls({ allow: ControlFrom.selector('[data-window-drag]') })],
-});
-const resize = new Resizable({
-  engine,
-  plugins: [resizeHandles({ edges: 'all', size: 10, cornerSize: 22 })],
-});
+  const drag = new Draggable({
+    plugins: [bounds(BoundsFrom.parent())],
+  });
+</script>
 
-<div class="window" {@attach drag.attachment} {@attach resize.attachment}>
-  <header data-window-drag>…</header>
+<div class="stage">
+  <div class="panel" {@attach drag.attachment}>Notes</div>
 </div>`,
-
-	react: `import { Neodrag } from '@neodrag/core';
-import { useDraggable, useResizable } from '@neodrag/react';
-import { ControlFrom, controls } from '@neodrag/react/plugins';
-import { resizeHandles } from '@neodrag/core/resize';
-
-const engine = new Neodrag();
-
-function Window() {
-  const { ref: dragRef } = useDraggable([
-    controls({ allow: ControlFrom.selector('[data-window-drag]') }),
-  ]);
-  const { ref: resizeRef } = useResizable([
-    resizeHandles({ edges: 'all', size: 10, cornerSize: 22 }),
-  ]);
-  const ref = (node: HTMLDivElement | null) => {
-    dragRef(node);
-    resizeRef(node);
-  };
-  return <div ref={ref} className="window">…</div>;
+		react: `import { useRef } from 'react';
+import { useDraggable, bounds, BoundsFrom } from '@neodrag/react';
+
+export function NightDesk() {
+  const ref = useRef<HTMLDivElement>(null);
+  useDraggable(ref, { plugins: [bounds(BoundsFrom.parent())] });
+
+  return (
+    <div className="stage">
+      <div ref={ref} className="panel">Notes</div>
+    </div>
+  );
 }`,
+		vue: `<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useDraggable, bounds, BoundsFrom } from '@neodrag/vue';
 
-	vue: `<script setup>
-import { Draggable, Resizable, vDraggable, vResizable } from '@neodrag/vue';
-import { ControlFrom, controls } from '@neodrag/vue/plugins';
-import { resizeHandles } from '@neodrag/core/resize';
-
-const drag = new Draggable({
-  plugins: [controls({ allow: ControlFrom.selector('[data-window-drag]') })],
-});
-const resize = new Resizable({
-  plugins: [resizeHandles({ edges: 'all', size: 10, cornerSize: 22 })],
-});
+const panel = useTemplateRef('panel');
+useDraggable(panel, { plugins: [bounds(BoundsFrom.parent())] });
 </script>
 
 <template>
-  <div v-draggable="drag" v-resizable="resize" class="window">
-    <header data-window-drag>…</header>
+  <div class="stage">
+    <div ref="panel" class="panel">Notes</div>
   </div>
 </template>`,
+		solid: `import { bounds, BoundsFrom, createDraggable } from '@neodrag/solid';
 
-	solid: `import { Draggable, Resizable } from '@neodrag/solid';
-import { ControlFrom, controls } from '@neodrag/solid/plugins';
-import { resizeHandles } from '@neodrag/core/resize';
+function Panel() {
+  const [ref, setRef] = createSignal<HTMLDivElement>();
+  createDraggable(ref, () => [bounds(BoundsFrom.parent())]);
 
-const drag = new Draggable({
-  plugins: [controls({ allow: ControlFrom.selector('[data-window-drag]') })],
-});
-const resize = new Resizable({
-  plugins: [resizeHandles({ edges: 'all', size: 10, cornerSize: 22 })],
-});
-
-<div
-  class="window"
-  ref={(el) => {
-    drag.attach(el);
-    resize.attach(el);
-  }}
->
-  <header data-window-drag>…</header>
-</div>`,
-
-	vanilla: `import { Draggable, Resizable } from '@neodrag/vanilla';
-import { ControlFrom, controls } from '@neodrag/vanilla/plugins';
-import { resizeHandles } from '@neodrag/core/resize';
-
-const drag = new Draggable({
-  plugins: [controls({ allow: ControlFrom.selector('[data-window-drag]') })],
-});
-const resize = new Resizable({
-  plugins: [resizeHandles({ edges: 'all', size: 10, cornerSize: 22 })],
-});
+  return (
+    <div class="stage">
+      <div ref={setRef} class="panel">Notes</div>
+    </div>
+  );
+}`,
+		vanilla: `import { Draggable, bounds, BoundsFrom } from '@neodrag/vanilla';
 
-const el = document.querySelector('.window')!;
-drag.attach(el);
-resize.attach(el);`,
+const panel = document.querySelector('.panel');
+new Draggable(panel, { plugins: [bounds(BoundsFrom.parent())] });`,
+	},
+	'last-mile': empty_snippets('Route a delivery pin'),
+	'split-bill': empty_snippets('Split line items'),
+	'fridge-paws': empty_snippets('Stick magnets on the fridge'),
+	'laser-heist': empty_snippets('Dodge the lasers'),
 };
 
-function placeholder_for(framework: FrameworkId): string {
-	return `${PLACEHOLDER}\n\n// ${framework} snippet lands when this world ships.`;
+function empty_snippets(hint: string): Record<Framework, string> {
+	const line = `// ${hint} — coming soon`;
+	return {
+		svelte: line,
+		react: line,
+		vue: line,
+		solid: line,
+		vanilla: line,
+	};
 }
 
-export const SNIPPETS: Record<FrameworkId, Record<WorldId, string>> = {
-	svelte: {
-		'night-desk': NIGHT_DESK.svelte,
-		'last-mile': PLACEHOLDER,
-		'split-bill': PLACEHOLDER,
-		'fridge-paws': PLACEHOLDER,
-		'laser-heist': PLACEHOLDER,
-	},
-	react: {
-		'night-desk': NIGHT_DESK.react,
-		'last-mile': PLACEHOLDER,
-		'split-bill': PLACEHOLDER,
-		'fridge-paws': PLACEHOLDER,
-		'laser-heist': PLACEHOLDER,
-	},
-	vue: {
-		'night-desk': NIGHT_DESK.vue,
-		'last-mile': PLACEHOLDER,
-		'split-bill': PLACEHOLDER,
-		'fridge-paws': PLACEHOLDER,
-		'laser-heist': PLACEHOLDER,
-	},
-	solid: {
-		'night-desk': NIGHT_DESK.solid,
-		'last-mile': PLACEHOLDER,
-		'split-bill': PLACEHOLDER,
-		'fridge-paws': PLACEHOLDER,
-		'laser-heist': PLACEHOLDER,
-	},
-	vanilla: {
-		'night-desk': NIGHT_DESK.vanilla,
-		'last-mile': PLACEHOLDER,
-		'split-bill': PLACEHOLDER,
-		'fridge-paws': PLACEHOLDER,
-		'laser-heist': PLACEHOLDER,
-	},
-};
-
-/** Add per-world snippets under SNIPPETS[framework][worldId]. */
-export function get_snippet(world: WorldId, framework: FrameworkId) {
-	return SNIPPETS[framework][world] ?? placeholder_for(framework);
+export function get_snippet(world: WorldId, framework: Framework): string {
+	return SNIPPETS[world][framework];
 }
+
+export const LANG_BY_FRAMEWORK: Record<Framework, string> = {
+	svelte: 'svelte',
+	react: 'tsx',
+	vue: 'vue',
+	solid: 'jsx',
+	vanilla: 'ts',
+};
diff --git a/docs/src/components/playground/worlds.ts b/docs/src/components/playground/worlds.ts
index cfa21fb6..2335246e 100644
--- a/docs/src/components/playground/worlds.ts
+++ b/docs/src/components/playground/worlds.ts
@@ -12,18 +12,47 @@ export type WorldId =
 export type WorldMeta = {
 	id: WorldId;
 	label: string;
-	hint: string;
 	glyph: string;
+	tagline: string;
 	available: boolean;
 };
 
-/** Register worlds here — set `available: true` when the scenario is ready. */
 export const WORLDS: WorldMeta[] = [
-	{ id: 'night-desk', label: 'Night desk', hint: 'Drag & resize windows', glyph: '🌙', available: true },
-	{ id: 'last-mile', label: 'Last mile', hint: 'Coming soon', glyph: '📦', available: false },
-	{ id: 'split-bill', label: 'Split bill', hint: 'Coming soon', glyph: '🧾', available: false },
-	{ id: 'fridge-paws', label: 'Fridge', hint: 'Coming soon', glyph: '🧲', available: false },
-	{ id: 'laser-heist', label: 'Laser grid', hint: 'Coming soon', glyph: '💎', available: false },
+	{
+		id: 'night-desk',
+		label: 'Night desk',
+		glyph: '🌙',
+		tagline: 'Stack and drag floating panels',
+		available: true,
+	},
+	{
+		id: 'last-mile',
+		label: 'Last mile',
+		glyph: '📦',
+		tagline: 'Route packages on a map',
+		available: false,
+	},
+	{
+		id: 'split-bill',
+		label: 'Split bill',
+		glyph: '🧾',
+		tagline: 'Drag items between friends',
+		available: false,
+	},
+	{
+		id: 'fridge-paws',
+		label: 'Fridge paws',
+		glyph: '🐾',
+		tagline: 'Magnetic fridge poetry',
+		available: false,
+	},
+	{
+		id: 'laser-heist',
+		label: 'Laser heist',
+		glyph: '💎',
+		tagline: 'Sneak past moving beams',
+		available: false,
+	},
 ];
 
 export const DEFAULT_WORLD: WorldId = 'night-desk';
@@ -36,11 +65,10 @@ export const WORLD_COMPONENTS: Record<WorldId, Component> = {
 	'laser-heist': ComingSoon,
 };
 
-export function is_world_id(value: string): value is WorldId {
-	return WORLDS.some((w) => w.id === value);
-}
-
-export function world_from_hash(hash: string): WorldId | null {
+export function parse_world_from_hash(hash: string): WorldId | null {
 	const id = hash.replace(/^#/, '');
-	return is_world_id(id) ? id : null;
+	if (WORLDS.some((w) => w.id === id && w.available)) {
+		return id as WorldId;
+	}
+	return null;
 }
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
index 6ba1669b..3f172848 100644
--- a/docs/src/pages/index.astro
+++ b/docs/src/pages/index.astro
@@ -1,18 +1,30 @@
 ---
 import Layout from '$layouts/Layout.astro';
+import PlaygroundCodeSnippets from '$components/playground/PlaygroundCodeSnippets.astro';
 import PlaygroundHome from '$components/playground/PlaygroundHome.svelte';
 ---
 
 <Layout title="Neodrag: One draggable to rule them all">
-	<PlaygroundHome client:load />
+	<main id="main-content">
+		<PlaygroundHome client:load>
+			<PlaygroundCodeSnippets slot="snippets" />
+		</PlaygroundHome>
+	</main>
 </Layout>
 
 <style is:global>
-	html:has(#playground-home) {
-		overflow: hidden;
+	html {
+		overflow-x: hidden;
 	}
+</style>
 
-	html:has(#playground-home) body {
-		overflow: hidden;
+<style scoped>
+	main {
+		position: relative;
+		z-index: 2;
+		width: 100%;
+		max-width: 100%;
+		padding: 0;
+		box-sizing: border-box;
 	}
 </style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6de6e340..17dc768c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,9 +83,6 @@ importers:
       '@fontsource/plus-jakarta-sans':
         specifier: ^5.0.18
         version: 5.2.6
-      '@neodrag/core':
-        specifier: workspace:*
-        version: link:../packages/core
       '@neodrag/svelte':
         specifier: workspace:*
         version: link:../packages/svelte
@@ -101,6 +98,9 @@ importers:
       popmotion:
         specifier: ^11.0.5
         version: 11.0.5
+      shiki:
+        specifier: ^3.7.0
+        version: 3.7.0
       svelte-inview:
         specifier: ^4.0.1
         version: 4.0.4(svelte@5.34.7)