@honeydeck/honeydeck 0.9.0 → 0.11.0

package/docs/configuration.md

@@ -16,7 +16,7 @@ Defined in the first frontmatter block of the deck entry file (before any slide
 | `colorMode` | `"system" \| "light" \| "dark"` | `"system"` | Browser color mode |
 | `pdfColorMode` | `"light" \| "dark"` | unset | Optional PDF color mode; when unset, falls back to pinned `colorMode`, then `light` |
 | `pdfSteps` | `"final" \| "all"` | `"final"` | PDF includes all steps or final state |
-| `transition` | `string \| boolean` | `fade` | Default named slide transition (`fade`, `none`, `slide-left`, or custom CSS name) |
+| `transition` | `string \| boolean` | `fade` | Default named slide transition (`fade`, `none`, `slide-left`, `magic`, or custom CSS name) |
 | `transitionDuration` | `number` | `200` | Default slide transition duration in milliseconds |
 | `transitionEasing` | `string` | `ease` | Default slide transition timing function |
 | `magicCodeDuration` | `number` | `800` | Default Magic Code animation duration in milliseconds |
@@ -53,11 +53,12 @@ A subtle named `fade` transition is applied between slides by default:
 ```yaml
 transition: fade    # default
 transition: none    # disable
+transition: magic   # explicit data-magic-id FLIP movement
 ```
 
 Legacy booleans still work: `transition: true` maps to `fade`, and `transition: false` maps to `none`.
 
-For built-ins, custom CSS transitions, duration, and easing, see [Transitions](transitions.md).
+For built-ins, magic `data-magic-id` matching, custom CSS transitions, duration, and easing, see [Transitions](transitions.md).
 
 ### Magic Code Duration
 

package/docs/deeper-dive.md

@@ -241,7 +241,7 @@ Keyboard shortcuts:
 | `down` / `s` | Next slide |
 | `up` / `w` | Previous slide |
 | `o` | Toggle overview mode |
-| `p` | Open presenter mode in the current tab |
+| `p` | Open presenter mode in the current tab; on mobile, direct presenter URLs show an unsupported hint |
 | `f` | Toggle fullscreen |
 | `Escape` | Exit overview or fullscreen |
 
@@ -256,9 +256,9 @@ URL state preserves slide and step position:
 /#/components    components tab
 ```
 
-On touch devices, swipe left/right for next/previous step and swipe up/down for next/previous slide. The navigation bar is always visible on touch devices.
+On touch devices, swipe left/right for next/previous step and swipe up/down for next/previous slide. The navigation bar is always visible on touch devices and hides the presenter-mode button on mobile.
 
-Presenter mode opens with `p` and includes:
+On `md` and wider screens, presenter mode opens with `p` and includes:
 
 - current slide and next slide preview
 - speaker notes from `<Notes>`

package/docs/mobile.md

@@ -13,7 +13,7 @@ Honeydeck works on phones and tablets, but mobile presentation mode behaves diff
 | Text selection | Slide text can be selected normally | Slide text selection is off by default; use the nav bar toggle when you need it |
 | Zoom | Browser/page zoom or normal browser controls | Honeydeck-controlled slide zoom with pinch, up to `5x` |
 | Overview | Keyboard selection and mouse clicks | Responsive fixed two-column grid |
-| Presenter mode | Current slide, next preview, notes, clock, timer, actions; no navigation buttons | Current slide, notes, navigation buttons; no next preview |
+| Presenter mode | Current slide, next preview, notes, clock, timer, actions | Not supported; direct presenter URLs show a full-page hint with a button back to the slide |
 
 ## Tap zones
 
@@ -93,13 +93,7 @@ Touch scroll belongs to the overview grid and never navigates slides. Tap a slid
 
 ## Presenter mode on mobile
 
-Presenter mode keeps the mobile layout compact:
-
-- Current slide preview
-- Speaker notes
-- Navigation buttons
-
-The desktop next-slide preview is hidden on mobile because there is not enough space.
+Presenter mode is not supported below Tailwind's `md` breakpoint. The mobile navigation bar does not offer the presenter-mode button. If someone opens a `/#/presenter/...` URL directly on mobile, Honeydeck shows a full-page hint and a **Go to slide** button that returns to the same slide and step in audience view.
 
 ## Tips for mobile-friendly decks
 

package/docs/navigation.md

@@ -29,7 +29,7 @@ Boundary behavior:
 - Hidden by default for clean presentation.
 - Appears on cursor hover near bottom edge.
 - Positioned bottom-left.
-- Contains: current slide number, navigation arrows, overview button, presenter button, fullscreen button, color mode switch (system / dark / light).
+- Contains: current slide number, navigation arrows, overview button, presenter button on `md` and wider screens, fullscreen button, color mode switch (system / dark / light).
 - Built-in controls use `lucide-react` icons, imported from the suffixed `...Icon` exports (for example `ChevronLeftIcon`), not inline SVG paths or unsuffixed aliases.
 
 When `showSlideNumbers: true`, the current slide number is also shown as a single viewer overlay aligned to the bottom-right corner of the slide canvas. It is not part of individual slide content, so it does not animate during slide transitions. It renders as themed foreground text without a background container.
@@ -60,7 +60,7 @@ Mobile uses touch-specific controls. See the full [Mobile and Touch](mobile.md)
   - Swipe down → previous slide
 - Pinch zoom enlarges slide content up to `5x`; dragging pans while zoomed.
 - Slide text selection is off by default on touch devices; the navigation bar includes a toggle to enable selection when needed.
-- Presenter mode on mobile shows only current slide, notes, and navigation buttons (no next slide preview).
+- Presenter mode is not supported on mobile. Direct presenter URLs show a full-page hint with a button back to the same slide and step in audience view.
 
 ## Overview Mode
 

package/docs/presenter-mode.md

@@ -34,7 +34,7 @@ Includes:
 - Color mode toggle that also updates audience views and cast receivers
 - Blank screen toggle (`b`) that makes audience and cast views black while presenter mode shows a `Screen blanked (b)` indicator
 - Button to cast the audience view to a secondary display when supported; the same control becomes a stop button while casting. Unsupported browsers show a visibly disabled-looking button with hover/accessible text explaining why casting is unavailable.
-- Navigation buttons that move through the timeline while staying in presenter mode on mobile. Desktop presenter mode uses keyboard shortcuts instead.
+- Desktop keyboard shortcuts that move through the timeline while staying in presenter mode.
 
 ## Speaker Notes
 
@@ -64,7 +64,7 @@ Content here.
 ## Opening Presenter Mode
 
 - Keyboard shortcut `p` from normal presentation → opens presenter mode in the current tab.
-- Navigation controls button in normal presentation.
+- Navigation controls button in normal presentation on `md` and wider screens.
 - Direct URL: `/#/presenter/1/0`
 
 Pressing `p` opens presenter mode in the **current tab**. In presenter mode, press `p` or `Escape` to return to the audience slide view at the same slide and step.
@@ -80,7 +80,7 @@ Presenter mode uses the same timeline keyboard shortcuts as normal slide view:
 | `↓` / `s` | Next slide |
 | `↑` / `w` | Previous slide |
 
-Keyboard navigation and presenter navigation buttons keep the URL under `/#/presenter/...`. Presenter controls use `lucide-react` icons imported from suffixed `...Icon` exports.
+Keyboard navigation keeps the URL under `/#/presenter/...`. Presenter controls use `lucide-react` icons imported from suffixed `...Icon` exports.
 
 The `Next` preview shows the next timeline state, not just the next slide. Reveals and code step-through highlights therefore preview exactly what the audience will see after the next forward navigation.
 
@@ -107,9 +107,4 @@ This supports the common laptop/projector setup.
 
 ## Mobile Presenter Mode
 
-On mobile, presenter mode shows:
-- Current slide
-- Notes
-- Navigation buttons
-
-No next slide preview (space constraint).
+Presenter mode is not supported below Tailwind's `md` breakpoint. The navigation bar hides the presenter-mode button on mobile. If someone opens a `/#/presenter/...` URL on mobile, Honeydeck shows a full-page hint and a **Go to slide** button that returns to the same slide and step in audience view.

package/docs/transitions.md

@@ -25,6 +25,7 @@ Built-in transition names:
 - `fade` — default crossfade
 - `none` — no slide transition
 - `slide-left` — horizontal slide, reverse-aware when navigating backward
+- `magic` — explicit `data-magic-id` element movement with FLIP overlay clones
 
 ## Slide overrides
 
@@ -42,6 +43,38 @@ transitionEasing: cubic-bezier(0.22, 1, 0.36, 1)
 
 Slides without transition frontmatter use the deck defaults.
 
+## Magic transition
+
+`transition: magic` moves only elements you explicitly tag with matching `data-magic-id` values. Honeydeck keeps the outgoing and incoming slides mounted, measures tagged elements at runtime, hides the original tagged elements, animates fixed-position overlay clones, then restores the real slide DOM after the transition.
+
+```mdx
+# Before
+
+<span data-magic-id="world">World</span>
+
+---
+transition: magic
+transitionDuration: 600
+transitionEasing: ease-in-out
+---
+
+# After
+
+Hello <span data-magic-id="world">World</span>
+```
+
+Matching rules:
+
+- Same `data-magic-id` on both slides → the element moves.
+- ID only on the previous slide → the element fades out.
+- ID only on the incoming slide → the element fades in.
+- Untagged content crossfades with the slide layers.
+- Different IDs never match, even when the text is identical.
+
+Magic is forward-only. When navigating backward into a slide that uses `transition: magic`, Honeydeck falls back to the layer crossfade instead of guessing a reverse morph.
+
+Honeydeck does not perform automatic DOM diffing or text/tag heuristics. Layout chrome such as the navigation bar and global slide numbers is outside slide content and switches immediately unless you explicitly tag slide content yourself.
+
 ## Custom transitions
 
 Any transition name that is not built in becomes a CSS hook. For example:

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@honeydeck/honeydeck",
-	"version": "0.9.0",
+	"version": "0.11.0",
 	"description": "MDX and React-based presentation framework for AI-friendly slide decks.",
 	"license": "MIT",
 	"publishConfig": {

package/src/runtime/Deck.tsx

@@ -47,6 +47,7 @@ import {
 	EffectiveColorModeProvider,
 } from "./EffectiveColorModeContext.tsx";
 import { rememberSlideRoute } from "./lastSlideRoute.ts";
+import { startMagicTransition } from "./magicTransition.ts";
 import {
 	closeOverview,
 	toggleOverview as toggleOverviewRoute,
@@ -85,7 +86,9 @@ function calcScaleFromElement(el: HTMLElement | null): number | null {
 
 type SlideTransitionState = {
 	from: number;
+	fromStep: number;
 	to: number;
+	toStep: number;
 	name: string;
 	className: string;
 	duration: number;
@@ -134,7 +137,13 @@ function getTransitionOptions(
 	slideIndex: number,
 ): Omit<
 	SlideTransitionState,
-	"from" | "to" | "direction" | "enterFromOpacity" | "exitFromOpacity"
+	| "from"
+	| "fromStep"
+	| "to"
+	| "toStep"
+	| "direction"
+	| "enterFromOpacity"
+	| "exitFromOpacity"
 > {
 	const frontmatter = slideData[slideIndex]?.frontmatter ?? {};
 	const name = normalizeTransitionName(
@@ -338,36 +347,51 @@ export function Deck() {
 		1,
 		Math.min(route.slide, slideData.length || 1),
 	);
-	const previousSlideRef = useRef<number | null>(null);
+	const currentStep = Math.max(0, route.step);
+	const previousRouteRef = useRef<{ slide: number; step: number } | null>(null);
 	const slideLayerRefs = useRef<Record<number, HTMLDivElement | null>>({});
 	const [slideTransition, setSlideTransition] =
 		useState<SlideTransitionState | null>(null);
 	const slideTransitionRef = useRef<SlideTransitionState | null>(null);
 	slideTransitionRef.current = slideTransition;
+	const magicTransitionScale = scale * slideZoom;
 
 	useLayoutEffect(() => {
 		if (route.view !== "slide") {
-			previousSlideRef.current = currentSlide;
+			previousRouteRef.current = { slide: currentSlide, step: currentStep };
 			setSlideTransition(null);
 			return;
 		}
 
 		if (reducedMotion) {
-			previousSlideRef.current = currentSlide;
+			previousRouteRef.current = { slide: currentSlide, step: currentStep };
 			setSlideTransition(null);
 			return;
 		}
 
-		const previousSlide = previousSlideRef.current;
-		if (previousSlide === null) {
-			previousSlideRef.current = currentSlide;
+		const previousRoute = previousRouteRef.current;
+		if (previousRoute === null) {
+			previousRouteRef.current = { slide: currentSlide, step: currentStep };
+			return;
+		}
+		if (previousRoute.slide === currentSlide) {
+			previousRouteRef.current = { slide: currentSlide, step: currentStep };
+			setSlideTransition((active) =>
+				active?.to === currentSlide && active.toStep !== currentStep
+					? null
+					: active,
+			);
 			return;
 		}
-		if (previousSlide === currentSlide) return;
 
+		const previousSlide = previousRoute.slide;
 		const direction: 1 | -1 = currentSlide > previousSlide ? 1 : -1;
-		const options = getTransitionOptions(currentSlide - 1);
-		previousSlideRef.current = currentSlide;
+		const rawOptions = getTransitionOptions(currentSlide - 1);
+		const options =
+			rawOptions.name === "magic" && direction === -1
+				? { ...rawOptions, name: "fade", className: "fade" }
+				: rawOptions;
+		previousRouteRef.current = { slide: currentSlide, step: currentStep };
 
 		if (options.name === "none" || options.duration === 0) {
 			setSlideTransition(null);
@@ -379,7 +403,9 @@ export function Deck() {
 		const nextTransition = {
 			...options,
 			from: previousSlide,
+			fromStep: previousRoute.step,
 			to: currentSlide,
+			toStep: currentStep,
 			direction,
 			enterFromOpacity: isInterruptingFade
 				? (readLayerOpacity(slideLayerRefs.current[currentSlide]) ?? 0)
@@ -399,7 +425,19 @@ export function Deck() {
 		}, options.duration);
 
 		return () => window.clearTimeout(timeout);
-	}, [currentSlide, reducedMotion, route.view]);
+	}, [currentSlide, currentStep, reducedMotion, route.view]);
+
+	useLayoutEffect(() => {
+		if (!slideTransition || slideTransition.name !== "magic") return;
+		return startMagicTransition({
+			fromLayer: slideLayerRefs.current[slideTransition.from],
+			toLayer: slideLayerRefs.current[slideTransition.to],
+			duration: slideTransition.duration,
+			easing: slideTransition.easing,
+			scale: magicTransitionScale,
+			direction: slideTransition.direction,
+		});
+	}, [magicTransitionScale, slideTransition]);
 
 	// ── Reference mode: delegate to DocsView ─────────────────────────────
 	if (route.view === "kit") {
@@ -431,7 +469,6 @@ export function Deck() {
 		);
 	}
 
-	const currentStep = Math.max(0, route.step);
 	const controlRoute =
 		route.view === "slide" || route.view === "overview"
 			? { ...route, slide: currentSlide, step: currentStep }
@@ -486,6 +523,14 @@ export function Deck() {
 									? "exit"
 									: null;
 						const isVisible = isCurrent || transitionRole !== null;
+						const slideStepIndex =
+							transitionRole === "exit" && activeTransition
+								? activeTransition.fromStep
+								: transitionRole === "enter" && activeTransition
+									? activeTransition.toStep
+									: isCurrent
+										? currentStep
+										: 0;
 						const transitionLayerClass =
 							transitionRole && activeTransition
 								? `honeydeck-transition-${activeTransition.className} honeydeck-transition-${transitionRole}`
@@ -546,7 +591,7 @@ export function Deck() {
 										}}
 									>
 										<TimelineProvider
-											stepIndex={isCurrent ? currentStep : 0}
+											stepIndex={slideStepIndex}
 											stepCount={stepCount}
 										>
 											<SlideScaleProvider scale={activeSlideScale}>

package/src/runtime/SPEC.md

@@ -126,7 +126,7 @@ Reference page routes intentionally do not encode slide or step. During one brow
 | `↓` / `s` | Next slide; in overview, timeline navigation is disabled: arrow keys move overview selection and WASD are no-ops |
 | `↑` / `w` | Previous slide; in overview, timeline navigation is disabled: arrow keys move overview selection and WASD are no-ops |
 | `o` | Toggle overview mode |
-| `p` | Open presenter mode (same tab) |
+| `p` | Open presenter mode (same tab); presenter mode is unsupported below Tailwind's `md` breakpoint and shows a mobile hint with a button back to the same audience slide/step |
 | `f` | Toggle fullscreen |
 | `Escape` | Exit overview; in reference pages, return to slides; browser-native Escape handles fullscreen exit |
 
@@ -145,7 +145,7 @@ Shown in normal slide view only (not presenter/reference views).
   - Overview mode button
   - Layouts reference button (opens `/#/layouts` while preserving the current slide/step as the return target)
   - Docs website button (opens `https://honeydeck.dev` in a new tab)
-  - Presenter mode button
+  - Presenter mode button on `md` and wider screens
   - Fullscreen button
   - Mobile text selection toggle (off by default, enables selecting slide content when needed)
   - Color mode switch (system → light → dark → system)
@@ -231,10 +231,12 @@ transitionDuration: 200
 transitionEasing: ease
 ```
 
-Built-in transition names are `fade`, `none`, and `slide-left`. Any other string is exposed as a custom CSS hook on the participating slide layers. Legacy `transition: true` maps to `fade`, and `transition: false` maps to `none`.
+Built-in transition names are `fade`, `none`, `slide-left`, and `magic`. Any other string is exposed as a custom CSS hook on the participating slide layers. Legacy `transition: true` maps to `fade`, and `transition: false` maps to `none`.
 
 During slide navigation, Honeydeck keeps the outgoing and incoming slide layers mounted inside a scaled slide-sized clipping viewport, applies `honeydeck-slide-layer`, `honeydeck-transition-{name}`, and either `honeydeck-transition-enter` or `honeydeck-transition-exit` only to those two layers, then clears transition state after the configured duration. Transition visuals are clipped to the slide canvas area and must not animate into letterbox or pillarbox bars around the slide. If the next transition is `none` or navigation is interrupted, stale transition state is cleared/replaced so old slides do not remain visible. Outgoing layers are visible during the transition but have pointer events disabled. The built-in `fade` transition uses keyframes and, when a fade is interrupted, starts the next fade from the participating layers' current computed opacity so quick back-and-forth navigation stays close to the old opacity-transition behavior.
 
+The built-in `magic` transition is forward-only FLIP behavior for explicitly tagged elements. On forward navigation into a slide with `transition: magic`, Honeydeck measures only elements with `data-magic-id` in the outgoing and incoming slide DOM. Equal IDs move through fixed overlay clones; IDs present only on the outgoing slide fade out through clones; IDs present only on the incoming slide fade in through clones. Untagged slide content still crossfades as part of the slide layers. Honeydeck does not diff arbitrary DOM, text, or tag names, and equal text with different IDs must not match. During magic transitions, Honeydeck hides original tagged elements on both participating slides, copies computed styles recursively onto overlay clones, removes IDs from clones to avoid duplicate document IDs, and accounts for current slide scale when sizing and transforming clones. The magic overlay restores originals and removes itself when animations finish, when navigation interrupts the transition, or after a short timeout fallback. If clone or Web Animations API setup fails, Honeydeck leaves tagged originals visible and uses the layer crossfade. Backward navigation with `transition: magic` falls back to the layer crossfade without overlay matching.
+
 Participating slide layers receive CSS variables: `--honeydeck-transition-duration`, `--honeydeck-transition-easing`, and `--honeydeck-transition-direction` (`1` forward, `-1` backward). Built-in `slide-left` uses the direction variable so backward navigation reverses direction. Custom transition CSS can use the same variable for opt-in reverse awareness. Reduced-motion preferences disable slide transition animations.
 
 ### Aspect Ratio

package/src/runtime/components/NavBar.tsx

@@ -183,12 +183,14 @@ export function NavBar({
 
 					{/* Presenter mode */}
 					{route.view !== "presenter" && (
-						<NavBarButton
-							onClick={() => openPresenter(route)}
-							label="Presenter mode (p)"
-						>
-							<PresentationIcon aria-hidden="true" size={16} />
-						</NavBarButton>
+						<div className="hidden md:block">
+							<NavBarButton
+								onClick={() => openPresenter(route)}
+								label="Presenter mode (p)"
+							>
+								<PresentationIcon aria-hidden="true" size={16} />
+							</NavBarButton>
+						</div>
 					)}
 				</div>
 

package/src/runtime/magicTransition.ts

@@ -0,0 +1,367 @@
+const MAGIC_SELECTOR = "[data-magic-id]";
+
+type MagicElementSnapshot = {
+	element: HTMLElement;
+	rect: DOMRect;
+};
+
+type HiddenOriginal = {
+	element: HTMLElement;
+	opacity: string;
+	transition: string;
+};
+
+type MagicClonePlan = {
+	wrapper: HTMLDivElement;
+	fromRect: DOMRect;
+	toRect: DOMRect;
+	fromOpacity: number;
+	toOpacity: number;
+};
+
+export type MagicTransitionOptions = {
+	fromLayer: HTMLElement | null | undefined;
+	toLayer: HTMLElement | null | undefined;
+	duration: number;
+	easing: string;
+	scale: number;
+	direction: 1 | -1;
+};
+
+export function startMagicTransition({
+	fromLayer,
+	toLayer,
+	duration,
+	easing,
+	scale,
+	direction,
+}: MagicTransitionOptions): () => void {
+	if (direction !== 1 || !fromLayer || !toLayer || scale <= 0) {
+		return () => {};
+	}
+
+	const fromElements = collectMagicElements(fromLayer);
+	const toElements = collectMagicElements(toLayer);
+	const ids = new Set([...fromElements.keys(), ...toElements.keys()]);
+	if (ids.size === 0) return () => {};
+
+	const overlay = document.createElement("div");
+	overlay.setAttribute("aria-hidden", "true");
+	overlay.style.position = "fixed";
+	overlay.style.inset = "0";
+	overlay.style.pointerEvents = "none";
+	overlay.style.zIndex = "90";
+	overlay.style.overflow = "visible";
+	overlay.style.contain = "layout style paint";
+
+	let plans: MagicClonePlan[];
+	try {
+		plans = createMagicClonePlans(ids, fromElements, toElements, scale);
+	} catch {
+		overlay.remove();
+		return () => {};
+	}
+
+	if (plans.length === 0) return () => {};
+	if (typeof plans[0]?.wrapper.animate !== "function") return () => {};
+
+	const hiddenOriginals = hideOriginals(fromElements, toElements);
+	const animations: Animation[] = [];
+	let cleaned = false;
+	let timeout: number | null = null;
+
+	function cleanup() {
+		if (cleaned) return;
+		cleaned = true;
+		if (timeout !== null) {
+			window.clearTimeout(timeout);
+			timeout = null;
+		}
+		for (const animation of animations) {
+			if (animation.playState !== "finished") animation.cancel();
+		}
+		restoreOriginals(hiddenOriginals);
+		overlay.remove();
+	}
+
+	try {
+		document.body.appendChild(overlay);
+
+		for (const plan of plans) {
+			overlay.appendChild(plan.wrapper);
+			const offset = alignCloneToRect(plan.wrapper, plan.fromRect, scale);
+			applyCloneFrame(
+				plan.wrapper,
+				plan.fromRect,
+				plan.fromOpacity,
+				scale,
+				offset,
+			);
+			const animation = animateClone({
+				...plan,
+				duration,
+				easing,
+				scale,
+				offsetX: offset.x,
+				offsetY: offset.y,
+			});
+			if (!animation) throw new Error("Magic transition animation failed");
+			animations.push(animation);
+		}
+	} catch {
+		cleanup();
+		return () => {};
+	}
+
+	void Promise.allSettled(
+		animations.map((animation) => animation.finished),
+	).then(cleanup);
+	timeout = window.setTimeout(cleanup, duration + 50);
+
+	return cleanup;
+}
+
+function collectMagicElements(
+	root: HTMLElement,
+): Map<string, MagicElementSnapshot> {
+	const elements = new Map<string, MagicElementSnapshot>();
+	for (const element of root.querySelectorAll<HTMLElement>(MAGIC_SELECTOR)) {
+		const id = element.dataset.magicId?.trim();
+		if (!id || elements.has(id)) continue;
+
+		const rect = element.getBoundingClientRect();
+		if (rect.width <= 0 && rect.height <= 0) continue;
+		elements.set(id, { element, rect });
+	}
+	return elements;
+}
+
+function createMagicClonePlans(
+	ids: Set<string>,
+	fromElements: Map<string, MagicElementSnapshot>,
+	toElements: Map<string, MagicElementSnapshot>,
+	scale: number,
+): MagicClonePlan[] {
+	const plans: MagicClonePlan[] = [];
+	for (const id of ids) {
+		const from = fromElements.get(id);
+		const to = toElements.get(id);
+		if (from && to) {
+			plans.push({
+				wrapper: createMagicClone(to.element, to.rect, scale),
+				fromRect: from.rect,
+				toRect: to.rect,
+				fromOpacity: 1,
+				toOpacity: 1,
+			});
+			continue;
+		}
+
+		if (from) {
+			plans.push({
+				wrapper: createMagicClone(from.element, from.rect, scale),
+				fromRect: from.rect,
+				toRect: from.rect,
+				fromOpacity: 1,
+				toOpacity: 0,
+			});
+			continue;
+		}
+
+		if (to) {
+			plans.push({
+				wrapper: createMagicClone(to.element, to.rect, scale),
+				fromRect: to.rect,
+				toRect: to.rect,
+				fromOpacity: 0,
+				toOpacity: 1,
+			});
+		}
+	}
+	return plans;
+}
+
+function hideOriginals(
+	fromElements: Map<string, MagicElementSnapshot>,
+	toElements: Map<string, MagicElementSnapshot>,
+): HiddenOriginal[] {
+	const originals = new Set<HTMLElement>();
+	for (const { element } of fromElements.values()) originals.add(element);
+	for (const { element } of toElements.values()) originals.add(element);
+
+	return Array.from(originals, (element) => {
+		const hidden = {
+			element,
+			opacity: element.style.opacity,
+			transition: element.style.transition,
+		};
+		element.style.transition = "none";
+		element.style.opacity = "0";
+		return hidden;
+	});
+}
+
+function restoreOriginals(originals: HiddenOriginal[]) {
+	for (const { element, opacity, transition } of originals) {
+		element.style.opacity = opacity;
+		element.style.transition = transition;
+	}
+}
+
+function createMagicClone(
+	source: HTMLElement,
+	rect: DOMRect,
+	scale: number,
+): HTMLDivElement {
+	const wrapper = document.createElement("div");
+	wrapper.style.position = "fixed";
+	wrapper.style.left = "0px";
+	wrapper.style.top = "0px";
+	wrapper.style.margin = "0";
+	wrapper.style.width = `${rect.width / scale}px`;
+	wrapper.style.height = `${rect.height / scale}px`;
+	wrapper.style.pointerEvents = "none";
+	wrapper.style.transformOrigin = "top left";
+	wrapper.style.transform = transformForRect(rect, scale, 0, 0);
+	wrapper.style.opacity = "1";
+	wrapper.style.overflow = "visible";
+	wrapper.style.lineHeight = "0";
+
+	const clone = source.cloneNode(true) as HTMLElement;
+	const sourceDisplay = window.getComputedStyle(source).display;
+	copyComputedStyles(source, clone);
+	clone.removeAttribute("id");
+	for (const descendant of clone.querySelectorAll("[id]")) {
+		descendant.removeAttribute("id");
+	}
+	clone.style.boxSizing = "border-box";
+	clone.style.transform = "none";
+	if (sourceDisplay === "inline") {
+		clone.style.display = "inline";
+		clone.style.width = "auto";
+		clone.style.height = "auto";
+	} else {
+		clone.style.width = "100%";
+		clone.style.height = "100%";
+	}
+	clone.style.margin = "0";
+	clone.style.pointerEvents = "none";
+	clone.style.transformOrigin = "top left";
+	clone.style.verticalAlign = "top";
+	wrapper.appendChild(clone);
+	return wrapper;
+}
+
+function copyComputedStyles(source: Element, clone: Element) {
+	if (!(clone instanceof HTMLElement)) return;
+
+	const computed = window.getComputedStyle(source);
+	for (let index = 0; index < computed.length; index += 1) {
+		const property = computed.item(index);
+		clone.style.setProperty(
+			property,
+			computed.getPropertyValue(property),
+			computed.getPropertyPriority(property),
+		);
+	}
+
+	const sourceChildren = Array.from(source.children);
+	const cloneChildren = Array.from(clone.children);
+	for (let index = 0; index < sourceChildren.length; index += 1) {
+		const sourceChild = sourceChildren[index];
+		const cloneChild = cloneChildren[index];
+		if (sourceChild && cloneChild) copyComputedStyles(sourceChild, cloneChild);
+	}
+}
+
+function alignCloneToRect(
+	wrapper: HTMLDivElement,
+	rect: DOMRect,
+	scale: number,
+): { x: number; y: number } {
+	const wrapperRect = wrapper.getBoundingClientRect();
+	const cloneRect =
+		wrapper.firstElementChild?.getBoundingClientRect() ?? wrapperRect;
+	const x = cloneRect.left - wrapperRect.left;
+	const y = cloneRect.top - wrapperRect.top;
+	wrapper.style.left = "0px";
+	wrapper.style.top = "0px";
+	wrapper.style.transform = transformForRect(rect, scale, x, y);
+	return { x, y };
+}
+
+function applyCloneFrame(
+	wrapper: HTMLDivElement,
+	rect: DOMRect,
+	opacity: number,
+	scale: number,
+	offset: { x: number; y: number },
+) {
+	wrapper.style.width = `${rect.width / scale}px`;
+	wrapper.style.height = `${rect.height / scale}px`;
+	wrapper.style.opacity = `${opacity}`;
+	wrapper.style.transform = transformForRect(rect, scale, offset.x, offset.y);
+}
+
+function animateClone({
+	wrapper,
+	fromRect,
+	toRect,
+	fromOpacity,
+	toOpacity,
+	duration,
+	easing,
+	scale,
+	offsetX,
+	offsetY,
+}: MagicClonePlan & {
+	duration: number;
+	easing: string;
+	scale: number;
+	offsetX: number;
+	offsetY: number;
+}): Animation | null {
+	const keyframes: Keyframe[] = [
+		{
+			width: `${fromRect.width / scale}px`,
+			height: `${fromRect.height / scale}px`,
+			opacity: fromOpacity,
+			transform: transformForRect(fromRect, scale, offsetX, offsetY),
+		},
+		{
+			width: `${toRect.width / scale}px`,
+			height: `${toRect.height / scale}px`,
+			opacity: toOpacity,
+			transform: transformForRect(toRect, scale, offsetX, offsetY),
+		},
+	];
+
+	if (typeof wrapper.animate !== "function") return null;
+
+	try {
+		return wrapper.animate(keyframes, {
+			duration,
+			easing,
+			fill: "both",
+		});
+	} catch {
+		try {
+			return wrapper.animate(keyframes, {
+				duration,
+				easing: "ease",
+				fill: "both",
+			});
+		} catch {
+			return null;
+		}
+	}
+}
+
+function transformForRect(
+	rect: DOMRect,
+	scale: number,
+	offsetX: number,
+	offsetY: number,
+): string {
+	return `translate(${rect.left - offsetX}px, ${rect.top - offsetY}px) scale(${scale})`;
+}

package/src/runtime/views/PresenterView.tsx

@@ -30,10 +30,6 @@
  */
 
 import {
-	ChevronDownIcon,
-	ChevronLeftIcon,
-	ChevronRightIcon,
-	ChevronUpIcon,
 	ExternalLinkIcon,
 	MonitorOffIcon,
 	PauseIcon,
@@ -57,11 +53,7 @@ import { NotesContext } from "../components/Notes.tsx";
 import {
 	getSlideRouteFromRoute,
 	navigateTo,
-	nextSlide,
-	nextStep,
 	openUrlInNewTab,
-	previousSlide,
-	previousStep,
 } from "../navigation.ts";
 import {
 	getPresentationAudienceUrl,
@@ -72,7 +64,6 @@ import { SlideCanvas } from "../SlideCanvas.tsx";
 import { BASE_HEIGHT, BASE_WIDTH, slideData } from "../slideData.ts";
 import { useSync } from "../sync.ts";
 import { useKeyboardNav } from "../useKeyboardNav.ts";
-import { useSwipeNav } from "../useSwipeNav.ts";
 import { PresenterCastButton } from "./PresenterCastButton.tsx";
 import { PresenterNotesPanel } from "./PresenterNotesPanel.tsx";
 import { getPresenterNextPreview } from "./presenterPreview.ts";
@@ -154,23 +145,6 @@ function SlidePreview({
 	);
 }
 
-function usePresenterMobile(): boolean {
-	const [isMobile, setIsMobile] = useState(() => {
-		if (typeof window === "undefined") return false;
-		return window.matchMedia("(max-width: 767px)").matches;
-	});
-
-	useEffect(() => {
-		const query = window.matchMedia("(max-width: 767px)");
-		const update = () => setIsMobile(query.matches);
-		update();
-		query.addEventListener("change", update);
-		return () => query.removeEventListener("change", update);
-	}, []);
-
-	return isMobile;
-}
-
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -197,7 +171,6 @@ export function PresenterView({
 	const [notes, setNotes] = useState<ReactNode>(null);
 	const [isBlankScreen, setIsBlankScreen] = useState(false);
 	const notesContextValue = useMemo(() => ({ setNotes }), []);
-	const isMobile = usePresenterMobile();
 
 	const currentIndex = slide - 1; // 0-based
 	const currentStepCount = slideData[currentIndex]?.stepCount ?? 0;
@@ -243,7 +216,6 @@ export function PresenterView({
 		getStepCount,
 		onToggleOverview: () => {},
 	});
-	useSwipeNav({ enabled: isMobile });
 
 	// ── Presenter exit + blank screen shortcuts ─────────────────────────────
 	const closePresenter = useCallback(() => {
@@ -305,60 +277,50 @@ export function PresenterView({
 		if (url) openUrlInNewTab(url);
 	}
 
-	// ── Navigate (presenter stays on presenter route) ───────────────────────
-	function goNext() {
-		nextStep(
-			{ view: "presenter", slide, step },
-			{ slideCount: totalSlides, getStepCount },
-		);
-	}
-
-	function goPrev() {
-		previousStep(
-			{ view: "presenter", slide, step },
-			{ slideCount: totalSlides, getStepCount },
-		);
-	}
-
-	function goNextSlide() {
-		nextSlide({ view: "presenter", slide, step }, { slideCount: totalSlides });
-	}
-
-	function goPrevSlide() {
-		previousSlide({ view: "presenter", slide, step });
-	}
-
 	// ---------------------------------------------------------------------------
 	// Render
 	// ---------------------------------------------------------------------------
 
 	return (
-		<div className="fixed inset-0 bg-black text-white font-sans grid grid-rows-[1fr_auto_auto] grid-cols-1 overflow-hidden select-none">
-			{/* ── Blank screen indicator overlay ────────────────────────────── */}
-			{isBlankScreen && (
-				<div className="absolute top-4 left-1/2 -translate-x-1/2 z-10 px-4 py-2 rounded-md bg-red-600/90 text-white text-sm font-semibold tracking-wide uppercase">
-					Screen blanked (b)
+		<div className="fixed inset-0 bg-black text-white font-sans overflow-hidden select-none">
+			<div className="flex h-full flex-col items-center justify-center gap-5 px-6 text-center md:hidden">
+				<div className="max-w-sm space-y-2">
+					<h1 className="text-2xl font-semibold">
+						Presenter mode is not supported on mobile.
+					</h1>
+					<p className="text-sm text-white/60">
+						Open presenter mode on a larger screen, or return to this slide in
+						the audience view.
+					</p>
 				</div>
-			)}
+				<button
+					type="button"
+					onClick={closePresenter}
+					className="rounded border border-white/20 bg-white/10 px-4 py-2 text-sm font-[inherit] text-white/85"
+				>
+					Go to slide
+				</button>
+			</div>
+
+			<div className="hidden h-full grid-rows-[1fr_auto] grid-cols-1 md:grid">
+				{/* ── Blank screen indicator overlay ────────────────────────────── */}
+				{isBlankScreen && (
+					<div className="absolute top-4 left-1/2 -translate-x-1/2 z-10 px-4 py-2 rounded-md bg-red-600/90 text-white text-sm font-semibold tracking-wide uppercase">
+						Screen blanked (b)
+					</div>
+				)}
+
+				{/* ── Top section: current slide plus next/notes column ─────────── */}
+				<div className="grid grid-cols-[minmax(0,3fr)_minmax(280px,2fr)] gap-4 px-4 pt-4 pb-2 min-h-0 overflow-hidden">
+					{/* Current slide owns NotesContext. Next preview must not overwrite notes. */}
+					<NotesContext.Provider value={notesContextValue}>
+						<SlidePreview
+							slideIndex={currentIndex}
+							stepIndex={step}
+							label="Current"
+						/>
+					</NotesContext.Provider>
 
-			{/* ── Top section: current slide plus desktop next/notes column ─── */}
-			<div
-				className={
-					isMobile
-						? "grid grid-cols-1 gap-3 px-3 pt-3 pb-2 min-h-0 overflow-hidden"
-						: "grid grid-cols-[minmax(0,3fr)_minmax(280px,2fr)] gap-4 px-4 pt-4 pb-2 min-h-0 overflow-hidden"
-				}
-			>
-				{/* Current slide owns NotesContext. Next preview must not overwrite notes. */}
-				<NotesContext.Provider value={notesContextValue}>
-					<SlidePreview
-						slideIndex={currentIndex}
-						stepIndex={step}
-						label="Current"
-					/>
-				</NotesContext.Provider>
-
-				{!isMobile && (
 					<div className="grid grid-rows-[minmax(0,1fr)_minmax(8rem,0.8fr)] gap-4 min-h-0 overflow-hidden">
 						<SlidePreview
 							slideIndex={nextPreview?.slideIndex ?? -1}
@@ -368,177 +330,123 @@ export function PresenterView({
 						/>
 						<PresenterNotesPanel notes={notes} />
 					</div>
-				)}
-			</div>
-
-			{/* ── Mobile notes live below the current slide ─────────────────── */}
-			{isMobile && (
-				<PresenterNotesPanel
-					notes={notes}
-					className="mx-3 mb-2 min-h-20 max-h-40"
-				/>
-			)}
+				</div>
 
-			{/* ── Bottom bar: counter · mobile nav buttons · timer/actions ──── */}
-			<div
-				className={
-					isMobile
-						? "grid grid-cols-[minmax(0,1fr)_auto] items-center px-3 py-2.5 border-t border-white/8 bg-black/30 gap-x-3 gap-y-2"
-						: "grid grid-cols-[minmax(0,1fr)_auto] items-center px-5 py-2.5 border-t border-white/8 bg-black/30 gap-x-4 gap-y-2"
-				}
-			>
-				{/* Counter + timer */}
-				<div className="min-w-0 flex flex-wrap items-center gap-3 text-md text-white/60 tabular-nums">
-					<span className="truncate">
-						Slide {slide}/{totalSlides}
-						{currentStepCount > 0 && ` · Step ${step}/${currentStepCount}`}
-					</span>
-					{timerState === "idle" && (
-						<button
-							type="button"
-							onClick={startTimer}
-							title="Start timer"
-							className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded bg-white/6 text-white/50 hover:text-white/80 text-sm"
-						>
-							<PlayIcon aria-hidden="true" size={14} />
-							Start timer
-						</button>
-					)}
-					{timerState === "running" && (
-						<>
-							<button
-								type="button"
-								onClick={pauseTimer}
-								title="Pause timer"
-								className="text-lg font-semibold text-white tabular-nums bg-white/10 px-2.5 py-0.5 rounded"
-							>
-								⏱ {elapsedTime}
-							</button>
-							<button
-								type="button"
-								onClick={pauseTimer}
-								title="Pause timer"
-								aria-label="Pause timer"
-								className="text-white/50 hover:text-white/80 inline-flex"
-							>
-								<PauseIcon aria-hidden="true" size={16} />
-							</button>
-						</>
-					)}
-					{timerState === "paused" && (
-						<>
-							<span className="text-lg font-semibold text-white/60 tabular-nums bg-white/6 px-2.5 py-0.5 rounded">
-								⏱ {elapsedTime}
-							</span>
-							<button
-								type="button"
-								onClick={continueTimer}
-								title="Continue timer"
-								aria-label="Continue timer"
-								className="text-white/50 hover:text-white/80 inline-flex"
-							>
-								<PlayIcon aria-hidden="true" size={16} />
-							</button>
-							<button
-								type="button"
-								onClick={restartTimer}
-								title="Restart timer from zero"
-								aria-label="Restart timer from zero"
-								className="text-white/30 hover:text-white/60 inline-flex"
-							>
-								<RotateCcwIcon aria-hidden="true" size={15} />
-							</button>
+				{/* ── Bottom bar: counter · timer/actions ──────────────────────── */}
+				<div className="grid grid-cols-[minmax(0,1fr)_auto] items-center px-5 py-2.5 border-t border-white/8 bg-black/30 gap-x-4 gap-y-2">
+					{/* Counter + timer */}
+					<div className="min-w-0 flex flex-wrap items-center gap-3 text-md text-white/60 tabular-nums">
+						<span className="truncate">
+							Slide {slide}/{totalSlides}
+							{currentStepCount > 0 && ` · Step ${step}/${currentStepCount}`}
+						</span>
+						{timerState === "idle" && (
 							<button
 								type="button"
-								onClick={closeTimer}
-								title="Close timer"
-								aria-label="Close timer"
-								className="text-white/30 hover:text-white/60 inline-flex"
+								onClick={startTimer}
+								title="Start timer"
+								className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded bg-white/6 text-white/50 hover:text-white/80 text-sm"
 							>
-								<XIcon aria-hidden="true" size={16} />
+								<PlayIcon aria-hidden="true" size={14} />
+								Start timer
 							</button>
-						</>
-					)}
-				</div>
+						)}
+						{timerState === "running" && (
+							<>
+								<button
+									type="button"
+									onClick={pauseTimer}
+									title="Pause timer"
+									className="text-lg font-semibold text-white tabular-nums bg-white/10 px-2.5 py-0.5 rounded"
+								>
+									⏱ {elapsedTime}
+								</button>
+								<button
+									type="button"
+									onClick={pauseTimer}
+									title="Pause timer"
+									aria-label="Pause timer"
+									className="text-white/50 hover:text-white/80 inline-flex"
+								>
+									<PauseIcon aria-hidden="true" size={16} />
+								</button>
+							</>
+						)}
+						{timerState === "paused" && (
+							<>
+								<span className="text-lg font-semibold text-white/60 tabular-nums bg-white/6 px-2.5 py-0.5 rounded">
+									⏱ {elapsedTime}
+								</span>
+								<button
+									type="button"
+									onClick={continueTimer}
+									title="Continue timer"
+									aria-label="Continue timer"
+									className="text-white/50 hover:text-white/80 inline-flex"
+								>
+									<PlayIcon aria-hidden="true" size={16} />
+								</button>
+								<button
+									type="button"
+									onClick={restartTimer}
+									title="Restart timer from zero"
+									aria-label="Restart timer from zero"
+									className="text-white/30 hover:text-white/60 inline-flex"
+								>
+									<RotateCcwIcon aria-hidden="true" size={15} />
+								</button>
+								<button
+									type="button"
+									onClick={closeTimer}
+									title="Close timer"
+									aria-label="Close timer"
+									className="text-white/30 hover:text-white/60 inline-flex"
+								>
+									<XIcon aria-hidden="true" size={16} />
+								</button>
+							</>
+						)}
+					</div>
 
-				{/* Nav buttons are mobile-only; desktop uses keyboard shortcuts. */}
-				{isMobile && (
-					<div className="order-last col-span-2 flex w-full gap-2 items-center justify-center">
-						<NavButton
-							onClick={goPrev}
-							title="Previous step (←)"
-							className="h-12 w-16"
+					{/* Clock + mode/open/cast buttons */}
+					<div className="flex flex-wrap gap-3 items-center justify-self-end">
+						<span
+							className="text-md tabular-nums text-white/60"
+							title="Wall clock"
 						>
-							<ChevronLeftIcon aria-hidden="true" className="h-6 w-6" />
-						</NavButton>
-						<NavButton
-							onClick={goPrevSlide}
-							title="Previous slide (↑)"
-							className="h-12 w-16"
-						>
-							<ChevronUpIcon aria-hidden="true" className="h-6 w-6" />
-						</NavButton>
+							{clock}
+						</span>
+						<ColorModeCycleButton
+							colorMode={colorMode}
+							onSetColorMode={onSetColorMode}
+							iconSize={14}
+							className="w-8 h-8 rounded border border-white/20 bg-white/6 text-white/80 inline-flex items-center justify-center"
+						/>
 						<NavButton
-							onClick={goNextSlide}
-							title="Next slide (↓)"
-							className="h-12 w-16"
+							onClick={toggleBlankScreen}
+							title={isBlankScreen ? "Unblank screen (b)" : "Blank screen (b)"}
 						>
-							<ChevronDownIcon aria-hidden="true" className="h-6 w-6" />
+							<MonitorOffIcon
+								aria-hidden="true"
+								size={16}
+								className={isBlankScreen ? "text-red-400" : ""}
+							/>
 						</NavButton>
-						<NavButton
-							onClick={goNext}
-							title="Next step (→)"
-							className="h-12 w-16"
+						<button
+							type="button"
+							onClick={openAudienceView}
+							className="px-3 py-1 rounded border border-white/20 bg-white/6 text-white/80 text-sm font-[inherit] inline-flex items-center gap-1.5"
 						>
-							<ChevronRightIcon aria-hidden="true" className="h-6 w-6" />
-						</NavButton>
-					</div>
-				)}
-
-				{/* Clock + mode/open/cast buttons */}
-				<div
-					className={
-						isMobile
-							? "col-span-2 flex flex-wrap gap-3 items-center justify-self-start"
-							: "flex flex-wrap gap-3 items-center justify-self-end"
-					}
-				>
-					<span
-						className="text-md tabular-nums text-white/60"
-						title="Wall clock"
-					>
-						{clock}
-					</span>
-					<ColorModeCycleButton
-						colorMode={colorMode}
-						onSetColorMode={onSetColorMode}
-						iconSize={14}
-						className="w-8 h-8 rounded border border-white/20 bg-white/6 text-white/80 inline-flex items-center justify-center"
-					/>
-					<NavButton
-						onClick={toggleBlankScreen}
-						title={isBlankScreen ? "Unblank screen (b)" : "Blank screen (b)"}
-					>
-						<MonitorOffIcon
-							aria-hidden="true"
-							size={16}
-							className={isBlankScreen ? "text-red-400" : ""}
+							Open audience view
+							<ExternalLinkIcon aria-hidden="true" size={14} />
+						</button>
+						<PresenterCastButton
+							supported={presentationCast.supported}
+							isCasting={presentationCast.isCasting}
+							onStartCasting={presentationCast.startCasting}
+							onStopCasting={presentationCast.stopCasting}
 						/>
-					</NavButton>
-					<button
-						type="button"
-						onClick={openAudienceView}
-						className="px-3 py-1 rounded border border-white/20 bg-white/6 text-white/80 text-sm font-[inherit] inline-flex items-center gap-1.5"
-					>
-						Open audience view
-						<ExternalLinkIcon aria-hidden="true" size={14} />
-					</button>
-					<PresenterCastButton
-						supported={presentationCast.supported}
-						isCasting={presentationCast.isCasting}
-						onStartCasting={presentationCast.startCasting}
-						onStopCasting={presentationCast.stopCasting}
-					/>
+					</div>
 				</div>
 			</div>
 		</div>

package/src/runtime/views/SPEC.md

@@ -7,7 +7,7 @@
 ### Activation
 
 - Keyboard shortcut `p` (opens presenter mode in the current tab)
-- Navigation controls button
+- Navigation controls button on `md` and wider screens
 - Direct URL: `/#/presenter/1/0`
 
 ### Deactivation
@@ -45,17 +45,15 @@ Includes:
 - Color mode cycle button (system → light → dark → system). Presenter color mode changes also sync to BroadcastChannel audience views and Presentation API cast receivers.
 - Blank screen toggle button and `b` keyboard shortcut. While blanked, the presenter sees a `Screen blanked (b)` indicator and audience/cast views see a black screen.
 - Button to cast the audience view to a secondary display when the Presentation API is supported. Unsupported browsers keep a visibly disabled-looking control in the action row; it does not render extra inline feedback, and its hover title/accessible label explains that Presentation API casting is unavailable. Active casting can be stopped from the same control.
-- Presenter navigation buttons provide previous/next timeline-step navigation and previous/next slide navigation on mobile presenter layouts. Desktop presenter layouts do not show navigation buttons. On mobile, the timeline-step buttons sit on the outside edges of the button group (previous step, previous slide, next slide, next step), because step navigation is the primary/default action. Timeline keyboard shortcuts (`→`/`←`/`↓`/`↑`, `d`/`a`/`s`/`w`) update the presenter route and keep the window in presenter mode.
-- Presenter navigation uses the shared Honeydeck navigation command abstraction so button, keyboard, and touch inputs share the same semantics as audience view.
+- Timeline keyboard shortcuts (`→`/`←`/`↓`/`↑`, `d`/`a`/`s`/`w`) update the presenter route and keep the window in presenter mode on supported desktop layouts.
 - Presenter notes are scroll-owned regions: wheel, trackpad, touch scroll, and swipe gestures that start in notes scroll notes and never navigate slides, even at scroll boundaries.
-- On mobile presenter layouts, the Current preview may use tap zones and swipe navigation; speaker notes remain scroll-only. Pinch-to-zoom and pinch-to-overview are not required in presenter mode.
 - Code step-through previews use the same timeline state as audience view, so the Next preview shows the upcoming highlighted code step.
 - In the Next preview, reveal content from later timeline steps is visible at reduced opacity so the speaker can see what is still coming on that slide. Audience view and the Current preview keep future steps hidden.
 - When no next timeline state exists (final step of the final slide), the Next preview shows a placeholder (`No next step`) instead of trying to render a missing slide.
 
 ### Presenter Responsiveness
 
-Presenter mode uses a two-column preview area (`Current` larger, `Next` smaller), a notes panel, and a bottom status/action bar on desktop. On narrow/mobile screens it switches to a single-column layout and hides the Next preview. The navigation button group is the bottom-most element on mobile and uses larger touch targets than desktop.
+Presenter mode uses a two-column preview area (`Current` larger, `Next` smaller), a notes panel, and a bottom status/action bar on `md` and wider screens. Below Tailwind's `md` breakpoint, presenter mode is not supported: direct presenter URLs show a full-page hint that presenter mode is not supported on mobile and provide a button back to the same slide/step in audience view.
 
 ### Presentation Timer
 

package/src/theme/base.css

@@ -547,6 +547,20 @@
 	animation-fill-mode: both;
 }
 
+.honeydeck-slide-layer.honeydeck-transition-magic.honeydeck-transition-enter {
+	animation-name: honeydeck-transition-fade-enter;
+	animation-duration: var(--honeydeck-transition-duration, 200ms);
+	animation-timing-function: var(--honeydeck-transition-easing, ease);
+	animation-fill-mode: both;
+}
+
+.honeydeck-slide-layer.honeydeck-transition-magic.honeydeck-transition-exit {
+	animation-name: honeydeck-transition-fade-exit;
+	animation-duration: var(--honeydeck-transition-duration, 200ms);
+	animation-timing-function: var(--honeydeck-transition-easing, ease);
+	animation-fill-mode: both;
+}
+
 @keyframes honeydeck-transition-fade-enter {
 	from {
 		opacity: var(--honeydeck-transition-enter-from-opacity, 0);

package/src/vite-plugin/SPEC.md

@@ -108,7 +108,7 @@ All settings use **camelCase**. No separate config file exists. Frontmatter pars
 | `colorMode` | `"system" \| "light" \| "dark"` | `"system"` | Browser color mode |
 | `pdfColorMode` | `"light" \| "dark"` | unset | Optional explicit PDF color mode; when unset, PDF falls back to pinned deck `colorMode`, then `light` |
 | `pdfSteps` | `"final" \| "all"` | `"final"` | Whether PDF includes all steps or final state |
-| `transition` | `string \| boolean` | `fade` | Default named slide transition (`fade`, `none`, `slide-left`, or a custom CSS name); legacy `true` maps to `fade` and `false` maps to `none` |
+| `transition` | `string \| boolean` | `fade` | Default named slide transition (`fade`, `none`, `slide-left`, `magic`, or a custom CSS name); legacy `true` maps to `fade` and `false` maps to `none` |
 | `transitionDuration` | `number` | `200` | Default slide transition duration in milliseconds |
 | `transitionEasing` | `string` | `ease` | Default slide transition timing function |
 | `magicCodeDuration` | `number` | `800` | Default Magic Code animation duration in milliseconds |
@@ -132,6 +132,6 @@ The first frontmatter block in the deck entry file is parsed as deck config. Dec
 
 Slide-level frontmatter is a frontmatter-only block after a slide separator and applies to the following slide. Imported MDX files are normal MDX modules and cannot set deck-level properties. `magicCodeDuration` is deck-level only; the same key in slide-level frontmatter is treated as a normal layout prop and does not configure Magic Code.
 
-Invalid `aspectRatio`, `colorMode`, and `pdfSteps` values fall back to defaults. Invalid `pdfColorMode` is ignored as unset, allowing the pinned `colorMode` fallback. `showSlideNumbers` is enabled only by literal `true`; slide transition values normalize at runtime, with non-empty strings treated as named built-ins or custom CSS hooks. Invalid explicit Magic Code block `duration` values are compile errors; invalid deck-level `magicCodeDuration` falls back to the default Magic Code duration.
+Invalid `aspectRatio`, `colorMode`, and `pdfSteps` values fall back to defaults. Invalid `pdfColorMode` is ignored as unset, allowing the pinned `colorMode` fallback. `showSlideNumbers` is enabled only by literal `true`; slide transition values normalize at runtime, with non-empty strings treated as named built-ins or custom CSS hooks. `transition: magic` uses only runtime `data-magic-id` matching and does not add build-time DOM diffing. Invalid explicit Magic Code block `duration` values are compile errors; invalid deck-level `magicCodeDuration` falls back to the default Magic Code duration.
 
 During development, changes to deck-level frontmatter invalidate the virtual config and every compiled virtual slide module, because slide compilation can depend on deck settings such as `magicCodeDuration`. Layout-related virtual modules are invalidated as before so layout map and demo previews stay current.