From e88f2a34855623dabb039fa669ccff5e95b6ce9a Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Tue, 23 Jun 2026 14:58:59 +1000
Subject: [PATCH] feat(site): add bouncy pop animation to inbox notification
 badge (#26057)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

> 🤖 This PR was written by Coder Agents on behalf of Jake Howell.

Replaces the basic `animate-in fade-in zoom-in duration-200` on the
inbox unread badge with a bouncier pop using an overshoot easing.

The badge now pops in from `scale(0)` with `cubic-bezier(0.34, 1.36,
0.64, 1)` over 500ms, giving it an elastic overshoot that makes it feel
alive. Uses `tailwindcss-animate` utilities (`animate-in zoom-in-0
fade-in-0`) with just one arbitrary property for the easing. Conditional
rendering is preserved as before.

Also adds a `BadgeTransition` story with toggle buttons for easy visual
verification.

<img width="150" height="150" alt="preview-notification-animation"
src="https://github.com/user-attachments/assets/70331cd2-c2e2-4fd7-8f9e-edfe876e2bab"
/>
---
 .../InboxButton.stories.tsx                   | 30 +++++++++++++++++++
 .../NotificationsInbox/InboxButton.tsx        |  7 +++--
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/site/src/modules/notifications/NotificationsInbox/InboxButton.stories.tsx b/site/src/modules/notifications/NotificationsInbox/InboxButton.stories.tsx
index 19a703b597..17fde1d62f 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxButton.stories.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxButton.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
 import { InboxButton } from "./InboxButton";
 
 const meta: Meta<typeof InboxButton> = {
@@ -16,3 +17,32 @@ export const Unread: Story = {
 		unreadCount: 3,
 	},
 };
+
+export const BadgeTransition: Story = {
+	render: function BadgeTransitionStory() {
+		const [count, setCount] = useState(0);
+
+		return (
+			<div className="flex items-center gap-4">
+				<InboxButton unreadCount={count} />
+				<div className="flex gap-2">
+					<button
+						type="button"
+						className="rounded border border-solid border-border px-3 py-1 text-sm bg-surface-primary text-content-primary"
+						onClick={() => setCount((c) => c + 1)}
+					>
+						Add notification
+					</button>
+					<button
+						type="button"
+						className="rounded border border-solid border-border px-3 py-1 text-sm bg-surface-primary text-content-primary"
+						onClick={() => setCount(0)}
+					>
+						Clear all
+					</button>
+				</div>
+				<span className="text-sm text-content-secondary">Count: {count}</span>
+			</div>
+		);
+	},
+};
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx b/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
index 387c66160d..e3bc95e667 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
@@ -17,11 +17,12 @@ export const InboxButton: React.FC<InboxButtonProps> = ({
 			{unreadCount > 0 && (
 				<UnreadBadge
 					count={unreadCount}
-					className={cn([
+					className={cn(
 						"[--offset:calc(var(--unread-badge-size)/2)]",
 						"absolute top-0 right-0 -mr-[--offset] -mt-[--offset]",
-						"animate-in fade-in zoom-in duration-200",
-					])}
+						"origin-center animate-in zoom-in-0 fade-in-0 duration-500",
+						"[animation-timing-function:cubic-bezier(0.34,1.36,0.64,1)]",
+					)}
 				/>
 			)}
 		</Button>