From 275f2d75c3e43ab9fceb85ce15daa7267c5a82b5 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Wed, 14 Jan 2026 17:23:53 +0100
Subject: [PATCH] fix(animation): speech bubble now animates like bowl with
 scale

---
 src/main.css | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/main.css b/src/main.css
index 1d9d77f..e2e9863 100644
--- a/src/main.css
+++ b/src/main.css
@@ -664,8 +664,8 @@ kbd {
 	content: var(--crispy-quote, "Crispyyyyyy!");
 	position: absolute;
 	left: 55%;
-	top: 100%;
-	transform: translateX(-50%) scale(0.2);
+	bottom: 0;
+	transform: translateX(-50%) translateY(100%) scale(0.5);
 	font-family: system-ui, -apple-system, sans-serif;
 	font-size: 2rem;
 	font-weight: 800;
@@ -675,7 +675,7 @@ kbd {
 	padding: 1.25rem 2rem 1.75rem;
 	z-index: 10;
 	pointer-events: none;
-	animation: crispy-bounce 3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+	animation: crispy-bounce 3s ease-in-out forwards;
 	opacity: 0;
 	white-space: nowrap;
 	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
@@ -759,23 +759,21 @@ kbd {
 
 @keyframes crispy-bounce {
 	0% {
-		top: 100%;
-		transform: translateX(-50%) translateY(0) scale(0.2);
+		transform: translateX(-50%) translateY(100%) scale(0.5);
 		opacity: 0;
 	}
 	20% {
-		top: 50%;
-		transform: translateX(-50%) translateY(-50%) scale(1.3);
+		transform: translateX(-50%) translateY(-80%) scale(1.1);
 		opacity: 1;
 	}
+	35% {
+		transform: translateX(-50%) translateY(-70%) scale(1);
+	}
 	65% {
-		top: 50%;
-		transform: translateX(-50%) translateY(-50%) scale(1);
-		opacity: 1;
+		transform: translateX(-50%) translateY(-72%) scale(1);
 	}
 	100% {
-		top: 100%;
-		transform: translateX(-50%) translateY(0) scale(0.2);
+		transform: translateX(-50%) translateY(100%) scale(0.5);
 		opacity: 0;
 	}
 }