From caee0c692a663b829b67443140c2c9b34d8e8a97 Mon Sep 17 00:00:00 2001
From: MythEclipse <asepharyanalm001@gmail.com>
Date: Wed, 3 Jun 2026 03:08:36 +0700
Subject: [PATCH] feat(frontend): add ChibiMascot component with animation
 variants

---
 .../src/widgets/mascot/ChibiMascot.tsx        | 653 ++++++++++++++++++
 services/frontend/tailwind.config.js          |  17 +
 2 files changed, 670 insertions(+)
 create mode 100644 services/frontend/src/widgets/mascot/ChibiMascot.tsx

diff --git a/services/frontend/src/widgets/mascot/ChibiMascot.tsx b/services/frontend/src/widgets/mascot/ChibiMascot.tsx
new file mode 100644
index 0000000..d059b5a
--- /dev/null
+++ b/services/frontend/src/widgets/mascot/ChibiMascot.tsx
@@ -0,0 +1,653 @@
+import { cn } from "../../shared/lib/utils";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+type MascotVariant = "idle" | "waving" | "sleeping" | "thinking" | "peeking" | "crying";
+
+interface ChibiMascotProps {
+  variant?: MascotVariant;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+// ─── Size map ────────────────────────────────────────────────────────────────
+
+const sizes = { sm: 48, md: 80, lg: 120 } as const;
+
+// ─── Keyframes ───────────────────────────────────────────────────────────────
+
+const keyframes = `
+@keyframes chibi-bob {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-3px); }
+}
+@keyframes chibi-wave {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(15deg); }
+  75% { transform: rotate(-10deg); }
+}
+@keyframes chibi-sleep {
+  0%, 100% { transform: scaleY(1); }
+  50% { transform: scaleY(0.92); }
+}
+@keyframes chibi-think {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-4px) rotate(5deg); }
+}
+@keyframes chibi-cry {
+  0%, 100% { transform: translateY(0) scale(1); }
+  25% { transform: translateY(-2px) scale(1.02); }
+  75% { transform: translateY(1px) scale(0.98); }
+}
+@keyframes chibi-peek {
+  0%, 100% { transform: translateX(0) rotate(0deg); }
+  50% { transform: translateX(-3px) rotate(-3deg); }
+}
+@keyframes chibi-teardrop {
+  0% { opacity: 1; transform: translateY(0) scaleX(1); }
+  100% { opacity: 0; transform: translateY(12px) scaleX(0.5); }
+}
+@keyframes chibi-blink {
+  0%, 90%, 100% { transform: scaleY(1); }
+  95% { transform: scaleY(0.1); }
+}
+@keyframes chibi-zzz {
+  0% { opacity: 0; transform: translateX(0) translateY(0); }
+  50% { opacity: 1; transform: translateX(6px) translateY(-6px); }
+  100% { opacity: 0; transform: translateX(12px) translateY(-12px); }
+}
+@keyframes chibi-dots {
+  0% { opacity: 0; }
+  50% { opacity: 1; }
+  100% { opacity: 0; }
+}
+`;
+
+// ─── Variant animation styles ────────────────────────────────────────────────
+
+function getAnimation(variant: MascotVariant): React.CSSProperties {
+  const map: Record<MascotVariant, string> = {
+    idle: "chibi-bob 2.5s ease-in-out infinite",
+    waving: "chibi-bob 2.5s ease-in-out infinite",
+    sleeping: "chibi-sleep 3s ease-in-out infinite",
+    thinking: "chibi-think 2s ease-in-out infinite",
+    peeking: "chibi-peek 2s ease-in-out infinite",
+    crying: "chibi-cry 1.5s ease-in-out infinite",
+  };
+  return { animation: map[variant] };
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export function ChibiMascot({ variant = "idle", size = "md", className }: ChibiMascotProps) {
+  const px = sizes[size];
+  const scale = px / 80; // base design is 80px
+
+  // Parts of the chibi
+  const headSize = 50 * scale;
+  const earSize = 18 * scale;
+  const eyeSize = 8 * scale;
+  const blushSize = 10 * scale;
+  const bodyHeight = 30 * scale;
+  const bodyWidth = 40 * scale;
+
+  // Colors
+  const skin = "#FFE4D6";
+  const skinShadow = "#F5D5C3";
+  const hair = "#FFB7C5";
+  const hairDark = "#F59CB0";
+  const eyeColor = "#7EC8E3";
+  const eyeShine = "#FFFFFF";
+  const blush = "#FFB7C5";
+  const outfit = "#7EC8E3";
+  const outline = "#E8C4C9";
+
+  const parts: React.ReactNode[] = [];
+
+  // ─── Body ───
+  const Body = (
+    <div
+      key="body"
+      style={{
+        position: "absolute",
+        bottom: 0,
+        left: "50%",
+        marginLeft: -(bodyWidth / 2),
+        width: bodyWidth,
+        height: bodyHeight,
+        background: `linear-gradient(180deg, ${outfit} 0%, #6BB5D0 100%)`,
+        borderRadius: `${bodyWidth * 0.4}px ${bodyWidth * 0.4}px ${bodyWidth * 0.2}px ${bodyWidth * 0.2}px`,
+        border: `2px solid ${outline}`,
+        zIndex: 1,
+      }}
+    />
+  );
+  parts.push(Body);
+
+  // ─── Arms (waving variant) ───
+  if (variant === "waving") {
+    const Arm = (
+      <div
+        key="arm-right"
+        style={{
+          position: "absolute",
+          bottom: bodyHeight * 0.4,
+          right: "50%",
+          marginRight: -(bodyWidth / 2) - 8 * scale,
+          width: 8 * scale,
+          height: 20 * scale,
+          background: skin,
+          borderRadius: 4 * scale,
+          border: `1.5px solid ${outline}`,
+          transformOrigin: "bottom center",
+          animation: "chibi-wave 0.6s ease-in-out infinite",
+          zIndex: 2,
+        }}
+      />
+    );
+    parts.push(Arm);
+  }
+
+  // ─── Head ───
+  const Head = (
+    <div
+      key="head"
+      style={{
+        position: "absolute",
+        top: 0,
+        left: "50%",
+        marginLeft: -(headSize / 2),
+        width: headSize,
+        height: headSize,
+        background: skin,
+        borderRadius: "50%",
+        border: `2.5px solid ${outline}`,
+        zIndex: 3,
+        overflow: "visible",
+      }}
+    />
+  );
+  parts.push(Head);
+
+  // ─── Cat ears ───
+  const earStyle: React.CSSProperties = {
+    position: "absolute",
+    top: -earSize * 0.4,
+    width: 0,
+    height: 0,
+    borderLeft: `${earSize * 0.6}px solid transparent`,
+    borderRight: `${earSize * 0.6}px solid transparent`,
+    borderBottom: `${earSize}px solid ${hair}`,
+    zIndex: 4,
+    filter: `drop-shadow(0 1px 0 ${outline})`,
+  };
+
+  parts.push(
+    <div
+      key="ear-left"
+      style={{
+        ...earStyle,
+        left: "50%",
+        marginLeft: -(headSize * 0.4) - earSize * 0.3,
+      }}
+    />,
+  );
+  parts.push(
+    <div
+      key="ear-right"
+      style={{
+        ...earStyle,
+        right: "50%",
+        marginRight: -(headSize * 0.4) - earSize * 0.3,
+      }}
+    />,
+  );
+
+  // Inner ear (pink)
+  const innerEarStyle: React.CSSProperties = {
+    position: "absolute",
+    top: -earSize * 0.2,
+    width: 0,
+    height: 0,
+    borderLeft: `${earSize * 0.35}px solid transparent`,
+    borderRight: `${earSize * 0.35}px solid transparent`,
+    borderBottom: `${earSize * 0.6}px solid ${blush}`,
+    zIndex: 5,
+  };
+
+  parts.push(
+    <div
+      key="ear-inner-left"
+      style={{
+        ...innerEarStyle,
+        left: "50%",
+        marginLeft: -(headSize * 0.4) - earSize * 0.15,
+      }}
+    />,
+  );
+  parts.push(
+    <div
+      key="ear-inner-right"
+      style={{
+        ...innerEarStyle,
+        right: "50%",
+        marginRight: -(headSize * 0.4) - earSize * 0.15,
+      }}
+    />,
+  );
+
+  // ─── Hair bang ───
+  parts.push(
+    <div
+      key="hair-bang"
+      style={{
+        position: "absolute",
+        top: -2 * scale,
+        left: "50%",
+        marginLeft: -(headSize * 0.35),
+        width: headSize * 0.7,
+        height: headSize * 0.35,
+        background: hair,
+        borderRadius: `${headSize * 0.35}px ${headSize * 0.35}px 0 0`,
+        border: `1.5px solid ${hairDark}`,
+        zIndex: 6,
+      }}
+    />,
+  );
+
+  // ─── Eyes ───
+  if (variant === "sleeping") {
+    // Closed eyes (lines)
+    parts.push(
+      <div
+        key="eye-left"
+        style={{
+          position: "absolute",
+          top: headSize * 0.4,
+          left: "50%",
+          marginLeft: -(eyeSize * 1.2) - eyeSize,
+          width: eyeSize * 1.5,
+          height: 2.5 * scale,
+          background: "#555",
+          borderRadius: 2 * scale,
+          zIndex: 7,
+          animation: "chibi-sleep 3s ease-in-out infinite",
+        }}
+      />,
+    );
+    parts.push(
+      <div
+        key="eye-right"
+        style={{
+          position: "absolute",
+          top: headSize * 0.4,
+          left: "50%",
+          marginLeft: eyeSize * 0.8,
+          width: eyeSize * 1.5,
+          height: 2.5 * scale,
+          background: "#555",
+          borderRadius: 2 * scale,
+          zIndex: 7,
+          animation: "chibi-sleep 3s ease-in-out infinite",
+        }}
+      />,
+    );
+  } else if (variant === "crying") {
+    // Squeezed eyes
+    parts.push(
+      <div
+        key="eye-left"
+        style={{
+          position: "absolute",
+          top: headSize * 0.42,
+          left: "50%",
+          marginLeft: -(eyeSize * 1.2) - eyeSize,
+          width: eyeSize * 1.5,
+          height: eyeSize * 0.6,
+          background: "#555",
+          borderRadius: "50%",
+          zIndex: 7,
+          animation: "chibi-blink 3s 2s infinite",
+        }}
+      />,
+    );
+    parts.push(
+      <div
+        key="eye-right"
+        style={{
+          position: "absolute",
+          top: headSize * 0.42,
+          left: "50%",
+          marginLeft: eyeSize * 0.8,
+          width: eyeSize * 1.5,
+          height: eyeSize * 0.6,
+          background: "#555",
+          borderRadius: "50%",
+          zIndex: 7,
+          animation: "chibi-blink 3s 2s infinite",
+        }}
+      />,
+    );
+
+    // Teardrops
+    parts.push(
+      <div
+        key="tear-left"
+        style={{
+          position: "absolute",
+          top: headSize * 0.55,
+          left: "50%",
+          marginLeft: -(eyeSize * 1.5),
+          width: 3 * scale,
+          height: 6 * scale,
+          background: "#89CFF0",
+          borderRadius: "50%",
+          animation: "chibi-teardrop 1.5s ease-in infinite",
+          zIndex: 8,
+        }}
+      />,
+    );
+    parts.push(
+      <div
+        key="tear-right"
+        style={{
+          position: "absolute",
+          top: headSize * 0.58,
+          left: "50%",
+          marginLeft: eyeSize * 1.5,
+          width: 3 * scale,
+          height: 6 * scale,
+          background: "#89CFF0",
+          borderRadius: "50%",
+          animation: "chibi-teardrop 1.5s 0.5s ease-in infinite",
+          zIndex: 8,
+        }}
+      />,
+    );
+  } else {
+    // Normal big eyes
+    const eyeStyle: React.CSSProperties = {
+      position: "absolute",
+      top: headSize * 0.38,
+      width: eyeSize,
+      height: eyeSize * 1.1,
+      background: eyeColor,
+      borderRadius: "50%",
+      border: `1.5px solid #555`,
+      zIndex: 7,
+      animation: "chibi-blink 4s 1s infinite",
+    };
+
+    parts.push(
+      <div
+        key="eye-left"
+        style={{
+          ...eyeStyle,
+          left: "50%",
+          marginLeft: -(eyeSize * 1.2) - eyeSize * 0.5,
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: 1.5 * scale,
+            left: 1.5 * scale,
+            width: eyeSize * 0.35,
+            height: eyeSize * 0.35,
+            background: eyeShine,
+            borderRadius: "50%",
+          }}
+        />
+      </div>,
+    );
+    parts.push(
+      <div
+        key="eye-right"
+        style={{
+          ...eyeStyle,
+          left: "50%",
+          marginLeft: eyeSize * 0.3,
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: 1.5 * scale,
+            left: 1.5 * scale,
+            width: eyeSize * 0.35,
+            height: eyeSize * 0.35,
+            background: eyeShine,
+            borderRadius: "50%",
+          }}
+        />
+      </div>,
+    );
+  }
+
+  // ─── Blush ───
+  const blushStyle: React.CSSProperties = {
+    position: "absolute",
+    top: headSize * 0.52,
+    width: blushSize,
+    height: blushSize * 0.6,
+    background: blush,
+    borderRadius: "50%",
+    opacity: 0.5,
+    zIndex: 7,
+  };
+
+  parts.push(
+    <div key="blush-left" style={{ ...blushStyle, left: "50%", marginLeft: -(headSize * 0.4) }} />,
+  );
+  parts.push(
+    <div
+      key="blush-right"
+      style={{ ...blushStyle, right: "50%", marginRight: -(headSize * 0.4) }}
+    />,
+  );
+
+  // ─── Mouth ───
+  if (variant === "crying") {
+    parts.push(
+      <div
+        key="mouth"
+        style={{
+          position: "absolute",
+          top: headSize * 0.6,
+          left: "50%",
+          marginLeft: -(5 * scale),
+          width: 10 * scale,
+          height: 2 * scale,
+          borderBottom: `2px solid ${outline}`,
+          borderRadius: "50%",
+          zIndex: 8,
+        }}
+      />,
+    );
+  } else {
+    parts.push(
+      <div
+        key="mouth"
+        style={{
+          position: "absolute",
+          top: headSize * 0.6,
+          left: "50%",
+          marginLeft: -(3 * scale),
+          width: 6 * scale,
+          height: 3 * scale,
+          borderBottom: `2px solid ${outline}`,
+          borderLeft: `1px solid transparent`,
+          borderRight: `1px solid transparent`,
+          borderRadius: "0 0 50% 50%",
+          zIndex: 8,
+        }}
+      />,
+    );
+  }
+
+  // ─── Variant extras ───
+
+  // Thinking dots
+  if (variant === "thinking") {
+    parts.push(
+      <div
+        key="think-dot1"
+        style={{
+          position: "absolute",
+          top: -12 * scale,
+          right: -10 * scale,
+          width: 4 * scale,
+          height: 4 * scale,
+          background: "#999",
+          borderRadius: "50%",
+          animation: "chibi-dots 1.5s ease-in-out infinite",
+          zIndex: 10,
+        }}
+      />,
+    );
+    parts.push(
+      <div
+        key="think-dot2"
+        style={{
+          position: "absolute",
+          top: -18 * scale,
+          right: -14 * scale,
+          width: 5 * scale,
+          height: 5 * scale,
+          background: "#999",
+          borderRadius: "50%",
+          animation: "chibi-dots 1.5s 0.3s ease-in-out infinite",
+          zIndex: 10,
+        }}
+      />,
+    );
+    parts.push(
+      <div
+        key="think-dot3"
+        style={{
+          position: "absolute",
+          top: -25 * scale,
+          right: -12 * scale,
+          width: 6 * scale,
+          height: 6 * scale,
+          background: "#999",
+          borderRadius: "50%",
+          animation: "chibi-dots 1.5s 0.6s ease-in-out infinite",
+          zIndex: 10,
+        }}
+      />,
+    );
+  }
+
+  // Sleeping zzz
+  if (variant === "sleeping") {
+    parts.push(
+      <div
+        key="zzz1"
+        style={{
+          position: "absolute",
+          top: -14 * scale,
+          right: -8 * scale,
+          fontSize: 9 * scale,
+          fontWeight: 700,
+          color: "#7EC8E3",
+          animation: "chibi-zzz 2.5s ease-in-out infinite",
+          zIndex: 10,
+          fontFamily: "sans-serif",
+        }}
+      >
+        z
+      </div>,
+    );
+    parts.push(
+      <div
+        key="zzz2"
+        style={{
+          position: "absolute",
+          top: -22 * scale,
+          right: -2 * scale,
+          fontSize: 11 * scale,
+          fontWeight: 700,
+          color: "#7EC8E3",
+          animation: "chibi-zzz 2.5s 0.5s ease-in-out infinite",
+          zIndex: 10,
+          fontFamily: "sans-serif",
+        }}
+      >
+        z
+      </div>,
+    );
+    parts.push(
+      <div
+        key="zzz3"
+        style={{
+          position: "absolute",
+          top: -32 * scale,
+          right: 6 * scale,
+          fontSize: 13 * scale,
+          fontWeight: 700,
+          color: "#7EC8E3",
+          animation: "chibi-zzz 2.5s 1s ease-in-out infinite",
+          zIndex: 10,
+          fontFamily: "sans-serif",
+        }}
+      >
+        Z
+      </div>,
+    );
+  }
+
+  return (
+    <>
+      <style>{keyframes}</style>
+      <div
+        className={cn("relative inline-flex items-center justify-center", className)}
+        style={{
+          width: px,
+          height: px,
+          ...getAnimation(variant),
+        }}
+        aria-label={`Chibi mascot (${variant})`}
+        role="img"
+      >
+        {parts}
+      </div>
+    </>
+  );
+}
+
+// ─── Empty state with mascot ─────────────────────────────────────────────────
+
+interface EmptyStateMascotProps {
+  variant?: MascotVariant;
+  message: string;
+  action?: { label: string; onClick: () => void };
+  className?: string;
+}
+
+export function EmptyStateMascot({
+  variant = "idle",
+  message,
+  action,
+  className,
+}: EmptyStateMascotProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center gap-4 rounded-2xl border border-dashed border-sky-200 bg-white/60 p-8 text-center",
+        className,
+      )}
+    >
+      <ChibiMascot variant={variant} size="md" />
+      <p className="text-sm text-muted-foreground">{message}</p>
+      {action && (
+        <button
+          onClick={action.onClick}
+          className="rounded-xl bg-primary px-4 py-2 text-sm font-medium text-white shadow-sm transition-all hover:bg-primary/90 active:scale-95"
+        >
+          {action.label}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/services/frontend/tailwind.config.js b/services/frontend/tailwind.config.js
index 085792f..3ce7f27 100644
--- a/services/frontend/tailwind.config.js
+++ b/services/frontend/tailwind.config.js
@@ -9,6 +9,9 @@ export default {
         ring: "hsl(var(--ring))",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
+        "primary-soft": "hsl(var(--primary-soft))",
+        "primary-glow": "hsl(var(--primary-glow))",
+        "accent-glow": "hsl(var(--accent-glow))",
         primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
         secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
         muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
@@ -21,6 +24,20 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      animation: {
+        shimmer: "shimmer 2s linear infinite",
+        "bar-pulse": "bar-pulse 0.4s ease-in-out infinite",
+      },
+      keyframes: {
+        shimmer: {
+          "0%": { backgroundPosition: "-200% 0" },
+          "100%": { backgroundPosition: "200% 0" },
+        },
+        "bar-pulse": {
+          "0%, 100%": { transform: "scaleY(0.8)" },
+          "50%": { transform: "scaleY(1.2)" },
+        },
+      },
     },
   },
   plugins: [],