@lavalogic/scoria 0.40.9 → 0.40.11

package/dist/Components/LoadingAnimation.svelte

@@ -1,131 +1,1189 @@
 <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;
+	}
+	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 [154, 160, 166];
+	}
+	function mixRGB(
+		a: [number, number, number],
+		b: [number, number, number],
+		t: number
+	): [number, number, number] {
+		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: [number, number, number]): string {
+		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: 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));
+	}
+</script>
+
 <script lang="ts">
-	import { loadingText } from '../Helpers/Helpers.svelte.js';
 	import type { LoadingAnimationProps } from './LoadingAnimationProps.js';
 
-	const { showText = true, label = 'Loading' }: LoadingAnimationProps = $props();
+	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.
+	const word = $derived((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;
+		}
+
+		// 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;
+		}
+
+		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[] = [
+			{
+				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)' },
+		];
+		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));
+			}
+		});
+		[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: 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(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) * 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));
+		});
+
+		// 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
+				)
+			);
+		});
+
+		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;
+		}
+
+		return () => {
+			anims.forEach((a) => a.cancel());
+			if (timer) {
+				clearInterval(timer);
+			}
+		};
+	});
 </script>
 
 <div
-	class="container"
+	bind:this={rootRef}
+	class="flowms-loader"
 	role="status"
 	aria-live="polite"
 	aria-label={label}
 >
