feat(site): add AJ mascot celebrate jump pop-up and 2s checkmark animation on code copy

Author: codercatdev

apps/site/src/components/portable-text/PortableTextContent.astro

@@ -96,6 +96,32 @@ const components = {
 		}
 	}
 
+	const copyTimers = new WeakMap<HTMLElement, number>();
+
+	async function copyTextToClipboard(text: string): Promise<void> {
+		if (navigator.clipboard?.writeText) {
+			try {
+				await navigator.clipboard.writeText(text);
+				return;
+			} catch {
+				// Fall through to textarea copy fallback
+			}
+		}
+		const ta = document.createElement("textarea");
+		ta.value = text;
+		ta.setAttribute("readonly", "");
+		ta.style.position = "fixed";
+		ta.style.top = "-9999px";
+		ta.style.opacity = "0";
+		document.body.appendChild(ta);
+		ta.select();
+		try {
+			document.execCommand("copy");
+		} finally {
+			document.body.removeChild(ta);
+		}
+	}
+
 	document.addEventListener("click", (event) => {
 		const target = event.target;
 		if (!(target instanceof Element)) {
@@ -104,10 +130,67 @@ const components = {
 
 		const copy = target.closest<HTMLElement>("button.copy-code");
 		if (copy) {
-			const code = copy.dataset.code ?? "";
-			navigator.clipboard?.writeText(code).then(() => {
+			const figure = copy.closest<HTMLElement>("figure");
+			const code =
+				copy.dataset.code ||
+				figure?.querySelector("pre code")?.textContent ||
+				"";
+
+			copyTextToClipboard(code).finally(() => {
 				copy.classList.add("copied");
-				setTimeout(() => copy.classList.remove("copied"), 1500);
+				figure?.classList.add("is-copied");
+
+				// Trigger AJ Mascot Rig WAAPI Celebrate Jump Burst
+				const reducedMotion = window.matchMedia(
+					"(prefers-reduced-motion: reduce)",
+				).matches;
+				if (!reducedMotion && figure) {
+					const bodyRoot = figure.querySelector<SVGGElement>(".aj-body-root");
+					const earLeft =
+						figure.querySelector<SVGGElement>(".aj-bone-ear-left");
+					const earRight =
+						figure.querySelector<SVGGElement>(".aj-bone-ear-right");
+
+					bodyRoot?.animate?.(
+						[
+							{ transform: "translateY(0px) scale(1, 1)" },
+							{ transform: "translateY(10px) scale(1.06, 0.92)", offset: 0.18 },
+							{
+								transform: "translateY(-36px) scale(0.95, 1.07)",
+								offset: 0.52,
+							},
+							{ transform: "translateY(0px) scale(1, 1)" },
+						],
+						{ duration: 680, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+					);
+					earLeft?.animate?.(
+						[
+							{ transform: "rotate(0deg)" },
+							{ transform: "rotate(-16deg)" },
+							{ transform: "rotate(0deg)" },
+						],
+						{ duration: 520, easing: "ease-out" },
+					);
+					earRight?.animate?.(
+						[
+							{ transform: "rotate(0deg)" },
+							{ transform: "rotate(16deg)" },
+							{ transform: "rotate(0deg)" },
+						],
+						{ duration: 520, easing: "ease-out" },
+					);
+				}
+
+				const prevTimer = copyTimers.get(copy);
+				if (prevTimer) {
+					window.clearTimeout(prevTimer);
+				}
+				const timer = window.setTimeout(() => {
+					copy.classList.remove("copied");
+					figure?.classList.remove("is-copied");
+					copyTimers.delete(copy);
+				}, 2000);
+				copyTimers.set(copy, timer);
 			});
 			return;
 		}

apps/site/src/components/portable-text/PtCode.astro

@@ -2,6 +2,7 @@
 import { Code } from "astro:components";
 import { stegaClean } from "@sanity/client/stega";
 import type { Props as PtProps } from "astro-portabletext/types";
+import AjAnimatedMascot from "@/components/AjAnimatedMascot.astro";
 import ExcalidrawDiagram from "@/components/ExcalidrawDiagram.astro";
 import { normalizeLanguage } from "@/lib/code-languages";
 
@@ -40,21 +41,34 @@ const filename = node.filename;
 		/>
 	) : (
 		code && (
-			<figure class="not-prose duo-card group relative my-6 overflow-hidden">
-				{filename && (
-					<figcaption class="flex items-center justify-between border-b border-[#B4A7D6]/25 bg-[#0F172A] px-4 py-2.5 font-mono text-xs font-bold text-[#C5E86C]">
-						<span>📄 {filename}</span>
-						<span class="font-hand text-base text-[#B4A7D6]">{language}</span>
-					</figcaption>
-				)}
+			<figure class="code-block-figure not-prose duo-card group relative my-6 overflow-visible">
+				{/* AJ Mascot Rig Celebrate Jump Pop-Up on Copy */}
+				<div
+					class="copy-aj-popup pointer-events-none absolute -top-16 right-12 z-20 flex items-center gap-1.5 opacity-0 translate-y-6 scale-50 origin-bottom-right transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]"
+					aria-hidden="true"
+				>
+					<span class="-rotate-3 rounded-xl border-2 border-[#2A1155] bg-[#FEF08A] px-2.5 py-1 font-hand text-sm font-bold text-[#2A1155] shadow-sketch-sm whitespace-nowrap">
+						Copied! 🐾
+					</span>
+					<AjAnimatedMascot
+						state="celebrate"
+						variant="full-body"
+						angle="three-quarter-left"
+						mouth="smile-open"
+						cls="w-16 h-auto"
+						interactive={false}
+					/>
+				</div>
+
 				<button
 					type="button"
-					class="copy-code absolute right-3 top-2.5 z-10 inline-flex size-8 items-center justify-center rounded-lg border border-[#B4A7D6]/35 bg-[#1E293B] text-[#F8FAFC] opacity-0 transition-opacity focus-visible:opacity-100 group-hover:opacity-100 hover:border-[#C5E86C]"
+					class="copy-code absolute right-3 top-2.5 z-20 inline-flex size-8 cursor-pointer items-center justify-center rounded-lg border border-[#B4A7D6]/45 bg-[#1E293B]/95 text-[#F8FAFC] opacity-90 shadow-sm transition-all duration-200 focus-visible:opacity-100 group-hover:opacity-100 hover:border-[#C5E86C] hover:scale-105 active:scale-95"
 					data-code={code}
 					aria-label="Copy code"
+					title="Copy code to clipboard"
 				>
 					<svg
-						class="size-4"
+						class="copy-icon-clipboard size-4 transition-all duration-200 ease-out"
 						viewBox="0 0 24 24"
 						fill="none"
 						stroke="currentColor"
@@ -66,16 +80,37 @@ const filename = node.filename;
 						<rect x="9" y="9" width="13" height="13" rx="2" />
 						<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
 					</svg>
+					<svg
+						class="copy-icon-check absolute size-4 scale-0 -rotate-45 opacity-0 text-[#86EFAC] transition-all duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)]"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2.75"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<polyline points="20 6 9 17 4 12" />
+					</svg>
 				</button>
-				<Code
-					code={code}
-					lang={language}
-					themes={{ light: "github-light", dark: "github-dark" }}
-					class:list={[
-						"overflow-x-auto p-4 text-sm",
-						filename ? "rounded-b-xl" : "rounded-xl",
-					]}
-				/>
+
+				<div class="overflow-hidden rounded-[calc(1.5rem-2px)]">
+					{filename && (
+						<figcaption class="flex items-center justify-between border-b border-[#B4A7D6]/25 bg-[#0F172A] px-4 py-2.5 pr-14 font-mono text-xs font-bold text-[#C5E86C]">
+							<span>📄 {filename}</span>
+							<span class="font-hand text-base text-[#B4A7D6]">{language}</span>
+						</figcaption>
+					)}
+					<Code
+						code={code}
+						lang={language}
+						themes={{ light: "github-light", dark: "github-dark" }}
+						class:list={[
+							"overflow-x-auto p-4 text-sm",
+							filename ? "rounded-b-xl" : "rounded-xl",
+						]}
+					/>
+				</div>
 			</figure>
 		)
 	)

apps/site/src/styles/global.css

@@ -224,11 +224,13 @@
  * Tactile 3D Buttons (Dual-Theme: #2A1155 -> #7C3AED in Light Mode, #7C3AED with #4C1D95 lip in Dark Mode)
  */
 .tactile-btn:not([hidden]):not(.hidden),
+.tactile-btn-secondary:not([hidden]):not(.hidden),
 .duo-btn:not([hidden]):not(.hidden) {
 	display: inline-flex;
 }
 
 .tactile-btn,
+.tactile-btn-secondary,
 .duo-btn {
 	align-items: center;
 	justify-content: center;
@@ -247,6 +249,7 @@
 }
 
 .tactile-btn:focus-visible,
+.tactile-btn-secondary:focus-visible,
 .duo-btn:focus-visible {
 	outline: none;
 	box-shadow:
@@ -316,7 +319,8 @@
 		0 4px 10px rgba(124, 58, 237, 0.3);
 }
 
-/* Secondary / Outline Sketch Pill Button ("Watch Teardowns", "All Episodes") */
+/* Secondary / Outline Sketch Pill Button */
+.tactile-btn-secondary,
 .duo-btn-blue,
 .cc-btn-purple,
 .duo-btn-outline,
@@ -328,6 +332,7 @@
 	box-shadow: 3px 4px 0px 0px #2a1155;
 }
 
+.tactile-btn-secondary:hover,
 .duo-btn-blue:hover,
 .cc-btn-purple:hover,
 .duo-btn-outline:hover,
@@ -339,9 +344,21 @@
 	box-shadow: 5px 6px 0px 0px #2a1155;
 }
 
+.tactile-btn-secondary:active,
+.duo-btn-blue:active,
+.cc-btn-purple:active,
+.duo-btn-outline:active,
+.cc-btn-outline:active,
+.cc-btn-lavender:active {
+	transform: translateY(2px);
+	box-shadow: 1px 2px 0px 0px #2a1155;
+}
+
+:root.dark .tactile-btn-secondary,
 :root.dark .duo-btn-blue,
 :root.dark .cc-btn-purple,
 :root.dark .duo-btn-outline,
+:root.dark .duo-btn-outline,
 :root.dark .cc-btn-outline,
 :root.dark .cc-btn-lavender {
 	background-color: #131b2e;
@@ -350,6 +367,7 @@
 	box-shadow: 3px 4px 0px 0px rgba(0, 0, 0, 0.75);
 }
 
+:root.dark .tactile-btn-secondary:hover,
 :root.dark .duo-btn-blue:hover,
 :root.dark .cc-btn-purple:hover,
 :root.dark .duo-btn-outline:hover,
@@ -510,17 +528,26 @@
 }
 
 .copy-code.copied {
-	color: var(--primary);
+	border-color: #86efac !important;
+	background-color: #064e3b !important;
+	color: #86efac !important;
+	opacity: 1 !important;
+	box-shadow: 0 0 16px rgba(134, 239, 172, 0.45);
 }
 
-.copy-code.copied svg {
-	display: none;
+.copy-code.copied .copy-icon-clipboard {
+	transform: scale(0) rotate(45deg);
+	opacity: 0;
+}
+
+.copy-code.copied .copy-icon-check {
+	transform: scale(1) rotate(0deg);
+	opacity: 1;
 }
 
-.copy-code.copied::after {
-	content: "✓";
-	font-size: 0.875rem;
-	line-height: 1;
+.code-block-figure.is-copied .copy-aj-popup {
+	opacity: 1;
+	transform: translateY(0) scale(1);
 }
 
 /* Persistent Right-Side Resizable Ask Agent Drawer */