diff --git a/src-tauri/src/commands/avatars.rs b/src-tauri/src/commands/avatars.rs
index a0a0238ed..51c5454e0 100644
--- a/src-tauri/src/commands/avatars.rs
+++ b/src-tauri/src/commands/avatars.rs
@@ -137,6 +137,15 @@ pub struct CachedAvatar {
     pub asset: CachedAvatarAsset,
 }
 
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct CachedAvatarAnimation {
+    pub bytes: Vec<u8>,
+    pub mime_type: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub alpha_mode: Option<String>,
+}
+
 #[derive(Debug, Clone, Serialize)]
 #[serde(rename_all = "camelCase")]
 struct AvatarCacheWarmedPayload {
@@ -364,6 +373,46 @@ pub async fn get_avatar_library_snapshot(
     })
 }
 
+#[tauri::command]
+pub async fn read_cached_avatar_animation(
+    app: AppHandle,
+    avatar_ref: String,
+) -> Result<Option<CachedAvatarAnimation>, String> {
+    let cached = get_cached_avatar_for_ref(app, avatar_ref).await?;
+    let Some(cached) = cached else {
+        return Ok(None);
+    };
+    read_cached_avatar_animation_asset(cached.asset)
+}
+
+fn read_cached_avatar_animation_asset(
+    asset: CachedAvatarAsset,
+) -> Result<Option<CachedAvatarAnimation>, String> {
+    if !matches!(asset.mime_type.as_str(), "video/webm" | "video/mp4") {
+        return Ok(None);
+    }
+    let metadata = fs::metadata(&asset.path)
+        .map_err(|error| format!("Failed to inspect cached avatar animation: {error}"))?;
+    if metadata.len() == 0 || metadata.len() > MAX_IMPORTED_AVATAR_BYTES as u64 {
+        return Ok(None);
+    }
+    let bytes = fs::read(&asset.path)
+        .map_err(|error| format!("Failed to read cached avatar animation: {error}"))?;
+    // Recheck the actual payload after reading; metadata is only an early exit
+    // and the cache file could be replaced between the stat and read calls.
+    if bytes.is_empty() || bytes.len() > MAX_IMPORTED_AVATAR_BYTES {
+        return Ok(None);
+    }
+    if validate_imported_avatar_signature(&bytes, &asset.mime_type).is_err() {
+        return Ok(None);
+    }
+    Ok(Some(CachedAvatarAnimation {
+        bytes,
+        mime_type: asset.mime_type,
+        alpha_mode: asset.alpha_mode,
+    }))
+}
+
 #[tauri::command]
 pub async fn get_cached_avatar_for_ref(
     app: AppHandle,
@@ -2493,6 +2542,43 @@ mod tests {
         format!("data:video/webm;base64,{}", BASE64.encode(bytes))
     }
 
+    #[test]
+    fn cached_animation_reader_enforces_type_and_payload_bounds() {
+        let dir = tempfile::tempdir().unwrap();
+        let path = dir.path().join("avatar.webm");
+        fs::write(&path, WEBM_SIGNATURE).unwrap();
+        let asset = |mime_type: &str| CachedAvatarAsset {
+            id: "gloopy-1".to_string(),
+            path: path.to_string_lossy().into_owned(),
+            mime_type: mime_type.to_string(),
+            alpha_mode: Some("stacked".to_string()),
+            poster_path: None,
+        };
+
+        let animation = read_cached_avatar_animation_asset(asset("video/webm"))
+            .unwrap()
+            .unwrap();
+        assert_eq!(animation.bytes, WEBM_SIGNATURE);
+        assert_eq!(animation.mime_type, "video/webm");
+        assert_eq!(animation.alpha_mode.as_deref(), Some("stacked"));
+
+        assert!(read_cached_avatar_animation_asset(asset("image/png"))
+            .unwrap()
+            .is_none());
+        fs::write(&path, b"not webm").unwrap();
+        assert!(read_cached_avatar_animation_asset(asset("video/webm"))
+            .unwrap()
+            .is_none());
+        fs::write(&path, []).unwrap();
+        assert!(read_cached_avatar_animation_asset(asset("video/webm"))
+            .unwrap()
+            .is_none());
+        fs::write(&path, vec![0; MAX_IMPORTED_AVATAR_BYTES + 1]).unwrap();
+        assert!(read_cached_avatar_animation_asset(asset("video/webm"))
+            .unwrap()
+            .is_none());
+    }
+
     #[test]
     fn imported_avatar_limit_accounts_for_base64_padding_exactly() {
         for size in [MAX_IMPORTED_AVATAR_BYTES - 1, MAX_IMPORTED_AVATAR_BYTES] {
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index e4a701541..a92eea183 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -433,6 +433,7 @@ pub fn run() {
             commands::avatars::refresh_avatar_cache,
             commands::avatars::get_cached_avatar_for_ref,
             commands::avatars::get_cached_avatars_for_refs,
+            commands::avatars::read_cached_avatar_animation,
             commands::avatars::import_user_avatar_data_url,
             commands::avatars::delete_user_avatar,
             commands::cache::clear_local_media_caches,
diff --git a/src/features/agents/agent-snapshot/pngCodec.test.ts b/src/features/agents/agent-snapshot/pngCodec.test.ts
index fba2bf34d..fcf316259 100644
--- a/src/features/agents/agent-snapshot/pngCodec.test.ts
+++ b/src/features/agents/agent-snapshot/pngCodec.test.ts
@@ -5,6 +5,7 @@ import {
   decodeAgentImage,
   decodeAvatarAnimation,
   encodeAgentImage,
+  getPngDimensions,
 } from "./pngCodec";
 import {
   AgentSnapshotError,
@@ -112,6 +113,15 @@ function expectCode(
 }
 
 describe("buzz-agent-snapshot PNG codec", () => {
+  it("returns dimensions from a fully validated PNG", () => {
+    expect(getPngDimensions(pngWithDimensions(321, 654))).toEqual({
+      width: 321,
+      height: 654,
+    });
+    expect(() => getPngDimensions(Uint8Array.from([1, 2, 3]))).toThrow(
+      "Invalid PNG signature",
+    );
+  });
   it("round trips animated avatar bytes outside snapshot JSON", () => {
     const animation = {
       bytes: Uint8Array.from([26, 69, 223, 163]),
diff --git a/src/features/agents/agent-snapshot/pngCodec.ts b/src/features/agents/agent-snapshot/pngCodec.ts
index 17b343eae..26e237b87 100644
--- a/src/features/agents/agent-snapshot/pngCodec.ts
+++ b/src/features/agents/agent-snapshot/pngCodec.ts
@@ -60,6 +60,21 @@ function crc32(bytes: Uint8Array): number {
   return (crc ^ 0xffffffff) >>> 0;
 }
 
+export function getPngDimensions(bytes: Uint8Array): {
+  width: number;
+  height: number;
+} {
+  const chunks = parseChunks(bytes);
+  const ihdr = chunks[0];
+  if (!ihdr || ihdr.type !== "IHDR") {
+    throw new AgentSnapshotError("PNG must begin with IHDR", "invalid-png");
+  }
+  return {
+    width: readU32(ihdr.data, 0),
+    height: readU32(ihdr.data, 4),
+  };
+}
+
 function parseChunks(bytes: Uint8Array): Chunk[] {
   if (bytes.length > MAX_SNAPSHOT_PNG_BYTES) {
     throw new AgentSnapshotError(
diff --git a/src/features/agents/assets/share-card/berd-card-logo.svg b/src/features/agents/assets/share-card/berd-card-logo.svg
new file mode 100644
index 000000000..760f14205
--- /dev/null
+++ b/src/features/agents/assets/share-card/berd-card-logo.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.9245 0C38.1754 4.32928e-06 40 1.82465 40 4.07546V35.9245C40 38.1754 38.1754 40 35.9245 40H4.07546C1.82465 40 3.36333e-06 38.1754 0 35.9245V4.07546C1.74671e-05 1.82465 1.82465 1.64985e-05 4.07546 0H35.9245ZM20.7125 9.12159C20.3191 8.72812 19.6811 8.72811 19.2876 9.12159L9.17085 19.2384C8.77738 19.6319 8.77738 20.2698 9.17085 20.6633L19.2876 30.7801C19.6811 31.1735 20.3191 31.1735 20.7125 30.7801L30.8293 20.6633C31.2228 20.2698 31.2228 19.6319 30.8293 19.2384L20.7125 9.12159ZM7.22926 4.03096C5.32339 4.03096 3.77835 5.57599 3.77835 7.48186C3.77836 9.38772 5.3234 10.9327 7.22926 10.9327C9.13511 10.9327 10.6801 9.38771 10.6801 7.48186C10.6801 5.576 9.13512 4.03097 7.22926 4.03096ZM32.771 4.03096C30.8651 4.03096 29.3201 5.57599 29.3201 7.48186C29.3201 9.38772 30.8651 10.9327 32.771 10.9327C34.6769 10.9327 36.2218 9.38771 36.2218 7.48186C36.2218 5.576 34.6769 4.03097 32.771 4.03096Z" fill="black"/>
+</svg>
diff --git a/src/features/agents/assets/share-card/card-foil.png b/src/features/agents/assets/share-card/card-foil.png
new file mode 100644
index 000000000..5cfe6fee8
Binary files /dev/null and b/src/features/agents/assets/share-card/card-foil.png differ
diff --git a/src/features/agents/ui/AgentImageImportDialog.tsx b/src/features/agents/ui/AgentImageImportDialog.tsx
index 1b6d52530..361abbfe8 100644
--- a/src/features/agents/ui/AgentImageImportDialog.tsx
+++ b/src/features/agents/ui/AgentImageImportDialog.tsx
@@ -237,7 +237,7 @@ export function AgentImageImportDialog({
       <DialogContent
         size="lg"
         surface="solid"
-        className="bg-card"
+        className="bg-card [&_[data-slot=dialog-close]]:z-20"
         aria-describedby={undefined}
       >
         <DialogHeader
diff --git a/src/features/agents/ui/AgentImportDialog.tsx b/src/features/agents/ui/AgentImportDialog.tsx
index 5b17ffaba..b1dfa5707 100644
--- a/src/features/agents/ui/AgentImportDialog.tsx
+++ b/src/features/agents/ui/AgentImportDialog.tsx
@@ -1,15 +1,17 @@
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import { useEffect, useState } from "react";
 import { IconPhotoPlus, IconUpload } from "@tabler/icons-react";
-import { motion, useReducedMotion } from "motion/react";
+
 import { useTranslation } from "react-i18next";
 import type { PersonaImportPreview } from "@/shared/api/agents";
 import type { SnapshotV1 } from "@/features/agents/agent-snapshot";
 import { AgentShareCardPreview } from "@/features/agents/ui/share-card/AgentShareCardPreview";
+import { HolographicAgentCard } from "@/features/agents/ui/share-card/HolographicAgentCard";
+import { AgentCardReveal } from "@/features/agents/ui/share-card/AgentCardReveal";
+import { resolveAgentShareCardCopy } from "@/features/agents/ui/share-card/agentShareCardCopy";
 import {
-  HolographicAgentCard,
-  holographicCardPresets,
-} from "@/features/agents/ui/share-card/HolographicAgentCard";
+  fallbackAgentCardColor,
+  sampleAgentAvatarColor,
+} from "@/features/agents/ui/share-card/agentCardColor";
 
 import { cn } from "@/shared/lib/cn";
 import { useFileImportZone } from "@/shared/hooks/useFileImportZone";
@@ -28,39 +30,10 @@ import {
 
 export interface AgentImportPreview extends PersonaImportPreview {
   cardImageUrl?: string;
+  cardAspectRatio?: number;
   snapshot?: SnapshotV1;
 }
 
-const REFRACTION_LOBES = [
-  {
-    x: -18,
-    y: -10,
-    rotate: -12,
-    scaleX: 1.15,
-    scaleY: 0.72,
-    delay: 0,
-    color: "rgba(100, 220, 255, 0.52)",
-  },
-  {
-    x: 20,
-    y: 4,
-    rotate: 24,
-    scaleX: 0.82,
-    scaleY: 1.08,
-    delay: 0.05,
-    color: "rgba(239, 112, 255, 0.4)",
-  },
-  {
-    x: -2,
-    y: 18,
-    rotate: 8,
-    scaleX: 1.02,
-    scaleY: 0.76,
-    delay: 0.1,
-    color: "rgba(255, 218, 92, 0.34)",
-  },
-] as const;
-
 interface AgentImportDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -91,13 +64,11 @@ export function AgentImportDialog({
   maxImportBytes,
   importTooLargeMessage,
 }: AgentImportDialogProps) {
-  const { t } = useTranslation("agents");
-  const shouldReduceMotion = useReducedMotion();
-  const cardRef = useRef<HTMLDivElement>(null);
-  const [refractionOrigin, setRefractionOrigin] = useState<{
-    x: number;
-    y: number;
-  } | null>(null);
+  const { t, i18n } = useTranslation("agents");
+  const locale = i18n?.resolvedLanguage ?? i18n?.language ?? "en";
+  const [importAccentColor, setImportAccentColor] = useState<string | null>(
+    null,
+  );
   const [prepared, setPrepared] = useState<{
     bytes: Uint8Array;
     name: string;
@@ -108,6 +79,34 @@ export function AgentImportDialog({
     if (!open) setPrepared(null);
   }, [open]);
 
+  useEffect(() => {
+    if (!prepared?.preview.cardImageUrl) {
+      setImportAccentColor(null);
+      return;
+    }
+    const fallbackColor = fallbackAgentCardColor(prepared.preview.identity);
+    setImportAccentColor(fallbackColor);
+    const avatarSrc = prepared.preview.avatar;
+    if (!avatarSrc) return;
+
+    let active = true;
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.onload = () => {
+      const sampled = sampleAgentAvatarColor(image);
+      if (active && sampled) setImportAccentColor(sampled);
+    };
+    image.onerror = () => {
+      if (active) setImportAccentColor(fallbackColor);
+    };
+    image.src = avatarSrc;
+    return () => {
+      active = false;
+      image.onload = null;
+      image.onerror = null;
+    };
+  }, [prepared]);
+
   useEffect(
     () => () => {
       if (prepared?.preview.cardImageUrl) {
@@ -117,16 +116,6 @@ export function AgentImportDialog({
     [prepared?.preview.cardImageUrl],
   );
 
-  useLayoutEffect(() => {
-    if (!prepared) return;
-    const bounds = cardRef.current?.getBoundingClientRect();
-    if (!bounds) return;
-    setRefractionOrigin({
-      x: bounds.left + bounds.width / 2,
-      y: bounds.top + bounds.height / 2,
-    });
-  }, [prepared]);
-
   const {
     fileInputRef,
     isDragOver,
@@ -152,34 +141,39 @@ export function AgentImportDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent size="md" surface="solid" className="bg-card">
+      <DialogContent
+        size="md"
+        surface="solid"
+        className={cn(
+          "bg-card",
+          prepared &&
+            "overflow-visible has-data-[slot=dialog-body]:overflow-visible",
+        )}
+      >
         <DialogHeader>
           <DialogTitle>{t("importDialog.title")}</DialogTitle>
           <DialogDescription>{t("importDialog.description")}</DialogDescription>
         </DialogHeader>
-        <DialogBody>
+        <DialogBody className={prepared ? "overflow-visible" : undefined}>
           {prepared ? (
-            <div className="relative mx-auto w-full max-w-[18rem] py-6 [perspective:1200px]">
-              <motion.div
-                ref={cardRef}
-                key={prepared.name}
-                initial={
-                  shouldReduceMotion
-                    ? { opacity: 0 }
-                    : { opacity: 0, rotateY: -105, scale: 0.86 }
-                }
-                animate={{ opacity: 1, rotateY: 0, scale: 1 }}
-                transition={
-                  shouldReduceMotion
-                    ? { duration: 0 }
-                    : { duration: 0.45, ease: [0.22, 1, 0.36, 1] }
-                }
-                className="relative [transform-style:preserve-3d]"
+            <div className="relative flex justify-center py-2 [perspective:1200px]">
+              <AgentCardReveal
+                identity={[
+                  prepared.name,
+                  prepared.preview.identity,
+                  prepared.preview.displayName,
+                  prepared.preview.systemPrompt,
+                  prepared.preview.cardImageUrl,
+                ].join("\0")}
               >
                 {prepared.preview.cardImageUrl ? (
                   <HolographicAgentCard
                     src={prepared.preview.cardImageUrl}
-                    settings={holographicCardPresets.rainbowPrism}
+                    aspectRatio={prepared.preview.cardAspectRatio}
+                    containArtwork
+                    shadowColor={importAccentColor ?? undefined}
+                    tintColor={importAccentColor ?? undefined}
+                    frameOnly
                     alt={t("importDialog.previewAlt", {
                       name: prepared.preview.displayName,
                     })}
@@ -193,71 +187,14 @@ export function AgentImportDialog({
                     alt={t("importDialog.previewAlt", {
                       name: prepared.preview.displayName,
                     })}
+                    copy={resolveAgentShareCardCopy(
+                      prepared.preview.systemPrompt,
+                      t,
+                    )}
+                    locale={locale}
                   />
                 )}
-              </motion.div>
-              {!shouldReduceMotion &&
-                refractionOrigin &&
-                createPortal(
-                  <div
-                    aria-hidden="true"
-                    className="pointer-events-none fixed inset-0 z-[100]"
-                    style={{
-                      WebkitMaskImage: `radial-gradient(ellipse 154px 211px at ${refractionOrigin.x}px ${refractionOrigin.y}px, transparent 0%, transparent 94%, black 100%)`,
-                      maskImage: `radial-gradient(ellipse 154px 211px at ${refractionOrigin.x}px ${refractionOrigin.y}px, transparent 0%, transparent 94%, black 100%)`,
-                    }}
-                  >
-                    {REFRACTION_LOBES.map((lobe, index) => {
-                      const duration = 1.4;
-                      const delay = 0;
-                      const ease = [0.65, 0, 0.35, 1] as const;
-
-                      return (
-                        <motion.div
-                          key={`${lobe.x}:${lobe.y}`}
-                          onAnimationComplete={() => {
-                            if (index === REFRACTION_LOBES.length - 1) {
-                              setRefractionOrigin(null);
-                            }
-                          }}
-                          initial={{
-                            opacity: 0,
-                            x: lobe.x * 0.3,
-                            y: lobe.y * 0.3,
-                            scaleX: lobe.scaleX * 0.78,
-                            scaleY: lobe.scaleY * 0.78,
-                            rotate: lobe.rotate - 5,
-                          }}
-                          animate={{
-                            opacity: [0, 0.58, 0.34, 0],
-                            x: [lobe.x * 0.3, lobe.x],
-                            y: [lobe.y * 0.3, lobe.y],
-                            scaleX: [lobe.scaleX * 0.78, lobe.scaleX],
-                            scaleY: [lobe.scaleY * 0.78, lobe.scaleY],
-                            rotate: [lobe.rotate - 5, lobe.rotate + 4],
-                          }}
-                          transition={{
-                            default: { duration, delay, ease },
-                            opacity: {
-                              duration,
-                              delay,
-                              times: [0, 0.16, 0.48, 1],
-                              ease: [0.45, 0, 0.55, 1],
-                            },
-                          }}
-                          className="absolute size-[42vmax] -translate-x-1/2 -translate-y-1/2 rounded-[44%] blur-xl"
-                          style={{
-                            left: refractionOrigin.x,
-                            top: refractionOrigin.y,
-                            background: `radial-gradient(ellipse, ${lobe.color} 0%, ${lobe.color} 24%, transparent 72%)`,
-                            boxShadow: `0 0 150px 85px ${lobe.color}`,
-                          }}
-                        />
-                      );
-                    })}
-                  </div>,
-                  document.body,
-                )}
+              </AgentCardReveal>
             </div>
           ) : (
             <div
diff --git a/src/features/agents/ui/AgentsView.tsx b/src/features/agents/ui/AgentsView.tsx
index aa6309366..0740602b9 100644
--- a/src/features/agents/ui/AgentsView.tsx
+++ b/src/features/agents/ui/AgentsView.tsx
@@ -31,6 +31,7 @@ import {
 import { saveExportedAgentFile } from "@/shared/api/system";
 import {
   decodeAgentImage,
+  getPngDimensions,
   MAX_SNAPSHOT_PNG_BYTES,
   type SnapshotV1,
 } from "@/features/agents/agent-snapshot";
@@ -48,6 +49,7 @@ import { canDeletePersona } from "@/features/agents/lib/personaPresentation";
 import { runAgentViewTransition } from "@/features/agents/lib/agentViewTransitions";
 import { deleteDraftAgentSession } from "@/features/agents/lib/agentBuilderSession";
 import type { AppNavigationUpdateOptions } from "@/app/types/appNavigation";
+import { isSafePngAvatarDataUrl } from "@/shared/lib/avatarUrl";
 
 function decodeImportFileBytes(fileBytes: Uint8Array): string {
   try {
@@ -450,6 +452,7 @@ export function AgentsView({
           prepareImport={(bytes, name) => {
             if (isAgentImageFileName(name)) {
               const snapshot = decodeAgentImage(bytes);
+              const { width, height } = getPngDimensions(bytes);
               return {
                 displayName:
                   snapshot.profile?.displayName ??
@@ -457,7 +460,13 @@ export function AgentsView({
                   "Imported agent",
                 systemPrompt: snapshot.definition.systemPrompt ?? "",
                 identity: name,
+                avatar:
+                  typeof snapshot.profile?.avatarDataUrl === "string" &&
+                  isSafePngAvatarDataUrl(snapshot.profile.avatarDataUrl)
+                    ? snapshot.profile.avatarDataUrl
+                    : undefined,
                 snapshot,
+                cardAspectRatio: width / height,
                 cardImageUrl: URL.createObjectURL(
                   new Blob([new Uint8Array(bytes).buffer], {
                     type: "image/png",
diff --git a/src/features/agents/ui/__tests__/AgentImageImportDialog.test.tsx b/src/features/agents/ui/__tests__/AgentImageImportDialog.test.tsx
index 3b8d57940..387ea337f 100644
--- a/src/features/agents/ui/__tests__/AgentImageImportDialog.test.tsx
+++ b/src/features/agents/ui/__tests__/AgentImageImportDialog.test.tsx
@@ -109,6 +109,22 @@ describe("AgentImageImportDialog", () => {
     expect(onConfirm).not.toHaveBeenCalled();
   });
 
+  it("closes from the dialog x button", async () => {
+    const onCancel = vi.fn();
+    render(
+      <AgentImageImportDialog
+        snapshot={snapshot()}
+        imageBytes={new Uint8Array([1])}
+        onCancel={onCancel}
+        onConfirm={vi.fn()}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "Close" }));
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
   it("does not persist when canceled", async () => {
     const onCancel = vi.fn();
     const onConfirm = vi.fn();
diff --git a/src/features/agents/ui/__tests__/AgentImportDialog.test.tsx b/src/features/agents/ui/__tests__/AgentImportDialog.test.tsx
index 697d13b85..5c2b3ba89 100644
--- a/src/features/agents/ui/__tests__/AgentImportDialog.test.tsx
+++ b/src/features/agents/ui/__tests__/AgentImportDialog.test.tsx
@@ -9,7 +9,10 @@ import { describe, expect, it, vi } from "vitest";
 import { AgentImportDialog } from "../AgentImportDialog";
 
 vi.mock("react-i18next", () => ({
-  useTranslation: () => ({ t: (key: string) => key }),
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { resolvedLanguage: "en", language: "en" },
+  }),
 }));
 
 vi.mock("motion/react", async (importOriginal) => {
@@ -40,6 +43,7 @@ describe("AgentImportDialog", () => {
           systemPrompt: "Review carefully.",
           identity: "agent.agent.png",
           cardImageUrl: "blob:card",
+          cardAspectRatio: 1 / 8192,
         })}
         validateImportFile={() => null}
         onImportError={vi.fn()}
@@ -53,7 +57,21 @@ describe("AgentImportDialog", () => {
     const image = await screen.findByRole("img", {
       name: "importDialog.previewAlt",
     });
-    const tiltSurface = image.parentElement as HTMLDivElement;
+    const tiltSurface = image.closest<HTMLDivElement>(
+      '[data-agent-card-surface="true"]',
+    ) as HTMLDivElement;
+    const reveal = tiltSurface.closest<HTMLDivElement>(
+      '[data-agent-card-reveal="true"]',
+    );
+    const revealContent = reveal?.querySelector<HTMLDivElement>(
+      '[data-agent-card-reveal-content="true"]',
+    );
+    expect(revealContent?.className).toContain("z-10");
+    expect(tiltSurface.style.aspectRatio).toBe("");
+    expect(image).toHaveClass("object-contain");
+    expect(
+      tiltSurface.querySelector('canvas[data-agent-card-frame-only="true"]'),
+    ).not.toBeNull();
     vi.spyOn(tiltSurface, "getBoundingClientRect").mockReturnValue({
       left: 0,
       top: 0,
diff --git a/src/features/agents/ui/share-card/AgentCardReveal.test.tsx b/src/features/agents/ui/share-card/AgentCardReveal.test.tsx
new file mode 100644
index 000000000..59095edc5
--- /dev/null
+++ b/src/features/agents/ui/share-card/AgentCardReveal.test.tsx
@@ -0,0 +1,93 @@
+import { act, render, screen } from "@testing-library/react";
+import type { ComponentPropsWithoutRef } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { AgentCardReveal } from "./AgentCardReveal";
+
+const motionMocks = vi.hoisted(() => ({
+  completions: [] as Array<() => void>,
+  reduced: false,
+}));
+
+vi.mock("motion/react", () => ({
+  useReducedMotion: () => motionMocks.reduced,
+  motion: {
+    div: ({
+      animate: _animate,
+      initial: _initial,
+      onAnimationComplete,
+      transition: _transition,
+      ...props
+    }: ComponentPropsWithoutRef<"div"> & {
+      animate?: unknown;
+      initial?: unknown;
+      onAnimationComplete?: () => void;
+      transition?: unknown;
+    }) => {
+      if (onAnimationComplete)
+        motionMocks.completions.push(onAnimationComplete);
+      return <div {...props} />;
+    },
+  },
+}));
+
+describe("AgentCardReveal", () => {
+  beforeEach(() => {
+    motionMocks.completions = [];
+    motionMocks.reduced = false;
+  });
+
+  it("keeps the completed refraction geometry mounted behind the card", () => {
+    render(
+      <AgentCardReveal identity="one">
+        <div>Card</div>
+      </AgentCardReveal>,
+    );
+
+    expect(screen.getByText("Card").parentElement).toHaveClass("z-10");
+    expect(
+      document.querySelector('[data-agent-card-refraction="true"]'),
+    ).toHaveClass("z-0");
+
+    act(() => motionMocks.completions.at(-1)?.());
+
+    expect(
+      document.querySelector('[data-agent-card-refraction="true"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("replays refraction when the card identity changes", () => {
+    const { rerender } = render(
+      <AgentCardReveal identity="one">
+        <div>Card</div>
+      </AgentCardReveal>,
+    );
+    const firstRefraction = document.querySelector(
+      '[data-agent-card-refraction="true"]',
+    );
+
+    rerender(
+      <AgentCardReveal identity="two">
+        <div>Card</div>
+      </AgentCardReveal>,
+    );
+
+    const secondRefraction = document.querySelector(
+      '[data-agent-card-refraction="true"]',
+    );
+    expect(secondRefraction).toBeInTheDocument();
+    expect(secondRefraction).not.toBe(firstRefraction);
+  });
+
+  it("omits refraction when reduced motion is preferred", () => {
+    motionMocks.reduced = true;
+    render(
+      <AgentCardReveal identity="one">
+        <div>Card</div>
+      </AgentCardReveal>,
+    );
+
+    expect(
+      document.querySelector('[data-agent-card-refraction="true"]'),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/src/features/agents/ui/share-card/AgentCardReveal.tsx b/src/features/agents/ui/share-card/AgentCardReveal.tsx
new file mode 100644
index 000000000..077df242e
--- /dev/null
+++ b/src/features/agents/ui/share-card/AgentCardReveal.tsx
@@ -0,0 +1,114 @@
+import type { ReactNode } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { cn } from "@/shared/lib/cn";
+
+const REFRACTION_LOBES = [
+  {
+    x: -18,
+    y: -10,
+    rotate: -12,
+    scaleX: 1.15,
+    scaleY: 0.72,
+    color: "rgba(100, 220, 255, 0.52)",
+  },
+  {
+    x: 20,
+    y: 4,
+    rotate: 24,
+    scaleX: 0.82,
+    scaleY: 1.08,
+    color: "rgba(239, 112, 255, 0.4)",
+  },
+  {
+    x: -2,
+    y: 18,
+    rotate: 8,
+    scaleX: 1.02,
+    scaleY: 0.76,
+    color: "rgba(255, 218, 92, 0.34)",
+  },
+] as const;
+
+interface AgentCardRevealProps {
+  children: ReactNode;
+  identity: string;
+  className?: string;
+}
+
+/** Shared entrance and refraction treatment for generated and imported cards. */
+export function AgentCardReveal({
+  children,
+  identity,
+  className,
+}: AgentCardRevealProps) {
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <div
+      data-agent-card-reveal="true"
+      className={cn(
+        "relative isolate w-full max-w-[min(22rem,calc((100dvh-18rem)*0.6667))] overflow-visible p-6 [transform-style:preserve-3d]",
+        className,
+      )}
+    >
+      {!shouldReduceMotion ? (
+        <div
+          key={`refraction:${identity}`}
+          aria-hidden="true"
+          data-agent-card-refraction="true"
+          className="pointer-events-none absolute inset-0 z-0"
+        >
+          {REFRACTION_LOBES.map((lobe) => (
+            <motion.div
+              key={`${lobe.x}:${lobe.y}`}
+              initial={{
+                opacity: 0,
+                x: lobe.x * 0.3,
+                y: lobe.y * 0.3,
+                scaleX: lobe.scaleX * 0.78,
+                scaleY: lobe.scaleY * 0.78,
+                rotate: lobe.rotate - 5,
+              }}
+              animate={{
+                opacity: [0, 0.76, 0.46, 0],
+                x: [lobe.x * 0.3, lobe.x],
+                y: [lobe.y * 0.3, lobe.y],
+                scaleX: [lobe.scaleX * 0.78, lobe.scaleX],
+                scaleY: [lobe.scaleY * 0.78, lobe.scaleY],
+                rotate: [lobe.rotate - 5, lobe.rotate + 4],
+              }}
+              transition={{
+                default: { duration: 1.4, ease: [0.65, 0, 0.35, 1] },
+                opacity: {
+                  duration: 1.4,
+                  times: [0, 0.16, 0.48, 1],
+                  ease: [0.45, 0, 0.55, 1],
+                },
+              }}
+              className="absolute top-1/2 left-1/2 size-[170%] -translate-x-1/2 -translate-y-1/2 rounded-[44%] blur-xl"
+              style={{
+                background: `radial-gradient(ellipse, ${lobe.color} 0%, ${lobe.color} 24%, transparent 72%)`,
+                boxShadow: `0 0 150px 85px ${lobe.color}`,
+              }}
+            />
+          ))}
+        </div>
+      ) : null}
+      <motion.div
+        data-agent-card-reveal-content="true"
+        key={identity}
+        initial={
+          shouldReduceMotion ? false : { opacity: 0, rotateY: -92, scale: 0.92 }
+        }
+        animate={{ opacity: 1, rotateY: 0, scale: 1 }}
+        transition={{
+          duration: shouldReduceMotion ? 0 : 0.45,
+          ease: [0.22, 1, 0.36, 1],
+        }}
+        className="relative z-10 mx-auto w-full max-w-[19rem] [transform-style:preserve-3d]"
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
+}
diff --git a/src/features/agents/ui/share-card/AgentShareCardPreview.tsx b/src/features/agents/ui/share-card/AgentShareCardPreview.tsx
index 57f7582af..6d75171ea 100644
--- a/src/features/agents/ui/share-card/AgentShareCardPreview.tsx
+++ b/src/features/agents/ui/share-card/AgentShareCardPreview.tsx
@@ -1,9 +1,34 @@
+import { useEffect, useId, useMemo, useState } from "react";
 import { resolveAgentIcon } from "@/features/agents/lib/resolveAgentIcon";
-import { getAgentShareCardBase } from "./agentShareCard";
+import cardFoil from "@/features/agents/assets/share-card/card-foil.png";
+import berdCardLogo from "@/features/agents/assets/share-card/berd-card-logo.svg";
+import { HolographicAgentCard } from "./HolographicAgentCard";
 import {
-  HolographicAgentCard,
-  holographicCardPresets,
-} from "./HolographicAgentCard";
+  fallbackAgentCardColor,
+  sampleAgentAvatarColor,
+} from "./agentCardColor";
+import {
+  deriveAgentCardTraitLines,
+  deriveAgentShareCardTextLayout,
+} from "./agentShareCardLayout";
+import { loadAgentCardFonts } from "./agentShareCardFonts";
+import type { AgentShareCardCopy } from "./agentShareCardCopy";
+import {
+  AGENT_CARD_GEOMETRY,
+  agentCardFramePath,
+} from "./agentShareCardGeometry";
+
+function createAgentCardTextMeasure() {
+  const canvas = document.createElement("canvas");
+  const context = /jsdom/u.test(navigator.userAgent)
+    ? null
+    : canvas.getContext("2d");
+  return (text: string, font: string) => {
+    if (!context) return Array.from(text).length * 42;
+    context.font = font;
+    return context.measureText(text).width;
+  };
+}
 
 interface AgentShareCardPreviewProps {
   identity: string;
@@ -11,6 +36,8 @@ interface AgentShareCardPreviewProps {
   description: string;
   avatarSrc?: string;
   alt: string;
+  copy: AgentShareCardCopy;
+  locale: string;
 }
 
 export function AgentShareCardPreview({
@@ -19,29 +46,266 @@ export function AgentShareCardPreview({
   description,
   avatarSrc,
   alt,
+  copy,
+  locale,
 }: AgentShareCardPreviewProps) {
+  const resolvedAvatarSrc = avatarSrc ?? resolveAgentIcon(identity);
+  const markFilterId = `berd-card-mark-${useId().replaceAll(":", "")}`;
+  const [fontGeneration, setFontGeneration] = useState(0);
+  useEffect(() => {
+    let active = true;
+    void loadAgentCardFonts().then(() => {
+      if (active) setFontGeneration((generation) => generation + 1);
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  const textLayout = useMemo(() => {
+    void fontGeneration;
+    const measure = createAgentCardTextMeasure();
+    return deriveAgentShareCardTextLayout(
+      displayName,
+      description,
+      (value) => measure(value, "600 64px Inter, sans-serif"),
+      (value) => measure(value, "600 42px Inter, sans-serif"),
+      locale,
+    );
+  }, [description, displayName, fontGeneration, locale]);
+  const [accentColor, setAccentColor] = useState(() =>
+    fallbackAgentCardColor(identity),
+  );
+
+  useEffect(() => {
+    let active = true;
+    setAccentColor(fallbackAgentCardColor(identity));
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.onload = () => {
+      const sampled = sampleAgentAvatarColor(image);
+      if (active && sampled) setAccentColor(sampled);
+    };
+    image.src = resolvedAvatarSrc;
+    return () => {
+      active = false;
+      image.onload = null;
+    };
+  }, [identity, resolvedAvatarSrc]);
+
+  const geometry = AGENT_CARD_GEOMETRY;
+  const traitMeasure = createAgentCardTextMeasure();
+  const goodForLines = deriveAgentCardTraitLines(
+    copy.goodForLabel,
+    copy.goodFor,
+    geometry.goodFor.width,
+    (value) => traitMeasure(value, "600 42px Inter, sans-serif"),
+    locale,
+  );
+  const vibesLines = deriveAgentCardTraitLines(
+    copy.vibesLabel,
+    copy.vibes,
+    geometry.vibes.width,
+    (value) => traitMeasure(value, "600 42px Inter, sans-serif"),
+    locale,
+  );
+  const { title, descriptionLines, contentShift } = textLayout;
+  const descriptionLineKeys = descriptionLines.map(
+    (line, index) =>
+      `${line}:${descriptionLines.slice(0, index).filter((item) => item === line).length}`,
+  );
+
   return (
-    <HolographicAgentCard
-      src={getAgentShareCardBase(identity)}
-      settings={holographicCardPresets.rainbowPrism}
-      alt={alt}
-    >
-      <div className="absolute inset-x-[8%] top-[7%] bottom-[8%] flex flex-col text-center text-agent-share-card-ink">
-        <h3 className="line-clamp-2 shrink-0 break-words pb-[0.08em] text-[clamp(1.5rem,5vw,2.6rem)] font-bold leading-[1.08] tracking-[-0.04em]">
-          {displayName}
-        </h3>
-        <div className="flex min-h-0 flex-1 items-center justify-center px-[9%] py-[5%]">
-          <img
-            src={avatarSrc ?? resolveAgentIcon(identity)}
-            alt=""
-            aria-hidden="true"
-            className="max-h-full max-w-full object-contain drop-shadow-xl"
-          />
-        </div>
-        <p className="line-clamp-4 shrink-0 break-words text-center text-[12px] leading-snug">
-          {description}
-        </p>
-      </div>
+    <HolographicAgentCard src={cardFoil} alt={alt} shadowColor={accentColor}>
+      <svg
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 z-[1] size-full"
+        viewBox="0 0 1227 1839"
+      >
+        <path
+          d={agentCardFramePath()}
+          fill={accentColor}
+          fillRule="evenodd"
+          opacity="0.34"
+          style={{ mixBlendMode: "color" }}
+        />
+      </svg>
+      <svg
+        aria-hidden="true"
+        className="absolute inset-0 z-[2] size-full"
+        viewBox="0 0 1227 1839"
+      >
+        <rect
+          x={geometry.panel.x}
+          y={geometry.panel.y}
+          width={geometry.panel.width}
+          height={geometry.panel.height}
+          rx={geometry.panel.radius}
+          fill="white"
+          fillOpacity="0.95"
+        />
+      </svg>
+      <svg
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 z-[3] size-full opacity-[var(--agent-card-pattern-opacity,0)] transition-opacity duration-150 motion-reduce:hidden"
+        viewBox="0 0 1227 1839"
+      >
+        <defs>
+          <pattern
+            id={`${markFilterId}-waves`}
+            width="160"
+            height="96"
+            patternUnits="userSpaceOnUse"
+          >
+            <g fill="none" stroke={accentColor} strokeWidth="1.4">
+              {[8, 20, 32, 44, 56, 68, 80, 92].map((y) => (
+                <path
+                  key={y}
+                  d={`M-40 ${y} C-20 ${y - 12} 0 ${y - 12} 20 ${y} S60 ${y + 12} 80 ${y} S120 ${y - 12} 140 ${y} S180 ${y + 12} 200 ${y}`}
+                />
+              ))}
+            </g>
+          </pattern>
+          <radialGradient id={`${markFilterId}-reveal`}>
+            <stop offset="0" stopColor="white" stopOpacity="1" />
+            <stop offset="0.35" stopColor="white" stopOpacity="0.82" />
+            <stop offset="0.7" stopColor="white" stopOpacity="0.25" />
+            <stop offset="1" stopColor="white" stopOpacity="0" />
+          </radialGradient>
+          <mask id={`${markFilterId}-mask`} maskUnits="userSpaceOnUse">
+            <circle
+              cx="var(--agent-card-pattern-svg-x, -500)"
+              cy="var(--agent-card-pattern-svg-y, -500)"
+              r="330"
+              fill={`url(#${markFilterId}-reveal)`}
+            />
+          </mask>
+        </defs>
+        <rect
+          x={geometry.panel.x}
+          y={geometry.panel.y}
+          width={geometry.panel.width}
+          height={geometry.panel.height}
+          rx={geometry.panel.radius}
+          fill={`url(#${markFilterId}-waves)`}
+          mask={`url(#${markFilterId}-mask)`}
+        />
+      </svg>
+      <svg
+        aria-hidden="true"
+        className="absolute inset-0 z-[4] size-full"
+        viewBox="0 0 1227 1839"
+      >
+        <image
+          href={berdCardLogo}
+          x={geometry.logo.x}
+          y={geometry.logo.y}
+          width={geometry.logo.width}
+          height={geometry.logo.height}
+        />
+        <text
+          x="1110"
+          y="153"
+          fill="black"
+          fontFamily="Inter, sans-serif"
+          fontSize="36"
+          fontWeight="600"
+          textAnchor="end"
+        >
+          {/* i18n-check-ignore: fixed brand text embedded in shareable card artwork */}
+          BERD AGENT
+        </text>
+
+        <image
+          href={avatarSrc ?? resolveAgentIcon(identity)}
+          x={geometry.avatar.x}
+          y={geometry.avatar.y}
+          width={geometry.avatar.width}
+          height={geometry.avatar.height}
+          preserveAspectRatio="xMidYMid meet"
+        />
+
+        <foreignObject
+          x={geometry.title.x}
+          y={1306 - contentShift}
+          width={geometry.title.width}
+          height="78"
+        >
+          <div className="truncate font-sans text-[64px] font-semibold leading-none text-black">
+            {title}
+          </div>
+        </foreignObject>
+        <text
+          x={geometry.description.x}
+          y={geometry.description.y - contentShift}
+          fill="black"
+          fontFamily="Inter, sans-serif"
+          fontSize="42"
+          fontWeight="600"
+        >
+          {descriptionLines.map((line, index) => (
+            <tspan
+              key={descriptionLineKeys[index]}
+              x={geometry.description.x}
+              dy={index === 0 ? 0 : geometry.description.lineHeight}
+            >
+              {line}
+            </tspan>
+          ))}
+        </text>
+
+        <line
+          x1={geometry.goodFor.ruleX}
+          x2={geometry.goodFor.ruleX}
+          y1={geometry.traitRule.y1}
+          y2={geometry.traitRule.y2}
+          stroke="black"
+          strokeWidth={geometry.traitRule.width}
+        />
+        <line
+          x1={geometry.vibes.ruleX}
+          x2={geometry.vibes.ruleX}
+          y1={geometry.traitRule.y1}
+          y2={geometry.traitRule.y2}
+          stroke="black"
+          strokeWidth={geometry.traitRule.width}
+        />
+        <text
+          x={geometry.goodFor.copyX}
+          y={geometry.traitCopyY}
+          fill="black"
+          fontFamily="Inter, sans-serif"
+          fontSize="42"
+          fontWeight="600"
+        >
+          {goodForLines.map((line, index) => (
+            <tspan
+              key={`good-for:${line}`}
+              x={geometry.goodFor.copyX}
+              dy={index === 0 ? 0 : 50}
+            >
+              {line}
+            </tspan>
+          ))}
+        </text>
+        <text
+          x={geometry.vibes.copyX}
+          y={geometry.traitCopyY}
+          fill="black"
+          fontFamily="Inter, sans-serif"
+          fontSize="42"
+          fontWeight="600"
+        >
+          {vibesLines.map((line, index) => (
+            <tspan
+              key={`vibes:${line}`}
+              x={geometry.vibes.copyX}
+              dy={index === 0 ? 0 : 50}
+            >
+              {line}
+            </tspan>
+          ))}
+        </text>
+      </svg>
     </HolographicAgentCard>
   );
 }
diff --git a/src/features/agents/ui/share-card/AgentShareDialog.test.tsx b/src/features/agents/ui/share-card/AgentShareDialog.test.tsx
index 54b2d1a09..a3fa639d6 100644
--- a/src/features/agents/ui/share-card/AgentShareDialog.test.tsx
+++ b/src/features/agents/ui/share-card/AgentShareDialog.test.tsx
@@ -9,9 +9,16 @@ import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { Persona } from "@/shared/types/agents";
 import { toast } from "sonner";
-import { MAX_SNAPSHOT_AVATAR_ANIMATION_BYTES } from "@/features/agents/agent-snapshot";
-import { encodeAgentImage } from "@/features/agents/agent-snapshot";
-import { AgentShareDialog } from "./AgentShareDialog";
+import {
+  AgentSnapshotError,
+  encodeAgentImage,
+  MAX_SNAPSHOT_AVATAR_ANIMATION_BYTES,
+} from "@/features/agents/agent-snapshot";
+import { readCachedAvatarAnimation } from "@/shared/api/avatars";
+import {
+  AgentShareDialog,
+  AVATAR_ANIMATION_EMBED_TIMEOUT_MS,
+} from "./AgentShareDialog";
 import { downloadBlob, renderAgentShareCard } from "./agentShareCard";
 
 const avatarHookMocks = vi.hoisted(() => ({
@@ -26,7 +33,10 @@ const avatarHookMocks = vi.hoisted(() => ({
 }));
 
 vi.mock("react-i18next", () => ({
-  useTranslation: () => ({ t: (key: string) => key }),
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { resolvedLanguage: "en", language: "en" },
+  }),
 }));
 
 vi.mock("sonner", () => ({
@@ -34,11 +44,23 @@ vi.mock("sonner", () => ({
 }));
 
 vi.mock("@/features/agents/agent-snapshot", () => ({
+  AgentSnapshotError: class AgentSnapshotError extends Error {
+    constructor(
+      message: string,
+      readonly code: string,
+    ) {
+      super(message);
+    }
+  },
   MAX_SNAPSHOT_AVATAR_ANIMATION_BYTES: 5 * 1024 * 1024,
   encodeAgentImage: vi.fn((bytes: Uint8Array) => bytes),
   personaToSnapshot: vi.fn(() => ({})),
 }));
 
+vi.mock("@/shared/api/avatars", () => ({
+  readCachedAvatarAnimation: vi.fn(),
+}));
+
 vi.mock("@/shared/hooks/useAvatarSrc", () => ({
   useAvatarImage: () => avatarHookMocks.image,
   useAvatarMediaState: () => ({
@@ -76,6 +98,22 @@ const persona: Persona = {
   writable: true,
 };
 
+async function markCardReady(): Promise<void> {
+  const preload = await waitFor(() => {
+    const image = document.querySelector<HTMLImageElement>(
+      '[data-testid="agent-card-avatar-preload"]',
+    );
+    expect(image).not.toBeNull();
+    return image as HTMLImageElement;
+  });
+  fireEvent.load(preload);
+  await waitFor(() =>
+    expect(
+      screen.getByRole("button", { name: "share.downloadCard" }),
+    ).toBeEnabled(),
+  );
+}
+
 function deferred<T>() {
   let resolve!: (value: T) => void;
   const promise = new Promise<T>((promiseResolve) => {
@@ -89,6 +127,7 @@ describe("AgentShareDialog", () => {
     vi.clearAllMocks();
     avatarHookMocks.image = "https://example.com/avatar.png";
     avatarHookMocks.media = undefined;
+    vi.mocked(readCachedAvatarAnimation).mockResolvedValue(null);
   });
 
   it("prevents duplicate agent-file downloads while one is pending", async () => {
@@ -114,6 +153,114 @@ describe("AgentShareDialog", () => {
     await waitFor(() => expect(button).not.toBeDisabled());
   });
 
+  it("recognizes an avatar that completed before its load handler attached", async () => {
+    const originalComplete = Object.getOwnPropertyDescriptor(
+      HTMLImageElement.prototype,
+      "complete",
+    );
+    const originalNaturalWidth = Object.getOwnPropertyDescriptor(
+      HTMLImageElement.prototype,
+      "naturalWidth",
+    );
+    Object.defineProperty(HTMLImageElement.prototype, "complete", {
+      configurable: true,
+      get: () => true,
+    });
+    Object.defineProperty(HTMLImageElement.prototype, "naturalWidth", {
+      configurable: true,
+      get: () => 400,
+    });
+
+    try {
+      render(
+        <AgentShareDialog
+          open
+          persona={persona}
+          onOpenChange={vi.fn()}
+          onDownloadAgent={vi.fn()}
+        />,
+      );
+
+      await waitFor(() =>
+        expect(
+          screen.getByRole("button", { name: "share.downloadCard" }),
+        ).not.toBeDisabled(),
+      );
+      await waitFor(() =>
+        expect(
+          screen.queryByLabelText("share.loadingCard"),
+        ).not.toBeInTheDocument(),
+      );
+    } finally {
+      if (originalComplete) {
+        Object.defineProperty(
+          HTMLImageElement.prototype,
+          "complete",
+          originalComplete,
+        );
+      }
+      if (originalNaturalWidth) {
+        Object.defineProperty(
+          HTMLImageElement.prototype,
+          "naturalWidth",
+          originalNaturalWidth,
+        );
+      }
+    }
+  });
+
+  it("keeps the modal out of scroll containment for the refraction halo", () => {
+    render(
+      <AgentShareDialog
+        open
+        persona={persona}
+        onOpenChange={vi.fn()}
+        onDownloadAgent={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("dialog")).toHaveClass(
+      "overflow-visible",
+      "overflow-y-visible",
+    );
+  });
+
+  it("uses viewport-safe geometry for loading and unavailable states", async () => {
+    const { rerender } = render(
+      <AgentShareDialog
+        open
+        persona={persona}
+        onOpenChange={vi.fn()}
+        onDownloadAgent={vi.fn()}
+      />,
+    );
+
+    expect(
+      screen.getByLabelText("share.loadingCard").parentElement,
+    ).toHaveClass("max-w-[min(19rem,calc((100dvh-18rem)*0.6667))]");
+
+    fireEvent.error(screen.getByTestId("agent-card-avatar-preload"));
+    await waitFor(() =>
+      expect(screen.getByTestId("agent-card-avatar-preload")).toHaveAttribute(
+        "src",
+        expect.not.stringContaining("example.com"),
+      ),
+    );
+    fireEvent.error(screen.getByTestId("agent-card-avatar-preload"));
+    expect(await screen.findByRole("status")).toHaveClass(
+      "max-w-[min(19rem,calc((100dvh-18rem)*0.6667))]",
+    );
+
+    rerender(
+      <AgentShareDialog
+        open={false}
+        persona={persona}
+        onOpenChange={vi.fn()}
+        onDownloadAgent={vi.fn()}
+      />,
+    );
+  });
+
   it("uses a generated avatar poster when composing the card", async () => {
     avatarHookMocks.image = undefined;
     avatarHookMocks.media = {
@@ -138,6 +285,7 @@ describe("AgentShareDialog", () => {
         onDownloadAgent={vi.fn()}
       />,
     );
+    await markCardReady();
     await user.click(
       screen.getByRole("button", { name: "share.downloadCard" }),
     );
@@ -147,10 +295,346 @@ describe("AgentShareDialog", () => {
         generatedPersona,
         "asset://generated-avatar.png",
         expect.any(String),
+        expect.objectContaining({
+          goodForLabel: "share.cardLabels.goodFor",
+          vibesLabel: "share.cardLabels.vibes",
+        }),
+        "en",
+      ),
+    );
+  });
+
+  it("embeds cached asset-protocol avatar animation", async () => {
+    avatarHookMocks.image = undefined;
+    avatarHookMocks.media = {
+      src: "asset://generated-avatar.webm",
+      mediaType: "video",
+      posterSrc: "asset://generated-avatar.png",
+    };
+    vi.mocked(readCachedAvatarAnimation).mockResolvedValue({
+      bytes: [1, 2, 3],
+      mimeType: "video/webm",
+    });
+    vi.mocked(renderAgentShareCard).mockResolvedValue(
+      new Blob(["card"], { type: "image/png" }),
+    );
+
+    render(
+      <AgentShareDialog
+        open
+        persona={{ ...persona, avatar: "user-avatar:generated" }}
+        onOpenChange={vi.fn()}
+        onDownloadAgent={vi.fn()}
+      />,
+    );
+    await markCardReady();
+    await userEvent.click(
+      screen.getByRole("button", { name: "share.downloadCard" }),
+    );
+
+    await waitFor(() =>
+      expect(encodeAgentImage).toHaveBeenCalledWith(
+        expect.any(Uint8Array),
+        expect.anything(),
+        expect.objectContaining({
+          bytes: Uint8Array.from([1, 2, 3]),
+          mimeType: "video/webm",
+        }),
       ),
     );
   });
 
+  it("falls back when an avatar preload stalls", async () => {
+    vi.useFakeTimers();
+    try {
+      render(
+        <AgentShareDialog
+          open
+          persona={persona}
+          onOpenChange={vi.fn()}
+          onDownloadAgent={vi.fn()}
+        />,
+      );
+      const firstPreload = screen.getByTestId("agent-card-avatar-preload");
+      expect(firstPreload).toHaveAttribute(
+        "src",
+        "https://example.com/avatar.png",
+      );
+
+      act(() => vi.advanceTimersByTime(10_000));
+
+      const fallbackPreload = screen.getByTestId("agent-card-avatar-preload");
+      expect(fallbackPreload).not.toHaveAttribute(
+        "src",
+        "https://example.com/avatar.png",
+      );
+      fireEvent.load(fallbackPreload);
+      expect(
+        screen.getByRole("button", { name: "share.downloadCard" }),
+      ).toBeEnabled();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("shows an empty-card error when every avatar source fails", async () => {
+    render(
+      <AgentShareDialog
+        open
+        persona={persona}
+        onOpenChange={vi.fn()}
+        onDownloadAgent={vi.fn()}
+      />,
+    );
+
+    fireEvent.error(screen.getByTestId("agent-card-avatar-preload"));
+    await waitFor(() =>
+      expect(
+        screen.getByTestId("agent-card-avatar-preload"),
+      ).not.toHaveAttribute("src", "https://example.com/avatar.png"),
+    );
+    fireEvent.error(screen.getByTestId("agent-card-avatar-preload"));
+
+    const error = await screen.findByRole("status");
+    expect(error).toHaveTextContent("share.avatarUnavailable");
+    expect(error).toHaveClass("text-sm");
+    expect(
+      screen.getByRole("button", { name: "share.downloadCard" }),
+    ).toBeDisabled();
+  });
+
+  it("uses the fetched animation MIME for extensionless URLs", async () => {
+    avatarHookMocks.image = undefined;
+    avatarHookMocks.media = {
+      src: "https://example.com/generated-avatar",
+      mediaType: "video",
+      posterSrc: "https://example.com/generated-avatar.png",
+    };
+    vi.mocked(renderAgentShareCard).mockResolvedValue(
+      new Blob(["card"], { type: "image/png" }),
+    );
+    const originalFetch = globalThis.fetch;
+    globalThis.fetch = vi.fn(async () => {
+      const bytes = Uint8Array.from([0, 0, 0, 0, 102, 116, 121, 112]);
+      const blob = new Blob([bytes], { type: "video/mp4" });
+      Object.defineProperty(blob, "arrayBuffer", {
+        value: async () => bytes.buffer,
+      });
+      return { ok: true, blob: async () => blob } as Response;
+    }) as typeof fetch;
+
+    try {
+      render(
+        <AgentShareDialog
+          open
+          persona={{ ...persona, avatar: "user-avatar:generated" }}
+          onOpenChange={vi.fn()}
+          onDownloadAgent={vi.fn()}
+        />,
+      );
+      await markCardReady();
+      await userEvent.click(
+        screen.getByRole("button", { name: "share.downloadCard" }),
+      );
+
+      await waitFor(() =>
+        expect(encodeAgentImage).toHaveBeenCalledWith(
+          expect.any(Uint8Array),
+          expect.anything(),
+          expect.objectContaining({ mimeType: "video/mp4" }),
+        ),
+      );
+    } finally {
+      globalThis.fetch = originalFetch;
+    }
+  });
+
+  it("falls back to a still card when animation fetching stalls", async () => {
+    vi.useFakeTimers();
+    avatarHookMocks.image = undefined;
+    avatarHookMocks.media = {
+      src: "https://example.com/generated-avatar.webm",
+      mediaType: "video",
+      posterSrc: "https://example.com/generated-avatar.png",
+    };
+    vi.mocked(renderAgentShareCard).mockResolvedValue(
+      new Blob(["card"], { type: "image/png" }),
+    );
+    const originalFetch = globalThis.fetch;
+    globalThis.fetch = vi.fn((input: string | URL | Request) => {
+      if (String(input).endsWith(".png")) {
+        const bytes = Uint8Array.from([137, 80, 78, 71]);
+        return Promise.resolve({
+          ok: true,
+          headers: new Headers(),
+          blob: async () => new Blob([bytes], { type: "image/png" }),
+        } as Response);
+      }
+      return new Promise<Response>(() => undefined);
+    }) as typeof fetch;
+
+    try {
+      render(
+        <AgentShareDialog
+          open
+          persona={{ ...persona, avatar: "user-avatar:generated" }}
+          onOpenChange={vi.fn()}
+          onDownloadAgent={vi.fn()}
+        />,
+      );
+      fireEvent.load(screen.getByTestId("agent-card-avatar-preload"));
+      fireEvent.click(
+        screen.getByRole("button", { name: "share.downloadCard" }),
+      );
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(AVATAR_ANIMATION_EMBED_TIMEOUT_MS);
+        await vi.runAllTimersAsync();
+      });
+
+      expect(encodeAgentImage).toHaveBeenCalledWith(
+        expect.any(Uint8Array),
+        expect.anything(),
+        null,
+      );
+      expect(downloadBlob).toHaveBeenCalledTimes(1);
+      expect(
+        screen.getByRole("button", { name: "share.downloadCard" }),
+      ).not.toBeDisabled();
+    } finally {
+      vi.useRealTimers();
+      globalThis.fetch = originalFetch;
+    }
+  });
+
+  it("does not embed failed or non-video animation responses", async () => {
+    avatarHookMocks.image = undefined;
+    avatarHookMocks.media = {
+      src: "https://example.com/generated-avatar.webm",
+      mediaType: "video",
+      posterSrc: "https://example.com/generated-avatar.png",
+    };
+    vi.mocked(renderAgentShareCard).mockResolvedValue(
+      new Blob(["card"], { type: "image/png" }),
+    );
+    const originalFetch = globalThis.fetch;
+    let animationAttempt = 0;
+    globalThis.fetch = vi.fn(async (input: string | URL | Request) => {
+      if (String(input).endsWith(".png")) {
+        const bytes = Uint8Array.from([137, 80, 78, 71]);
+        const blob = new Blob([bytes], { type: "image/png" });
+        Object.defineProperty(blob, "arrayBuffer", {
+          value: async () => bytes.buffer,
+        });
+        return {
+          ok: true,
+          headers: new Headers(),
+          blob: async () => blob,
+        } as Response;
+      }
+      animationAttempt += 1;
+      return animationAttempt === 1
+        ? ({ ok: false } as Response)
+        : ({
+            ok: true,
+            blob: async () => new Blob(["error"], { type: "text/html" }),
+          } as Response);
+    }) as typeof fetch;
+
+    try {
+      const { unmount } = render(
+        <AgentShareDialog
+          open
+          persona={{ ...persona, avatar: "user-avatar:generated" }}
+          onOpenChange={vi.fn()}
+          onDownloadAgent={vi.fn()}
+        />,
+      );
+      await markCardReady();
+      await userEvent.click(
+        screen.getByRole("button", { name: "share.downloadCard" }),
+      );
+      await waitFor(() => expect(downloadBlob).toHaveBeenCalledTimes(1));
+      expect(encodeAgentImage).toHaveBeenLastCalledWith(
+        expect.any(Uint8Array),
+        expect.anything(),
+        null,
+      );
+      unmount();
+
+      render(
+        <AgentShareDialog
+          open
+          persona={{ ...persona, avatar: "user-avatar:generated" }}
+          onOpenChange={vi.fn()}
+          onDownloadAgent={vi.fn()}
+        />,
+      );
+      await markCardReady();
+      await userEvent.click(
+        screen.getByRole("button", { name: "share.downloadCard" }),
+      );
+      await waitFor(() => expect(downloadBlob).toHaveBeenCalledTimes(2));
+      expect(encodeAgentImage).toHaveBeenLastCalledWith(
+        expect.any(Uint8Array),
+        expect.anything(),
+        null,
+      );
+    } finally {
+      globalThis.fetch = originalFetch;
+    }
+  });
+
+  it("retries without animation when the combined card exceeds the PNG limit", async () => {
+    avatarHookMocks.image = undefined;
+    avatarHookMocks.media = {
+      src: "https://example.com/generated-avatar.webm",
+      mediaType: "video",
+      posterSrc: "https://example.com/generated-avatar.png",
+    };
+    vi.mocked(renderAgentShareCard).mockResolvedValue(
+      new Blob(["card"], { type: "image/png" }),
+    );
+    vi.mocked(encodeAgentImage)
+      .mockImplementationOnce(() => {
+        throw new AgentSnapshotError("too large", "too-large");
+      })
+      .mockImplementationOnce((bytes) => bytes);
+    const originalFetch = globalThis.fetch;
+    globalThis.fetch = vi.fn(async () => {
+      const bytes = new Uint8Array([1, 2, 3]);
+      const blob = new Blob([bytes], { type: "video/webm" });
+      Object.defineProperty(blob, "arrayBuffer", {
+        value: async () => bytes.buffer,
+      });
+      return { ok: true, blob: async () => blob } as Response;
+    }) as typeof fetch;
+
+    try {
+      render(
+        <AgentShareDialog
+          open
+          persona={{ ...persona, avatar: "user-avatar:generated" }}
+          onOpenChange={vi.fn()}
+          onDownloadAgent={vi.fn()}
+        />,
+      );
+      await markCardReady();
+      await userEvent.click(
+        screen.getByRole("button", { name: "share.downloadCard" }),
+      );
+
+      await waitFor(() => expect(downloadBlob).toHaveBeenCalledTimes(1));
+      expect(encodeAgentImage).toHaveBeenCalledTimes(2);
+      expect(encodeAgentImage).toHaveBeenLastCalledWith(
+        expect.any(Uint8Array),
+        expect.anything(),
+        null,
+      );
+    } finally {
+      globalThis.fetch = originalFetch;
+    }
+  });
+
   it("omits oversized avatar animation while still downloading the card", async () => {
     avatarHookMocks.image = undefined;
     avatarHookMocks.media = {
@@ -185,6 +669,7 @@ describe("AgentShareDialog", () => {
           onDownloadAgent={vi.fn()}
         />,
       );
+      await markCardReady();
       await userEvent.click(
         screen.getByRole("button", { name: "share.downloadCard" }),
       );
@@ -201,6 +686,46 @@ describe("AgentShareDialog", () => {
     }
   });
 
+  it("does not embed animation when the reviewed still is a fallback", async () => {
+    avatarHookMocks.image = undefined;
+    avatarHookMocks.media = {
+      src: "https://example.com/generated-avatar.webm",
+      mediaType: "video",
+      posterSrc: "https://example.com/generated-avatar.png",
+    };
+    vi.mocked(renderAgentShareCard).mockResolvedValue(
+      new Blob(["card"], { type: "image/png" }),
+    );
+    const fetchSpy = vi.spyOn(globalThis, "fetch");
+    render(
+      <AgentShareDialog
+        open
+        persona={{ ...persona, avatar: "user-avatar:generated" }}
+        onOpenChange={vi.fn()}
+        onDownloadAgent={vi.fn()}
+      />,
+    );
+    const poster = document.querySelector<HTMLImageElement>(
+      '[data-testid="agent-card-avatar-preload"]',
+    );
+    fireEvent.error(poster as HTMLImageElement);
+    await markCardReady();
+    await userEvent.click(
+      screen.getByRole("button", { name: "share.downloadCard" }),
+    );
+
+    await waitFor(() => expect(downloadBlob).toHaveBeenCalledTimes(1));
+    expect(fetchSpy).not.toHaveBeenCalledWith(
+      "https://example.com/generated-avatar.webm",
+    );
+    expect(encodeAgentImage).toHaveBeenCalledWith(
+      expect.any(Uint8Array),
+      expect.anything(),
+      null,
+    );
+    fetchSpy.mockRestore();
+  });
+
   it("falls back locally when a configured avatar cannot resolve", async () => {
     avatarHookMocks.image = undefined;
     avatarHookMocks.media = undefined;
@@ -214,19 +739,17 @@ describe("AgentShareDialog", () => {
       />,
     );
 
-    const fallback = document.querySelector<HTMLImageElement>(
-      'img[src*="goose-avatar"]',
+    const fallback = screen.getByTestId("agent-card-avatar-preload");
+    expect(fallback).toHaveAttribute(
+      "src",
+      expect.stringContaining("goose-avatar"),
     );
-    expect(fallback).not.toBeNull();
-    fireEvent.load(fallback as HTMLImageElement);
+    fireEvent.load(fallback);
     await waitFor(() =>
       expect(
-        screen.queryByLabelText("share.loadingCard"),
-      ).not.toBeInTheDocument(),
+        screen.getByRole("button", { name: "share.downloadCard" }),
+      ).toBeEnabled(),
     );
-    expect(
-      screen.getByRole("button", { name: "share.downloadCard" }),
-    ).toBeEnabled();
   });
 
   it("suppresses an in-flight card when the avatar changes", async () => {
@@ -241,6 +764,7 @@ describe("AgentShareDialog", () => {
       />,
     );
 
+    await markCardReady();
     act(() => {
       screen.getByRole("button", { name: "share.downloadCard" }).click();
     });
@@ -259,6 +783,7 @@ describe("AgentShareDialog", () => {
 
     expect(downloadBlob).not.toHaveBeenCalled();
     expect(toast.success).not.toHaveBeenCalled();
+    await markCardReady();
     const downloadButton = screen.getByRole("button", {
       name: "share.downloadCard",
     });
@@ -291,6 +816,7 @@ describe("AgentShareDialog", () => {
       />,
     );
 
+    await markCardReady();
     const downloadButton = screen.getByRole("button", {
       name: "share.downloadCard",
     });
@@ -319,6 +845,7 @@ describe("AgentShareDialog", () => {
       />,
     );
 
+    await markCardReady();
     await user.click(
       screen.getByRole("button", { name: "share.downloadCard" }),
     );
@@ -335,6 +862,19 @@ describe("AgentShareDialog", () => {
     await waitFor(() => expect(renderAgentShareCard).toHaveBeenCalledTimes(1));
     expect(downloadBlob).not.toHaveBeenCalled();
     expect(toast.success).not.toHaveBeenCalled();
+
+    rerender(
+      <AgentShareDialog
+        open
+        persona={persona}
+        onOpenChange={vi.fn()}
+        onDownloadAgent={vi.fn()}
+      />,
+    );
+    await markCardReady();
+    expect(
+      screen.getByRole("button", { name: "share.downloadCard" }),
+    ).toBeEnabled();
   });
 
   it("starts only one card download for rapid duplicate activation", async () => {
@@ -349,6 +889,7 @@ describe("AgentShareDialog", () => {
       />,
     );
 
+    await markCardReady();
     const downloadButton = screen.getByRole("button", {
       name: "share.downloadCard",
     });
@@ -364,4 +905,61 @@ describe("AgentShareDialog", () => {
     });
     await waitFor(() => expect(downloadBlob).toHaveBeenCalledTimes(1));
   });
+
+  it("falls back when cached animation IPC stalls and ignores late bytes", async () => {
+    vi.useFakeTimers();
+    avatarHookMocks.image = undefined;
+    avatarHookMocks.media = {
+      src: "asset://generated-avatar.webm",
+      mediaType: "video",
+      posterSrc: "asset://generated-avatar.png",
+    };
+    const cachedAnimation = deferred<{
+      bytes: number[];
+      mimeType: string;
+    } | null>();
+    vi.mocked(readCachedAvatarAnimation).mockReturnValue(
+      cachedAnimation.promise,
+    );
+    vi.mocked(renderAgentShareCard).mockResolvedValue(
+      new Blob(["card"], { type: "image/png" }),
+    );
+
+    let unmount: () => void = () => undefined;
+    try {
+      ({ unmount } = render(
+        <AgentShareDialog
+          open
+          persona={{ ...persona, avatar: "user-avatar:generated" }}
+          onOpenChange={vi.fn()}
+          onDownloadAgent={vi.fn()}
+        />,
+      ));
+      fireEvent.load(screen.getByTestId("agent-card-avatar-preload"));
+      fireEvent.click(
+        screen.getByRole("button", { name: "share.downloadCard" }),
+      );
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(AVATAR_ANIMATION_EMBED_TIMEOUT_MS);
+        await vi.runAllTimersAsync();
+      });
+
+      expect(encodeAgentImage).toHaveBeenCalledTimes(1);
+      expect(encodeAgentImage).toHaveBeenCalledWith(
+        expect.any(Uint8Array),
+        expect.anything(),
+        null,
+      );
+      expect(downloadBlob).toHaveBeenCalledTimes(1);
+
+      cachedAnimation.resolve({ bytes: [1, 2, 3], mimeType: "video/webm" });
+      await cachedAnimation.promise;
+      await Promise.resolve();
+      expect(encodeAgentImage).toHaveBeenCalledTimes(1);
+      expect(downloadBlob).toHaveBeenCalledTimes(1);
+    } finally {
+      unmount();
+      vi.useRealTimers();
+    }
+  });
 });
diff --git a/src/features/agents/ui/share-card/AgentShareDialog.tsx b/src/features/agents/ui/share-card/AgentShareDialog.tsx
index e901b1c16..e3e0c742c 100644
--- a/src/features/agents/ui/share-card/AgentShareDialog.tsx
+++ b/src/features/agents/ui/share-card/AgentShareDialog.tsx
@@ -10,8 +10,12 @@ import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { toast } from "sonner";
 import { useTranslation } from "react-i18next";
 import type { Persona } from "@/shared/types/agents";
-import { isSafePngAvatarDataUrl } from "@/shared/lib/avatarUrl";
 import {
+  isSafePngAvatarDataUrl,
+  MAX_PNG_AVATAR_BYTES,
+} from "@/shared/lib/avatarUrl";
+import {
+  AgentSnapshotError,
   encodeAgentImage,
   MAX_SNAPSHOT_AVATAR_ANIMATION_BYTES,
   personaToSnapshot,
@@ -21,6 +25,7 @@ import {
   useAvatarMediaState,
 } from "@/shared/hooks/useAvatarSrc";
 import { resolveAgentIcon } from "@/features/agents/lib/resolveAgentIcon";
+import { readCachedAvatarAnimation } from "@/shared/api/avatars";
 import { Button } from "@/shared/ui/button";
 import {
   Dialog,
@@ -30,10 +35,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/shared/ui/dialog";
-import {
-  HolographicAgentCard,
-  holographicCardPresets,
-} from "./HolographicAgentCard";
+import { AgentShareCardPreview } from "./AgentShareCardPreview";
+import { AgentCardReveal } from "./AgentCardReveal";
+import { resolveAgentShareCardCopy } from "./agentShareCardCopy";
 import {
   blobToBytes,
   createAvatarPoster,
@@ -49,8 +53,20 @@ async function avatarSourceToDataUrl(source: string): Promise<string | null> {
   try {
     const response = await fetch(source);
     if (!response.ok) return null;
+    const contentLength = Number(response.headers.get("content-length"));
+    if (
+      Number.isFinite(contentLength) &&
+      contentLength > MAX_PNG_AVATAR_BYTES
+    ) {
+      return null;
+    }
     const blob = await response.blob();
-    if (blob.type && blob.type !== "image/png") return null;
+    if (
+      blob.size > MAX_PNG_AVATAR_BYTES ||
+      (blob.type && blob.type !== "image/png")
+    ) {
+      return null;
+    }
     const bytes = await blobToBytes(blob);
     let binary = "";
     for (let offset = 0; offset < bytes.length; offset += 0x8000) {
@@ -63,6 +79,27 @@ async function avatarSourceToDataUrl(source: string): Promise<string | null> {
   }
 }
 
+export const AVATAR_ANIMATION_EMBED_TIMEOUT_MS = 5_000;
+
+async function withAnimationEmbedDeadline<T>(
+  operation: (signal: AbortSignal) => Promise<T>,
+  timeoutMs = AVATAR_ANIMATION_EMBED_TIMEOUT_MS,
+): Promise<T> {
+  const controller = new AbortController();
+  let timeout: number | undefined;
+  const deadline = new Promise<never>((_, reject) => {
+    timeout = window.setTimeout(() => {
+      controller.abort();
+      reject(new Error("Avatar animation request timed out"));
+    }, timeoutMs);
+  });
+  try {
+    return await Promise.race([operation(controller.signal), deadline]);
+  } finally {
+    if (timeout !== undefined) window.clearTimeout(timeout);
+  }
+}
+
 interface AgentShareDialogProps {
   open: boolean;
   persona: Persona;
@@ -76,7 +113,7 @@ export function AgentShareDialog({
   onOpenChange,
   onDownloadAgent,
 }: AgentShareDialogProps) {
-  const { t } = useTranslation("agents");
+  const { t, i18n } = useTranslation("agents");
   const shouldReduceMotion = useReducedMotion();
   const [avatarReadySrc, setAvatarReadySrc] = useState<string | null>(null);
   const [failedAvatarSources, setFailedAvatarSources] = useState<Set<string>>(
@@ -88,6 +125,7 @@ export function AgentShareDialog({
     avatar: Persona["avatar"];
     src: string;
   } | null>(null);
+  const avatarPreloadRef = useRef<HTMLImageElement>(null);
   const cardDownloadInFlightRef = useRef(false);
   const agentDownloadInFlightRef = useRef(false);
   const cardOperationGenerationRef = useRef(0);
@@ -113,12 +151,18 @@ export function AgentShareDialog({
   const avatarSrc = avatarCandidates.find(
     (source) => !failedAvatarSources.has(source),
   );
+  const avatarUnavailable = avatarCandidates.every((source) =>
+    failedAvatarSources.has(source),
+  );
   // The card can render as soon as the exact still image it will display has
   // decoded. Cached animation/poster resolution may continue independently.
   const cardReady = Boolean(avatarSrc && avatarReadySrc === avatarSrc);
   const cardBase = getAgentShareCardBase(persona.id);
   const description = getAgentShareDescription(persona);
+  const locale = i18n?.resolvedLanguage ?? i18n?.language ?? "en";
+  const cardCopy = resolveAgentShareCardCopy(description, t);
   const cardContentIdentity = [
+    locale,
     persona.id,
     persona.avatar,
     persona.displayName,
@@ -129,6 +173,10 @@ export function AgentShareDialog({
   useEffect(() => {
     if (!open) {
       cardOperationGenerationRef.current += 1;
+      cardDownloadInFlightRef.current = false;
+      agentDownloadInFlightRef.current = false;
+      setCardDownloadPending(false);
+      setAgentDownloadPending(false);
     }
     return () => {
       cardOperationGenerationRef.current += 1;
@@ -146,6 +194,18 @@ export function AgentShareDialog({
     setCardDownloadPending(false);
   }, [cardContentIdentity]);
 
+  useEffect(() => {
+    if (!open || !avatarSrc || cardReady) return;
+    const timeout = window.setTimeout(() => {
+      setFailedAvatarSources((current) => {
+        const next = new Set(current);
+        next.add(avatarSrc);
+        return next;
+      });
+    }, 10_000);
+    return () => window.clearTimeout(timeout);
+  }, [avatarSrc, cardReady, open]);
+
   useEffect(() => {
     if (!open || !cachedAvatar) return;
     let cancelled = false;
@@ -173,11 +233,17 @@ export function AgentShareDialog({
     try {
       // Render exactly what the reviewed card displays. Re-generating a second
       // poster here can produce a different or blank frame for stacked videos.
-      const cardAvatarSrc = avatarSrc;
+      const cardAvatarSrc = avatarReadySrc;
       if (!cardAvatarSrc) {
         throw new Error("Agent avatar is not ready");
       }
-      const card = await renderAgentShareCard(persona, cardAvatarSrc, cardBase);
+      const card = await renderAgentShareCard(
+        persona,
+        cardAvatarSrc,
+        cardBase,
+        cardCopy,
+        locale,
+      );
       if (operationGeneration !== cardOperationGenerationRef.current) return;
       const embeddedAvatar = await avatarSourceToDataUrl(cardAvatarSrc);
       if (operationGeneration !== cardOperationGenerationRef.current) return;
@@ -186,30 +252,71 @@ export function AgentShareDialog({
         avatar: embeddedAvatar ?? persona.avatar,
       });
       let animation = null;
-      if (cachedAvatar?.mediaType === "video") {
+      const stillMatchesAnimation = Boolean(
+        cachedAvatar?.mediaType === "video" &&
+          (cardAvatarSrc === currentGeneratedAvatarPoster ||
+            cardAvatarSrc === cachedAvatar.posterSrc),
+      );
+      if (cachedAvatar?.mediaType === "video" && stillMatchesAnimation) {
         try {
-          const animationBytes = await fetch(cachedAvatar.src)
-            .then((response) => response.blob())
-            .then(blobToBytes);
-          if (animationBytes.length <= MAX_SNAPSHOT_AVATAR_ANIMATION_BYTES) {
-            animation = {
-              bytes: animationBytes,
-              mimeType: cachedAvatar.src.toLowerCase().includes(".mp4")
-                ? ("video/mp4" as const)
-                : ("video/webm" as const),
-              alphaMode: cachedAvatar.alphaMode,
-            };
+          if (
+            /^asset:/u.test(cachedAvatar.src) &&
+            typeof persona.avatar === "string"
+          ) {
+            const avatarRef = persona.avatar;
+            const cachedAnimation = await withAnimationEmbedDeadline(() =>
+              readCachedAvatarAnimation({ avatarRef }),
+            );
+            if (cachedAnimation) {
+              animation = {
+                bytes: new Uint8Array(cachedAnimation.bytes),
+                mimeType:
+                  cachedAnimation.mimeType === "video/mp4"
+                    ? ("video/mp4" as const)
+                    : ("video/webm" as const),
+                alphaMode: cachedAnimation.alphaMode,
+              };
+            }
+          } else if (/^(?:https?:|blob:|data:)/u.test(cachedAvatar.src)) {
+            const blob = await withAnimationEmbedDeadline(async (signal) => {
+              const response = await fetch(cachedAvatar.src, { signal });
+              if (!response.ok)
+                throw new Error("Avatar animation request failed");
+              return await response.blob();
+            });
+            if (blob.type !== "video/mp4" && blob.type !== "video/webm") {
+              throw new Error("Avatar animation has an unsupported media type");
+            }
+            const animationBytes = await blobToBytes(blob);
+            const mimeType = blob.type as "video/mp4" | "video/webm";
+            if (animationBytes.length <= MAX_SNAPSHOT_AVATAR_ANIMATION_BYTES) {
+              animation = {
+                bytes: animationBytes,
+                mimeType,
+                alphaMode: cachedAvatar.alphaMode,
+              };
+            }
           }
         } catch (error) {
           console.warn("Could not embed animated avatar:", error);
         }
       }
       if (operationGeneration !== cardOperationGenerationRef.current) return;
-      const encodedCard = encodeAgentImage(
-        await blobToBytes(card),
-        snapshot,
-        animation,
-      );
+      const cardBytes = await blobToBytes(card);
+      let encodedCard: Uint8Array;
+      try {
+        encodedCard = encodeAgentImage(cardBytes, snapshot, animation);
+      } catch (error) {
+        if (
+          !(error instanceof AgentSnapshotError) ||
+          error.code !== "too-large"
+        ) {
+          throw error;
+        }
+        // The still card remains portable when an otherwise-valid animation
+        // would push the combined PNG over the snapshot size limit.
+        encodedCard = encodeAgentImage(cardBytes, snapshot, null);
+      }
       if (operationGeneration !== cardOperationGenerationRef.current) return;
       const filename = getAgentShareFilename(persona.displayName);
       downloadBlob(
@@ -227,7 +334,29 @@ export function AgentShareDialog({
         setCardDownloadPending(false);
       }
     }
-  }, [avatarSrc, cachedAvatar, cardBase, persona, t]);
+  }, [
+    avatarReadySrc,
+    cachedAvatar,
+    cardCopy,
+    cardBase,
+    currentGeneratedAvatarPoster,
+    locale,
+    persona,
+    t,
+  ]);
+
+  const handleAvatarPreloadRef = useCallback(
+    (node: HTMLImageElement | null) => {
+      avatarPreloadRef.current = node;
+      if (!node || !avatarSrc) return;
+      // Run after layout effects reset readiness for changed card content.
+      queueMicrotask(() => {
+        if (avatarPreloadRef.current !== node || !node.complete) return;
+        if (node.naturalWidth > 0) setAvatarReadySrc(avatarSrc);
+      });
+    },
+    [avatarSrc],
+  );
 
   const handleDownloadAgent = useCallback(async () => {
     if (agentDownloadInFlightRef.current) return;
@@ -243,7 +372,11 @@ export function AgentShareDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent size="lg" surface="solid" className="bg-card">
+      <DialogContent
+        size="lg"
+        surface="solid"
+        className="overflow-visible overflow-y-visible bg-card"
+      >
         <DialogHeader>
           <DialogTitle>
             {t("share.title", { name: persona.displayName })}
@@ -251,13 +384,15 @@ export function AgentShareDialog({
           <DialogDescription>{t("share.description")}</DialogDescription>
         </DialogHeader>
 
-        <div className="relative flex min-h-[26rem] justify-center py-2 [perspective:1200px]">
+        <div className="relative flex min-h-0 justify-center py-2 [perspective:1200px]">
           {avatarSrc ? (
             <img
+              ref={handleAvatarPreloadRef}
               key={`preload:${avatarSrc}`}
               src={avatarSrc}
               alt=""
               aria-hidden="true"
+              data-testid="agent-card-avatar-preload"
               className="absolute size-px opacity-0"
               onLoad={() => setAvatarReadySrc(avatarSrc)}
               onError={() => {
@@ -271,14 +406,26 @@ export function AgentShareDialog({
             />
           ) : null}
           <AnimatePresence mode="wait" initial={false}>
-            {!cardReady ? (
+            {avatarUnavailable ? (
+              <motion.div
+                key="avatar-unavailable"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: shouldReduceMotion ? 0 : 0.18 }}
+                className="flex aspect-[1227/1839] w-full max-w-[min(19rem,calc((100dvh-18rem)*0.6667))] items-center justify-center rounded-[6.5%] bg-card text-sm text-muted-foreground shadow-sm"
+                role="status"
+              >
+                {t("share.avatarUnavailable")}
+              </motion.div>
+            ) : !cardReady ? (
               <motion.div
                 key="loader"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
                 transition={{ duration: shouldReduceMotion ? 0 : 0.18 }}
-                className="absolute inset-0 flex items-center justify-center"
+                className="flex aspect-[1227/1839] w-full max-w-[min(19rem,calc((100dvh-18rem)*0.6667))] items-center justify-center"
               >
                 <Loader2
                   aria-label={t("share.loadingCard")}
@@ -286,43 +433,17 @@ export function AgentShareDialog({
                 />
               </motion.div>
             ) : (
-              <motion.div
-                key={`card:${avatarSrc}`}
-                initial={
-                  shouldReduceMotion
-                    ? false
-                    : { opacity: 0, rotateY: -92, scale: 0.92 }
-                }
-                animate={{ opacity: 1, rotateY: 0, scale: 1 }}
-                transition={{
-                  duration: shouldReduceMotion ? 0 : 0.45,
-                  ease: [0.22, 1, 0.36, 1],
-                }}
-                className="w-full max-w-[19rem] [transform-style:preserve-3d]"
-              >
-                <HolographicAgentCard
-                  src={cardBase}
-                  settings={holographicCardPresets.rainbowPrism}
+              <AgentCardReveal identity={cardContentIdentity}>
+                <AgentShareCardPreview
+                  identity={persona.id}
+                  displayName={persona.displayName}
+                  description={description}
+                  avatarSrc={avatarSrc}
                   alt={t("share.cardAlt", { name: persona.displayName })}
-                >
-                  <div className="absolute inset-x-[8%] top-[7%] bottom-[8%] flex flex-col text-center text-agent-share-card-ink">
-                    <h3 className="line-clamp-2 shrink-0 break-words pb-[0.08em] text-[clamp(1.5rem,5vw,2.6rem)] font-bold leading-[1.08] tracking-[-0.04em]">
-                      {persona.displayName}
-                    </h3>
-                    <div className="flex min-h-0 flex-1 items-center justify-center px-[9%] py-[5%]">
-                      <img
-                        src={avatarSrc}
-                        alt=""
-                        aria-hidden="true"
-                        className="max-h-full max-w-full object-contain drop-shadow-xl"
-                      />
-                    </div>
-                    <p className="line-clamp-4 shrink-0 break-words text-center text-[12px] leading-snug">
-                      {description}
-                    </p>
-                  </div>
-                </HolographicAgentCard>
-              </motion.div>
+                  copy={cardCopy}
+                  locale={locale}
+                />
+              </AgentCardReveal>
             )}
           </AnimatePresence>
         </div>
@@ -338,7 +459,7 @@ export function AgentShareDialog({
                 <Download />
               )
             }
-            disabled={cardDownloadPending}
+            disabled={cardDownloadPending || !cardReady}
             onClick={() => void handleDownloadCard()}
           >
             {t("share.downloadCard")}
diff --git a/src/features/agents/ui/share-card/HolographicAgentCard.tsx b/src/features/agents/ui/share-card/HolographicAgentCard.tsx
index 11fdfa210..9885083e5 100644
--- a/src/features/agents/ui/share-card/HolographicAgentCard.tsx
+++ b/src/features/agents/ui/share-card/HolographicAgentCard.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { cn } from "@/shared/lib/cn";
 import { resetCardTilt, updateCardTilt } from "./cardTilt";
@@ -22,6 +22,16 @@ export interface HolographicAgentCardProps {
   children?: ReactNode;
   className?: string;
   settings?: HolographicCardSettings;
+  /** Preserve the source artwork's exact proportions when showing imports. */
+  aspectRatio?: number;
+  /** Constrain extreme imported proportions without cropping their pixels. */
+  containArtwork?: boolean;
+  /** Optional agent-derived color used to tint the card's ambient shadow. */
+  shadowColor?: string;
+  /** Optional agent-derived color applied to the card's foil frame. */
+  tintColor?: string;
+  /** Restrict the animated foil to the frame when artwork already contains its content panel. */
+  frameOnly?: boolean;
 }
 
 export const holographicCardPresets = {
@@ -37,11 +47,11 @@ export const holographicCardPresets = {
   },
   rainbowPrism: {
     finish: "prismatic",
-    metalness: 38,
-    rainbow: 34,
-    glare: 36,
+    metalness: 30,
+    rainbow: 72,
+    glare: 72,
     grain: 14,
-    diffraction: 42,
+    diffraction: 80,
     speed: 20,
     tilt: 8,
   },
@@ -142,9 +152,15 @@ export function HolographicAgentCard({
   children,
   className,
   settings = holographicCardPresets.rainbowPrism,
+  aspectRatio,
+  containArtwork = false,
+  shadowColor,
+  tintColor,
+  frameOnly = false,
 }: HolographicAgentCardProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const cardRef = useRef<HTMLDivElement>(null);
+  const patternId = `agent-card-wave-${useId().replaceAll(":", "")}`;
   const [contextGeneration, setContextGeneration] = useState(0);
   const pointer = useRef({ x: 0, y: 0 });
   const target = useRef({ x: 0, y: 0 });
@@ -173,15 +189,28 @@ export function HolographicAgentCard({
 
     const vertex = compileShader(gl, gl.VERTEX_SHADER, vertexShader);
     const fragment = compileShader(gl, gl.FRAGMENT_SHADER, fragmentShader);
-    if (!vertex || !fragment) return;
+    if (!vertex || !fragment) {
+      if (vertex) gl.deleteShader(vertex);
+      if (fragment) gl.deleteShader(fragment);
+      return;
+    }
 
     const program = gl.createProgram();
-    if (!program) return;
+    if (!program) {
+      gl.deleteShader(vertex);
+      gl.deleteShader(fragment);
+      return;
+    }
 
     gl.attachShader(program, vertex);
     gl.attachShader(program, fragment);
     gl.linkProgram(program);
-    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      gl.deleteProgram(program);
+      gl.deleteShader(vertex);
+      gl.deleteShader(fragment);
+      return;
+    }
     const activateProgram = gl.useProgram.bind(gl);
     activateProgram(program);
 
@@ -322,6 +351,7 @@ export function HolographicAgentCard({
         handlePointerTargetChange,
       );
       image.onload = null;
+      image.removeAttribute("src");
       gl.deleteTexture(texture);
       gl.deleteBuffer(buffer);
       gl.deleteProgram(program);
@@ -333,20 +363,96 @@ export function HolographicAgentCard({
   return (
     <div
       ref={cardRef}
+      data-agent-card-surface="true"
       className={cn(
-        "relative aspect-[642/898] w-full overflow-hidden rounded-[4.8%] shadow-[0_30px_60px_rgba(46,32,18,0.22),0_8px_18px_rgba(46,32,18,0.16)] [transform-origin:50%_50%] [transform-style:preserve-3d] [will-change:transform] motion-reduce:transform-none",
+        "relative aspect-[1227/1839] w-full rounded-[6.5%] [transform-origin:50%_50%] [transform-style:preserve-3d] [will-change:transform] motion-reduce:transform-none",
         className,
       )}
+      style={{
+        ...(aspectRatio && !containArtwork ? { aspectRatio } : {}),
+        borderRadius: "6.5%",
+        filter: shadowColor
+          ? `drop-shadow(0 12px 18px color-mix(in srgb, ${shadowColor} 12%, transparent)) drop-shadow(0 4px 7px rgba(46, 32, 18, 0.08))`
+          : "drop-shadow(0 10px 16px rgba(46, 32, 18, 0.1))",
+      }}
       onPointerEnter={(event) => {
         hoverBoundsRef.current = event.currentTarget.getBoundingClientRect();
+        event.currentTarget.style.setProperty(
+          "--agent-card-pattern-local-x",
+          `${event.nativeEvent.offsetX}px`,
+        );
+        event.currentTarget.style.setProperty(
+          "--agent-card-pattern-local-y",
+          `${event.nativeEvent.offsetY}px`,
+        );
+        const localX = event.nativeEvent.offsetX;
+        const localY = event.nativeEvent.offsetY;
+        if (
+          Number.isFinite(localX) &&
+          Number.isFinite(localY) &&
+          event.currentTarget.clientWidth > 0 &&
+          event.currentTarget.clientHeight > 0
+        ) {
+          event.currentTarget.style.setProperty(
+            "--agent-card-pattern-svg-x",
+            `${(localX / event.currentTarget.clientWidth) * 1227}`,
+          );
+          event.currentTarget.style.setProperty(
+            "--agent-card-pattern-svg-y",
+            `${(localY / event.currentTarget.clientHeight) * 1839}`,
+          );
+        }
+        event.currentTarget.style.setProperty(
+          "--agent-card-pattern-opacity",
+          "0.52",
+        );
       }}
       onPointerMove={(event) => {
+        // Re-read bounds after every tilt. The transformed card's client rect
+        // changes as it rotates, so enter-time bounds make cursor effects lag
+        // behind or drift away from the pointer.
+        const measuredBounds = event.currentTarget.getBoundingClientRect();
         const bounds =
-          hoverBoundsRef.current ?? event.currentTarget.getBoundingClientRect();
+          measuredBounds.width > 0 && measuredBounds.height > 0
+            ? measuredBounds
+            : hoverBoundsRef.current;
+        if (!bounds || bounds.width <= 0 || bounds.height <= 0) return;
+        hoverBoundsRef.current = bounds;
         target.current = {
           x: ((event.clientX - bounds.left) / bounds.width - 0.5) * 2,
           y: ((event.clientY - bounds.top) / bounds.height - 0.5) * 2,
         };
+        // Use local pixels from the transformed hit target. Percentages derived from
+        // an axis-aligned bounding box drift as the card rotates in 3D.
+        event.currentTarget.style.setProperty(
+          "--agent-card-pattern-local-x",
+          `${event.nativeEvent.offsetX}px`,
+        );
+        event.currentTarget.style.setProperty(
+          "--agent-card-pattern-local-y",
+          `${event.nativeEvent.offsetY}px`,
+        );
+        const localX = event.nativeEvent.offsetX;
+        const localY = event.nativeEvent.offsetY;
+        if (
+          Number.isFinite(localX) &&
+          Number.isFinite(localY) &&
+          event.currentTarget.clientWidth > 0 &&
+          event.currentTarget.clientHeight > 0
+        ) {
+          event.currentTarget.style.setProperty(
+            "--agent-card-pattern-svg-x",
+            `${(localX / event.currentTarget.clientWidth) * 1227}`,
+          );
+          event.currentTarget.style.setProperty(
+            "--agent-card-pattern-svg-y",
+            `${(localY / event.currentTarget.clientHeight) * 1839}`,
+          );
+        }
+        event.currentTarget.style.setProperty(
+          "--agent-card-pattern-opacity",
+          "0.52",
+        );
         updateCardTilt(
           event.currentTarget,
           event,
@@ -358,32 +464,127 @@ export function HolographicAgentCard({
       onPointerLeave={(event) => {
         hoverBoundsRef.current = null;
         target.current = { x: 0, y: 0 };
+        event.currentTarget.style.removeProperty(
+          "--agent-card-pattern-local-x",
+        );
+        event.currentTarget.style.removeProperty(
+          "--agent-card-pattern-local-y",
+        );
+        event.currentTarget.style.removeProperty("--agent-card-pattern-svg-x");
+        event.currentTarget.style.removeProperty("--agent-card-pattern-svg-y");
+        event.currentTarget.style.setProperty(
+          "--agent-card-pattern-opacity",
+          "0",
+        );
         resetCardTilt(event.currentTarget);
         event.currentTarget.dispatchEvent(new Event("holographic-card-move"));
       }}
     >
-      <img
-        src={src}
-        alt={alt}
-        className="absolute inset-0 block h-full w-full object-cover"
-      />
-      <canvas
-        ref={canvasRef}
-        className="absolute inset-0 block h-full w-full"
-      />
-      {children ? (
-        <div className="pointer-events-none absolute inset-0 z-10">
-          {children}
-        </div>
-      ) : null}
-      <div
-        aria-hidden="true"
-        className="pointer-events-none absolute inset-0 rounded-[inherit] border border-white/70 shadow-[inset_0_0_0_2px_rgba(255,255,255,0.15),inset_0_0_28px_rgba(255,255,255,0.12)]"
-      />
-      <div
-        aria-hidden="true"
-        className="pointer-events-none absolute inset-0 bg-[linear-gradient(115deg,transparent_30%,rgba(255,255,255,0.12)_45%,transparent_61%)] mix-blend-screen"
-      />
+      <div className="absolute inset-0 overflow-hidden rounded-[inherit]">
+        <img
+          src={src}
+          alt={alt}
+          className={cn(
+            "absolute inset-0 block h-full w-full",
+            containArtwork ? "object-contain" : "object-cover",
+          )}
+        />
+        <canvas
+          ref={canvasRef}
+          data-agent-card-frame-only={frameOnly ? "true" : undefined}
+          className="absolute inset-0 block h-full w-full opacity-90"
+          style={
+            frameOnly
+              ? {
+                  WebkitMaskImage:
+                    "linear-gradient(black, black), linear-gradient(black, black)",
+                  WebkitMaskPosition: "center, center",
+                  WebkitMaskSize: "100% 100%, 95.1% 96.6%",
+                  WebkitMaskRepeat: "no-repeat, no-repeat",
+                  WebkitMaskComposite: "xor",
+                  maskImage:
+                    "linear-gradient(black, black), linear-gradient(black, black)",
+                  maskPosition: "center, center",
+                  maskSize: "100% 100%, 95.1% 96.6%",
+                  maskRepeat: "no-repeat, no-repeat",
+                  maskComposite: "exclude",
+                }
+              : undefined
+          }
+        />
+        {tintColor ? (
+          <>
+            <div
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-0 rounded-[inherit] border-[7px]"
+              style={{
+                borderColor: tintColor,
+                mixBlendMode: "color",
+                opacity: 0.34,
+              }}
+            />
+            <svg
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-0 z-[3] size-full opacity-[var(--agent-card-pattern-opacity,0)] transition-opacity duration-150 motion-reduce:hidden"
+              viewBox="0 0 1227 1839"
+            >
+              <defs>
+                <pattern
+                  id={`${patternId}-waves`}
+                  width="160"
+                  height="96"
+                  patternUnits="userSpaceOnUse"
+                >
+                  <g fill="none" stroke={tintColor} strokeWidth="1.4">
+                    {[8, 20, 32, 44, 56, 68, 80, 92].map((y) => (
+                      <path
+                        key={y}
+                        d={`M-40 ${y} C-20 ${y - 12} 0 ${y - 12} 20 ${y} S60 ${y + 12} 80 ${y} S120 ${y - 12} 140 ${y} S180 ${y + 12} 200 ${y}`}
+                      />
+                    ))}
+                  </g>
+                </pattern>
+                <radialGradient id={`${patternId}-reveal`}>
+                  <stop offset="0" stopColor="white" stopOpacity="1" />
+                  <stop offset="0.35" stopColor="white" stopOpacity="0.82" />
+                  <stop offset="0.7" stopColor="white" stopOpacity="0.25" />
+                  <stop offset="1" stopColor="white" stopOpacity="0" />
+                </radialGradient>
+                <mask id={`${patternId}-mask`} maskUnits="userSpaceOnUse">
+                  <circle
+                    cx="var(--agent-card-pattern-svg-x, -500)"
+                    cy="var(--agent-card-pattern-svg-y, -500)"
+                    r="330"
+                    fill={`url(#${patternId}-reveal)`}
+                  />
+                </mask>
+              </defs>
+              <rect
+                x="30"
+                y="31"
+                width="1167"
+                height="1777"
+                rx="70"
+                fill={`url(#${patternId}-waves)`}
+                mask={`url(#${patternId}-mask)`}
+              />
+            </svg>
+          </>
+        ) : null}
+        {children ? (
+          <div className="pointer-events-none absolute inset-0 z-10">
+            {children}
+          </div>
+        ) : null}
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 rounded-[inherit] border border-white/70 shadow-[inset_0_0_0_2px_rgba(255,255,255,0.15),inset_0_0_28px_rgba(255,255,255,0.12)]"
+        />
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 bg-[linear-gradient(115deg,transparent_30%,rgba(255,255,255,0.12)_45%,transparent_61%)] mix-blend-screen"
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/features/agents/ui/share-card/agentCardColor.ts b/src/features/agents/ui/share-card/agentCardColor.ts
new file mode 100644
index 000000000..05e633e0a
--- /dev/null
+++ b/src/features/agents/ui/share-card/agentCardColor.ts
@@ -0,0 +1,144 @@
+type ColorAccumulator = {
+  blue: number;
+  green: number;
+  red: number;
+  weight: number;
+};
+
+type ColorSample = ColorAccumulator & { hue: number };
+
+const HUE_BIN_COUNT = 24;
+const HUE_CLUSTER_RADIUS = 2;
+const SAMPLE_SIZE = 24;
+
+export function fallbackAgentCardColor(seed: string): string {
+  let hash = 0;
+  for (const character of seed) {
+    hash = (hash * 31 + (character.codePointAt(0) ?? 0)) >>> 0;
+  }
+  return `hsl(${hash % 360} 68% 56%)`;
+}
+
+export function sampleAgentAvatarColor(
+  image: CanvasImageSource,
+): string | null {
+  const canvas = document.createElement("canvas");
+  canvas.width = SAMPLE_SIZE;
+  canvas.height = SAMPLE_SIZE;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) return null;
+  try {
+    context.drawImage(image, 0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
+    return sampleRepresentativeAvatarColor(
+      context.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE).data,
+    );
+  } catch {
+    return null;
+  }
+}
+
+export function sampleRepresentativeAvatarColor(
+  pixels: Uint8ClampedArray,
+): string | null {
+  if (pixels.length < 4 || pixels.length % 4 !== 0) return null;
+  const samples: ColorSample[] = [];
+  const hueWeights = Array<number>(HUE_BIN_COUNT).fill(0);
+  const neutral = emptyAccumulator();
+
+  for (let offset = 0; offset < pixels.length; offset += 4) {
+    const red = pixels[offset] ?? 0;
+    const green = pixels[offset + 1] ?? 0;
+    const blue = pixels[offset + 2] ?? 0;
+    const alpha = (pixels[offset + 3] ?? 0) / 255;
+    if (alpha < 0.25) continue;
+    const maximum = Math.max(red, green, blue) / 255;
+    const minimum = Math.min(red, green, blue) / 255;
+    const lightness = (maximum + minimum) / 2;
+    if (lightness < 0.07 || lightness > 0.95) continue;
+    const chroma = maximum - minimum;
+    const saturation =
+      chroma === 0 ? 0 : chroma / (1 - Math.abs(2 * lightness - 1));
+    const weight = alpha * (1 - Math.abs(lightness - 0.5) * 0.9);
+    accumulate(neutral, red, green, blue, weight);
+    if (saturation < 0.18) continue;
+    const hue = rgbHue(red / 255, green / 255, blue / 255, maximum, minimum);
+    samples.push({ blue, green, hue, red, weight });
+    hueWeights[Math.floor((hue / 360) * HUE_BIN_COUNT) % HUE_BIN_COUNT] +=
+      weight;
+  }
+  if (samples.length === 0) return formatAccumulator(neutral);
+
+  const clusteredWeight = (center: number) => {
+    let weight = 0;
+    for (
+      let delta = -HUE_CLUSTER_RADIUS;
+      delta <= HUE_CLUSTER_RADIUS;
+      delta++
+    ) {
+      weight +=
+        hueWeights[(center + delta + HUE_BIN_COUNT) % HUE_BIN_COUNT] ?? 0;
+    }
+    return weight;
+  };
+  const dominantBin = hueWeights.reduce(
+    (best, _, bin) =>
+      clusteredWeight(bin) > clusteredWeight(best) ? bin : best,
+    0,
+  );
+  const dominantHue = ((dominantBin + 0.5) / HUE_BIN_COUNT) * 360;
+  const maximumDistance = ((HUE_CLUSTER_RADIUS + 0.5) / HUE_BIN_COUNT) * 360;
+  const dominant = emptyAccumulator();
+  for (const sample of samples) {
+    const distance = Math.abs(sample.hue - dominantHue);
+    if (Math.min(distance, 360 - distance) <= maximumDistance) {
+      accumulate(
+        dominant,
+        sample.red,
+        sample.green,
+        sample.blue,
+        sample.weight,
+      );
+    }
+  }
+  return formatAccumulator(dominant.weight > 0 ? dominant : neutral);
+}
+
+function emptyAccumulator(): ColorAccumulator {
+  return { blue: 0, green: 0, red: 0, weight: 0 };
+}
+
+function accumulate(
+  accumulator: ColorAccumulator,
+  red: number,
+  green: number,
+  blue: number,
+  weight: number,
+) {
+  accumulator.red += red * weight;
+  accumulator.green += green * weight;
+  accumulator.blue += blue * weight;
+  accumulator.weight += weight;
+}
+
+function rgbHue(
+  red: number,
+  green: number,
+  blue: number,
+  maximum: number,
+  minimum: number,
+): number {
+  const chroma = maximum - minimum;
+  if (chroma === 0) return 0;
+  const hue =
+    maximum === red
+      ? ((green - blue) / chroma) % 6
+      : maximum === green
+        ? (blue - red) / chroma + 2
+        : (red - green) / chroma + 4;
+  return (((hue * 60) % 360) + 360) % 360;
+}
+
+function formatAccumulator(value: ColorAccumulator): string | null {
+  if (value.weight === 0) return null;
+  return `rgb(${Math.round(value.red / value.weight)} ${Math.round(value.green / value.weight)} ${Math.round(value.blue / value.weight)})`;
+}
diff --git a/src/features/agents/ui/share-card/agentShareCard.test.ts b/src/features/agents/ui/share-card/agentShareCard.test.ts
index 7b24dfb02..32dd172ff 100644
--- a/src/features/agents/ui/share-card/agentShareCard.test.ts
+++ b/src/features/agents/ui/share-card/agentShareCard.test.ts
@@ -112,6 +112,6 @@ describe("agentShareCard", () => {
       2,
     );
 
-    expect(lines).toEqual(["avery…"]);
+    expect(lines).toEqual(["averyl", "ongun…"]);
   });
 });
diff --git a/src/features/agents/ui/share-card/agentShareCard.ts b/src/features/agents/ui/share-card/agentShareCard.ts
index df7cbac5f..d7b5939c7 100644
--- a/src/features/agents/ui/share-card/agentShareCard.ts
+++ b/src/features/agents/ui/share-card/agentShareCard.ts
@@ -1,23 +1,26 @@
+import cardFoil from "@/features/agents/assets/share-card/card-foil.png";
+import berdCardLogo from "@/features/agents/assets/share-card/berd-card-logo.svg";
 import type { ResolvedAvatarMedia } from "@/shared/avatars/catalog";
 import type { Persona } from "@/shared/types/agents";
-import { agentShareCardBases } from "./shareCardArtworks";
+import {
+  fallbackAgentCardColor,
+  sampleAgentAvatarColor,
+} from "./agentCardColor";
+import { AGENT_CARD_HEIGHT, AGENT_CARD_WIDTH } from "./agentShareCardSpec";
+import {
+  deriveAgentCardTraitLines,
+  deriveAgentShareCardTextLayout,
+  wrapAgentCardText,
+} from "./agentShareCardLayout";
+import { loadAgentCardFonts } from "./agentShareCardFonts";
+import type { AgentShareCardCopy } from "./agentShareCardCopy";
+import { AGENT_CARD_GEOMETRY } from "./agentShareCardGeometry";
 
-const CARD_WIDTH = 642;
-const CARD_HEIGHT = 898;
 export const AVATAR_VIDEO_LOAD_TIMEOUT_MS = 10_000;
 export const SHARE_CARD_IMAGE_LOAD_TIMEOUT_MS = 10_000;
-function stableIndex(value: string, length: number): number {
-  let hash = 5381;
-  for (let index = 0; index < value.length; index += 1) {
-    hash = ((hash << 5) + hash + value.charCodeAt(index)) | 0;
-  }
-  return Math.abs(hash) % length;
-}
 
-export function getAgentShareCardBase(personaId: string): string {
-  return agentShareCardBases[
-    stableIndex(personaId, agentShareCardBases.length)
-  ];
+export function getAgentShareCardBase(_personaId: string): string {
+  return cardFoil;
 }
 
 export function getAgentShareDescription(persona: Persona): string {
@@ -174,83 +177,18 @@ export function loadShareCardImage(src: string): Promise<HTMLImageElement> {
   });
 }
 
-function fitText(
-  context: CanvasRenderingContext2D,
-  text: string,
-  maxWidth: number,
-  addEllipsis = false,
-): string {
-  const suffix = addEllipsis ? "…" : "";
-  if (context.measureText(`${text}${suffix}`).width <= maxWidth) {
-    return `${text}${suffix}`;
-  }
-
-  let fitted = text;
-  while (fitted && context.measureText(`${fitted}${suffix}`).width > maxWidth) {
-    fitted = fitted.slice(0, -1);
-  }
-  return `${fitted}${suffix}`;
-}
-
 export function wrapShareCardText(
   context: CanvasRenderingContext2D,
   text: string,
   maxWidth: number,
   maxLines: number,
 ): string[] {
-  const words = text.split(/\s+/).filter(Boolean);
-  const lines: string[] = [];
-  let line = "";
-
-  for (const word of words) {
-    const fittedWord =
-      context.measureText(word).width > maxWidth
-        ? fitText(context, word, maxWidth, true)
-        : word;
-    const candidate = line ? `${line} ${fittedWord}` : fittedWord;
-    if (context.measureText(candidate).width <= maxWidth) {
-      line = candidate;
-      continue;
-    }
-
-    lines.push(line);
-    if (lines.length === maxLines) {
-      lines[maxLines - 1] = fitText(
-        context,
-        lines[maxLines - 1],
-        maxWidth,
-        true,
-      );
-      return lines;
-    }
-    line = fittedWord;
-  }
-
-  if (line) lines.push(line);
-  if (lines.length > maxLines) {
-    const clamped = lines.slice(0, maxLines);
-    clamped[maxLines - 1] = fitText(
-      context,
-      clamped[maxLines - 1],
-      maxWidth,
-      true,
-    );
-    return clamped;
-  }
-  return lines;
-}
-
-function drawCenteredLines(
-  context: CanvasRenderingContext2D,
-  lines: string[],
-  centerX: number,
-  centerY: number,
-  lineHeight: number,
-): void {
-  const firstLineY = centerY - ((lines.length - 1) * lineHeight) / 2;
-  lines.forEach((line, index) => {
-    context.fillText(line, centerX, firstLineY + index * lineHeight);
-  });
+  return wrapAgentCardText(
+    text,
+    maxWidth,
+    maxLines,
+    (value) => context.measureText(value).width,
+  );
 }
 
 function drawContainedImage(
@@ -261,12 +199,11 @@ function drawContainedImage(
   width: number,
   height: number,
 ): void {
-  const scale = Math.min(
-    width / image.naturalWidth,
-    height / image.naturalHeight,
-  );
-  const drawnWidth = image.naturalWidth * scale;
-  const drawnHeight = image.naturalHeight * scale;
+  const sourceWidth = image.naturalWidth || image.width;
+  const sourceHeight = image.naturalHeight || image.height;
+  const scale = Math.min(width / sourceWidth, height / sourceHeight);
+  const drawnWidth = sourceWidth * scale;
+  const drawnHeight = sourceHeight * scale;
   context.drawImage(
     image,
     x + (width - drawnWidth) / 2,
@@ -279,67 +216,142 @@ function drawContainedImage(
 export async function renderAgentShareCard(
   persona: Persona,
   avatarSrc: string,
-  cardBase = getAgentShareCardBase(persona.id),
+  cardBase: string,
+  copy: AgentShareCardCopy,
+  locale: string,
 ): Promise<Blob> {
-  const [base, avatar] = await Promise.all([
+  const [base, avatar, berdMark] = await Promise.all([
     loadShareCardImage(cardBase),
     loadShareCardImage(avatarSrc),
+    loadShareCardImage(berdCardLogo),
   ]);
   const canvas = document.createElement("canvas");
-  canvas.width = CARD_WIDTH;
-  canvas.height = CARD_HEIGHT;
+  canvas.width = AGENT_CARD_WIDTH;
+  canvas.height = AGENT_CARD_HEIGHT;
   const context = canvas.getContext("2d");
   if (!context) throw new Error("Card rendering is unavailable");
 
-  context.drawImage(base, 0, 0, CARD_WIDTH, CARD_HEIGHT);
-  context.fillStyle = "#43005c";
-  context.textAlign = "center";
-  context.textBaseline = "middle";
-  context.font = "700 60px Inter, sans-serif";
-  const headerLines = wrapShareCardText(context, persona.displayName, 510, 2);
-  const headerLineHeight = 62;
-  const headerCenterY = 105;
-  drawCenteredLines(
+  context.drawImage(base, 0, 0, AGENT_CARD_WIDTH, AGENT_CARD_HEIGHT);
+  const accentColor =
+    sampleAgentAvatarColor(avatar) ?? fallbackAgentCardColor(persona.id);
+  context.save();
+  context.globalCompositeOperation = "color";
+  context.globalAlpha = 0.34;
+  context.fillStyle = accentColor;
+  drawAgentCardFrame(context);
+  context.fill("evenodd");
+  context.restore();
+  context.save();
+  context.globalAlpha = 0.95;
+  context.fillStyle = "white";
+  const { panel } = AGENT_CARD_GEOMETRY;
+  roundedRect(
     context,
-    headerLines,
-    CARD_WIDTH / 2,
-    headerCenterY,
-    headerLineHeight,
+    panel.x,
+    panel.y,
+    panel.width,
+    panel.height,
+    panel.radius,
   );
+  context.fill();
+  context.restore();
+
+  const {
+    logo,
+    brand,
+    avatar: avatarGeometry,
+    title: titleGeometry,
+    description: descriptionGeometry,
+  } = AGENT_CARD_GEOMETRY;
+  context.drawImage(berdMark, logo.x, logo.y, logo.width, logo.height);
+
+  await loadAgentCardFonts();
+  context.fillStyle = "black";
+  context.textBaseline = "alphabetic";
+  context.font = "600 36px Inter, sans-serif";
+  context.textAlign = "right";
+  context.fillText("BERD AGENT", brand.x, brand.y);
 
-  // The preview uses 12 CSS pixels at roughly half the native card width.
-  context.font = "400 24px Inter, sans-serif";
-  const descriptionLines = wrapShareCardText(
+  // Berd avatars are character illustrations, not portrait photographs. Keep
+  // the full artwork visible instead of applying Buzz's circular cover crop.
+  drawContainedImage(
     context,
-    getAgentShareDescription(persona),
-    500,
-    4,
-  );
-  const descriptionLineHeight = 31;
-  const descriptionBottom = 826;
-  const descriptionHeight = Math.max(
-    descriptionLineHeight,
-    descriptionLines.length * descriptionLineHeight,
+    avatar,
+    avatarGeometry.x,
+    avatarGeometry.y,
+    avatarGeometry.width,
+    avatarGeometry.height,
   );
-  const descriptionCenterY = descriptionBottom - descriptionHeight / 2;
-  drawCenteredLines(
+
+  context.fillStyle = "black";
+  context.textAlign = "left";
+  const description = getAgentShareDescription(persona);
+  const measureTitle = (value: string) => {
+    context.font = "600 64px Inter, sans-serif";
+    return context.measureText(value).width;
+  };
+  const measureDescription = (value: string) => {
+    context.font = "600 42px Inter, sans-serif";
+    return context.measureText(value).width;
+  };
+  const { title, descriptionLines, contentShift } =
+    deriveAgentShareCardTextLayout(
+      persona.displayName,
+      description,
+      measureTitle,
+      measureDescription,
+      locale,
+    );
+
+  context.font = "600 64px Inter, sans-serif";
+  context.fillText(title, titleGeometry.x, titleGeometry.y - contentShift);
+
+  context.font = "600 42px Inter, sans-serif";
+  descriptionLines.forEach((line, index) => {
+    context.fillText(
+      line,
+      descriptionGeometry.x,
+      descriptionGeometry.y -
+        contentShift +
+        index * descriptionGeometry.lineHeight,
+    );
+  });
+
+  const { goodFor, vibes, traitRule, traitCopyY } = AGENT_CARD_GEOMETRY;
+  context.lineWidth = traitRule.width;
+  context.strokeStyle = "black";
+  context.beginPath();
+  context.moveTo(goodFor.ruleX, traitRule.y1);
+  context.lineTo(goodFor.ruleX, traitRule.y2);
+  context.moveTo(vibes.ruleX, traitRule.y1);
+  context.lineTo(vibes.ruleX, traitRule.y2);
+  context.stroke();
+
+  context.font = "600 42px Inter, sans-serif";
+  const measureTrait = (value: string) => context.measureText(value).width;
+  drawAgentCardTraitLines(
     context,
-    descriptionLines,
-    CARD_WIDTH / 2,
-    descriptionCenterY,
-    descriptionLineHeight,
+    deriveAgentCardTraitLines(
+      copy.goodForLabel,
+      copy.goodFor,
+      goodFor.width,
+      measureTrait,
+      locale,
+    ),
+    goodFor.copyX,
+    traitCopyY,
   );
-
-  const headerBottom =
-    headerCenterY + (headerLines.length * headerLineHeight) / 2 + 28;
-  const descriptionTop = descriptionBottom - descriptionHeight - 28;
-  drawContainedImage(
+  drawAgentCardTraitLines(
     context,
-    avatar,
-    112,
-    headerBottom,
-    418,
-    Math.max(1, descriptionTop - headerBottom),
+    deriveAgentCardTraitLines(
+      copy.vibesLabel,
+      copy.vibes,
+      vibes.width,
+      measureTrait,
+      locale,
+    ),
+    vibes.copyX,
+    traitCopyY,
   );
 
   return new Promise((resolve, reject) => {
@@ -351,6 +363,69 @@ export async function renderAgentShareCard(
   });
 }
 
+function drawAgentCardTraitLines(
+  context: CanvasRenderingContext2D,
+  lines: readonly string[],
+  x: number,
+  y: number,
+): void {
+  context.font = "600 42px Inter, sans-serif";
+  lines.forEach((line, index) => {
+    context.fillText(line, x, y + index * 50);
+  });
+}
+
+function drawAgentCardFrame(context: CanvasRenderingContext2D): void {
+  const { width, height, panel } = AGENT_CARD_GEOMETRY;
+  context.beginPath();
+  context.rect(0, 0, width, height);
+  addRoundedRectPath(
+    context,
+    panel.x,
+    panel.y,
+    panel.width,
+    panel.height,
+    panel.radius,
+  );
+}
+
+function roundedRect(
+  context: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number,
+): void {
+  context.beginPath();
+  addRoundedRectPath(context, x, y, width, height, radius);
+}
+
+function addRoundedRectPath(
+  context: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number,
+): void {
+  context.moveTo(x + radius, y);
+  context.lineTo(x + width - radius, y);
+  context.quadraticCurveTo(x + width, y, x + width, y + radius);
+  context.lineTo(x + width, y + height - radius);
+  context.quadraticCurveTo(
+    x + width,
+    y + height,
+    x + width - radius,
+    y + height,
+  );
+  context.lineTo(x + radius, y + height);
+  context.quadraticCurveTo(x, y + height, x, y + height - radius);
+  context.lineTo(x, y + radius);
+  context.quadraticCurveTo(x, y, x + radius, y);
+  context.closePath();
+}
+
 export async function blobToBytes(blob: Blob): Promise<Uint8Array> {
   if (typeof blob.arrayBuffer === "function") {
     return new Uint8Array(await blob.arrayBuffer());
diff --git a/src/features/agents/ui/share-card/agentShareCardCopy.test.ts b/src/features/agents/ui/share-card/agentShareCardCopy.test.ts
new file mode 100644
index 000000000..9089e270e
--- /dev/null
+++ b/src/features/agents/ui/share-card/agentShareCardCopy.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import type { TFunction } from "i18next";
+import { resolveAgentShareCardCopy } from "./agentShareCardCopy";
+
+function translator(locale: "en" | "es"): TFunction<"agents"> {
+  const copy = {
+    en: {
+      "share.cardLabels.goodFor": "Good for:",
+      "share.cardLabels.vibes": "Vibes:",
+      "share.cardTraits.research.goodFor": "finding answers",
+      "share.cardTraits.research.vibes": "curious",
+    },
+    es: {
+      "share.cardLabels.goodFor": "Ideal para:",
+      "share.cardLabels.vibes": "Estilo:",
+      "share.cardTraits.research.goodFor": "buscar respuestas",
+      "share.cardTraits.research.vibes": "curioso",
+    },
+  } as const;
+  return ((key: keyof (typeof copy)[typeof locale]) =>
+    copy[locale][key]) as TFunction<"agents">;
+}
+
+describe("resolveAgentShareCardCopy", () => {
+  it("resolves one semantic trait into localized card copy", () => {
+    expect(
+      resolveAgentShareCardCopy("Research evidence", translator("en")),
+    ).toEqual({
+      goodForLabel: "Good for:",
+      vibesLabel: "Vibes:",
+      goodFor: "finding answers",
+      vibes: "curious",
+    });
+    expect(
+      resolveAgentShareCardCopy("Research evidence", translator("es")),
+    ).toEqual({
+      goodForLabel: "Ideal para:",
+      vibesLabel: "Estilo:",
+      goodFor: "buscar respuestas",
+      vibes: "curioso",
+    });
+  });
+});
diff --git a/src/features/agents/ui/share-card/agentShareCardCopy.ts b/src/features/agents/ui/share-card/agentShareCardCopy.ts
new file mode 100644
index 000000000..08a72d45b
--- /dev/null
+++ b/src/features/agents/ui/share-card/agentShareCardCopy.ts
@@ -0,0 +1,25 @@
+import type { TFunction } from "i18next";
+import {
+  classifyAgentCardTraits,
+  type AgentCardTraitId,
+} from "./agentShareCardSpec";
+
+export interface AgentShareCardCopy {
+  goodForLabel: string;
+  vibesLabel: string;
+  goodFor: string;
+  vibes: string;
+}
+
+export function resolveAgentShareCardCopy(
+  instructions: string,
+  t: TFunction<"agents">,
+): AgentShareCardCopy {
+  const traitId: AgentCardTraitId = classifyAgentCardTraits(instructions);
+  return {
+    goodForLabel: t("share.cardLabels.goodFor"),
+    vibesLabel: t("share.cardLabels.vibes"),
+    goodFor: t(`share.cardTraits.${traitId}.goodFor`),
+    vibes: t(`share.cardTraits.${traitId}.vibes`),
+  };
+}
diff --git a/src/features/agents/ui/share-card/agentShareCardFonts.test.ts b/src/features/agents/ui/share-card/agentShareCardFonts.test.ts
new file mode 100644
index 000000000..7eb3d1206
--- /dev/null
+++ b/src/features/agents/ui/share-card/agentShareCardFonts.test.ts
@@ -0,0 +1,27 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  AGENT_CARD_FONT_LOAD_TIMEOUT_MS,
+  loadAgentCardFonts,
+} from "./agentShareCardFonts";
+
+describe("loadAgentCardFonts", () => {
+  afterEach(() => vi.useRealTimers());
+
+  it("stops waiting when font loading stalls", async () => {
+    vi.useFakeTimers();
+    const originalFonts = document.fonts;
+    Object.defineProperty(document, "fonts", {
+      configurable: true,
+      value: { load: vi.fn(() => new Promise(() => undefined)) },
+    });
+
+    const result = loadAgentCardFonts();
+    await vi.advanceTimersByTimeAsync(AGENT_CARD_FONT_LOAD_TIMEOUT_MS);
+    await expect(result).resolves.toBe("timeout");
+
+    Object.defineProperty(document, "fonts", {
+      configurable: true,
+      value: originalFonts,
+    });
+  });
+});
diff --git a/src/features/agents/ui/share-card/agentShareCardFonts.ts b/src/features/agents/ui/share-card/agentShareCardFonts.ts
new file mode 100644
index 000000000..84132a83c
--- /dev/null
+++ b/src/features/agents/ui/share-card/agentShareCardFonts.ts
@@ -0,0 +1,26 @@
+export const AGENT_CARD_FONT_LOAD_TIMEOUT_MS = 1_500;
+
+const CARD_FONTS = [
+  "600 64px Inter",
+  "600 42px Inter",
+  "600 40px Inter",
+  "600 36px Inter",
+] as const;
+
+export async function loadAgentCardFonts(
+  timeoutMs = AGENT_CARD_FONT_LOAD_TIMEOUT_MS,
+): Promise<"loaded" | "timeout" | "unavailable"> {
+  if (!document.fonts) return "unavailable";
+
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  const deadline = new Promise<"timeout">((resolve) => {
+    timeout = setTimeout(() => resolve("timeout"), timeoutMs);
+  });
+  const loading = Promise.allSettled(
+    CARD_FONTS.map((font) => document.fonts.load(font)),
+  ).then(() => "loaded" as const);
+
+  const result = await Promise.race([loading, deadline]);
+  if (timeout) clearTimeout(timeout);
+  return result;
+}
diff --git a/src/features/agents/ui/share-card/agentShareCardGeometry.ts b/src/features/agents/ui/share-card/agentShareCardGeometry.ts
new file mode 100644
index 000000000..c0846f0c4
--- /dev/null
+++ b/src/features/agents/ui/share-card/agentShareCardGeometry.ts
@@ -0,0 +1,24 @@
+export const AGENT_CARD_GEOMETRY = {
+  width: 1227,
+  height: 1839,
+  outerRadius: 80,
+  panel: { x: 30, y: 31, width: 1167, height: 1777, radius: 70 },
+  logo: { x: 120, y: 122, width: 40, height: 40 },
+  brand: { x: 1110, y: 153 },
+  avatar: { x: 155, y: 240, width: 917, height: 920 },
+  title: { x: 115, y: 1370, width: 997 },
+  description: { x: 115, y: 1445, width: 997, lineHeight: 52 },
+  goodFor: { ruleX: 120, copyX: 139, width: 500 },
+  vibes: { ruleX: 700, copyX: 729, width: 373 },
+  traitRule: { y1: 1585, y2: 1683, width: 4 },
+  traitCopyY: 1614,
+} as const;
+
+export const AGENT_CARD_ASPECT_RATIO = `${AGENT_CARD_GEOMETRY.width}/${AGENT_CARD_GEOMETRY.height}`;
+
+export function agentCardFramePath(): string {
+  const { width, height, panel } = AGENT_CARD_GEOMETRY;
+  const right = panel.x + panel.width;
+  const bottom = panel.y + panel.height;
+  return `M0 0H${width}V${height}H0Z M${panel.x} ${panel.y + panel.radius}Q${panel.x} ${panel.y} ${panel.x + panel.radius} ${panel.y}H${right - panel.radius}Q${right} ${panel.y} ${right} ${panel.y + panel.radius}V${bottom - panel.radius}Q${right} ${bottom} ${right - panel.radius} ${bottom}H${panel.x + panel.radius}Q${panel.x} ${bottom} ${panel.x} ${bottom - panel.radius}Z`;
+}
diff --git a/src/features/agents/ui/share-card/agentShareCardLayout.test.ts b/src/features/agents/ui/share-card/agentShareCardLayout.test.ts
new file mode 100644
index 000000000..443e9d16a
--- /dev/null
+++ b/src/features/agents/ui/share-card/agentShareCardLayout.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import {
+  deriveAgentCardTraitLines,
+  deriveAgentShareCardTextLayout,
+} from "./agentShareCardLayout";
+
+const measure = (text: string) => Array.from(text).length * 10;
+
+describe("deriveAgentShareCardTextLayout", () => {
+  it("keeps a two-line description in the default content position", () => {
+    const layout = deriveAgentShareCardTextLayout(
+      "Reviewer",
+      "one two three four",
+      measure,
+      measure,
+    );
+    expect(layout.descriptionLines).toEqual(["one two three four"]);
+    expect(layout.contentShift).toBe(0);
+  });
+
+  it("shifts title and description together when three lines are required", () => {
+    const layout = deriveAgentShareCardTextLayout(
+      "Reviewer",
+      "one two three four five six",
+      measure,
+      (text) => Array.from(text).length * 100,
+    );
+    expect(layout.descriptionLines).toHaveLength(3);
+    expect(layout.contentShift).toBe(52);
+  });
+
+  it("bounds long localized trait copy to the shared two-line region", () => {
+    expect(
+      deriveAgentCardTraitLines(
+        "Ideal para:",
+        "convertir objetivos en planes prácticos y alcanzables",
+        170,
+        measure,
+        "es",
+      ),
+    ).toEqual(["Ideal para:", "convertir…"]);
+  });
+
+  it("clamps long words and Unicode without splitting graphemes", () => {
+    const layout = deriveAgentShareCardTextLayout(
+      "😀😀😀😀😀😀",
+      "averylongunbrokenwordthatcontinueswellpastthreelines",
+      (text) => Array.from(text).length * 300,
+      (text) => Array.from(text).length * 100,
+    );
+    expect(layout.title).toMatch(/…$/u);
+    expect(layout.title).not.toContain("�");
+    const graphemeLayout = deriveAgentShareCardTextLayout(
+      "👨‍👩‍👧‍👦👨‍👩‍👧‍👦",
+      "你好世界这是一个没有空格的说明文本",
+      (text) => Array.from(text).length * 300,
+      (text) => Array.from(text).length * 100,
+      "zh",
+    );
+    expect(graphemeLayout.title).not.toContain("�");
+    expect(graphemeLayout.descriptionLines.length).toBeGreaterThan(1);
+    expect(layout.descriptionLines).toHaveLength(3);
+    expect(layout.descriptionLines[2]).toMatch(/…$/u);
+  });
+});
diff --git a/src/features/agents/ui/share-card/agentShareCardLayout.ts b/src/features/agents/ui/share-card/agentShareCardLayout.ts
new file mode 100644
index 000000000..0e0325f07
--- /dev/null
+++ b/src/features/agents/ui/share-card/agentShareCardLayout.ts
@@ -0,0 +1,173 @@
+import { truncateAgentCardTitle } from "./agentShareCardSpec";
+import {
+  segmentCardGraphemes,
+  segmentCardWrapUnits,
+} from "./agentShareCardText";
+
+export const AGENT_CARD_TITLE_MAX_WIDTH = 997;
+export const AGENT_CARD_DESCRIPTION_MAX_WIDTH = 997;
+export const AGENT_CARD_DESCRIPTION_MAX_LINES = 3;
+export const AGENT_CARD_THREE_LINE_SHIFT = 52;
+
+export type TextWidthMeasure = (text: string) => number;
+
+export interface AgentShareCardTextLayout {
+  title: string;
+  descriptionLines: string[];
+  contentShift: number;
+}
+
+export const AGENT_CARD_TRAIT_MAX_LINES = 2;
+
+export function deriveAgentCardTraitLines(
+  label: string,
+  value: string,
+  maxWidth: number,
+  measure: TextWidthMeasure,
+  locale = "en",
+): string[] {
+  return wrapAgentCardText(
+    `${label} ${value}`,
+    maxWidth,
+    AGENT_CARD_TRAIT_MAX_LINES,
+    measure,
+    locale,
+  );
+}
+
+export function fitAgentCardText(
+  text: string,
+  maxWidth: number,
+  measure: TextWidthMeasure,
+  addEllipsis = false,
+  locale = "en",
+): string {
+  const suffix = addEllipsis ? "…" : "";
+  if (measure(`${text}${suffix}`) <= maxWidth) return `${text}${suffix}`;
+
+  const graphemes = segmentCardGraphemes(text, locale);
+  while (
+    graphemes.length > 0 &&
+    measure(`${graphemes.join("")}${suffix}`) > maxWidth
+  ) {
+    graphemes.pop();
+  }
+  return `${graphemes.join("")}${suffix}`;
+}
+
+function pushLine(
+  lines: string[],
+  line: string,
+  maxLines: number,
+  maxWidth: number,
+  measure: TextWidthMeasure,
+  hasRemainingContent: boolean,
+  locale: string,
+): boolean {
+  if (!line) return false;
+  if (lines.length < maxLines - 1) {
+    lines.push(line.trimEnd());
+    return false;
+  }
+  lines.push(
+    hasRemainingContent
+      ? fitAgentCardText(line.trimEnd(), maxWidth, measure, true, locale)
+      : line.trimEnd(),
+  );
+  return true;
+}
+
+export function wrapAgentCardText(
+  text: string,
+  maxWidth: number,
+  maxLines: number,
+  measure: TextWidthMeasure,
+  locale = "en",
+): string[] {
+  const units = segmentCardWrapUnits(text.trim(), locale);
+  const lines: string[] = [];
+  let line = "";
+
+  for (let index = 0; index < units.length; index += 1) {
+    const unit = units[index];
+    if (!unit) continue;
+    const candidate = `${line}${unit}`;
+    if (measure(candidate) <= maxWidth) {
+      line = candidate;
+      continue;
+    }
+    if (!line) {
+      const graphemes = segmentCardGraphemes(unit, locale);
+      for (const grapheme of graphemes) {
+        if (line && measure(`${line}${grapheme}`) > maxWidth) {
+          if (
+            pushLine(lines, line, maxLines, maxWidth, measure, true, locale)
+          ) {
+            return lines;
+          }
+          line = "";
+        }
+        line += grapheme;
+      }
+      continue;
+    }
+
+    if (pushLine(lines, line, maxLines, maxWidth, measure, true, locale)) {
+      return lines;
+    }
+    line = unit.trimStart();
+    if (measure(line) > maxWidth) {
+      const graphemes = segmentCardGraphemes(line, locale);
+      line = "";
+      for (const grapheme of graphemes) {
+        if (line && measure(`${line}${grapheme}`) > maxWidth) {
+          if (
+            pushLine(lines, line, maxLines, maxWidth, measure, true, locale)
+          ) {
+            return lines;
+          }
+          line = "";
+        }
+        line += grapheme;
+      }
+    }
+  }
+
+  pushLine(lines, line, maxLines, maxWidth, measure, false, locale);
+  return lines;
+}
+
+export function deriveAgentShareCardTextLayout(
+  displayName: string,
+  description: string,
+  measureTitle: TextWidthMeasure,
+  measureDescription: TextWidthMeasure,
+  locale = "en",
+): AgentShareCardTextLayout {
+  const rawTitle = truncateAgentCardTitle(displayName);
+  const title =
+    measureTitle(rawTitle) <= AGENT_CARD_TITLE_MAX_WIDTH
+      ? rawTitle
+      : fitAgentCardText(
+          rawTitle,
+          AGENT_CARD_TITLE_MAX_WIDTH,
+          measureTitle,
+          true,
+          locale,
+        );
+  const descriptionLines = wrapAgentCardText(
+    description,
+    AGENT_CARD_DESCRIPTION_MAX_WIDTH,
+    AGENT_CARD_DESCRIPTION_MAX_LINES,
+    measureDescription,
+    locale,
+  );
+  return {
+    title,
+    descriptionLines,
+    contentShift:
+      descriptionLines.length === AGENT_CARD_DESCRIPTION_MAX_LINES
+        ? AGENT_CARD_THREE_LINE_SHIFT
+        : 0,
+  };
+}
diff --git a/src/features/agents/ui/share-card/agentShareCardSpec.test.ts b/src/features/agents/ui/share-card/agentShareCardSpec.test.ts
new file mode 100644
index 000000000..48d153760
--- /dev/null
+++ b/src/features/agents/ui/share-card/agentShareCardSpec.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import {
+  classifyAgentCardTraits,
+  truncateAgentCardTitle,
+} from "./agentShareCardSpec";
+
+describe("agentShareCardSpec", () => {
+  it("uses Berd branding for an empty title", () => {
+    expect(truncateAgentCardTitle("  ")).toBe("BERD AGENT");
+  });
+
+  it("uppercases and bounds long titles", () => {
+    const title = truncateAgentCardTitle(
+      "a very long agent name that continues",
+    );
+    expect(title).toBe("A VERY LONG AGENT NAME TH…");
+    expect(Array.from(title)).toHaveLength(26);
+  });
+
+  it("derives stable semantic traits from agent instructions", () => {
+    expect(
+      classifyAgentCardTraits(
+        "Research unfamiliar topics, search trustworthy sources, and synthesize evidence.",
+      ),
+    ).toBe("research");
+    expect(classifyAgentCardTraits("Do unusual bespoke work.")).toBe("default");
+  });
+
+  it("uses curated order to break equal trait matches", () => {
+    expect(
+      classifyAgentCardTraits("Review code and improve software quality"),
+    ).toBe("software");
+  });
+
+  it("maps equivalent English and Spanish instructions to the same traits", () => {
+    expect(classifyAgentCardTraits("Research evidence and sources")).toBe(
+      "research",
+    );
+    expect(classifyAgentCardTraits("Investigar evidencia y fuentes")).toBe(
+      "research",
+    );
+    expect(classifyAgentCardTraits("Design an interface prototype")).toBe(
+      "design",
+    );
+    expect(classifyAgentCardTraits("Diseño de una interfaz y prototipo")).toBe(
+      "design",
+    );
+    expect(classifyAgentCardTraits("Automate repetitive workflows")).toBe(
+      "automation",
+    );
+    expect(
+      classifyAgentCardTraits("Automatización de flujos repetitivos"),
+    ).toBe("automation");
+  });
+
+  it("uses explicit casing independent of the host locale", () => {
+    expect(truncateAgentCardTitle("mini", "en")).toBe("MINI");
+    expect(classifyAgentCardTraits("INTERFACE designer")).toBe("design");
+  });
+});
diff --git a/src/features/agents/ui/share-card/agentShareCardSpec.ts b/src/features/agents/ui/share-card/agentShareCardSpec.ts
new file mode 100644
index 000000000..6f9d3a568
--- /dev/null
+++ b/src/features/agents/ui/share-card/agentShareCardSpec.ts
@@ -0,0 +1,215 @@
+import { segmentCardGraphemes } from "./agentShareCardText";
+import {
+  AGENT_CARD_ASPECT_RATIO,
+  AGENT_CARD_GEOMETRY,
+} from "./agentShareCardGeometry";
+
+export const AGENT_CARD_WIDTH = AGENT_CARD_GEOMETRY.width;
+export const AGENT_CARD_HEIGHT = AGENT_CARD_GEOMETRY.height;
+export { AGENT_CARD_ASPECT_RATIO };
+
+const MAX_TITLE_GRAPHEMES = 26;
+const CARD_MATCH_LOCALE = "en";
+
+export function truncateAgentCardTitle(
+  name: string,
+  locale = CARD_MATCH_LOCALE,
+): string {
+  const title = name.trim().toLocaleUpperCase(locale) || "BERD AGENT";
+  const graphemes = segmentCardGraphemes(title, locale);
+  return graphemes.length > MAX_TITLE_GRAPHEMES
+    ? `${graphemes.slice(0, MAX_TITLE_GRAPHEMES - 1).join("")}…`
+    : title;
+}
+
+export type AgentCardTraitId =
+  | "software"
+  | "review"
+  | "research"
+  | "writing"
+  | "design"
+  | "planning"
+  | "automation"
+  | "data"
+  | "support"
+  | "default";
+
+interface TraitRule {
+  id: Exclude<AgentCardTraitId, "default">;
+  keywords: readonly string[];
+}
+
+const TRAIT_RULES: readonly TraitRule[] = [
+  {
+    id: "software",
+    keywords: [
+      "code",
+      "coding",
+      "software",
+      "developer",
+      "programming",
+      "implement",
+      "debug",
+    ],
+  },
+  {
+    id: "review",
+    keywords: ["review", "audit", "risk", "quality", "security", "critique"],
+  },
+  {
+    id: "research",
+    keywords: [
+      "research",
+      "investigate",
+      "search",
+      "source",
+      "evidence",
+      "discover",
+    ],
+  },
+  {
+    id: "writing",
+    keywords: [
+      "write",
+      "writing",
+      "draft",
+      "edit",
+      "copy",
+      "content",
+      "summarize",
+    ],
+  },
+  {
+    id: "design",
+    keywords: [
+      "design",
+      "visual",
+      "interface",
+      "ux",
+      "ui",
+      "prototype",
+      "creative",
+    ],
+  },
+  {
+    id: "planning",
+    keywords: [
+      "plan",
+      "planning",
+      "strategy",
+      "roadmap",
+      "organize",
+      "coordinate",
+    ],
+  },
+  {
+    id: "automation",
+    keywords: [
+      "automate",
+      "automation",
+      "workflow",
+      "repetitive",
+      "script",
+      "schedule",
+    ],
+  },
+  {
+    id: "data",
+    keywords: [
+      "data",
+      "analyze",
+      "analysis",
+      "metric",
+      "sql",
+      "report",
+      "insight",
+    ],
+  },
+  {
+    id: "support",
+    keywords: ["help", "support", "troubleshoot", "guide", "explain", "teach"],
+  },
+];
+
+const SPANISH_TRAIT_KEYWORDS: Readonly<
+  Partial<Record<Exclude<AgentCardTraitId, "default">, readonly string[]>>
+> = {
+  software: [
+    "código",
+    "programación",
+    "software",
+    "desarrollador",
+    "implementar",
+    "depurar",
+  ],
+  review: [
+    "revisión",
+    "auditoría",
+    "riesgo",
+    "calidad",
+    "seguridad",
+    "crítica",
+  ],
+  research: [
+    "investigar",
+    "investigación",
+    "buscar",
+    "fuente",
+    "evidencia",
+    "descubrir",
+  ],
+  writing: [
+    "escribir",
+    "redacción",
+    "borrador",
+    "editar",
+    "contenido",
+    "resumir",
+  ],
+  design: [
+    "diseño",
+    "visual",
+    "interfaz",
+    "experiencia",
+    "prototipo",
+    "creativo",
+  ],
+  planning: ["plan", "planificación", "estrategia", "organizar", "coordinar"],
+  automation: [
+    "automatizar",
+    "automatización",
+    "flujo",
+    "repetitivo",
+    "programar",
+  ],
+  data: ["datos", "analizar", "análisis", "métrica", "informe", "perspectiva"],
+  support: ["ayuda", "soporte", "solucionar", "guiar", "explicar", "enseñar"],
+};
+
+/** Returns a stable semantic id; localized presentation copy is resolved later. */
+export function classifyAgentCardTraits(
+  instructions: string,
+): AgentCardTraitId {
+  const normalized = instructions.toLocaleLowerCase(CARD_MATCH_LOCALE);
+  let bestRule: TraitRule | undefined;
+  let bestScore = 0;
+
+  for (const rule of TRAIT_RULES) {
+    const keywords = [
+      ...rule.keywords,
+      ...(SPANISH_TRAIT_KEYWORDS[rule.id] ?? []),
+    ];
+    const score = keywords.reduce((total, keyword) => {
+      const escaped = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      return (
+        total + (new RegExp(`\\b${escaped}\\b`, "u").test(normalized) ? 1 : 0)
+      );
+    }, 0);
+    if (score > bestScore) {
+      bestRule = rule;
+      bestScore = score;
+    }
+  }
+
+  return bestRule?.id ?? "default";
+}
diff --git a/src/features/agents/ui/share-card/agentShareCardText.test.ts b/src/features/agents/ui/share-card/agentShareCardText.test.ts
new file mode 100644
index 000000000..3b15a4a14
--- /dev/null
+++ b/src/features/agents/ui/share-card/agentShareCardText.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import {
+  segmentCardGraphemes,
+  segmentCardWrapUnits,
+  truncateCardGraphemes,
+} from "./agentShareCardText";
+
+describe("agentShareCardText", () => {
+  it("keeps user-perceived graphemes intact", () => {
+    const graphemes = ["e\u0301", "👍🏽", "🇺🇸", "👨‍👩‍👧‍👦"];
+    for (const grapheme of graphemes) {
+      expect(segmentCardGraphemes(grapheme)).toEqual([grapheme]);
+      expect(truncateCardGraphemes(`${grapheme}x`, 1)).toBe(grapheme);
+    }
+  });
+
+  it("provides line-break units for text without whitespace", () => {
+    expect(segmentCardWrapUnits("你好世界", "zh")).toEqual(["你好", "世界"]);
+  });
+});
diff --git a/src/features/agents/ui/share-card/agentShareCardText.ts b/src/features/agents/ui/share-card/agentShareCardText.ts
new file mode 100644
index 000000000..d5fceb54f
--- /dev/null
+++ b/src/features/agents/ui/share-card/agentShareCardText.ts
@@ -0,0 +1,35 @@
+function segmentWithIntl(
+  value: string,
+  locale: string,
+  granularity: "grapheme" | "word",
+): { segment: string; isWordLike?: boolean }[] | null {
+  if (typeof Intl.Segmenter !== "function") return null;
+  const segmenter = new Intl.Segmenter(locale, { granularity });
+  return Array.from(segmenter.segment(value), ({ segment, isWordLike }) => ({
+    segment,
+    isWordLike,
+  }));
+}
+
+export function segmentCardGraphemes(value: string, locale = "en"): string[] {
+  return (
+    segmentWithIntl(value, locale, "grapheme")?.map(({ segment }) => segment) ??
+    Array.from(value)
+  );
+}
+
+/** Returns locale-aware word runs while allowing no-space scripts to wrap. */
+export function segmentCardWrapUnits(value: string, locale = "en"): string[] {
+  const segments = segmentWithIntl(value, locale, "word");
+  if (!segments) return value.match(/\s+|\S+/gu) ?? [];
+
+  return segments.map(({ segment }) => segment);
+}
+
+export function truncateCardGraphemes(
+  value: string,
+  maxGraphemes: number,
+  locale = "en",
+): string {
+  return segmentCardGraphemes(value, locale).slice(0, maxGraphemes).join("");
+}
diff --git a/src/features/design-system/generated/componentManifest.ts b/src/features/design-system/generated/componentManifest.ts
index fe1df0ebe..e97363462 100644
--- a/src/features/design-system/generated/componentManifest.ts
+++ b/src/features/design-system/generated/componentManifest.ts
@@ -107,7 +107,7 @@ export const designSystemComponentManifest = [
     name: "Agent Import Primary Button",
     source: "src/shared/ui/agent-import-primary-button.tsx",
     description:
-      "Primary confirmation action for the agent import flow.\nUses a solid black fill on dark import-dialog surfaces without an outline.",
+      "Primary confirmation action for the agent import flow.\nUses the system primary fill (black in light mode) and preserves the\nimport-dialog-specific dark treatment without an outline.",
     exports: ["AgentImportPrimaryButton", "AgentImportPrimaryButtonProps"],
     slots: [],
     cva: [],
diff --git a/src/shared/api/avatars.test.ts b/src/shared/api/avatars.test.ts
index 14daa8cd7..f0658a132 100644
--- a/src/shared/api/avatars.test.ts
+++ b/src/shared/api/avatars.test.ts
@@ -13,6 +13,7 @@ import {
   listenAvatarCacheWarmed,
   normalizeAvatarLibraryError,
   refreshAvatarCache,
+  readCachedAvatarAnimation,
 } from "./avatars";
 import type { AvatarCatalog } from "@/shared/avatars/catalog";
 
@@ -238,6 +239,20 @@ describe("avatars api", () => {
     });
   });
 
+  it("reads cached animation bytes by trusted avatar reference", async () => {
+    invokeMock.mockResolvedValueOnce({
+      bytes: [1, 2, 3],
+      mimeType: "video/webm",
+    });
+
+    await expect(
+      readCachedAvatarAnimation({ avatarRef: "app-avatar:gloopy-1" }),
+    ).resolves.toEqual({ bytes: [1, 2, 3], mimeType: "video/webm" });
+    expect(invokeMock).toHaveBeenCalledWith("read_cached_avatar_animation", {
+      avatarRef: "app-avatar:gloopy-1",
+    });
+  });
+
   it("does not subscribe to avatar warm events outside Tauri", async () => {
     await expect(listenAvatarCacheWarmed(vi.fn())).resolves.toEqual(
       expect.any(Function),
diff --git a/src/shared/api/avatars.ts b/src/shared/api/avatars.ts
index dce37de1e..e1a7832a1 100644
--- a/src/shared/api/avatars.ts
+++ b/src/shared/api/avatars.ts
@@ -209,6 +209,22 @@ export async function deleteUserAvatar(avatarRef: string): Promise<void> {
   await invoke("delete_user_avatar", { avatarRef });
 }
 
+export interface CachedAvatarAnimation {
+  bytes: number[];
+  mimeType: string;
+  alphaMode?: ResolvedAvatarMedia["alphaMode"];
+}
+
+export async function readCachedAvatarAnimation({
+  avatarRef,
+}: {
+  avatarRef: string;
+}): Promise<CachedAvatarAnimation | null> {
+  return invoke<CachedAvatarAnimation | null>("read_cached_avatar_animation", {
+    avatarRef,
+  });
+}
+
 export async function getCachedAvatarForRef({
   avatarRef,
 }: {
diff --git a/src/shared/i18n/locales/en/agents.json b/src/shared/i18n/locales/en/agents.json
index f59accf67..d0a3d329f 100644
--- a/src/shared/i18n/locales/en/agents.json
+++ b/src/shared/i18n/locales/en/agents.json
@@ -155,7 +155,54 @@
     "downloadingAgent": "Downloading agent…",
     "cardDownloaded": "Downloaded {{filename}}",
     "cardDownloadFailed": "Couldn't create the card. Try again.",
-    "loadingCard": "Loading card"
+    "loadingCard": "Loading card",
+    "avatarUnavailable": "Avatar unavailable",
+    "cardLabels": {
+      "goodFor": "Good for:",
+      "vibes": "Vibes:"
+    },
+    "cardTraits": {
+      "software": {
+        "goodFor": "building and improving software",
+        "vibes": "precise, pragmatic"
+      },
+      "review": {
+        "goodFor": "spotting risks and raising quality",
+        "vibes": "sharp, dependable"
+      },
+      "research": {
+        "goodFor": "finding and synthesizing answers",
+        "vibes": "curious, thorough"
+      },
+      "writing": {
+        "goodFor": "turning ideas into clear words",
+        "vibes": "clear, thoughtful"
+      },
+      "design": {
+        "goodFor": "shaping useful, polished experiences",
+        "vibes": "creative, intentional"
+      },
+      "planning": {
+        "goodFor": "turning goals into practical plans",
+        "vibes": "organized, strategic"
+      },
+      "automation": {
+        "goodFor": "streamlining repetitive work",
+        "vibes": "efficient, resourceful"
+      },
+      "data": {
+        "goodFor": "making sense of complex data",
+        "vibes": "analytical, precise"
+      },
+      "support": {
+        "goodFor": "untangling problems and helping people",
+        "vibes": "patient, resourceful"
+      },
+      "default": {
+        "goodFor": "making progress on focused work",
+        "vibes": "capable, thoughtful"
+      }
+    }
   },
   "statuses": {
     "error": "Error",
diff --git a/src/shared/i18n/locales/es/agents.json b/src/shared/i18n/locales/es/agents.json
index 9e47913c2..1f5155aec 100644
--- a/src/shared/i18n/locales/es/agents.json
+++ b/src/shared/i18n/locales/es/agents.json
@@ -155,7 +155,54 @@
     "downloadingAgent": "Descargando agente…",
     "cardDownloaded": "Se descargó {{filename}}",
     "cardDownloadFailed": "No se pudo crear la tarjeta. Inténtalo de nuevo.",
-    "loadingCard": "Cargando tarjeta"
+    "loadingCard": "Cargando tarjeta",
+    "avatarUnavailable": "Avatar no disponible",
+    "cardLabels": {
+      "goodFor": "Ideal para:",
+      "vibes": "Estilo:"
+    },
+    "cardTraits": {
+      "software": {
+        "goodFor": "crear y mejorar software",
+        "vibes": "preciso, pragmático"
+      },
+      "review": {
+        "goodFor": "detectar riesgos y mejorar la calidad",
+        "vibes": "agudo, confiable"
+      },
+      "research": {
+        "goodFor": "buscar y sintetizar respuestas",
+        "vibes": "curioso, minucioso"
+      },
+      "writing": {
+        "goodFor": "convertir ideas en palabras claras",
+        "vibes": "claro, reflexivo"
+      },
+      "design": {
+        "goodFor": "dar forma a experiencias útiles y pulidas",
+        "vibes": "creativo, intencional"
+      },
+      "planning": {
+        "goodFor": "convertir objetivos en planes prácticos",
+        "vibes": "organizado, estratégico"
+      },
+      "automation": {
+        "goodFor": "agilizar el trabajo repetitivo",
+        "vibes": "eficiente, resolutivo"
+      },
+      "data": {
+        "goodFor": "entender datos complejos",
+        "vibes": "analítico, preciso"
+      },
+      "support": {
+        "goodFor": "resolver problemas y ayudar a las personas",
+        "vibes": "paciente, resolutivo"
+      },
+      "default": {
+        "goodFor": "avanzar en trabajo enfocado",
+        "vibes": "capaz, reflexivo"
+      }
+    }
   },
   "statuses": {
     "error": "Error",
diff --git a/src/shared/lib/avatarUrl.ts b/src/shared/lib/avatarUrl.ts
index 4f1e945b3..6bce0db57 100644
--- a/src/shared/lib/avatarUrl.ts
+++ b/src/shared/lib/avatarUrl.ts
@@ -1,7 +1,7 @@
 import { isAppAvatarRef, isUserAvatarRef } from "@/shared/avatars/catalog";
 import type { ResolvedAvatarMedia } from "@/shared/avatars/catalog";
 
-const MAX_PNG_AVATAR_BYTES = 2 * 1024 * 1024;
+export const MAX_PNG_AVATAR_BYTES = 2 * 1024 * 1024;
 const PNG_DATA_URL_PREFIX = "data:image/png;base64,";
 const PNG_SIGNATURE = [137, 80, 78, 71, 13, 10, 26, 10] as const;
 const PNG_IHDR_LENGTH = 13;
diff --git a/src/shared/ui/agent-import-primary-button.tsx b/src/shared/ui/agent-import-primary-button.tsx
index 8ab71ef33..641337169 100644
--- a/src/shared/ui/agent-import-primary-button.tsx
+++ b/src/shared/ui/agent-import-primary-button.tsx
@@ -4,7 +4,8 @@ import { Button, type ButtonProps } from "@/shared/ui/button";
 
 /**
  * Primary confirmation action for the agent import flow.
- * Uses a solid black fill on dark import-dialog surfaces without an outline.
+ * Uses the system primary fill (black in light mode) and preserves the
+ * import-dialog-specific dark treatment without an outline.
  */
 export type AgentImportPrimaryButtonProps = Omit<
   ButtonProps,
@@ -17,7 +18,7 @@ export const AgentImportPrimaryButton = React.forwardRef<
 >((props, ref) => (
   <Button
     ref={ref}
-    variant="subtle"
+    variant="primary"
     className="border-0 ring-0 dark:bg-background dark:text-foreground dark:shadow-none dark:hover:bg-background dark:hover:text-foreground dark:active:bg-background"
     {...props}
   />