-	<div id="cube">
-		<div class="front"></div>
-		<div class="front">
-			{#if showText}<span>{loadingText}</span>{/if}
+	<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 class="back"></div>
-		<div class="right"></div>
-		<div class="left"></div>
-		<div class="top"></div>
-		<div class="bottom"></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>.container {
-  width: var(--loading-animation-size, 100px);
-  height: var(--loading-animation-size, 100px);
+<style>@charset "UTF-8";
+.flowms-loader {
+  --w: 120px; /* footprint width / depth (square) */
+  --d: 120px;
+  --h: 110px; /* box height */
+  --open: 130deg; /* how far the flaps splay open */
+  --kraft-front: #cda770;
+  --kraft-side: #b8915a;
+  --kraft-back: #ab8650;
+  --kraft-flap: #d4af77;
+  --kraft-flap2: #c6a065;
+  --kraft-inner: #8a6b43;
+  --seam: rgba(0, 0, 0, 0.14);
+  --ink: #3c4045;
+  /* subtle white confetti — shades of white/off-white */
+  --fill-1: #ffffff;
+  --fill-2: #eef1f4;
+  --fill-3: #f8fafb;
+  --fill-4: #e2e7ec;
+  --fill-5: #fbfcfd;
+  --hw: calc(var(--w) / 2);
+  --hd: calc(var(--d) / 2);
+  --hh: calc(var(--h) / 2);
+  --y-outer: calc(var(--hh) * -1 + 0.5px);
+  --y-inner: calc(var(--hh) * -1 + 1.5px);
+  /* Push the box (and its letters) down within the footprint so the caption
+     pill has clear headroom above the opened flaps. */
+  --stage-shift: 40px;
+  display: grid;
+  place-items: center;
   position: relative;
-  perspective: 1000px;
+  width: 300px;
+  height: 300px;
 }
-.container #cube {
-  width: 100%;
-  height: 100%;
-  position: absolute;
+.flowms-loader .scene {
+  width: var(--w);
+  height: var(--h);
+  translate: 0 var(--stage-shift);
+  perspective: 820px;
+  perspective-origin: 50% 40%;
   transform-style: preserve-3d;
+  position: relative;
+}
+.flowms-loader .shadow {
+  position: absolute;
+  left: 50%;
+  top: calc(50% + var(--hh) + 24px);
+  width: calc(var(--w) * 1.1);
+  height: 22px;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
+  border-radius: 50%;
 }
 @media (prefers-reduced-motion: no-preference) {
-  .container #cube {
-    animation: rotatecube 10s infinite;
+  .flowms-loader .shadow {
+    animation: flowms-shadow 4.2s ease-in-out infinite;
   }
 }
-.container #cube div {
-  width: var(--loading-animation-size, 100px);
-  height: var(--loading-animation-size, 100px);
-  display: block;
+.flowms-loader .box {
   position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+}
+.flowms-loader .face {
+  position: absolute;
+  top: 50%;
+  left: 50%;
   box-sizing: border-box;
-  border: 1px solid rgba(120, 110, 95, 0.45);
+  backface-visibility: visible;
+  transform-style: preserve-3d;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 0 18px rgba(0, 0, 0, 0.14);
+}
+.flowms-loader .front {
+  width: var(--w);
+  height: var(--h);
+  margin-left: calc(var(--w) / -2);
+  margin-top: calc(var(--h) / -2);
+  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1333333333), rgba(0, 0, 0, 0.0941176471)), var(--kraft-front);
+  transform: translateZ(var(--hd));
+}
+.flowms-loader .back {
+  width: var(--w);
+  height: var(--h);
+  margin-left: calc(var(--w) / -2);
+  margin-top: calc(var(--h) / -2);
+  background: var(--kraft-back);
+  transform: rotateY(180deg) translateZ(var(--hd));
+}
+.flowms-loader .right {
+  width: var(--d);
+  height: var(--h);
+  margin-left: calc(var(--d) / -2);
+  margin-top: calc(var(--h) / -2);
+  background: linear-gradient(160deg, rgba(0, 0, 0, 0.062745098), rgba(0, 0, 0, 0.1882352941)), var(--kraft-side);
+  transform: rotateY(90deg) translateZ(var(--hw));
+}
+.flowms-loader .left {
+  width: var(--d);
+  height: var(--h);
+  margin-left: calc(var(--d) / -2);
+  margin-top: calc(var(--h) / -2);
+  background: linear-gradient(160deg, rgba(255, 255, 255, 0.0941176471), rgba(0, 0, 0, 0.1333333333)), var(--kraft-side);
+  transform: rotateY(-90deg) translateZ(var(--hw));
+}
+.flowms-loader .floor {
+  width: var(--w);
+  height: var(--d);
+  margin-left: calc(var(--w) / -2);
+  margin-top: calc(var(--d) / -2);
+  background: var(--kraft-inner);
+  transform: rotateX(-90deg) translateZ(var(--hh));
+}
+.flowms-loader {
+  /* stamped front label */
+}
+.flowms-loader .label-wrap {
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  transform: translate(-50%, -50%) translateZ(0.1px);
   backface-visibility: hidden;
-  line-height: 20px;
+  pointer-events: none;
+}
+.flowms-loader .label {
+  display: inline-block;
+  padding: 6px 12px 5px;
+  border: 3px solid var(--ink);
+  border-radius: 3px;
+  font: 800 15px/1.05 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  text-align: center;
+  white-space: nowrap;
+  color: var(--ink);
+  opacity: 0.72;
+  mix-blend-mode: multiply;
+  transform: rotate(-2.6deg);
+  filter: url(#flowms-stamp);
 }
-.container #cube div span {
+.flowms-loader {
+  /* positive message printed inside the rear flap */
+}
+.flowms-loader .flap-msg {
+  position: absolute;
+  inset: 0;
   display: flex;
-  height: 100%;
-  padding: 10px;
   align-items: center;
-  text-align: left;
-  font-size: 1rem;
-  font-weight: bold;
-  font-family: inherit;
-  color: #ffffff;
+  justify-content: center;
+  text-align: center;
+  padding: 4px 9px;
+  box-sizing: border-box;
+  font: 800 13px/1.14 "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+  color: var(--ink);
+  opacity: 0.8;
+  transform: rotate(180deg); /* reads upright on the inner face when open */
+  pointer-events: none;
 }
-
-@keyframes rotatecube {
-  0%, 10% {
-    transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
-  }
-  10%, 100% {
-    transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
-  }
-  35% {
-    transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg);
-  }
-  60% {
-    transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg);
-  }
-  85% {
-    transform: rotateX(-90deg) rotateY(90deg) rotateZ(0deg);
-  }
+.flowms-loader {
+  /* Flo logo embossed on the side faces */
 }
