diff --git a/Art/UserAkku-Coffee-Cup-Animation/index.html b/Art/UserAkku-Coffee-Cup-Animation/index.html
new file mode 100644
index 000000000..7b9a702e1
--- /dev/null
+++ b/Art/UserAkku-Coffee-Cup-Animation/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Coffee Cup Animation</title>
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<div class="coffee-container">
+  <div class="cup">☕</div>
+  <div class="steam steam1"></div>
+  <div class="steam steam2"></div>
+  <div class="steam steam3"></div>
+  <div class="heart">❤️</div>
+  <div class="text">HOT & FRESH!</div>
+</div>
+</body>
+</html>
diff --git a/Art/UserAkku-Coffee-Cup-Animation/meta.json b/Art/UserAkku-Coffee-Cup-Animation/meta.json
new file mode 100644
index 000000000..c9d1ceff4
--- /dev/null
+++ b/Art/UserAkku-Coffee-Cup-Animation/meta.json
@@ -0,0 +1,4 @@
+{
+  "githubHandle": "UserAkku",
+  "artName": "Coffee Cup Animation"
+}
\ No newline at end of file
diff --git a/Art/UserAkku-Coffee-Cup-Animation/styles.css b/Art/UserAkku-Coffee-Cup-Animation/styles.css
new file mode 100644
index 000000000..f6190c2c8
--- /dev/null
+++ b/Art/UserAkku-Coffee-Cup-Animation/styles.css
@@ -0,0 +1,130 @@
+body {
+  margin: 0;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #2c3e50;
+  font-family: Arial, sans-serif;
+  overflow: hidden;
+}
+
+.coffee-container {
+  position: relative;
+  animation: bounce 2s ease-in-out infinite;
+}
+
+.cup {
+  font-size: 120px;
+  animation: tilt 3s ease-in-out infinite;
+  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-15px);
+  }
+}
+
+@keyframes tilt {
+  0%, 100% {
+    transform: rotate(-3deg);
+  }
+  50% {
+    transform: rotate(3deg);
+  }
+}
+
+.steam {
+  position: absolute;
+  width: 8px;
+  height: 60px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 50%;
+  top: -10px;
+  filter: blur(8px);
+  animation: rise 2s ease-in-out infinite;
+}
+
+.steam1 {
+  left: 30%;
+  animation-delay: 0s;
+}
+
+.steam2 {
+  left: 50%;
+  animation-delay: 0.3s;
+}
+
+.steam3 {
+  left: 70%;
+  animation-delay: 0.6s;
+}
+
+@keyframes rise {
+  0% {
+    opacity: 0;
+    transform: translateY(0) scaleX(1);
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-80px) scaleX(1.5);
+  }
+}
+
+.text {
+  position: absolute;
+  bottom: -70px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #ecf0f1;
+  font-size: 28px;
+  font-weight: bold;
+  white-space: nowrap;
+  animation: pulse-text 2s ease-in-out infinite;
+  text-shadow: 0 0 10px rgba(236, 240, 241, 0.5);
+}
+
+@keyframes pulse-text {
+  0%, 100% {
+    opacity: 0.7;
+    transform: translateX(-50%) scale(0.95);
+  }
+  50% {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+}
+
+.heart {
+  position: absolute;
+  font-size: 30px;
+  top: 50%;
+  left: 50%;
+  animation: float-heart 3s ease-in-out infinite;
+}
+
+@keyframes float-heart {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0) rotate(0deg);
+  }
+  30% {
+    opacity: 1;
+    transform: translate(-50%, -80%) scale(1) rotate(10deg);
+  }
+  60% {
+    opacity: 1;
+    transform: translate(-50%, -120%) scale(1.2) rotate(-10deg);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -180%) scale(0.8) rotate(0deg);
+  }
+}
