diff --git a/20.html b/20.html
new file mode 100644
index 0000000..fdbda59
--- /dev/null
+++ b/20.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Sune Animation Demo - 20 Points</title>
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+<script src="https://cdn.tailwindcss.com"></script>
+<style>
+  .s-spikes-pulse { 
+    transform-origin: 50px 50px; 
+    animation: s-rapid 0.35s infinite; 
+  }
+  @keyframes s-rapid {
+    0%, 100% { transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+    50% { transform: scale(0.6); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+  }
+</style>
+</head>
+<body class="bg-gray-50 flex flex-col items-center justify-center min-h-screen gap-12 text-sm selection:bg-black/10 font-sans">
+
+<svg style="display:none">
+  <defs>
+    <polygon id="spike" points="47,50 50,2 53,50"/>
+    <g id="s-spikes">
+      <use href="#spike"/><use href="#spike" transform="rotate(18 50 50)"/><use href="#spike" transform="rotate(36 50 50)"/><use href="#spike" transform="rotate(54 50 50)"/><use href="#spike" transform="rotate(72 50 50)"/>
+      <use href="#spike" transform="rotate(90 50 50)"/><use href="#spike" transform="rotate(108 50 50)"/><use href="#spike" transform="rotate(126 50 50)"/><use href="#spike" transform="rotate(144 50 50)"/><use href="#spike" transform="rotate(162 50 50)"/>
+      <use href="#spike" transform="rotate(180 50 50)"/><use href="#spike" transform="rotate(198 50 50)"/><use href="#spike" transform="rotate(216 50 50)"/><use href="#spike" transform="rotate(234 50 50)"/><use href="#spike" transform="rotate(252 50 50)"/>
+      <use href="#spike" transform="rotate(270 50 50)"/><use href="#spike" transform="rotate(288 50 50)"/><use href="#spike" transform="rotate(306 50 50)"/><use href="#spike" transform="rotate(324 50 50)"/><use href="#spike" transform="rotate(342 50 50)"/>
+    </g>
+  </defs>
+</svg>
+
+<div class="w-full max-w-md bg-white rounded-2xl shadow-[0_10px_20px_rgba(0,0,0,0.05)] border border-gray-100 overflow-hidden">
+  <div class="px-4 py-3 border-b border-gray-100 font-semibold text-gray-900 flex justify-between items-center">
+    <span>Sune Chat View</span>
+  </div>
+  <div class="p-6">
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center gap-2 px-2">
+        <div class="bg-gray-200 text-gray-900 shrink-0 h-7 w-7 rounded-full flex items-center justify-center">
+          <svg viewBox="0 0 100 100" class="w-4 h-4 text-black">
+            <circle cx="50" cy="50" r="14" fill="currentColor"/>
+            <use href="#s-spikes" class="s-spikes-pulse" fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="text-xs font-medium text-gray-500">Sune · generating...</div>
+      </div>
+      <div class="bg-gray-50 rounded-2xl rounded-tl-none px-4 py-3 w-fit text-gray-800 border border-gray-100 shadow-sm animate-pulse">
+        Crafting something brilliant...
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="flex flex-col items-center gap-4">
+  <h2 class="text-[11px] font-bold text-gray-400 uppercase tracking-widest">Magnified View</h2>
+  <div class="w-32 h-32 flex items-center justify-center bg-white rounded-full shadow-[0_10px_30px_rgba(0,0,0,0.08)] border border-gray-100">
+    <svg viewBox="0 0 100 100" class="w-16 h-16 text-black">
+      <circle cx="50" cy="50" r="14" fill="currentColor"/>
+      <use href="#s-spikes" class="s-spikes-pulse" fill="currentColor"/>
+    </svg>
+  </div>
+</div>
+
+</body>
+</html>
