@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/LoadingAnimation.svelte

@@ -1,787 +1,723 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	/**
-	 * Warm, on-brand phrases printed inside the box's rear flap. One is chosen at
-	 * random when the loader mounts and a fresh one is shown on each loop. Pass
-	 * the `messages` prop to override this set.
-	 */
-	export const defaultLoaderMessages: string[] = [
-		'You rock',
-		'Have a great day',
-		'Thanks for waiting',
-		'Almost there',
-		'Hang tight',
-		'Worth the wait',
-		"You're a star",
-		'Nearly done',
-		'Sit back and relax',
-		'Good things come to those who wait',
-		'On its way',
-		'Making it happen',
-		'Fresh out the box',
-		'Hold tight, nearly there',
-	];
-
-	// ---- geometry constants for the thrown-letter extrusion ----
-	const MAXLW = 200; // max combined letter width, box-local px (long words shrink to fit)
-	const DEPTH = 19; // extrusion layers behind each letter face
-	const EVX = 0.22; // extrusion direction: across the box's resting angle
-	const EVY = -0.24;
-	const EVZ = -1.0;
-	const NFLUTES = 4; // corrugation waves shaded across the thickness
-
-	function shuffle(a: number[]): number[] {
-		for (let i = a.length - 1; i > 0; i--) {
-			const j = (Math.random() * (i + 1)) | 0;
-			const t = a[i];
-			a[i] = a[j];
-			a[j] = t;
-		}
-		return a;
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>/**
+* Warm, on-brand phrases printed inside the box's rear flap. One is chosen at
+* random when the loader mounts and a fresh one is shown on each loop. Pass
+* the `messages` prop to override this set.
+*/
+export const defaultLoaderMessages = [
+	"You rock",
+	"Have a great day",
+	"Thanks for waiting",
+	"Almost there",
+	"Hang tight",
+	"Worth the wait",
+	"You're a star",
+	"Nearly done",
+	"Sit back and relax",
+	"Good things come to those who wait",
+	"On its way",
+	"Making it happen",
+	"Fresh out the box",
+	"Hold tight, nearly there"
+];
+// ---- geometry constants for the thrown-letter extrusion ----
+const MAXLW = 200;
+const DEPTH = 19;
+const EVX = .22;
+const EVY = -.24;
+const EVZ = -1;
+const NFLUTES = 4;
+function shuffle(a) {
+	for (let i = a.length - 1; i > 0; i--) {
+		const j = Math.random() * (i + 1) | 0;
+		const t = a[i];
+		a[i] = a[j];
+		a[j] = t;
 	}
-	function rand(min: number, max: number): number {
-		return min + Math.random() * (max - min);
-	}
-	function n1(v: number): number {
-		return Math.round(v * 10) / 10;
-	}
-	function parseColor(c: string): [number, number, number] {
-		c = (c || '').trim();
-		if (c.charAt(0) === '#') {
-			if (c.length === 4) {
-				c = '#' + c[1] + c[1] + c[2] + c[2] + c[3] + c[3];
-			}
-			return [
-				parseInt(c.substr(1, 2), 16),
-				parseInt(c.substr(3, 2), 16),
-				parseInt(c.substr(5, 2), 16),
-			];
-		}
-		const m = c.match(/(\d+)[,\s]+(\d+)[,\s]+(\d+)/);
-		if (m) {
-			return [+m[1], +m[2], +m[3]];
+	return a;
+}
+function rand(min, max) {
+	return min + Math.random() * (max - min);
+}
+function n1(v) {
+	return Math.round(v * 10) / 10;
+}
+function parseColor(c) {
+	c = (c || "").trim();
+	if (c.charAt(0) === "#") {
+		if (c.length === 4) {
+			c = "#" + c[1] + c[1] + c[2] + c[2] + c[3] + c[3];
 		}
-		return [154, 160, 166];
+		return [
+			parseInt(c.substr(1, 2), 16),
+			parseInt(c.substr(3, 2), 16),
+			parseInt(c.substr(5, 2), 16)
+		];
 	}
-	function mixRGB(
-		a: [number, number, number],
-		b: [number, number, number],
-		t: number
-	): [number, number, number] {
-		t = t < 0 ? 0 : t > 1 ? 1 : t;
+	const m = c.match(/(\d+)[,\s]+(\d+)[,\s]+(\d+)/);
+	if (m) {
 		return [
-			Math.round(a[0] + (b[0] - a[0]) * t),
-			Math.round(a[1] + (b[1] - a[1]) * t),
-			Math.round(a[2] + (b[2] - a[2]) * t),
+			+m[1],
+			+m[2],
+			+m[3]
 		];
 	}
-	function rgbStr(c: [number, number, number]): string {
-		return 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] + ')';
+	return [
+		154,
+		160,
+		166
+	];
+}
+function mixRGB(a, b, t) {
+	t = t < 0 ? 0 : t > 1 ? 1 : t;
+	return [
+		Math.round(a[0] + (b[0] - a[0]) * t),
+		Math.round(a[1] + (b[1] - a[1]) * t),
+		Math.round(a[2] + (b[2] - a[2]) * t)
+	];
+}
+function rgbStr(c) {
+	return "rgb(" + c[0] + "," + c[1] + "," + c[2] + ")";
+}
+// Shade a single extrusion layer like stacked fluted cardboard: it darkens
+// toward the back, with flute banding so the thickness reads as corrugated
+// sheets — matching the box stylistically.
+function fluteCol(k, faceRGB, deepRGB) {
+	const t = k / DEPTH;
+	const wave = .5 - .5 * Math.cos(t * Math.PI * 2 * NFLUTES);
+	const ridge = mixRGB(faceRGB, deepRGB, .46 + .42 * t);
+	const valley = mixRGB(faceRGB, deepRGB, .74 + .26 * t);
+	return rgbStr(mixRGB(ridge, valley, wave));
+}
+</script>
+
+<script lang="ts">import { loaderDefaults } from "../Helpers/loaderDefaults.svelte.js";
+const { name = "", showText = true, label = "Loading", caption = "Loading", messages = defaultLoaderMessages, letterFace = "#cdab73", letterDeep = "#2a1d0d" } = $props();
+// The word the box spells: the caller's first name, or the product name as a
+// friendly fallback. Block capitals tumble cleanly and dodge lowercase
+// descenders clipping the baseline on landing.
+// Explicit `name` prop wins; otherwise fall back to the app-wide default
+// (set by the host so internally-rendered loaders also show the user), then
+// finally the product name.
+const word = $derived((name.trim() || loaderDefaults.name.trim() || "FloWMS").toUpperCase());
+// Caption text with any trailing dots/ellipsis stripped, since the pill
+// appends its own animated "..." — avoids "moment……" style doubling.
+const captionText = $derived(caption.replace(/[\s.…]+$/, ""));
+// Per-letter render data: each letter is a stack of DEPTH layers (painted
+// back-to-front) topped by the lit face, so it has genuine 3D thickness.
+const geom = $derived.by(() => {
+	const chars = word.split("");
+	const N = Math.max(chars.length, 1);
+	const spacing = Math.min(40, MAXLW / N);
+	const fontSize = Math.max(13, Math.min(34, spacing * .92));
+	const perStep = Math.max(.6, fontSize * .046);
+	const faceRGB = parseColor(letterFace);
+	const deepRGB = parseColor(letterDeep);
+	const letters = chars.map((ch) => {
+		const glyph = ch === " " ? "\xA0" : ch;
+		const layers = [];
+		for (let k = DEPTH; k >= 1; k--) {
+			layers.push({
+				transform: "translate(-50%,-50%) translate3d(" + n1(EVX * perStep * k) + "px," + n1(EVY * perStep * k) + "px," + n1(EVZ * perStep * k) + "px)",
+				color: fluteCol(k, faceRGB, deepRGB)
+			});
+		}
+		return {
+			glyph,
+			layers
+		};
+	});
+	return {
+		N,
+		spacing,
+		fontSize,
+		letters
+	};
+});
+// Confetti launch vectors — fixed once per instance so the burst is stable.
+const fills = Array.from({ length: 16 }, () => ({
+	dx: rand(-50, 56),
+	dz: rand(-40, 40),
+	rise: rand(48, 90)
+}));
+let rootRef = $state();
+let boxRef = $state();
+let glowRef = $state();
+let s0pivot = $state();
+let s1pivot = $state();
+let s2pivot = $state();
+let s3pivot = $state();
+let letterRefs = $state([]);
+let fillRefs = $state([]);
+let msgIndex = $state(0);
+$effect(() => {
+	const rootEl = rootRef;
+	const boxEl = boxRef;
+	if (!rootEl || !boxEl) {
+		return;
 	}
-	// Shade a single extrusion layer like stacked fluted cardboard: it darkens
-	// toward the back, with flute banding so the thickness reads as corrugated
-	// sheets — matching the box stylistically.
-	function fluteCol(
-		k: number,
-		faceRGB: [number, number, number],
-		deepRGB: [number, number, number]
-	): string {
-		const t = k / DEPTH; // 0 = just behind the face, 1 = deepest
-		const wave = 0.5 - 0.5 * Math.cos(t * Math.PI * 2 * NFLUTES); // 0 = ridge, 1 = valley
-		const ridge = mixRGB(faceRGB, deepRGB, 0.46 + 0.42 * t);
-		const valley = mixRGB(faceRGB, deepRGB, 0.74 + 0.26 * t);
-		return rgbStr(mixRGB(ridge, valley, wave));
+	// Read reactive inputs so the timeline rebuilds when the word changes.
+	const { N, spacing } = geom;
+	const letterEls = letterRefs.slice(0, geom.letters.length).filter((x) => !!x);
+	const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	if (reduce) {
+		return;
 	}
-</script>
-
-<script lang="ts">
-	import { loaderDefaults } from '../Helpers/loaderDefaults.svelte.js';
-	import type { LoadingAnimationProps } from './LoadingAnimationProps.js';
-
-	const {
-		name = '',
-		showText = true,
-		label = 'Loading',
-		caption = 'Loading',
-		messages = defaultLoaderMessages,
-		letterFace = '#cdab73',
-		letterDeep = '#2a1d0d',
-	}: LoadingAnimationProps = $props();
-
-	// The word the box spells: the caller's first name, or the product name as a
-	// friendly fallback. Block capitals tumble cleanly and dodge lowercase
-	// descenders clipping the baseline on landing.
-	// Explicit `name` prop wins; otherwise fall back to the app-wide default
-	// (set by the host so internally-rendered loaders also show the user), then
-	// finally the product name.
-	const word = $derived(
-		(name.trim() || loaderDefaults.name.trim() || 'FloWMS').toUpperCase()
-	);
-
-	// Caption text with any trailing dots/ellipsis stripped, since the pill
-	// appends its own animated "..." — avoids "moment……" style doubling.
-	const captionText = $derived(caption.replace(/[\s.…]+$/, ''));
-
-	// Per-letter render data: each letter is a stack of DEPTH layers (painted
-	// back-to-front) topped by the lit face, so it has genuine 3D thickness.
-	const geom = $derived.by(() => {
-		const chars = word.split('');
-		const N = Math.max(chars.length, 1);
-		const spacing = Math.min(40, MAXLW / N);
-		const fontSize = Math.max(13, Math.min(34, spacing * 0.92));
-		const perStep = Math.max(0.6, fontSize * 0.046);
-		const faceRGB = parseColor(letterFace);
-		const deepRGB = parseColor(letterDeep);
-		const letters = chars.map((ch) => {
-			const glyph = ch === ' ' ? ' ' : ch;
-			const layers: { transform: string; color: string }[] = [];
-			for (let k = DEPTH; k >= 1; k--) {
-				layers.push({
-					transform:
-						'translate(-50%,-50%) translate3d(' +
-						n1(EVX * perStep * k) +
-						'px,' +
-						n1(EVY * perStep * k) +
-						'px,' +
-						n1(EVZ * perStep * k) +
-						'px)',
-					color: fluteCol(k, faceRGB, deepRGB),
-				});
-			}
-			return { glyph, layers };
-		});
-		return { N, spacing, fontSize, letters };
-	});
-
-	// Confetti launch vectors — fixed once per instance so the burst is stable.
-	const fills = Array.from({ length: 16 }, () => ({
-		dx: rand(-50, 56),
-		dz: rand(-40, 40),
-		rise: rand(48, 90),
-	}));
-
-	let rootRef: HTMLDivElement | undefined = $state();
-	let boxRef: HTMLDivElement | undefined = $state();
-	let glowRef: HTMLDivElement | undefined = $state();
-	let s0pivot: HTMLDivElement | undefined = $state();
-	let s1pivot: HTMLDivElement | undefined = $state();
-	let s2pivot: HTMLDivElement | undefined = $state();
-	let s3pivot: HTMLDivElement | undefined = $state();
-	let letterRefs: (HTMLSpanElement | undefined)[] = $state([]);
-	let fillRefs: (HTMLSpanElement | undefined)[] = $state([]);
-
-	let msgIndex = $state(0);
-
-	$effect(() => {
-		const rootEl = rootRef;
-		const boxEl = boxRef;
-		if (!rootEl || !boxEl) {
-			return;
+	const cs = getComputedStyle(rootEl);
+	const hh = parseFloat(cs.getPropertyValue("--hh")) || 55;
+	const openDeg = parseFloat(cs.getPropertyValue("--open")) || 130;
+	const landY = 30;
+	const landZ = 112;
+	const anims = [];
+	const track = (a) => {
+		if (a) {
+			anims.push(a);
 		}
-
-		// Read reactive inputs so the timeline rebuilds when the word changes.
-		const { N, spacing } = geom;
-		const letterEls = letterRefs
-			.slice(0, geom.letters.length)
-			.filter((x): x is HTMLSpanElement => !!x);
-
-		const reduce =
-			window.matchMedia &&
-			window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-		if (reduce) {
-			return;
+	};
+	// ---- timeline (ms), scaled to the word length ----
+	const D_rotin = 700;
+	const outerOpen = [600, 1080];
+	const innerOpen = [1020, 1520];
+	const outStagger = 205;
+	const outFlight = 860;
+	const outStart = 1560;
+	const outEnd = outStart + (N - 1) * outStagger + outFlight;
+	const confStart = outEnd + 240;
+	const confDur = 1300;
+	const confEnd = confStart + confDur;
+	const backStagger = 120;
+	const backFlight = 520;
+	const backStart = confEnd + 200;
+	const backEnd = backStart + (N - 1) * backStagger + backFlight;
+	const closeStart = backEnd + 180;
+	const innerClose = [closeStart, closeStart + 460];
+	const outerClose = [closeStart + 360, closeStart + 880];
+	const spinStart = outerClose[1] + 60;
+	const spinEnd = spinStart + 980;
+	const T = spinEnd + 460;
+	const o = (t) => Math.max(0, Math.min(1, t / T));
+	const loop = {
+		duration: T,
+		iterations: Infinity,
+		easing: "linear"
+	};
+	// box: flatten -> tip to resting angle -> hold -> spin shut
+	const boxKF = [
+		{
+			offset: 0,
+			transform: "rotateX(0deg) rotateY(0deg)",
+			easing: "cubic-bezier(.5,0,.3,1)"
+		},
+		{
+			offset: o(D_rotin),
+			transform: "rotateX(-26deg) rotateY(-32deg)",
+			easing: "linear"
+		},
+		{
+			offset: o(spinStart),
+			transform: "rotateX(-26deg) rotateY(-32deg)",
+			easing: "cubic-bezier(.6,0,.3,1)"
+		},
+		{
+			offset: o(spinEnd),
+			transform: "rotateX(0deg) rotateY(-360deg)",
+			easing: "linear"
+		},
+		{
+			offset: 1,
+			transform: "rotateX(0deg) rotateY(-360deg)"
 		}
-
-		const cs = getComputedStyle(rootEl);
-		const hh = parseFloat(cs.getPropertyValue('--hh')) || 55;
-		const openDeg = parseFloat(cs.getPropertyValue('--open')) || 130;
-		const landY = 30;
-		const landZ = 112; // box-local: on the floor plane, out in front of the box
-
-		const anims: Animation[] = [];
-		const track = (a: Animation | null | undefined): void => {
-			if (a) {
-				anims.push(a);
-			}
-		};
-
-		// ---- timeline (ms), scaled to the word length ----
-		const D_rotin = 700;
-		const outerOpen: [number, number] = [600, 1080];
-		const innerOpen: [number, number] = [1020, 1520];
-		const outStagger = 205;
-		const outFlight = 860;
-		const outStart = 1560;
-		const outEnd = outStart + (N - 1) * outStagger + outFlight;
-		const confStart = outEnd + 240;
-		const confDur = 1300;
-		const confEnd = confStart + confDur;
-		const backStagger = 120;
-		const backFlight = 520;
-		const backStart = confEnd + 200;
-		const backEnd = backStart + (N - 1) * backStagger + backFlight;
-		const closeStart = backEnd + 180;
-		const innerClose: [number, number] = [closeStart, closeStart + 460];
-		const outerClose: [number, number] = [closeStart + 360, closeStart + 880];
-		const spinStart = outerClose[1] + 60;
-		const spinEnd = spinStart + 980;
-		const T = spinEnd + 460;
-
-		const o = (t: number): number => Math.max(0, Math.min(1, t / T));
-		const loop: KeyframeAnimationOptions = {
-			duration: T,
-			iterations: Infinity,
-			easing: 'linear',
-		};
-
-		// box: flatten -> tip to resting angle -> hold -> spin shut
-		const boxKF: Keyframe[] = [
+	];
+	track(boxEl.animate(boxKF, loop));
+	// flaps: open, hold, close
+	function flapKF(open, close) {
+		const ov = "rotateX(" + -openDeg + "deg)";
+		return [
 			{
 				offset: 0,
-				transform: 'rotateX(0deg) rotateY(0deg)',
-				easing: 'cubic-bezier(.5,0,.3,1)',
+				transform: "rotateX(0deg)"
 			},
 			{
-				offset: o(D_rotin),
-				transform: 'rotateX(-26deg) rotateY(-32deg)',
-				easing: 'linear',
+				offset: o(open[0]),
+				transform: "rotateX(0deg)",
+				easing: "cubic-bezier(.4,0,.2,1)"
 			},
 			{
-				offset: o(spinStart),
-				transform: 'rotateX(-26deg) rotateY(-32deg)',
-				easing: 'cubic-bezier(.6,0,.3,1)',
+				offset: o(open[1]),
+				transform: ov,
+				easing: "ease-in-out"
 			},
 			{
-				offset: o(spinEnd),
-				transform: 'rotateX(0deg) rotateY(-360deg)',
-				easing: 'linear',
+				offset: o(close[0]),
+				transform: ov,
+				easing: "cubic-bezier(.4,0,.2,1)"
 			},
-			{ offset: 1, transform: 'rotateX(0deg) rotateY(-360deg)' },
+			{
+				offset: o(close[1]),
+				transform: "rotateX(0deg)"
+			},
+			{
+				offset: 1,
+				transform: "rotateX(0deg)"
+			}
 		];
-		track(boxEl.animate(boxKF, loop));
-
-		// flaps: open, hold, close
-		function flapKF(open: [number, number], close: [number, number]): Keyframe[] {
-			const ov = 'rotateX(' + -openDeg + 'deg)';
-			return [
-				{ offset: 0, transform: 'rotateX(0deg)' },
-				{
-					offset: o(open[0]),
-					transform: 'rotateX(0deg)',
-					easing: 'cubic-bezier(.4,0,.2,1)',
-				},
-				{ offset: o(open[1]), transform: ov, easing: 'ease-in-out' },
-				{
-					offset: o(close[0]),
-					transform: ov,
-					easing: 'cubic-bezier(.4,0,.2,1)',
-				},
-				{ offset: o(close[1]), transform: 'rotateX(0deg)' },
-				{ offset: 1, transform: 'rotateX(0deg)' },
-			];
+	}
+	[s0pivot, s2pivot].forEach((p) => {
+		if (p) {
+			track(p.animate(flapKF(outerOpen, outerClose), loop));
 		}
-		[s0pivot, s2pivot].forEach((p) => {
-			if (p) {
-				track(p.animate(flapKF(outerOpen, outerClose), loop));
-			}
+	});
+	[s1pivot, s3pivot].forEach((p) => {
+		if (p) {
+			track(p.animate(flapKF(innerOpen, innerClose), loop));
+		}
+	});
+	// letters: random pop order out, eruption pause, random pop order back in.
+	// They live in their own stage drawn ABOVE the box, so they sail up out of
+	// the opening and land in front of everything — never behind or through the
+	// front flap.
+	const outOrder = shuffle(letterEls.map((_, i) => i));
+	const backOrder = shuffle(letterEls.map((_, i) => i));
+	const outSlot = [];
+	outOrder.forEach((idx, k) => outSlot[idx] = k);
+	const backSlot = [];
+	backOrder.forEach((idx, k) => backSlot[idx] = k);
+	letterEls.forEach((el, i) => {
+		const lx = (i - (N - 1) / 2) * spacing;
+		const ot = outStart + outSlot[i] * outStagger;
+		const bt = backStart + backSlot[i] * backStagger;
+		const f = outFlight;
+		const bf = backFlight;
+		const sgn = Math.random() < .5 ? -1 : 1;
+		const spin = sgn * rand(55, 120);
+		const wonky = sgn * rand(12, 28);
+		const base = "translate(-50%,-50%) ";
+		function pose(x, y, z, rz, sx, sy) {
+			return base + "translate3d(" + n1(x) + "px," + n1(y) + "px," + n1(z) + "px) rotateZ(" + n1(rz) + "deg) scale(" + n1(sx) + "," + n1(sy) + ")";
+		}
+		function smooth(a) {
+			a = a < 0 ? 0 : a > 1 ? 1 : a;
+			return a * a * (3 - 2 * a);
+		}
+		const pHide = pose(rand(-8, 8), -hh * .22, 0, 0, .12, .12);
+		const SAMP = 15;
+		// THROW OUT: a real projectile sampled at even time steps — fast launch
+		// out of the opening, a hang at the apex, then a gravity-driven drop that
+		// lands it on the floor in front of the box.
+		const oy0 = -hh - 4;
+		const oyA = -hh - 80;
+		const oy1 = landY;
+		const oRise = oy0 - oyA;
+		const oFall = oy1 - oyA;
+		const otA = Math.sqrt(oRise) / (Math.sqrt(oRise) + Math.sqrt(oFall));
+		const oC = oRise / (otA * otA);
+		const oZlo = 6;
+		const oZ0 = .3;
+		const oZ1 = .6;
+		const FLYo = .84;
+		const kf = [{
+			offset: 0,
+			transform: pHide,
+			opacity: 0
+		}, {
+			offset: o(ot),
+			transform: pose(lx * .03, oy0, oZlo, 0, .45, .45),
+			opacity: 0,
+			easing: "linear"
+		}];
+		for (let sI = 1; sI <= SAMP; sI++) {
+			const s = sI / SAMP;
+			const oy = oyA + oC * (s - otA) * (s - otA);
+			const ox = lx * (.03 + .97 * s);
+			const oz = oZlo + (landZ - oZlo) * smooth((s - oZ0) / (oZ1 - oZ0));
+			const orz = wonky * s + spin * Math.sin(Math.PI * s) * .4;
+			const osc = s < .1 ? .45 + 5.5 * s : 1;
+			kf.push({
+				offset: o(ot + f * FLYo * s),
+				transform: pose(ox, oy, oz, orz, osc, osc),
+				opacity: Math.min(1, s / .05),
+				easing: "linear"
+			});
+		}
+		kf.push({
+			offset: o(ot + f * .88),
+			transform: pose(lx, landY, landZ, wonky, 1.08, .84),
+			opacity: 1,
+			easing: "cubic-bezier(.2,.7,.4,1)"
 		});
-		[s1pivot, s3pivot].forEach((p) => {
-			if (p) {
-				track(p.animate(flapKF(innerOpen, innerClose), loop));
-			}
+		kf.push({
+			offset: o(ot + f * .94),
+			transform: pose(lx, landY - 5, landZ, wonky * .35, .98, 1.05),
+			opacity: 1,
+			easing: "ease-out"
 		});
-
-		// letters: random pop order out, eruption pause, random pop order back in.
-		// They live in their own stage drawn ABOVE the box, so they sail up out of
-		// the opening and land in front of everything — never behind or through the
-		// front flap.
-		const outOrder = shuffle(letterEls.map((_, i) => i));
-		const backOrder = shuffle(letterEls.map((_, i) => i));
-		const outSlot: number[] = [];
-		outOrder.forEach((idx, k) => (outSlot[idx] = k));
-		const backSlot: number[] = [];
-		backOrder.forEach((idx, k) => (backSlot[idx] = k));
-
-		letterEls.forEach((el, i) => {
-			const lx = (i - (N - 1) / 2) * spacing;
-			const ot = outStart + outSlot[i] * outStagger;
-			const bt = backStart + backSlot[i] * backStagger;
-			const f = outFlight;
-			const bf = backFlight;
-			const sgn = Math.random() < 0.5 ? -1 : 1;
-			const spin = sgn * rand(55, 120); // tumble through the air
-			const wonky = sgn * rand(12, 28); // askew angle on landing, tips upright on settle
-			const base = 'translate(-50%,-50%) ';
-			function pose(
-				x: number,
-				y: number,
-				z: number,
-				rz: number,
-				sx: number,
-				sy: number
-			): string {
-				return (
-					base +
-					'translate3d(' +
-					n1(x) +
-					'px,' +
-					n1(y) +
-					'px,' +
-					n1(z) +
-					'px) rotateZ(' +
-					n1(rz) +
-					'deg) scale(' +
-					n1(sx) +
-					',' +
-					n1(sy) +
-					')'
-				);
-			}
-			function smooth(a: number): number {
-				a = a < 0 ? 0 : a > 1 ? 1 : a;
-				return a * a * (3 - 2 * a);
-			}
-			const pHide = pose(rand(-8, 8), -hh * 0.22, 0, 0, 0.12, 0.12);
-			const SAMP = 15;
-
-			// THROW OUT: a real projectile sampled at even time steps — fast launch
-			// out of the opening, a hang at the apex, then a gravity-driven drop that
-			// lands it on the floor in front of the box.
-			const oy0 = -hh - 4;
-			const oyA = -hh - 80;
-			const oy1 = landY;
-			const oRise = oy0 - oyA;
-			const oFall = oy1 - oyA;
-			const otA = Math.sqrt(oRise) / (Math.sqrt(oRise) + Math.sqrt(oFall));
-			const oC = oRise / (otA * otA);
-			const oZlo = 6;
-			const oZ0 = 0.3;
-			const oZ1 = 0.6;
-			const FLYo = 0.84;
-
-			const kf: Keyframe[] = [
-				{ offset: 0, transform: pHide, opacity: 0 },
-				{
-					offset: o(ot),
-					transform: pose(lx * 0.03, oy0, oZlo, 0, 0.45, 0.45),
-					opacity: 0,
-					easing: 'linear',
-				},
-			];
-			for (let sI = 1; sI <= SAMP; sI++) {
-				const s = sI / SAMP;
-				const oy = oyA + oC * (s - otA) * (s - otA);
-				const ox = lx * (0.03 + 0.97 * s);
-				const oz = oZlo + (landZ - oZlo) * smooth((s - oZ0) / (oZ1 - oZ0));
-				const orz = wonky * s + spin * Math.sin(Math.PI * s) * 0.4;
-				const osc = s < 0.1 ? 0.45 + 5.5 * s : 1;
-				kf.push({
-					offset: o(ot + f * FLYo * s),
-					transform: pose(ox, oy, oz, orz, osc, osc),
-					opacity: Math.min(1, s / 0.05),
-					easing: 'linear',
-				});
-			}
-			kf.push({
-				offset: o(ot + f * 0.88),
-				transform: pose(lx, landY, landZ, wonky, 1.08, 0.84),
-				opacity: 1,
-				easing: 'cubic-bezier(.2,.7,.4,1)',
-			}); // contact + squash
-			kf.push({
-				offset: o(ot + f * 0.94),
-				transform: pose(lx, landY - 5, landZ, wonky * 0.35, 0.98, 1.05),
-				opacity: 1,
-				easing: 'ease-out',
-			}); // rebound
-			kf.push({
-				offset: o(ot + f),
-				transform: pose(lx, landY, landZ, 0, 1, 1),
-				opacity: 1,
-				easing: 'linear',
-			}); // settle
-
-			// PULL BACK IN: the same physics reversed — up in front, hang, then drop
-			// back down into the box.
-			const by0 = landY;
-			const byA = -hh - 70;
-			const by1 = -hh * 0.18;
-			const bRise = by0 - byA;
-			const bFall = by1 - byA;
-			const btA = Math.sqrt(bRise) / (Math.sqrt(bRise) + Math.sqrt(bFall));
-			const bC = bRise / (btA * btA);
-			const bZ0 = 0.4;
-			const bZ1 = 0.72;
+		kf.push({
+			offset: o(ot + f),
+			transform: pose(lx, landY, landZ, 0, 1, 1),
+			opacity: 1,
+			easing: "linear"
+		});
+		// PULL BACK IN: the same physics reversed — up in front, hang, then drop
+		// back down into the box.
+		const by0 = landY;
+		const byA = -hh - 70;
+		const by1 = -hh * .18;
+		const bRise = by0 - byA;
+		const bFall = by1 - byA;
+		const btA = Math.sqrt(bRise) / (Math.sqrt(bRise) + Math.sqrt(bFall));
+		const bC = bRise / (btA * btA);
+		const bZ0 = .4;
+		const bZ1 = .72;
+		kf.push({
+			offset: o(bt),
+			transform: pose(lx, landY, landZ, 0, 1, 1),
+			opacity: 1,
+			easing: "linear"
+		});
+		for (let bI = 1; bI <= SAMP; bI++) {
+			const bs = bI / SAMP;
+			const by = byA + bC * (bs - btA) * (bs - btA);
+			const bx = lx * (1 - bs);
+			const bz = landZ - (landZ - 8) * smooth((bs - bZ0) / (bZ1 - bZ0));
+			const brz = -spin * Math.sin(Math.PI * bs) * .4;
+			const bsc = bs > .84 ? Math.max(.12, 1 - 5.5 * (bs - .84)) : 1;
+			const bop = Math.max(0, Math.min(1, 1 - (bs - .52) / .2));
 			kf.push({
-				offset: o(bt),
-				transform: pose(lx, landY, landZ, 0, 1, 1),
-				opacity: 1,
-				easing: 'linear',
+				offset: o(bt + bf * bs),
+				transform: pose(bx, by, bz, brz, bsc, bsc),
+				opacity: bop,
+				easing: "linear"
 			});
-			for (let bI = 1; bI <= SAMP; bI++) {
-				const bs = bI / SAMP;
-				const by = byA + bC * (bs - btA) * (bs - btA);
-				const bx = lx * (1 - bs);
-				const bz = landZ - (landZ - 8) * smooth((bs - bZ0) / (bZ1 - bZ0));
-				const brz = -spin * Math.sin(Math.PI * bs) * 0.4;
-				const bsc = bs > 0.84 ? Math.max(0.12, 1 - 5.5 * (bs - 0.84)) : 1;
-				const bop = Math.max(0, Math.min(1, 1 - (bs - 0.52) / 0.2));
-				kf.push({
-					offset: o(bt + bf * bs),
-					transform: pose(bx, by, bz, brz, bsc, bsc),
-					opacity: bop,
-					easing: 'linear',
-				});
-			}
-			kf.push({ offset: o(bt + bf), transform: pHide, opacity: 0 });
-			kf.push({ offset: 1, transform: pHide, opacity: 0 });
-			track(el.animate(kf, loop));
+		}
+		kf.push({
+			offset: o(bt + bf),
+			transform: pHide,
+			opacity: 0
 		});
-
-		// confetti eruption
-		fills.forEach((p, i) => {
-			const elf = fillRefs[i];
-			if (!elf) {
-				return;
-			}
-			const { dx, dz, rise } = p;
-			track(
-				elf.animate(
-					[
-						{
-							offset: 0,
-							transform: 'translate3d(0,0,0) scale(.3)',
-							opacity: 0,
-						},
-						{
-							offset: o(confStart),
-							transform: 'translate3d(0,0,0) scale(.3)',
-							opacity: 0,
-							easing: 'cubic-bezier(.2,.6,.3,1)',
-						},
-						{
-							offset: o(confStart + confDur * 0.16),
-							transform:
-								'translate3d(' +
-								n1(dx * 0.3) +
-								'px,-8px,' +
-								n1(dz * 0.3) +
-								'px) scale(1)',
-							opacity: 1,
-						},
-						{
-							offset: o(confStart + confDur * 0.46),
-							transform:
-								'translate3d(' +
-								n1(dx) +
-								'px,' +
-								n1(-rise) +
-								'px,' +
-								n1(dz) +
-								'px) scale(1)',
-							opacity: 1,
-							easing: 'ease-in',
-						},
-						{
-							offset: o(confStart + confDur * 0.95),
-							transform:
-								'translate3d(' +
-								n1(dx * 1.2) +
-								'px,26px,' +
-								n1(dz * 1.2) +
-								'px) scale(.5)',
-							opacity: 0,
-						},
-						{
-							offset: 1,
-							transform:
-								'translate3d(' +
-								n1(dx * 1.2) +
-								'px,26px,' +
-								n1(dz * 1.2) +
-								'px) scale(.5)',
-							opacity: 0,
-						},
-					],
-					loop
-				)
-			);
+		kf.push({
+			offset: 1,
+			transform: pHide,
+			opacity: 0
 		});
-
-		if (glowRef) {
-			track(
-				glowRef.animate(
-					[
-						{ offset: 0, transform: 'scale(.4)', opacity: 0 },
-						{
-							offset: o(confStart),
-							transform: 'scale(.4)',
-							opacity: 0,
-							easing: 'ease-out',
-						},
-						{
-							offset: o(confStart + confDur * 0.2),
-							transform: 'scale(1)',
-							opacity: 0.9,
-						},
-						{
-							offset: o(confStart + confDur * 0.6),
-							transform: 'scale(1.15)',
-							opacity: 0.5,
-						},
-						{
-							offset: o(confStart + confDur * 0.92),
-							transform: 'scale(.6)',
-							opacity: 0,
-						},
-						{ offset: 1, transform: 'scale(.6)', opacity: 0 },
-					],
-					loop
-				)
-			);
-		}
-
-		// rotate the rear-flap message once per loop
-		let timer: ReturnType<typeof setInterval> | undefined;
-		if (messages.length > 1) {
-			msgIndex = (Math.random() * messages.length) | 0;
-			timer = setInterval(() => {
-				msgIndex = (msgIndex + 1) % messages.length;
-			}, T);
-		} else {
-			msgIndex = 0;
+		track(el.animate(kf, loop));
+	});
+	// confetti eruption
+	fills.forEach((p, i) => {
+		const elf = fillRefs[i];
+		if (!elf) {
+			return;
 		}
-
-		return () => {
-			anims.forEach((a) => a.cancel());
-			if (timer) {
-				clearInterval(timer);
+		const { dx, dz, rise } = p;
+		track(elf.animate([
+			{
+				offset: 0,
+				transform: "translate3d(0,0,0) scale(.3)",
+				opacity: 0
+			},
+			{
+				offset: o(confStart),
+				transform: "translate3d(0,0,0) scale(.3)",
+				opacity: 0,
+				easing: "cubic-bezier(.2,.6,.3,1)"
+			},
+			{
+				offset: o(confStart + confDur * .16),
+				transform: "translate3d(" + n1(dx * .3) + "px,-8px," + n1(dz * .3) + "px) scale(1)",
+				opacity: 1
+			},
+			{
+				offset: o(confStart + confDur * .46),
+				transform: "translate3d(" + n1(dx) + "px," + n1(-rise) + "px," + n1(dz) + "px) scale(1)",
+				opacity: 1,
+				easing: "ease-in"
+			},
+			{
+				offset: o(confStart + confDur * .95),
+				transform: "translate3d(" + n1(dx * 1.2) + "px,26px," + n1(dz * 1.2) + "px) scale(.5)",
+				opacity: 0
+			},
+			{
+				offset: 1,
+				transform: "translate3d(" + n1(dx * 1.2) + "px,26px," + n1(dz * 1.2) + "px) scale(.5)",
+				opacity: 0
 			}
-		};
+		], loop));
 	});
-</script>
-
-<div
-	bind:this={rootRef}
-	class="flowms-loader"
-	role="status"
-	aria-live="polite"
-	aria-label={label}
->
-	<svg
-		width="0"
-		height="0"
-		style="position:absolute"
-		aria-hidden="true"
-	>
-		<filter
-			id="flowms-stamp"
-			x="-15%"
-			y="-15%"
-			width="130%"
-			height="130%"
-		>
-			<feTurbulence
-				type="fractalNoise"
-				baseFrequency="0.03 0.045"
-				numOctaves="3"
-				seed="6"
-				result="warp"
-			/>
-			<feDisplacementMap
-				in="SourceGraphic"
-				in2="warp"
-				scale="3.4"
-				xChannelSelector="R"
-				yChannelSelector="G"
-				result="rough"
-			/>
-			<feTurbulence
-				type="fractalNoise"
-				baseFrequency="0.5 0.55"
-				numOctaves="2"
-				seed="11"
-				result="grain"
-			/>
-			<feColorMatrix
-				in="grain"
-				type="matrix"
-				values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.3 0 0 0 0.05"
-				result="grainA"
-			/>
-			<feComposite
-				in="rough"
-				in2="grainA"
-				operator="in"
-			/>
-		</filter>
-	</svg>
-
-	<div class="scene">
-		<div class="shadow"></div>
-		<div
-			bind:this={boxRef}
-			class="box"
-		>
-			<div class="face back"></div>
-			<div class="face left">
-				<svg
-					class="flo-logo"
-					viewBox="0 0 172 300"
-					xmlns="http://www.w3.org/2000/svg"
-					aria-hidden="true"
-				>
-					<path
-						d="M1.54715 179.524C4.94675 176.764 11.6045 178.966 13.4335 180.132L13.44 180.125L29.0209 188.966L25.7231 191.604C13.44 200.508 18.7976 216.338 37.1425 217.942L54.0844 219.353L56.3929 219.471V268.062C56.3929 269.123 55.7069 270.574 54.5791 271.201L54.2886 271.366L5.44142 299.569C2.62507 300.967 0 298.711 0 296.429V185.886C0 183.535 0.318398 180.522 1.54715 179.524Z"
-					/>
-					<path
-						d="M62.3754 133.49C66.3328 131.155 71.4576 130.799 76.0086 133.424L111.784 154.082L128.952 144.169C130.963 143.008 133.536 144.01 134.228 146.226L153.092 206.478V206.498L153.099 206.517C153.547 208.845 151.674 210.976 149.306 210.818L56.3865 204.855V204.861L39.0593 203.747C35.4781 203.516 34.3703 198.78 37.4768 196.986L55.4036 186.632L19.0811 165.703L19.0746 165.71C17.3158 164.58 12.8616 162.913 7.58502 165.222L62.3754 133.477V133.49Z"
-					/>
-					<path
-						d="M19.2923 34.575C10.3024 29.1402 0 35.2873 0 45.7151V145.85C0 148.133 2.98124 150.626 5.44142 148.99L54.5725 120.622C55.4893 120.094 56.3863 118.544 56.3863 117.483V55.6152L19.2923 34.5816V34.575Z"
-					/>
-					<path
-						d="M61.9664 2.15088C65.9765 -0.408228 71.2992 -0.890029 76.0085 1.83397L170.036 52.5942C173.393 54.5333 172.147 59.361 167.992 59.3618L167.813 59.3483L132.375 60.3248C130.264 60.3248 129.605 62.329 129.229 64.2422L125.357 84.5503C124.658 88.3819 123.135 90.4663 120.252 88.956L56.3864 55.6215V55.615L19.2923 34.5817C17.5446 33.3614 12.7433 31.4565 7.51929 33.5988L61.9664 2.15088Z"
-					/>
-				</svg>
-			</div>
-			<div class="face right">
-				<svg
-					class="flo-logo"
-					viewBox="0 0 172 300"
-					xmlns="http://www.w3.org/2000/svg"
-					aria-hidden="true"
-				>
-					<path
-						d="M1.54715 179.524C4.94675 176.764 11.6045 178.966 13.4335 180.132L13.44 180.125L29.0209 188.966L25.7231 191.604C13.44 200.508 18.7976 216.338 37.1425 217.942L54.0844 219.353L56.3929 219.471V268.062C56.3929 269.123 55.7069 270.574 54.5791 271.201L54.2886 271.366L5.44142 299.569C2.62507 300.967 0 298.711 0 296.429V185.886C0 183.535 0.318398 180.522 1.54715 179.524Z"
-					/>
-					<path
-						d="M62.3754 133.49C66.3328 131.155 71.4576 130.799 76.0086 133.424L111.784 154.082L128.952 144.169C130.963 143.008 133.536 144.01 134.228 146.226L153.092 206.478V206.498L153.099 206.517C153.547 208.845 151.674 210.976 149.306 210.818L56.3865 204.855V204.861L39.0593 203.747C35.4781 203.516 34.3703 198.78 37.4768 196.986L55.4036 186.632L19.0811 165.703L19.0746 165.71C17.3158 164.58 12.8616 162.913 7.58502 165.222L62.3754 133.477V133.49Z"
-					/>
-					<path
-						d="M19.2923 34.575C10.3024 29.1402 0 35.2873 0 45.7151V145.85C0 148.133 2.98124 150.626 5.44142 148.99L54.5725 120.622C55.4893 120.094 56.3863 118.544 56.3863 117.483V55.6152L19.2923 34.5816V34.575Z"
-					/>
-					<path
-						d="M61.9664 2.15088C65.9765 -0.408228 71.2992 -0.890029 76.0085 1.83397L170.036 52.5942C173.393 54.5333 172.147 59.361 167.992 59.3618L167.813 59.3483L132.375 60.3248C130.264 60.3248 129.605 62.329 129.229 64.2422L125.357 84.5503C124.658 88.3819 123.135 90.4663 120.252 88.956L56.3864 55.6215V55.615L19.2923 34.5817C17.5446 33.3614 12.7433 31.4565 7.51929 33.5988L61.9664 2.15088Z"
-					/>
-				</svg>
-			</div>
-			<div class="face floor"></div>
-			<div class="face front">
-				<div class="label-wrap">
-					<div class="label">Goods<br />Loading</div>
-				</div>
-			</div>
-
-			<div class="vent">
-				<div
-					bind:this={glowRef}
-					class="glow"
-				></div>
-				{#each fills as _fill, i (i)}
-					<span
-						bind:this={fillRefs[i]}
-						class="fill"
-					></span>
-				{/each}
-			</div>
-
-			<div class="flap-unit s0 outer">
-				<div
-					bind:this={s0pivot}
-					class="flap-pivot"
-				>
-					<div class="flap-panel">
-						<div class="flap-face out"></div>
-						<div class="flap-face in"></div>
-					</div>
-				</div>
-			</div>
-			<div class="flap-unit s2 outer">
-				<div
-					bind:this={s2pivot}
-					class="flap-pivot"
-				>
-					<div class="flap-panel">
-						<div class="flap-face out"></div>
-						<div class="flap-face in">
-							{#if messages.length}
-								<div class="flap-msg">{messages[msgIndex] ?? ''}</div>
-							{/if}
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="flap-unit s1 inner">
-				<div
-					bind:this={s1pivot}
-					class="flap-pivot"
-				>
-					<div class="flap-panel">
-						<div class="flap-face out"></div>
-						<div class="flap-face in"></div>
-					</div>
-				</div>
-			</div>
-			<div class="flap-unit s3 inner">
-				<div
-					bind:this={s3pivot}
-					class="flap-pivot"
-				>
-					<div class="flap-panel">
-						<div class="flap-face out"></div>
-						<div class="flap-face in"></div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-	</div>
-
-	<!-- Letters live in their own perspective stage, drawn after (above) the box,
-	     so they erupt from the opening and land in front of everything. -->
-	<div class="letterstage">
-		<div class="l3d">
-			{#each geom.letters as letter, i (i)}
-				<span
-					bind:this={letterRefs[i]}
-					class="letter"
-					style="font-size:{geom.fontSize}px"
-				>
-					{#each letter.layers as layer, k (k)}
-						<span
-							class="lyr"
-							style="transform:{layer.transform};color:{layer.color}"
-							>{letter.glyph}</span
-						>
-					{/each}
-					<span
-						class="lface"
-						style="transform:translate(-50%,-50%);color:{letterFace}"
-						>{letter.glyph}</span
-					>
-				</span>
-			{/each}
-		</div>
-	</div>
-
-	<!-- Caption sits above the box and is the loader's last child, so it is never
-	     hidden by the erupting letters. The dots are three always-present spans
-	     whose opacity cycles, so the pill width stays fixed as they animate. -->
-	{#if showText}
-		<div class="caption">
-			<span class="caption-label">{captionText}</span><span
-				class="caption-dots"
-				aria-hidden="true"><span>.</span><span>.</span><span>.</span></span
-			>
-		</div>
-	{/if}
-</div>
-
+	if (glowRef) {
+		track(glowRef.animate([
+			{
+				offset: 0,
+				transform: "scale(.4)",
+				opacity: 0
+			},
+			{
+				offset: o(confStart),
+				transform: "scale(.4)",
+				opacity: 0,
+				easing: "ease-out"
+			},
+			{
+				offset: o(confStart + confDur * .2),
+				transform: "scale(1)",
+				opacity: .9
+			},
+			{
+				offset: o(confStart + confDur * .6),
+				transform: "scale(1.15)",
+				opacity: .5
+			},
+			{
+				offset: o(confStart + confDur * .92),
+				transform: "scale(.6)",
+				opacity: 0
+			},
+			{
+				offset: 1,
+				transform: "scale(.6)",
+				opacity: 0
+			}
+		], loop));
+	}
+	// rotate the rear-flap message once per loop
+	let timer;
+	if (messages.length > 1) {
+		msgIndex = Math.random() * messages.length | 0;
+		timer = setInterval(() => {
+			msgIndex = (msgIndex + 1) % messages.length;
+		}, T);
+	} else {
+		msgIndex = 0;
+	}
+	return () => {
+		anims.forEach((a) => a.cancel());
+		if (timer) {
+			clearInterval(timer);
+		}
+	};
+});
+</script>
+
+<div
+	bind:this={rootRef}
+	class="flowms-loader"
+	role="status"
+	aria-live="polite"
+	aria-label={label}
+>
+	<svg
+		width="0"
+		height="0"
+		style="position:absolute"
+		aria-hidden="true"
+	>
+		<filter
+			id="flowms-stamp"
+			x="-15%"
+			y="-15%"
+			width="130%"
+			height="130%"
+		>
+			<feTurbulence
+				type="fractalNoise"
+				baseFrequency="0.03 0.045"
+				numOctaves="3"
+				seed="6"
+				result="warp"
+			/>
+			<feDisplacementMap
+				in="SourceGraphic"
+				in2="warp"
+				scale="3.4"
+				xChannelSelector="R"
+				yChannelSelector="G"
+				result="rough"
+			/>
+			<feTurbulence
+				type="fractalNoise"
+				baseFrequency="0.5 0.55"
+				numOctaves="2"
+				seed="11"
+				result="grain"
+			/>
+			<feColorMatrix
+				in="grain"
+				type="matrix"
+				values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.3 0 0 0 0.05"
+				result="grainA"
+			/>
+			<feComposite
+				in="rough"
+				in2="grainA"
+				operator="in"
+			/>
+		</filter>
+	</svg>
+
+	<div class="scene">
+		<div class="shadow"></div>
+		<div
+			bind:this={boxRef}
+			class="box"
+		>
+			<div class="face back"></div>
+			<div class="face left">
+				<svg
+					class="flo-logo"
+					viewBox="0 0 172 300"
+					xmlns="http://www.w3.org/2000/svg"
+					aria-hidden="true"
+				>
+					<path
+						d="M1.54715 179.524C4.94675 176.764 11.6045 178.966 13.4335 180.132L13.44 180.125L29.0209 188.966L25.7231 191.604C13.44 200.508 18.7976 216.338 37.1425 217.942L54.0844 219.353L56.3929 219.471V268.062C56.3929 269.123 55.7069 270.574 54.5791 271.201L54.2886 271.366L5.44142 299.569C2.62507 300.967 0 298.711 0 296.429V185.886C0 183.535 0.318398 180.522 1.54715 179.524Z"
+					/>
+					<path
+						d="M62.3754 133.49C66.3328 131.155 71.4576 130.799 76.0086 133.424L111.784 154.082L128.952 144.169C130.963 143.008 133.536 144.01 134.228 146.226L153.092 206.478V206.498L153.099 206.517C153.547 208.845 151.674 210.976 149.306 210.818L56.3865 204.855V204.861L39.0593 203.747C35.4781 203.516 34.3703 198.78 37.4768 196.986L55.4036 186.632L19.0811 165.703L19.0746 165.71C17.3158 164.58 12.8616 162.913 7.58502 165.222L62.3754 133.477V133.49Z"
+					/>
+					<path
+						d="M19.2923 34.575C10.3024 29.1402 0 35.2873 0 45.7151V145.85C0 148.133 2.98124 150.626 5.44142 148.99L54.5725 120.622C55.4893 120.094 56.3863 118.544 56.3863 117.483V55.6152L19.2923 34.5816V34.575Z"
+					/>
+					<path
+						d="M61.9664 2.15088C65.9765 -0.408228 71.2992 -0.890029 76.0085 1.83397L170.036 52.5942C173.393 54.5333 172.147 59.361 167.992 59.3618L167.813 59.3483L132.375 60.3248C130.264 60.3248 129.605 62.329 129.229 64.2422L125.357 84.5503C124.658 88.3819 123.135 90.4663 120.252 88.956L56.3864 55.6215V55.615L19.2923 34.5817C17.5446 33.3614 12.7433 31.4565 7.51929 33.5988L61.9664 2.15088Z"
+					/>
+				</svg>
+			</div>
+			<div class="face right">
+				<svg
+					class="flo-logo"
+					viewBox="0 0 172 300"
+					xmlns="http://www.w3.org/2000/svg"
+					aria-hidden="true"
+				>
+					<path
+						d="M1.54715 179.524C4.94675 176.764 11.6045 178.966 13.4335 180.132L13.44 180.125L29.0209 188.966L25.7231 191.604C13.44 200.508 18.7976 216.338 37.1425 217.942L54.0844 219.353L56.3929 219.471V268.062C56.3929 269.123 55.7069 270.574 54.5791 271.201L54.2886 271.366L5.44142 299.569C2.62507 300.967 0 298.711 0 296.429V185.886C0 183.535 0.318398 180.522 1.54715 179.524Z"
+					/>
+					<path
+						d="M62.3754 133.49C66.3328 131.155 71.4576 130.799 76.0086 133.424L111.784 154.082L128.952 144.169C130.963 143.008 133.536 144.01 134.228 146.226L153.092 206.478V206.498L153.099 206.517C153.547 208.845 151.674 210.976 149.306 210.818L56.3865 204.855V204.861L39.0593 203.747C35.4781 203.516 34.3703 198.78 37.4768 196.986L55.4036 186.632L19.0811 165.703L19.0746 165.71C17.3158 164.58 12.8616 162.913 7.58502 165.222L62.3754 133.477V133.49Z"
+					/>
+					<path
+						d="M19.2923 34.575C10.3024 29.1402 0 35.2873 0 45.7151V145.85C0 148.133 2.98124 150.626 5.44142 148.99L54.5725 120.622C55.4893 120.094 56.3863 118.544 56.3863 117.483V55.6152L19.2923 34.5816V34.575Z"
+					/>
+					<path
+						d="M61.9664 2.15088C65.9765 -0.408228 71.2992 -0.890029 76.0085 1.83397L170.036 52.5942C173.393 54.5333 172.147 59.361 167.992 59.3618L167.813 59.3483L132.375 60.3248C130.264 60.3248 129.605 62.329 129.229 64.2422L125.357 84.5503C124.658 88.3819 123.135 90.4663 120.252 88.956L56.3864 55.6215V55.615L19.2923 34.5817C17.5446 33.3614 12.7433 31.4565 7.51929 33.5988L61.9664 2.15088Z"
+					/>
+				</svg>
+			</div>
+			<div class="face floor"></div>
+			<div class="face front">
+				<div class="label-wrap">
+					<div class="label">Goods<br />Loading</div>
+				</div>
+			</div>
+
+			<div class="vent">
+				<div
+					bind:this={glowRef}
+					class="glow"
+				></div>
+				{#each fills as _fill, i (i)}
+					<span
+						bind:this={fillRefs[i]}
+						class="fill"
+					></span>
+				{/each}
+			</div>
+
+			<div class="flap-unit s0 outer">
+				<div
+					bind:this={s0pivot}
+					class="flap-pivot"
+				>
+					<div class="flap-panel">
+						<div class="flap-face out"></div>
+						<div class="flap-face in"></div>
+					</div>
+				</div>
+			</div>
+			<div class="flap-unit s2 outer">
+				<div
+					bind:this={s2pivot}
+					class="flap-pivot"
+				>
+					<div class="flap-panel">
+						<div class="flap-face out"></div>
+						<div class="flap-face in">
+							{#if messages.length}
+								<div class="flap-msg">{messages[msgIndex] ?? ''}</div>
+							{/if}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="flap-unit s1 inner">
+				<div
+					bind:this={s1pivot}
+					class="flap-pivot"
+				>
+					<div class="flap-panel">
+						<div class="flap-face out"></div>
+						<div class="flap-face in"></div>
+					</div>
+				</div>
+			</div>
+			<div class="flap-unit s3 inner">
+				<div
+					bind:this={s3pivot}
+					class="flap-pivot"
+				>
+					<div class="flap-panel">
+						<div class="flap-face out"></div>
+						<div class="flap-face in"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+	</div>
+
+	<!-- Letters live in their own perspective stage, drawn after (above) the box,
+	     so they erupt from the opening and land in front of everything. -->
+	<div class="letterstage">
+		<div class="l3d">
+			{#each geom.letters as letter, i (i)}
+				<span
+					bind:this={letterRefs[i]}
+					class="letter"
+					style="font-size:{geom.fontSize}px"
+				>
+					{#each letter.layers as layer, k (k)}
+						<span
+							class="lyr"
+							style="transform:{layer.transform};color:{layer.color}"
+							>{letter.glyph}</span
+						>
+					{/each}
+					<span
+						class="lface"
+						style="transform:translate(-50%,-50%);color:{letterFace}"
+						>{letter.glyph}</span
+					>
+				</span>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Caption sits above the box and is the loader's last child, so it is never
+	     hidden by the erupting letters. The dots are three always-present spans
+	     whose opacity cycles, so the pill width stays fixed as they animate. -->
+	{#if showText}
+		<div class="caption">
+			<span class="caption-label">{captionText}</span><span
+				class="caption-dots"
+				aria-hidden="true"><span>.</span><span>.</span><span>.</span></span
+			>
+		</div>
+	{/if}
+</div>
+
 <style>@charset "UTF-8";
 .flowms-loader {
   --w: 120px; /* footprint width / depth (square) */
@@ -1201,4 +1137,4 @@
   66%, 100% {
     opacity: 1;
   }
-}</style>
+}</style>