-.front {
-  background: rgba(216, 208, 199, 0.5);
+.flowms-loader .flo-logo {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  height: 56%;
+  transform: translate(-50%, -50%) translateZ(0.1px);
+  backface-visibility: hidden;
+  pointer-events: none;
+  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.38));
 }
-
-.back {
-  background: rgba(216, 208, 199, 0.5);
+.flowms-loader .flo-logo :global(path) {
+  fill: rgba(64, 45, 24, 0.16);
 }
-
-.right {
-  background: rgba(216, 208, 199, 0.35);
+.flowms-loader {
+  /* ---- flaps ---- */
 }
-
-.left {
-  background: rgba(216, 208, 199, 0.35);
+.flowms-loader .flap-unit {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-style: preserve-3d;
 }
-
-.top {
-  background: rgba(216, 208, 199, 0.25);
+.flowms-loader .flap-unit.s0 {
+  transform: rotateY(0deg) translateY(var(--y-outer)) translateZ(var(--hw));
 }
-
-.bottom {
-  background: rgba(216, 208, 199, 0.75);
+.flowms-loader .flap-unit.s2 {
+  transform: rotateY(180deg) translateY(var(--y-outer)) translateZ(var(--hw));
 }
-
-#cube .front {
-  transform: rotateY(0deg) translateZ(50px);
+.flowms-loader .flap-unit.s1 {
+  transform: rotateY(90deg) translateY(var(--y-inner)) translateZ(var(--hw));
 }
-
-#cube .back {
-  transform: rotateX(180deg) translateZ(50px);
+.flowms-loader .flap-unit.s3 {
+  transform: rotateY(270deg) translateY(var(--y-inner)) translateZ(var(--hw));
 }
-
-#cube .right {
-  transform: rotateY(90deg) translateZ(50px);
+.flowms-loader .flap-pivot {
+  transform-style: preserve-3d;
+  transform-origin: 0 0;
 }
-
-#cube .left {
-  transform: rotateY(-90deg) translateZ(50px);
+.flowms-loader .flap-panel {
+  position: absolute;
+  width: var(--w);
+  height: var(--hw);
+  margin-left: calc(var(--w) / -2);
+  transform-origin: 50% 0;
+  transform: rotateX(-90deg);
+  transform-style: preserve-3d;
 }
-
-#cube .top {
-  transform: rotateX(90deg) translateZ(50px);
+.flowms-loader .flap-face {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  backface-visibility: hidden;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
+}
+.flowms-loader .flap-face.out {
+  transform: rotateY(180deg) translateZ(0.4px);
+  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1490196078), rgba(0, 0, 0, 0.1098039216)), var(--kraft-flap);
+}
+.flowms-loader .flap-face.in {
+  transform: translateZ(0.4px);
+  background: linear-gradient(160deg, rgba(0, 0, 0, 0.0862745098), rgba(0, 0, 0, 0.1568627451)), var(--kraft-flap2);
+}
+.flowms-loader .flap-unit.outer .flap-face.out::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 8px;
+  background: var(--seam);
+}
+.flowms-loader {
+  /* eruption vent */
+}
+.flowms-loader .vent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-style: preserve-3d;
+  transform: translateY(calc(var(--hh) * -1));
+}
+.flowms-loader .glow {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 96px;
+  height: 96px;
+  margin-left: -48px;
+  margin-top: -48px;
+  border-radius: 50%;
+  opacity: 0;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0) 70%);
+}
+.flowms-loader .fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 13px;
+  height: 13px;
+  margin-left: -6.5px;
+  margin-top: -6.5px;
+  border-radius: 3px;
+  opacity: 0;
+  /* faint edge so the white pieces stay visible on light backgrounds */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+}
+.flowms-loader .fill:nth-child(5n+1) {
+  background: var(--fill-1);
+}
+.flowms-loader .fill:nth-child(5n+2) {
+  background: var(--fill-2);
+}
+.flowms-loader .fill:nth-child(5n+3) {
+  background: var(--fill-3);
+}
+.flowms-loader .fill:nth-child(5n+4) {
+  background: var(--fill-4);
+}
+.flowms-loader .fill:nth-child(5n+5) {
+  background: var(--fill-5);
+}
+.flowms-loader .fill:nth-child(3n) {
+  width: 9px;
+  height: 9px;
+  margin-left: -4.5px;
+  margin-top: -4.5px;
+  border-radius: 50%;
+}
+.flowms-loader {
+  /* 3D word letters: own perspective stage, sits in front of the box and
+     matches its resting angle. Drawn above the box, so letters land in front
+     of everything — never behind or through the front flap. */
+}
+.flowms-loader .letterstage {
+  position: absolute;
+  left: 50%;
+  top: calc(50% + var(--stage-shift)); /* track the shifted box */
+  width: var(--w);
+  height: var(--h);
+  transform: translate(-50%, -50%);
+  perspective: 820px;
+  perspective-origin: 50% 40%;
+  pointer-events: none;
+}
+.flowms-loader .l3d {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  transform: rotateX(-26deg) rotateY(-32deg); /* the box's resting angle */
+}
+.flowms-loader .letter {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transform-origin: 50% 50%;
+  transform-style: preserve-3d;
+  font-family: "Arial Black", "Helvetica Neue", system-ui, sans-serif;
+  font-weight: 900;
+  line-height: 1;
+  opacity: 0;
+}
+.flowms-loader .letter .lface,
+.flowms-loader .letter .lyr {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.flowms-loader {
+  /* Caption pill: sits above the box and on top of every other layer. */
+}
+.flowms-loader .caption {
+  position: absolute;
+  left: 50%;
+  top: 10px; /* sits in the headroom above the opened flaps */
+  transform: translateX(-50%);
+  white-space: nowrap;
+  padding: 7px 16px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: #44515a;
+  letter-spacing: 0.2px;
+}
+.flowms-loader {
+  /* Three always-present dots; only their opacity animates, so the pill never
+     reflows or changes width as they cycle. */
+}
+.flowms-loader .caption-dots {
+  display: inline-block;
+  text-align: left;
+}
+.flowms-loader .caption-dots span:nth-child(2),
+.flowms-loader .caption-dots span:nth-child(3) {
+  opacity: 1; /* shown when motion is reduced (static "...") */
+}
+@media (prefers-reduced-motion: no-preference) {
+  .flowms-loader .caption-dots span:nth-child(2) {
+    animation: flowms-dot2 1.5s infinite;
+  }
+  .flowms-loader .caption-dots span:nth-child(3) {
+    animation: flowms-dot3 1.5s infinite;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .flowms-loader .box {
+    animation: flowms-rest 2.4s ease-in-out infinite;
+  }
 }
 
-#cube .bottom {
-  transform: rotateX(-90deg) translateZ(50px);
+@keyframes flowms-shadow {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1, 1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(0.93, 1);
+    opacity: 0.45;
+  }
+}
+@keyframes flowms-rest {
+  0%, 100% {
+    transform: rotateX(-22deg) rotateY(-28deg);
+  }
+  50% {
+    transform: rotateX(-22deg) rotateY(-22deg);
+  }
+}
+/* Dots reveal in sequence (".", "..", "...") then reset — width never changes
+   because all three glyphs always occupy space; only opacity toggles. */
+@keyframes flowms-dot2 {
+  0%, 32.9% {
+    opacity: 0;
+  }
+  33%, 100% {
+    opacity: 1;
+  }
+}
+@keyframes flowms-dot3 {
+  0%, 65.9% {
+    opacity: 0;
+  }
+  66%, 100% {
+    opacity: 1;
+  }
 }</style>