animot-presenter 0.1.0

package/dist/AnimotPresenter.svelte

@@ -0,0 +1,979 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { tween } from '@animotion/motion';
+	import { highlightCode } from './highlight/highlighter';
+	import CodeMorph from './highlight/CodeMorph.svelte';
+	import ParticlesBackground from './effects/ParticlesBackground.svelte';
+	import ConfettiEffect from './effects/ConfettiEffect.svelte';
+	import CounterRenderer from './renderers/CounterRenderer.svelte';
+	import ChartRenderer from './renderers/ChartRenderer.svelte';
+	import IconRenderer from './renderers/IconRenderer.svelte';
+	import { easeInOutCubic, getBackgroundStyle, hashFraction, getFloatAnimName, computeFloatAmp, computeFloatSpeed } from './engine/utils';
+	import type {
+		AnimotProject, AnimotPresenterProps, CanvasElement, CodeElement, TextElement,
+		ArrowElement, ImageElement, ShapeElement, CounterElement, ChartElement, IconElement,
+		Slide, CodeAnimationMode, AnimatableProperty
+	} from './types';
+	import './styles/presenter.css';
+
+	type TweenValue = ReturnType<typeof tween<number>>;
+
+	interface AnimatedElement {
+		x: TweenValue; y: TweenValue; width: TweenValue; height: TweenValue;
+		rotation: TweenValue; skewX: TweenValue; skewY: TweenValue;
+		tiltX: TweenValue; tiltY: TweenValue; opacity: TweenValue; borderRadius: TweenValue;
+		fontSize: TweenValue | null;
+		fillColor: ReturnType<typeof tween<string>> | null;
+		strokeColor: ReturnType<typeof tween<string>> | null;
+		strokeWidth: TweenValue | null;
+		shapeMorph: TweenValue | null;
+	}
+
+	interface ShapeMorphState { fromType: string; toType: string; }
+
+	let {
+		src, data, autoplay = false, loop = false, controls = true, arrows = false,
+		progress: showProgress = true, keyboard = true, duration: durationOverride,
+		startSlide = 0, class: className = '', onslidechange, oncomplete
+	}: AnimotPresenterProps = $props();
+
+	// State
+	let project = $state<AnimotProject | null>(null);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+	let currentSlideIndex = $state(0);
+	let isTransitioning = $state(false);
+	let isAutoplay = $state(false);
+	let transitionClass = $state('');
+	let transitionDirection = $state<'forward' | 'backward'>('forward');
+	let transitionDurationMs = $state(500);
+	let containerEl: HTMLElement;
+	let containerWidth = $state(0);
+	let containerHeight = $state(0);
+
+	let animatedElements = $state<Map<string, AnimatedElement>>(new Map());
+	let codeHighlights = $state<Map<string, string>>(new Map());
+	let elementContent = $state<Map<string, CanvasElement>>(new Map());
+	let previousCodeContent = $state<Map<string, string>>(new Map());
+	let codeMorphState = $state<Map<string, {oldCode: string, newCode: string, mode: CodeAnimationMode, speed: number, highlightColor: string}>>(new Map());
+	let textTypewriterState = $state<Map<string, {fullText: string, displayedChars: number, isAnimating: boolean}>>(new Map());
+	let typewriterIntervals = new Map<string, ReturnType<typeof setInterval>>();
+	let shapeMorphStates = $state<Map<string, ShapeMorphState>>(new Map());
+	let autoplayTimer: ReturnType<typeof setTimeout> | null = null;
+	let menuVisible = $state(true);
+	let mouseIdleTimer: ReturnType<typeof setTimeout> | null = null;
+
+	const slides = $derived(project?.slides ?? []);
+	const currentSlide = $derived(slides[currentSlideIndex]);
+	const canvasWidth = $derived(currentSlide?.canvas.width ?? 800);
+	const canvasHeight = $derived(currentSlide?.canvas.height ?? 600);
+
+	const presentationScale = $derived.by(() => {
+		if (!containerWidth || !containerHeight) return 1;
+		const scaleX = containerWidth / canvasWidth;
+		const scaleY = containerHeight / canvasHeight;
+		return Math.min(scaleX, scaleY);
+	});
+
+	const backgroundStyle = $derived.by(() => {
+		if (!currentSlide) return 'background: transparent';
+		return getBackgroundStyle(currentSlide.canvas.background);
+	});
+
+	const allElementIds = $derived.by(() => {
+		const ids = new Set<string>();
+		slides.forEach(slide => slide.canvas.elements.forEach(el => ids.add(el.id)));
+		return ids;
+	});
+
+	const sortedElementIds = $derived.by(() => {
+		const elements: Array<{id: string, zIndex: number}> = [];
+		for (const id of allElementIds) {
+			const el = elementContent.get(id);
+			if (el) elements.push({ id, zIndex: el.zIndex ?? 0 });
+		}
+		elements.sort((a, b) => a.zIndex - b.zIndex);
+		return elements.map(e => e.id);
+	});
+
+	function getElementInSlide(slide: Slide | null, elementId: string): CanvasElement | undefined {
+		return slide?.canvas.elements.find(el => el.id === elementId);
+	}
+
+	// Typewriter
+	function startTypewriterAnimation(elementId: string, fullText: string, speed: number) {
+		const existing = typewriterIntervals.get(elementId);
+		if (existing) { clearInterval(existing); typewriterIntervals.delete(elementId); }
+		textTypewriterState.set(elementId, { fullText, displayedChars: 0, isAnimating: true });
+		textTypewriterState = new Map(textTypewriterState);
+		const intervalMs = 1000 / speed;
+		const interval = setInterval(() => {
+			const state = textTypewriterState.get(elementId);
+			if (state && state.isAnimating) {
+				if (state.displayedChars < state.fullText.length) {
+					textTypewriterState.set(elementId, { ...state, displayedChars: state.displayedChars + 1 });
+					textTypewriterState = new Map(textTypewriterState);
+				} else {
+					clearInterval(interval); typewriterIntervals.delete(elementId);
+					textTypewriterState.set(elementId, { ...state, isAnimating: false });
+					textTypewriterState = new Map(textTypewriterState);
+				}
+			} else { clearInterval(interval); typewriterIntervals.delete(elementId); }
+		}, intervalMs);
+		typewriterIntervals.set(elementId, interval);
+	}
+
+	function clearAllTypewriterAnimations() {
+		for (const [, interval] of typewriterIntervals) clearInterval(interval);
+		typewriterIntervals.clear();
+		textTypewriterState.clear();
+		textTypewriterState = new Map(textTypewriterState);
+	}
+
+	// Arrow draw animation action
+	function animateStyledArrowDraw(node: SVGPathElement, params: { enabled: boolean; duration: number; dashPattern: string; startX: number; endX: number; slideIndex: number }) {
+		let lastSlideIndex = params.slideIndex;
+		let animationId: number | null = null;
+		function runAnimation() {
+			if (!params.enabled) return;
+			if (animationId) cancelAnimationFrame(animationId);
+			const svg = node.closest('svg') as SVGSVGElement | null;
+			if (!svg) return;
+			const goesLeftToRight = params.endX >= params.startX;
+			svg.style.clipPath = goesLeftToRight ? 'inset(0 100% 0 0)' : 'inset(0 0 0 100%)';
+			const startTime = performance.now();
+			const dur = params.duration;
+			function animate(currentTime: number) {
+				const elapsed = currentTime - startTime;
+				const progress = Math.min(elapsed / dur, 1);
+				const eased = 1 - Math.pow(1 - progress, 3);
+				const inset = 100 * (1 - eased);
+				svg!.style.clipPath = goesLeftToRight ? `inset(0 ${inset}% 0 0)` : `inset(0 0 0 ${inset}%)`;
+				if (progress < 1) animationId = requestAnimationFrame(animate);
+				else { svg!.style.clipPath = 'none'; animationId = null; }
+			}
+			animationId = requestAnimationFrame(animate);
+		}
+		runAnimation();
+		return {
+			update(newParams: typeof params) {
+				if (newParams.slideIndex !== lastSlideIndex) { lastSlideIndex = newParams.slideIndex; params = newParams; runAnimation(); }
+			},
+			destroy() { if (animationId) cancelAnimationFrame(animationId); }
+		};
+	}
+
+	// Init animated elements
+	function initAllAnimatedElements() {
+		const firstSlide = slides[0];
+		if (firstSlide) {
+			for (const element of firstSlide.canvas.elements) {
+				if (element.type === 'code') previousCodeContent.set(element.id, (element as CodeElement).code);
+				if (element.type === 'text') {
+					const textEl = element as TextElement;
+					if (textEl.animation?.mode === 'typewriter') startTypewriterAnimation(element.id, textEl.content, textEl.animation.typewriterSpeed || 50);
+				}
+			}
+		}
+		for (const slide of slides) {
+			for (const element of slide.canvas.elements) {
+				if (!animatedElements.has(element.id)) {
+					const inCurrent = getElementInSlide(currentSlide, element.id);
+					const startOpacity = inCurrent ? 1 : 0;
+					const br = (element as any).borderRadius ?? 0;
+					const isShape = element.type === 'shape';
+					const shapeEl = isShape ? element as ShapeElement : null;
+					const isText = element.type === 'text';
+					const textEl = isText ? element as TextElement : null;
+					animatedElements.set(element.id, {
+						x: tween(element.position.x, { duration: 500 }),
+						y: tween(element.position.y, { duration: 500 }),
+						width: tween(element.size.width, { duration: 500 }),
+						height: tween(element.size.height, { duration: 500 }),
+						rotation: tween(element.rotation, { duration: 500 }),
+						skewX: tween(element.skewX ?? 0, { duration: 500 }),
+						skewY: tween(element.skewY ?? 0, { duration: 500 }),
+						tiltX: tween(element.tiltX ?? 0, { duration: 500 }),
+						tiltY: tween(element.tiltY ?? 0, { duration: 500 }),
+						opacity: tween(startOpacity, { duration: 300 }),
+						borderRadius: tween(br, { duration: 500 }),
+						fontSize: textEl ? tween(textEl.fontSize, { duration: 500 }) : null,
+						fillColor: shapeEl ? tween(shapeEl.fillColor, { duration: 500 }) : null,
+						strokeColor: shapeEl ? tween(shapeEl.strokeColor, { duration: 500 }) : null,
+						strokeWidth: shapeEl ? tween(shapeEl.strokeWidth, { duration: 500 }) : null,
+						shapeMorph: shapeEl ? tween(1, { duration: 500 }) : null
+					});
+					const currentSlideEl = getElementInSlide(currentSlide, element.id);
+					elementContent.set(element.id, JSON.parse(JSON.stringify(currentSlideEl || element)));
+				}
+			}
+		}
+		animatedElements = new Map(animatedElements);
+		elementContent = new Map(elementContent);
+		previousCodeContent = new Map(previousCodeContent);
+	}
+
+	// Animate to slide
+	async function animateToSlide(targetIndex: number) {
+		if (isTransitioning || targetIndex < 0 || targetIndex >= slides.length) return;
+		if (targetIndex === currentSlideIndex) return;
+		isTransitioning = true;
+		transitionDirection = targetIndex > currentSlideIndex ? 'forward' : 'backward';
+		const targetSlide = slides[targetIndex];
+		clearAllTypewriterAnimations();
+		const transition = targetSlide.transition;
+		const duration = durationOverride ?? transition.duration;
+		transitionDurationMs = duration;
+		const hasSlideTransition = transition.type !== 'none';
+
+		if (hasSlideTransition) {
+			transitionClass = `transition-${transition.type}-out`;
+			await new Promise(r => setTimeout(r, duration * 0.4));
+			const newElementContent = new Map(elementContent);
+			const newCodeMorphState = new Map(codeMorphState);
+			const newPreviousCodeContent = new Map(previousCodeContent);
+			for (const elementId of allElementIds) {
+				const targetEl = getElementInSlide(targetSlide, elementId);
+				const animated = animatedElements.get(elementId);
+				if (targetEl) {
+					if (targetEl.type === 'code') {
+						const codeEl = targetEl as CodeElement;
+						const prevCode = newPreviousCodeContent.get(elementId) || '';
+						newCodeMorphState.set(elementId, { oldCode: prevCode, newCode: codeEl.code, mode: codeEl.animation?.mode || 'highlight-changes', speed: codeEl.animation?.typewriterSpeed || 50, highlightColor: codeEl.animation?.highlightColor || '#fef08a' });
+						newPreviousCodeContent.set(elementId, codeEl.code);
+					}
+					newElementContent.set(elementId, JSON.parse(JSON.stringify(targetEl)));
+					if (animated) {
+						animated.x.to(targetEl.position.x, { duration: 0 }); animated.y.to(targetEl.position.y, { duration: 0 });
+						animated.width.to(targetEl.size.width, { duration: 0 }); animated.height.to(targetEl.size.height, { duration: 0 });
+						animated.rotation.to(targetEl.rotation, { duration: 0 });
+						animated.skewX.to(targetEl.skewX ?? 0, { duration: 0 }); animated.skewY.to(targetEl.skewY ?? 0, { duration: 0 });
+						animated.tiltX.to(targetEl.tiltX ?? 0, { duration: 0 }); animated.tiltY.to(targetEl.tiltY ?? 0, { duration: 0 });
+						animated.opacity.to(1, { duration: 0 });
+						animated.borderRadius.to((targetEl as any).borderRadius ?? 0, { duration: 0 });
+						if (targetEl.type === 'text') animated.fontSize?.to((targetEl as TextElement).fontSize, { duration: 0 });
+						if (targetEl.type === 'shape') {
+							const s = targetEl as ShapeElement;
+							animated.fillColor?.to(s.fillColor, { duration: 0 });
+							animated.strokeColor?.to(s.strokeColor, { duration: 0 });
+							animated.strokeWidth?.to(s.strokeWidth, { duration: 0 });
+						}
+					}
+				} else if (animated) { animated.opacity.to(0, { duration: 0 }); }
+			}
+			for (const [, element] of newElementContent) {
+				if (element.type === 'code') {
+					const codeEl = element as CodeElement;
+					const key = `${codeEl.id}-${codeEl.code}-${codeEl.language}-${codeEl.showLineNumbers}`;
+					if (!codeHighlights.has(key)) {
+						const html = await highlightCode(codeEl.code, codeEl.language, codeEl.theme, { showLineNumbers: codeEl.showLineNumbers });
+						codeHighlights.set(key, html);
+					}
+				}
+			}
+			codeHighlights = new Map(codeHighlights);
+			shapeMorphStates = new Map();
+			codeMorphState = newCodeMorphState;
+			previousCodeContent = newPreviousCodeContent;
+			elementContent = newElementContent;
+			animatedElements = new Map(animatedElements);
+			currentSlideIndex = targetIndex;
+			for (const elementId of allElementIds) {
+				const targetEl = getElementInSlide(targetSlide, elementId);
+				if (targetEl?.type === 'text') {
+					const textEl = targetEl as TextElement;
+					if (textEl.animation?.mode === 'typewriter') startTypewriterAnimation(elementId, textEl.content, textEl.animation.typewriterSpeed || 50);
+				}
+			}
+			transitionClass = `transition-${transition.type}-in`;
+			await new Promise(r => setTimeout(r, duration * 0.6));
+			transitionClass = '';
+			isTransitioning = false;
+			onslidechange?.(targetIndex, slides.length);
+			if (targetIndex === slides.length - 1 && !loop) oncomplete?.();
+			return;
+		}
+
+		// Per-element morphing (transition type = 'none')
+		const animations: Promise<void>[] = [];
+		for (const elementId of allElementIds) {
+			const currentEl = getElementInSlide(currentSlide, elementId);
+			const animated = animatedElements.get(elementId);
+			if (!animated) continue;
+			if (currentEl) {
+				await animated.x.to(currentEl.position.x, { duration: 0 });
+				await animated.y.to(currentEl.position.y, { duration: 0 });
+				await animated.width.to(currentEl.size.width, { duration: 0 });
+				await animated.height.to(currentEl.size.height, { duration: 0 });
+				await animated.rotation.to(currentEl.rotation, { duration: 0 });
+				await animated.skewX.to(currentEl.skewX ?? 0, { duration: 0 });
+				await animated.skewY.to(currentEl.skewY ?? 0, { duration: 0 });
+				await animated.tiltX.to(currentEl.tiltX ?? 0, { duration: 0 });
+				await animated.tiltY.to(currentEl.tiltY ?? 0, { duration: 0 });
+				await animated.borderRadius.to((currentEl as any).borderRadius ?? 0, { duration: 0 });
+				await animated.opacity.to(1, { duration: 0 });
+				if (currentEl.type === 'text' && animated.fontSize) await animated.fontSize.to((currentEl as TextElement).fontSize, { duration: 0 });
+				if (currentEl.type === 'shape') {
+					const s = currentEl as ShapeElement;
+					if (animated.fillColor) await animated.fillColor.to(s.fillColor, { duration: 0 });
+					if (animated.strokeColor) await animated.strokeColor.to(s.strokeColor, { duration: 0 });
+					if (animated.strokeWidth) await animated.strokeWidth.to(s.strokeWidth, { duration: 0 });
+				}
+			}
+		}
+
+		interface AnimationTask { elementId: string; order: number; delay: number; elementDuration: number; run: () => Promise<void>[]; }
+		const animationTasks: AnimationTask[] = [];
+
+		for (const elementId of allElementIds) {
+			const currentEl = getElementInSlide(currentSlide, elementId);
+			const targetEl = getElementInSlide(targetSlide, elementId);
+			const animated = animatedElements.get(elementId);
+			if (!animated) continue;
+			const animConfig = targetEl?.animationConfig || currentEl?.animationConfig;
+			const order = animConfig?.order ?? 0;
+			const delay = animConfig?.delay ?? 0;
+			const elementDuration = animConfig?.duration ?? duration;
+
+			if (targetEl) {
+				const easing = easeInOutCubic;
+				const propertySequences = targetEl.animationConfig?.propertySequences;
+				if (targetEl.type === 'text') {
+					const textEl = targetEl as TextElement;
+					if (textEl.animation?.mode === 'typewriter') startTypewriterAnimation(elementId, textEl.content, textEl.animation.typewriterSpeed || 50);
+				}
+
+				const getSeqTiming = (prop: AnimatableProperty) => {
+					if (!propertySequences?.length) return { duration: elementDuration, delay: 0, order: 0 };
+					const seq = propertySequences.find(s => s.property === prop);
+					return seq ? { duration: seq.duration, delay: seq.delay, order: seq.order } : { duration: elementDuration, delay: 0, order: 99 };
+				};
+
+				animationTasks.push({
+					elementId, order, delay, elementDuration,
+					run: () => {
+						const anims: Promise<void>[] = [];
+						if (propertySequences?.length) {
+							const sequencedProps = new Set(propertySequences.map(s => s.property));
+							if (!sequencedProps.has('position')) { anims.push(animated.x.to(targetEl.position.x, { duration: elementDuration, easing })); anims.push(animated.y.to(targetEl.position.y, { duration: elementDuration, easing })); }
+							if (!sequencedProps.has('rotation')) anims.push(animated.rotation.to(targetEl.rotation, { duration: elementDuration, easing }));
+							if (!sequencedProps.has('tilt')) { anims.push(animated.tiltX.to(targetEl.tiltX ?? 0, { duration: elementDuration, easing })); anims.push(animated.tiltY.to(targetEl.tiltY ?? 0, { duration: elementDuration, easing })); }
+							if (!sequencedProps.has('skew')) { anims.push(animated.skewX.to(targetEl.skewX ?? 0, { duration: elementDuration, easing })); anims.push(animated.skewY.to(targetEl.skewY ?? 0, { duration: elementDuration, easing })); }
+							if (!sequencedProps.has('size')) { anims.push(animated.width.to(targetEl.size.width, { duration: elementDuration, easing })); anims.push(animated.height.to(targetEl.size.height, { duration: elementDuration, easing })); }
+							if (!sequencedProps.has('borderRadius')) anims.push(animated.borderRadius.to((targetEl as any).borderRadius ?? 0, { duration: elementDuration, easing }));
+							const sortedSeqs = [...propertySequences].sort((a, b) => a.order - b.order);
+							let cumulativeDelay = 0;
+							for (const seq of sortedSeqs) {
+								const seqDelay = cumulativeDelay + seq.delay;
+								const seqDuration = seq.duration;
+								setTimeout(() => {
+									if (seq.property === 'position') { animated.x.to(targetEl.position.x, { duration: seqDuration, easing }); animated.y.to(targetEl.position.y, { duration: seqDuration, easing }); }
+									else if (seq.property === 'rotation') animated.rotation.to(targetEl.rotation, { duration: seqDuration, easing });
+									else if (seq.property === 'tilt') { animated.tiltX.to(targetEl.tiltX ?? 0, { duration: seqDuration, easing }); animated.tiltY.to(targetEl.tiltY ?? 0, { duration: seqDuration, easing }); }
+									else if (seq.property === 'skew') { animated.skewX.to(targetEl.skewX ?? 0, { duration: seqDuration, easing }); animated.skewY.to(targetEl.skewY ?? 0, { duration: seqDuration, easing }); }
+									else if (seq.property === 'size') { animated.width.to(targetEl.size.width, { duration: seqDuration, easing }); animated.height.to(targetEl.size.height, { duration: seqDuration, easing }); }
+									else if (seq.property === 'borderRadius') animated.borderRadius.to((targetEl as any).borderRadius ?? 0, { duration: seqDuration, easing });
+									else if (seq.property === 'color' && targetEl.type === 'shape') {
+										const s = targetEl as ShapeElement;
+										animated.fillColor?.to(s.fillColor, { duration: seqDuration, easing });
+										animated.strokeColor?.to(s.strokeColor, { duration: seqDuration, easing });
+										animated.strokeWidth?.to(s.strokeWidth, { duration: seqDuration, easing });
+									}
+								}, seqDelay);
+								cumulativeDelay = seqDelay + seqDuration;
+							}
+							anims.push(new Promise(r => setTimeout(r, cumulativeDelay)));
+						} else {
+							anims.push(animated.x.to(targetEl.position.x, { duration: elementDuration, easing }));
+							anims.push(animated.y.to(targetEl.position.y, { duration: elementDuration, easing }));
+							anims.push(animated.width.to(targetEl.size.width, { duration: elementDuration, easing }));
+							anims.push(animated.height.to(targetEl.size.height, { duration: elementDuration, easing }));
+							anims.push(animated.rotation.to(targetEl.rotation, { duration: elementDuration, easing }));
+							anims.push(animated.skewX.to(targetEl.skewX ?? 0, { duration: elementDuration, easing }));
+							anims.push(animated.skewY.to(targetEl.skewY ?? 0, { duration: elementDuration, easing }));
+							anims.push(animated.tiltX.to(targetEl.tiltX ?? 0, { duration: elementDuration, easing }));
+							anims.push(animated.tiltY.to(targetEl.tiltY ?? 0, { duration: elementDuration, easing }));
+							anims.push(animated.borderRadius.to((targetEl as any).borderRadius ?? 0, { duration: elementDuration, easing }));
+						}
+						if (targetEl.type === 'text' && animated.fontSize) anims.push(animated.fontSize.to((targetEl as TextElement).fontSize, { duration: elementDuration, easing }));
+						if (targetEl.type === 'shape' && currentEl?.type === 'shape') {
+							const ts = targetEl as ShapeElement;
+							const cs = currentEl as ShapeElement;
+							if (!propertySequences?.length) {
+								if (animated.fillColor) anims.push(animated.fillColor.to(ts.fillColor, { duration: elementDuration, easing }));
+								if (animated.strokeColor) anims.push(animated.strokeColor.to(ts.strokeColor, { duration: elementDuration, easing }));
+								if (animated.strokeWidth) anims.push(animated.strokeWidth.to(ts.strokeWidth, { duration: elementDuration, easing }));
+							}
+							if (cs.shapeType !== ts.shapeType && animated.shapeMorph) {
+								shapeMorphStates.set(elementId, { fromType: cs.shapeType, toType: ts.shapeType });
+								shapeMorphStates = new Map(shapeMorphStates);
+								anims.push(animated.shapeMorph.to(0, { duration: 0 }));
+								anims.push(animated.shapeMorph.to(1, { duration: elementDuration, easing }));
+							}
+						} else if (targetEl.type === 'shape' && !propertySequences?.length) {
+							const s = targetEl as ShapeElement;
+							if (animated.fillColor) anims.push(animated.fillColor.to(s.fillColor, { duration: elementDuration, easing }));
+							if (animated.strokeColor) anims.push(animated.strokeColor.to(s.strokeColor, { duration: elementDuration, easing }));
+							if (animated.strokeWidth) anims.push(animated.strokeWidth.to(s.strokeWidth, { duration: elementDuration, easing }));
+						}
+						if (!currentEl) anims.push(animated.opacity.to(1, { duration: elementDuration / 2, easing }));
+						return anims;
+					}
+				});
+			} else if (currentEl) {
+				animationTasks.push({ elementId, order, delay, elementDuration, run: () => [animated.opacity.to(0, { duration: elementDuration / 2, easing: easeInOutCubic })] });
+			}
+		}
+
+		animationTasks.sort((a, b) => a.order - b.order);
+		const orderGroups = new Map<number, AnimationTask[]>();
+		for (const task of animationTasks) {
+			if (!orderGroups.has(task.order)) orderGroups.set(task.order, []);
+			orderGroups.get(task.order)!.push(task);
+		}
+		const sortedOrders = [...orderGroups.keys()].sort((a, b) => a - b);
+		for (let orderIdx = 0; orderIdx < sortedOrders.length; orderIdx++) {
+			const order = sortedOrders[orderIdx];
+			const tasks = orderGroups.get(order)!;
+			const groupAnimations: Promise<void>[] = [];
+			for (const task of tasks) {
+				if (task.delay > 0) setTimeout(() => { task.run().forEach(p => animations.push(p)); }, task.delay);
+				else groupAnimations.push(...task.run());
+			}
+			animations.push(...groupAnimations);
+			if (orderIdx < sortedOrders.length - 1) {
+				const maxDur = Math.max(...tasks.map(t => t.elementDuration));
+				await new Promise(r => setTimeout(r, maxDur * 0.3));
+			}
+		}
+
+		const newElementContent = new Map(elementContent);
+		const newCodeMorphState = new Map(codeMorphState);
+		const newPreviousCodeContent = new Map(previousCodeContent);
+		for (const elementId of allElementIds) {
+			const targetEl = getElementInSlide(targetSlide, elementId);
+			if (targetEl) {
+				if (targetEl.type === 'code') {
+					const codeEl = targetEl as CodeElement;
+					const prevCode = newPreviousCodeContent.get(elementId) || '';
+					newCodeMorphState.set(elementId, { oldCode: prevCode, newCode: codeEl.code, mode: codeEl.animation?.mode || 'highlight-changes', speed: codeEl.animation?.typewriterSpeed || 50, highlightColor: codeEl.animation?.highlightColor || '#fef08a' });
+					newPreviousCodeContent.set(elementId, codeEl.code);
+				}
+				newElementContent.set(elementId, JSON.parse(JSON.stringify(targetEl)));
+			}
+		}
+		for (const [, element] of newElementContent) {
+			if (element.type === 'code') {
+				const codeEl = element as CodeElement;
+				const key = `${codeEl.id}-${codeEl.code}-${codeEl.language}-${codeEl.showLineNumbers}`;
+				if (!codeHighlights.has(key)) {
+					const html = await highlightCode(codeEl.code, codeEl.language, codeEl.theme, { showLineNumbers: codeEl.showLineNumbers });
+					codeHighlights.set(key, html);
+				}
+			}
+		}
+		codeHighlights = new Map(codeHighlights);
+		shapeMorphStates = new Map();
+		codeMorphState = newCodeMorphState;
+		previousCodeContent = newPreviousCodeContent;
+		elementContent = newElementContent;
+		currentSlideIndex = targetIndex;
+		isTransitioning = false;
+		onslidechange?.(targetIndex, slides.length);
+		if (targetIndex === slides.length - 1 && !loop) oncomplete?.();
+	}
+
+	// Autoplay
+	function clearAutoplayTimer() { if (autoplayTimer) { clearTimeout(autoplayTimer); autoplayTimer = null; } }
+	function scheduleNextSlide() {
+		clearAutoplayTimer();
+		if (!isAutoplay) return;
+		const slideDuration = durationOverride ?? currentSlide?.duration ?? 3000;
+		autoplayTimer = setTimeout(() => {
+			if (currentSlideIndex < slides.length - 1) animateToSlide(currentSlideIndex + 1);
+			else if (loop) animateToSlide(0);
+			else isAutoplay = false;
+		}, slideDuration);
+	}
+	$effect(() => { if (isAutoplay && !isTransitioning) scheduleNextSlide(); });
+	$effect(() => () => clearAutoplayTimer());
+
+	// Keyboard
+	function handleKeyDown(e: KeyboardEvent) {
+		if (!keyboard) return;
+		if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'Enter') { e.preventDefault(); animateToSlide(currentSlideIndex + 1); }
+		else if (e.key === 'ArrowLeft' || e.key === 'Backspace') { e.preventDefault(); animateToSlide(currentSlideIndex - 1); }
+		else if (e.key === 'Home') animateToSlide(0);
+		else if (e.key === 'End') animateToSlide(slides.length - 1);
+		else if (e.key === 'p' || e.key === 'P') { isAutoplay = !isAutoplay; if (!isAutoplay) clearAutoplayTimer(); }
+	}
+
+	function resetMouseIdleTimer() {
+		menuVisible = true;
+		if (mouseIdleTimer) clearTimeout(mouseIdleTimer);
+		mouseIdleTimer = setTimeout(() => { menuVisible = false; }, 3000);
+	}
+
+	// Code highlight helpers
+	async function loadCodeHighlights() {
+		for (const slide of slides) {
+			for (const element of slide.canvas.elements) {
+				if (element.type === 'code') {
+					const codeEl = element as CodeElement;
+					const key = `${codeEl.id}-${codeEl.code}-${codeEl.language}-${codeEl.showLineNumbers}`;
+					if (!codeHighlights.has(key)) {
+						const html = await highlightCode(codeEl.code, codeEl.language, codeEl.theme, { showLineNumbers: codeEl.showLineNumbers });
+						codeHighlights.set(key, html);
+					}
+				}
+			}
+		}
+		codeHighlights = new Map(codeHighlights);
+	}
+
+	function getCodeHighlight(elementId: string): string {
+		const slideElement = getElementInSlide(currentSlide, elementId);
+		if (!slideElement || slideElement.type !== 'code') return '';
+		const codeEl = slideElement as CodeElement;
+		const key = `${codeEl.id}-${codeEl.code}-${codeEl.language}-${codeEl.showLineNumbers}`;
+		const cached = codeHighlights.get(key);
+		if (cached) return cached;
+		highlightCode(codeEl.code, codeEl.language, codeEl.theme, { showLineNumbers: codeEl.showLineNumbers }).then(html => {
+			codeHighlights.set(key, html);
+			codeHighlights = new Map(codeHighlights);
+		});
+		return '';
+	}
+
+	// Public API (exposed via bind:this)
+	export async function goto(slideIndex: number) { await animateToSlide(slideIndex); }
+	export async function next() { await animateToSlide(currentSlideIndex + 1); }
+	export async function prev() { await animateToSlide(currentSlideIndex - 1); }
+	export function play() { isAutoplay = true; }
+	export function pause() { isAutoplay = false; clearAutoplayTimer(); }
+	export function getCurrentSlide() { return currentSlideIndex; }
+	export function getTotalSlides() { return slides.length; }
+	export function getIsPlaying() { return isAutoplay; }
+
+	// Load data
+	async function loadProject() {
+		loading = true; error = null;
+		try {
+			if (data) { project = data; }
+			else if (src) {
+				const res = await fetch(src);
+				if (!res.ok) throw new Error(`Failed to load: ${res.status}`);
+				project = await res.json();
+			} else { throw new Error('Either src or data prop is required'); }
+			currentSlideIndex = startSlide;
+			await new Promise(r => setTimeout(r, 10));
+			initAllAnimatedElements();
+			await loadCodeHighlights();
+			loading = false;
+			if (autoplay) isAutoplay = true;
+		} catch (e: any) { error = e.message; loading = false; }
+	}
+
+	// ResizeObserver
+	let resizeObserver: ResizeObserver;
+
+	onMount(() => {
+		loadProject();
+		resizeObserver = new ResizeObserver(entries => {
+			for (const entry of entries) {
+				containerWidth = entry.contentRect.width;
+				containerHeight = entry.contentRect.height;
+			}
+		});
+		if (containerEl) resizeObserver.observe(containerEl);
+		resetMouseIdleTimer();
+		return () => { resizeObserver?.disconnect(); clearAutoplayTimer(); clearAllTypewriterAnimations(); if (mouseIdleTimer) clearTimeout(mouseIdleTimer); };
+	});
+
+	// Watch for prop changes
+	$effect(() => { if (data) { project = data; } });
+</script>
+
+<svelte:window onkeydown={handleKeyDown} />
+
+<div
+	class="animot-presenter {className}"
+	class:animot-menu-visible={menuVisible}
+	bind:this={containerEl}
+	onmousemove={resetMouseIdleTimer}
+	role="region"
+	aria-label="Animot Presentation"
+>
+	{#if loading}
+		<div class="animot-loading"><div class="animot-spinner"></div></div>
+	{:else if error}
+		<div class="animot-error">{error}</div>
+	{:else if project && currentSlide}
+		<div class="animot-canvas-wrapper" style:transform="scale({presentationScale})">
+			<div
+				class="animot-canvas {transitionClass}"
+				class:forward={transitionDirection === 'forward'}
+				class:backward={transitionDirection === 'backward'}
+				style:width="{canvasWidth}px"
+				style:height="{canvasHeight}px"
+				style:--transition-duration="{transitionDurationMs}ms"
+				style={backgroundStyle}
+			>
+				{#if currentSlide.canvas.background.particles?.enabled}
+					<ParticlesBackground config={currentSlide.canvas.background.particles} width={canvasWidth} height={canvasHeight} />
+				{/if}
+				{#if currentSlide.canvas.background.confetti?.enabled}
+					<ConfettiEffect config={currentSlide.canvas.background.confetti} width={canvasWidth} height={canvasHeight} />
+				{/if}
+
+				{#each sortedElementIds as elementId}
+					{@const element = elementContent.get(elementId)}
+					{@const animated = animatedElements.get(elementId)}
+					{@const floatCfg = element?.floatingAnimation}
+					{@const hasFloat = floatCfg?.enabled}
+					{@const floatGroupId = element?.groupId}
+					{#if element && animated && animated.opacity.current > 0.01 && element.visible !== false}
+						<div
+							class="animot-element"
+							class:floating={hasFloat}
+							style:left="{animated.x.current}px"
+							style:top="{animated.y.current}px"
+							style:width="{animated.width.current}px"
+							style:height="{animated.height.current}px"
+							style:opacity={animated.opacity.current}
+							style:transform="perspective(1000px) rotateX({animated.tiltX.current}deg) rotateY({animated.tiltY.current}deg) rotate({animated.rotation.current}deg) skewX({animated.skewX.current}deg) skewY({animated.skewY.current}deg)"
+							style:transform-origin={element.tiltOrigin ?? 'center'}
+							style:z-index={element.zIndex}
+							style:--float-amp="{hasFloat ? computeFloatAmp(floatCfg, floatGroupId || elementId) : 10}px"
+							style:--float-speed="{hasFloat ? computeFloatSpeed(floatCfg, floatGroupId || elementId) : 3}s"
+							style:--float-delay="{hashFraction(floatGroupId || elementId, 3) * 2}s"
+							style:animation-name={hasFloat ? getFloatAnimName(floatCfg!.direction, floatGroupId || elementId) : 'none'}
+						>
+							{#if element.type === 'code'}
+								{@const codeEl = element as CodeElement}
+								{@const morphState = codeMorphState.get(codeEl.id)}
+								<div class="animot-code-block" class:transparent-bg={codeEl.transparentBackground} style:font-size="{codeEl.fontSize}px" style:font-weight={codeEl.fontWeight || 400} style:padding="{codeEl.padding}px" style:border-radius="{animated.borderRadius.current}px">
+									{#if codeEl.showHeader}
+										<div class="animot-code-header" class:macos={codeEl.headerStyle === 'macos'}>
+											{#if codeEl.headerStyle === 'macos'}
+												<div class="animot-window-controls">
+													<span class="animot-control close"></span>
+													<span class="animot-control minimize"></span>
+													<span class="animot-control maximize"></span>
+												</div>
+											{/if}
+											<span class="animot-filename">{codeEl.filename}</span>
+										</div>
+									{/if}
+									<div class="animot-code-content">
+										<div class="animot-highlighted-code">
+											{#if morphState}
+												{#if morphState.oldCode !== morphState.newCode && morphState.mode !== 'instant'}
+													{#key currentSlideIndex}
+														<CodeMorph oldCode={morphState.oldCode} newCode={morphState.newCode} language={codeEl.language} theme={codeEl.theme} mode={morphState.mode} speed={morphState.speed} highlightColor={morphState.highlightColor} highlightDuration={codeEl.animation?.highlightDuration || 1000} showLineNumbers={(getElementInSlide(currentSlide, codeEl.id) as CodeElement | undefined)?.showLineNumbers ?? false} />
+													{/key}
+												{:else}
+													{@html getCodeHighlight(codeEl.id)}
+												{/if}
+											{:else}
+												{@html getCodeHighlight(codeEl.id)}
+											{/if}
+										</div>
+									</div>
+								</div>
+							{:else if element.type === 'text'}
+								{@const textEl = element as TextElement}
+								{@const animFontSize = animated.fontSize?.current ?? textEl.fontSize}
+								{@const typewriterState = textTypewriterState.get(element.id)}
+								{@const displayText = typewriterState?.isAnimating ? typewriterState.fullText.slice(0, typewriterState.displayedChars) : textEl.content}
+								<div
+									class="animot-text-element"
+									style:font-size="{animFontSize}px"
+									style:font-weight={textEl.fontWeight}
+									style:font-family="'{textEl.fontFamily}', sans-serif"
+									style:font-style={textEl.fontStyle ?? 'normal'}
+									style:text-decoration={textEl.textDecoration ?? 'none'}
+									style:color={textEl.backgroundImage ? 'transparent' : (textEl.hollow && textEl.textStroke?.enabled ? 'transparent' : textEl.color)}
+									style:background-color={textEl.backgroundImage ? 'transparent' : textEl.backgroundColor}
+									style:background-image={textEl.backgroundImage ? `url(${textEl.backgroundImage})` : 'none'}
+									style:background-size={textEl.backgroundImage ? `${textEl.backgroundScale ?? 100}%` : 'cover'}
+									style:background-position={textEl.backgroundImage ? `${textEl.backgroundPositionX ?? 50}% ${textEl.backgroundPositionY ?? 50}%` : 'center'}
+									style:-webkit-background-clip={textEl.backgroundImage ? 'text' : 'border-box'}
+									style:background-clip={textEl.backgroundImage ? 'text' : 'border-box'}
+									style:padding="{textEl.padding}px"
+									style:border-radius="{textEl.borderRadius}px"
+									style:text-align={textEl.textAlign}
+									style:justify-content={textEl.textAlign === 'center' ? 'center' : textEl.textAlign === 'right' ? 'flex-end' : 'flex-start'}
+									style:opacity={textEl.opacity ?? 1}
+									style:-webkit-text-stroke={textEl.textStroke?.enabled ? `${textEl.textStroke.width}px ${textEl.textStroke.color}` : '0'}
+									style:text-shadow={textEl.textShadow?.enabled ? `${textEl.textShadow.offsetX}px ${textEl.textShadow.offsetY}px ${textEl.textShadow.blur}px ${textEl.textShadow.color}` : 'none'}
+								>
+									{displayText}{#if typewriterState?.isAnimating}<span class="animot-typewriter-cursor">|</span>{/if}
+								</div>
+							{:else if element.type === 'arrow'}
+								{@const arrowEl = element as ArrowElement}
+								{@const cp = arrowEl.controlPoints || []}
+								{@const pathD = cp.length === 0 ? `M ${arrowEl.startPoint.x} ${arrowEl.startPoint.y} L ${arrowEl.endPoint.x} ${arrowEl.endPoint.y}` : cp.length === 1 ? `M ${arrowEl.startPoint.x} ${arrowEl.startPoint.y} Q ${cp[0].x} ${cp[0].y} ${arrowEl.endPoint.x} ${arrowEl.endPoint.y}` : `M ${arrowEl.startPoint.x} ${arrowEl.startPoint.y} C ${cp[0].x} ${cp[0].y} ${cp[1].x} ${cp[1].y} ${arrowEl.endPoint.x} ${arrowEl.endPoint.y}`}
+								{@const endAngle = cp.length === 0 ? Math.atan2(arrowEl.endPoint.y - arrowEl.startPoint.y, arrowEl.endPoint.x - arrowEl.startPoint.x) : cp.length === 1 ? Math.atan2(arrowEl.endPoint.y - cp[0].y, arrowEl.endPoint.x - cp[0].x) : Math.atan2(arrowEl.endPoint.y - cp[1].y, arrowEl.endPoint.x - cp[1].x)}
+								{@const headAngle = Math.PI / 6}
+								{@const headSize = arrowEl.headSize}
+								{@const arrowHeadPath = `M ${arrowEl.endPoint.x - headSize * Math.cos(endAngle - headAngle)} ${arrowEl.endPoint.y - headSize * Math.sin(endAngle - headAngle)} L ${arrowEl.endPoint.x} ${arrowEl.endPoint.y} L ${arrowEl.endPoint.x - headSize * Math.cos(endAngle + headAngle)} ${arrowEl.endPoint.y - headSize * Math.sin(endAngle + headAngle)}`}
+								{@const arrowAnimMode = arrowEl.animation?.mode ?? 'none'}
+								{@const arrowAnimDuration = arrowEl.animation?.duration ?? 500}
+								{@const isStyledArrow = arrowEl.style !== 'solid'}
+								{@const baseDashArray = arrowEl.style === 'dashed' ? '10,5' : arrowEl.style === 'dotted' ? '2,5' : 'none'}
+								<svg class="animot-arrow-element" class:arrow-animate-draw={arrowAnimMode === 'draw' && !isStyledArrow} class:arrow-animate-grow={arrowAnimMode === 'grow'} viewBox="0 0 {arrowEl.size.width} {arrowEl.size.height}" preserveAspectRatio="none" style="overflow: visible; --arrow-anim-duration: {arrowAnimDuration}ms;">
+									<path class="arrow-path" d={pathD} fill="none" stroke={arrowEl.color} stroke-width={arrowEl.strokeWidth} stroke-dasharray={baseDashArray} stroke-linecap="round" stroke-linejoin="round" use:animateStyledArrowDraw={{ enabled: arrowAnimMode === 'draw' && isStyledArrow, duration: arrowAnimDuration, dashPattern: baseDashArray, startX: arrowEl.startPoint.x, endX: arrowEl.endPoint.x, slideIndex: currentSlideIndex }} />
+									{#if arrowEl.showHead !== false}
+										<path class="arrow-head" class:arrow-head-styled-draw={arrowAnimMode === 'draw' && isStyledArrow} d={arrowHeadPath} fill="none" stroke={arrowEl.color} stroke-width={arrowEl.strokeWidth} stroke-linecap="round" stroke-linejoin="round" style={arrowAnimMode === 'draw' && isStyledArrow ? `--arrow-anim-duration: ${arrowAnimDuration}ms;` : ''} />
+									{/if}
+								</svg>
+							{:else if element.type === 'image'}
+								{@const imgEl = element as ImageElement}
+								{@const clipPath = imgEl.clipMask?.enabled ? (imgEl.clipMask.shapeType === 'circle' ? 'circle(50% at 50% 50%)' : imgEl.clipMask.shapeType === 'ellipse' ? 'ellipse(50% 50% at 50% 50%)' : imgEl.clipMask.shapeType === 'triangle' ? 'polygon(50% 0%, 0% 100%, 100% 100%)' : imgEl.clipMask.shapeType === 'star' ? 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)' : imgEl.clipMask.shapeType === 'hexagon' ? 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)' : (imgEl.clipMask.borderRadius ?? 0) > 0 ? `inset(0 round ${imgEl.clipMask.borderRadius}px)` : 'none') : 'none'}
+								<img class="animot-image-element" src={imgEl.src} alt="" style:object-fit={imgEl.objectFit} style:border-radius="{imgEl.clipMask?.enabled ? 0 : imgEl.borderRadius}px" style:opacity={imgEl.opacity} style:filter={imgEl.blur ? `blur(${imgEl.blur}px)` : 'none'} style:clip-path={clipPath} />
+							{:else if element.type === 'shape'}
+								{@const shapeEl = element as ShapeElement}
+								{@const animFill = animated.fillColor?.current ?? shapeEl.fillColor}
+								{@const animStroke = animated.strokeColor?.current ?? shapeEl.strokeColor}
+								{@const animStrokeWidth = animated.strokeWidth?.current ?? shapeEl.strokeWidth}
+								{@const mState = shapeMorphStates.get(element.id)}
+								{@const morphProgress = animated.shapeMorph?.current ?? 1}
+								{@const effectiveShapeType = mState ? (morphProgress >= 1 ? mState.toType : (morphProgress <= 0 ? mState.fromType : null)) : shapeEl.shapeType}
+								{@const isMorphing = mState && morphProgress > 0 && morphProgress < 1}
+								<svg class="animot-shape-element" viewBox="0 0 {animated.width.current} {animated.height.current}" style:opacity={shapeEl.opacity} style:filter={shapeEl.boxShadow?.enabled ? `drop-shadow(${shapeEl.boxShadow.offsetX}px ${shapeEl.boxShadow.offsetY}px ${shapeEl.boxShadow.blur}px ${shapeEl.boxShadow.color})` : 'none'}>
+									{#if isMorphing}
+										{@const w = animated.width.current}
+										{@const h = animated.height.current}
+										{@const sw = animStrokeWidth}
+										<g style:opacity={1 - morphProgress}>{@html renderShape(mState!.fromType, w, h, animated.borderRadius.current, animFill, animStroke, sw)}</g>
+										<g style:opacity={morphProgress}>{@html renderShape(mState!.toType, w, h, animated.borderRadius.current, animFill, animStroke, sw)}</g>
+									{:else}
+										{@html renderShape(effectiveShapeType ?? shapeEl.shapeType, animated.width.current, animated.height.current, animated.borderRadius.current, animFill, animStroke, animStrokeWidth)}
+									{/if}
+								</svg>
+							{:else if element.type === 'counter'}
+								<CounterRenderer element={element as CounterElement} slideId={currentSlide?.id ?? ''} />
+							{:else if element.type === 'chart'}
+								<ChartRenderer element={element as ChartElement} slideId={currentSlide?.id ?? ''} />
+							{:else if element.type === 'icon'}
+								<IconRenderer element={element as IconElement} />
+							{/if}
+						</div>
+					{/if}
+				{/each}
+			</div>
+		</div>
+
+		{#if arrows}
+			<button class="animot-arrow animot-arrow-left" onclick={() => animateToSlide(currentSlideIndex - 1)} disabled={currentSlideIndex === 0 || isTransitioning} aria-label="Previous slide">
+				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+			</button>
+			<button class="animot-arrow animot-arrow-right" onclick={() => animateToSlide(currentSlideIndex + 1)} disabled={currentSlideIndex === slides.length - 1 || isTransitioning} aria-label="Next slide">
+				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+			</button>
+		{/if}
+
+		{#if controls}
+			<div class="animot-controls">
+				<button onclick={() => animateToSlide(currentSlideIndex - 1)} disabled={currentSlideIndex === 0 || isTransitioning} aria-label="Previous">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+				</button>
+				<span class="animot-slide-indicator">{currentSlideIndex + 1} / {slides.length}</span>
+				<button onclick={() => animateToSlide(currentSlideIndex + 1)} disabled={currentSlideIndex === slides.length - 1 || isTransitioning} aria-label="Next">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+				</button>
+				<button onclick={() => { isAutoplay = !isAutoplay; if (!isAutoplay) clearAutoplayTimer(); }} class:active={isAutoplay} aria-label={isAutoplay ? 'Pause' : 'Play'}>
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						{#if isAutoplay}<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>{:else}<polygon points="5 3 19 12 5 21 5 3"/>{/if}
+					</svg>
+				</button>
+			</div>
+		{/if}
+
+		{#if showProgress}
+			<div class="animot-progress-bar">
+				<div class="animot-progress-fill" style:width="{((currentSlideIndex + 1) / slides.length) * 100}%"></div>
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<script module lang="ts">
+	function renderShape(type: string, w: number, h: number, br: number, fill: string, stroke: string, sw: number): string {
+		switch (type) {
+			case 'rectangle': return `<rect x="${sw/2}" y="${sw/2}" width="${w-sw}" height="${h-sw}" rx="${br}" ry="${br}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"/>`;
+			case 'circle': return `<circle cx="${w/2}" cy="${h/2}" r="${Math.min(w,h)/2-sw/2}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"/>`;
+			case 'ellipse': return `<ellipse cx="${w/2}" cy="${h/2}" rx="${w/2-sw/2}" ry="${h/2-sw/2}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"/>`;
+			case 'triangle': return `<polygon points="${w/2},${sw/2} ${sw/2},${h-sw/2} ${w-sw/2},${h-sw/2}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" stroke-linejoin="round"/>`;
+			case 'star': {
+				const cx = w/2, cy = h/2, outerR = Math.min(w,h)/2-sw/2, innerR = outerR*0.4;
+				const pts = Array.from({length:10},(_,i)=>{const a=(i*Math.PI/5)-Math.PI/2;const r=i%2===0?outerR:innerR;return`${cx+r*Math.cos(a)},${cy+r*Math.sin(a)}`;}).join(' ');
+				return `<polygon points="${pts}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" stroke-linejoin="round"/>`;
+			}
+			case 'hexagon': {
+				const cx = w/2, cy = h/2, r = Math.min(w,h)/2-sw/2;
+				const pts = Array.from({length:6},(_,i)=>{const a=(i*Math.PI/3)-Math.PI/2;return`${cx+r*Math.cos(a)},${cy+r*Math.sin(a)}`;}).join(' ');
+				return `<polygon points="${pts}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" stroke-linejoin="round"/>`;
+			}
+			default: return '';
+		}
+	}
+</script>
+
+<style>
+	.animot-presenter {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		background: transparent;
+	}
+
+	.animot-canvas-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.animot-canvas {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.animot-element {
+		position: absolute;
+		box-sizing: border-box;
+		will-change: transform, opacity, left, top, width, height;
+	}
+
+	.animot-element.floating {
+		animation-duration: var(--float-speed, 3s);
+		animation-timing-function: ease-in-out;
+		animation-iteration-count: infinite;
+		animation-delay: var(--float-delay, 0s);
+	}
+
+	/* Code */
+	.animot-code-block {
+		width: 100%; height: 100%; background: #0d1117; overflow: hidden;
+		display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+		margin: 0; box-sizing: border-box;
+	}
+	.animot-code-block.transparent-bg { background: transparent; box-shadow: none; }
+	.animot-code-block.transparent-bg .animot-code-header { background: transparent; border-bottom-color: rgba(255,255,255,0.1); }
+	.animot-code-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #161b22; border-bottom: 1px solid #30363d; flex-shrink: 0; }
+	.animot-window-controls { display: flex; gap: 8px; }
+	.animot-control { width: 12px; height: 12px; border-radius: 50%; display: block; }
+	.macos .animot-control.close { background: #ff5f57; }
+	.macos .animot-control.minimize { background: #febc2e; }
+	.macos .animot-control.maximize { background: #28c840; }
+	.animot-filename { color: #8b949e; font-size: 14px; flex: 1; }
+	.animot-code-content { flex: 1; overflow: hidden; position: relative; }
+	.animot-highlighted-code { width: 100%; height: 100%; }
+	.animot-code-content :global(pre), .animot-highlighted-code :global(pre) { margin: 0; padding: 16px; background: transparent !important; line-height: 1.6; font-size: inherit; overflow: visible; }
+	.animot-highlighted-code :global(code) { font-family: inherit; font-size: inherit; font-weight: inherit; }
+	.animot-highlighted-code :global(.line-number) { display: inline-block; width: 2.5em; margin-right: 1em; text-align: right; color: #6e7681; user-select: none; opacity: 0.6; }
+
+	/* Text */
+	.animot-text-element { width: 100%; height: 100%; display: flex; align-items: center; white-space: pre-wrap; word-wrap: break-word; }
+	.animot-typewriter-cursor { animation: animot-blink 0.7s infinite; font-weight: 100; }
+	@keyframes animot-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
+
+	/* Arrow */
+	.animot-arrow-element { width: 100%; height: 100%; }
+	.arrow-animate-draw .arrow-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: animot-arrow-draw var(--arrow-anim-duration, 500ms) ease-out forwards; }
+	.arrow-head-styled-draw { opacity: 0; animation: animot-arrow-head-appear var(--arrow-anim-duration, 500ms) ease-out forwards; animation-delay: calc(var(--arrow-anim-duration, 500ms) * 0.7); }
+	.arrow-animate-draw .arrow-head { opacity: 0; animation: animot-arrow-head-appear var(--arrow-anim-duration, 500ms) ease-out forwards; animation-delay: calc(var(--arrow-anim-duration, 500ms) * 0.7); }
+	.arrow-animate-grow { transform-origin: left center; animation: animot-arrow-grow var(--arrow-anim-duration, 500ms) ease-out forwards; }
+	@keyframes animot-arrow-draw { to { stroke-dashoffset: 0; } }
+	@keyframes animot-arrow-head-appear { from { opacity: 0; } to { opacity: 1; } }
+	@keyframes animot-arrow-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
+
+	/* Image */
+	.animot-image-element { width: 100%; height: 100%; display: block; }
+
+	/* Shape */
+	.animot-shape-element { width: 100%; height: 100%; display: block; overflow: visible; }
+
+	/* Transitions */
+	.animot-canvas { --transition-duration: 500ms; transition: transform calc(var(--transition-duration) * 0.4) ease, opacity calc(var(--transition-duration) * 0.4) ease; }
+	.animot-canvas.transition-fade-out { opacity: 0; }
+	.animot-canvas.transition-fade-in { animation: animot-fadeIn calc(var(--transition-duration) * 0.6) ease forwards; }
+	.animot-canvas.transition-slide-left-out.forward { transform: translateX(-100%); opacity: 0; }
+	.animot-canvas.transition-slide-left-in.forward { animation: animot-slideInFromRight calc(var(--transition-duration) * 0.6) ease forwards; }
+	.animot-canvas.transition-slide-left-out.backward { transform: translateX(100%); opacity: 0; }
+	.animot-canvas.transition-slide-left-in.backward { animation: animot-slideInFromLeft calc(var(--transition-duration) * 0.6) ease forwards; }
+	.animot-canvas.transition-slide-right-out.forward { transform: translateX(100%); opacity: 0; }
+	.animot-canvas.transition-slide-right-in.forward { animation: animot-slideInFromLeft calc(var(--transition-duration) * 0.6) ease forwards; }
+	.animot-canvas.transition-slide-up-out { transform: translateY(-100%); opacity: 0; }
+	.animot-canvas.transition-slide-up-in { animation: animot-slideInFromBottom calc(var(--transition-duration) * 0.6) ease forwards; }
+	.animot-canvas.transition-slide-down-out { transform: translateY(100%); opacity: 0; }
+	.animot-canvas.transition-slide-down-in { animation: animot-slideInFromTop calc(var(--transition-duration) * 0.6) ease forwards; }
+	.animot-canvas.transition-zoom-in-out { transform: scale(0.5); opacity: 0; }
+	.animot-canvas.transition-zoom-in-in { animation: animot-zoomIn calc(var(--transition-duration) * 0.6) ease forwards; }
+	.animot-canvas.transition-zoom-out-out { transform: scale(1.5); opacity: 0; }
+	.animot-canvas.transition-zoom-out-in { animation: animot-zoomOut calc(var(--transition-duration) * 0.6) ease forwards; }
+	.animot-canvas.transition-flip-out { transform: perspective(1000px) rotateY(90deg); opacity: 0; }
+	.animot-canvas.transition-flip-in { animation: animot-flipIn calc(var(--transition-duration) * 0.6) ease forwards; }
+
+	@keyframes animot-fadeIn { from { opacity: 0; } to { opacity: 1; } }
+	@keyframes animot-slideInFromRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+	@keyframes animot-slideInFromLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+	@keyframes animot-slideInFromBottom { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+	@keyframes animot-slideInFromTop { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+	@keyframes animot-zoomIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+	@keyframes animot-zoomOut { from { transform: scale(1.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+	@keyframes animot-flipIn { from { transform: perspective(1000px) rotateY(-90deg); opacity: 0; } to { transform: perspective(1000px) rotateY(0); opacity: 1; } }
+
+	/* Controls */
+	.animot-controls {
+		position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
+		display: flex; align-items: center; gap: 8px; padding: 8px 16px;
+		background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); border-radius: 10px;
+		opacity: 0; transition: opacity 0.3s ease; z-index: 100;
+	}
+	.animot-presenter:hover .animot-controls, .animot-menu-visible .animot-controls { opacity: 1; }
+	.animot-controls button {
+		display: flex; align-items: center; justify-content: center;
+		width: 32px; height: 32px; border-radius: 6px; border: none; cursor: pointer;
+		background: rgba(255,255,255,0.1); color: white; transition: background 0.2s;
+	}
+	.animot-controls button:hover:not(:disabled) { background: rgba(255,255,255,0.2); }
+	.animot-controls button:disabled { opacity: 0.3; cursor: not-allowed; }
+	.animot-controls button.active { background: rgba(99,102,241,0.6); }
+	.animot-controls button svg { width: 16px; height: 16px; }
+	.animot-slide-indicator { font-size: 12px; color: white; min-width: 50px; text-align: center; font-family: system-ui, sans-serif; }
+
+	/* Arrows */
+	.animot-arrow {
+		position: absolute; top: 50%; transform: translateY(-50%);
+		width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
+		background: rgba(0,0,0,0.5); color: white; display: flex; align-items: center; justify-content: center;
+		opacity: 0; transition: opacity 0.3s; z-index: 100;
+	}
+	.animot-presenter:hover .animot-arrow { opacity: 1; }
+	.animot-arrow:hover:not(:disabled) { background: rgba(0,0,0,0.7); }
+	.animot-arrow:disabled { opacity: 0.2; cursor: not-allowed; }
+	.animot-arrow svg { width: 20px; height: 20px; }
+	.animot-arrow-left { left: 8px; }
+	.animot-arrow-right { right: 8px; }
+
+	/* Progress bar */
+	.animot-progress-bar {
+		position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
+		background: rgba(255,255,255,0.1); z-index: 100;
+		opacity: 0; transition: opacity 0.3s;
+	}
+	.animot-presenter:hover .animot-progress-bar { opacity: 1; }
+	.animot-progress-fill { height: 100%; background: linear-gradient(135deg, #7c3aed, #ec4899); transition: width 0.6s ease; }
+
+	/* Loading / Error */
+	.animot-loading { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
+	.animot-spinner { width: 32px; height: 32px; border: 3px solid rgba(255,255,255,0.2); border-top-color: #7c3aed; border-radius: 50%; animation: animot-spin 0.8s linear infinite; }
+	@keyframes animot-spin { to { transform: rotate(360deg); } }
+	.animot-error { color: #ef4444; padding: 20px; text-align: center; font-family: system-ui, sans-serif; }
+</style>