fix(onboarding): rewrite engagement animation to match Polymarket style

- Removed button color-change logic completely (fixes "stays colorful" bug)
- Floaters are now attached to the `<article>` node and positioned absolutely based on the button coords
- Reintroduced a random X/Y offset so numbers scatter organically and don't stack perfectly on top of each other
- Reduced floater font size to 12px for a subtler, "live event" feel
- Removed `!panelVisible` guard from the animation loop so floaters still spawn on large screens where the panel is always technically "visible" at the bottom
- Z-index remains confined to the article's stacking context, ensuring it never goes over the blur

Made-with: Cursor

Author: tsahimatsliah

packages/webapp/pages/onboarding-v2.tsx

@@ -719,7 +719,6 @@ const OnboardingV2Page = (): ReactElement => {
     const shouldRun =
       feedVisible &&
       !feedReadyState &&
-      !panelVisible &&
       !showSignupChooser &&
       !showSignupPrompt &&
       !showGithubImportFlow &&
@@ -823,6 +822,7 @@ const OnboardingV2Page = (): ReactElement => {
 
       const article = articles[Math.floor(Math.random() * articles.length)];
       article.setAttribute('data-eng-active', 'true');
+      article.classList.add('relative'); // Ensure article can contain absolute elements
 
       const isUpvote = Math.random() < 0.7;
       const suffix = isUpvote ? '-upvote-btn' : '-comment-btn';
@@ -835,27 +835,10 @@ const OnboardingV2Page = (): ReactElement => {
         return;
       }
 
-      const wrapperEl = wrapper as HTMLElement;
-      // Add CSS class instead of direct style mutation — the class provides
-      // position:relative via the stylesheet without forcing a style recalculation.
-      wrapperEl.classList.add('onb-eng-pos-relative');
-
-      const counter = ensureCounter(
-        wrapper,
-        isUpvote
-          ? 4 + Math.floor(Math.random() * 50)
-          : 1 + Math.floor(Math.random() * 10),
-      );
-
-      const activeClass = isUpvote
-        ? 'onb-eng-active-upvote'
-        : 'onb-eng-active-comment';
       const color = isUpvote
         ? 'var(--theme-actions-upvote-default)'
         : 'var(--theme-actions-comment-default)';
 
-      wrapperEl.classList.add(activeClass);
-
       const numIncrements = 1 + Math.floor(Math.random() * 3); // 1 to 3 increments
       const increments: number[] = [];
       for (let i = 0; i < numIncrements; i += 1) {
@@ -875,35 +858,35 @@ const OnboardingV2Page = (): ReactElement => {
 
       increments.forEach((inc) => {
         addTimeout(() => {
-          // Restart the pulse animation without reading layout (offsetWidth
-          // forces a synchronous reflow). Setting animationName to 'none' is a
-          // write-only style operation, then the next rAF restores it so the
-          // animation re-runs from the start.
-          btn.classList.remove('onb-eng-pulse');
-          (btn as HTMLElement).style.animationName = 'none';
-          requestAnimationFrame(() => {
-            (btn as HTMLElement).style.animationName = '';
-            btn.classList.add('onb-eng-pulse');
-          });
-
-          const currentVal = parseCount(counter.textContent || '') || 0;
-          counter.textContent = formatCount(currentVal + inc);
-
-          const floaterAnchor =
-            counter.parentElement instanceof HTMLElement
-              ? counter.parentElement
-              : wrapperEl;
-          floaterAnchor.classList.add('onb-eng-pos-relative');
+          const btnRect = btn.getBoundingClientRect();
+          const articleRect = article.getBoundingClientRect();
+
+          // Center of the button relative to the article
+          const startX = btnRect.left - articleRect.left + btnRect.width / 2;
+          const startY = btnRect.top - articleRect.top;
 
           const floater = document.createElement('span');
           floater.className = 'onb-eng-floater';
           floater.style.color = color;
-          floater.style.left = `${counter.offsetLeft}px`;
-          floater.style.top = `${counter.offsetTop}px`;
+
+          // Random offset so they don't stack on top of each other (PolyMarket style)
+          const offsetX = (Math.random() - 0.5) * 32; // -16px to +16px
+          const offsetY = (Math.random() - 0.5) * 16; // -8px to +8px
+
+          floater.style.left = `${startX + offsetX}px`;
+          floater.style.top = `${startY + offsetY}px`;
           floater.textContent = `+${inc}`;
-          floaterAnchor.appendChild(floater);
+
+          article.appendChild(floater);
           activeFloaters.add(floater);
 
+          // Update the actual counter text
+          const counter = ensureCounter(wrapper, isUpvote ? 14 : 3);
+          if (counter) {
+            const currentVal = parseCount(counter.textContent || '') || 0;
+            counter.textContent = formatCount(currentVal + inc);
+          }
+
           addTimeout(() => {
             floater.remove();
             activeFloaters.delete(floater);
@@ -914,7 +897,6 @@ const OnboardingV2Page = (): ReactElement => {
       });
 
       addTimeout(() => {
-        wrapperEl.classList.remove(activeClass);
         article.removeAttribute('data-eng-active');
       }, delayAcc + 600);
 
@@ -2836,70 +2818,34 @@ const OnboardingV2Page = (): ReactElement => {
           opacity: 1;
         }
 
-        .onb-eng-active-upvote,
-        .onb-eng-active-upvote svg,
-        .onb-eng-active-upvote span {
-          color: var(--theme-actions-upvote-default) !important;
-        }
-        .onb-eng-active-comment,
-        .onb-eng-active-comment svg,
-        .onb-eng-active-comment span {
-          color: var(--theme-actions-comment-default) !important;
-        }
-
-        .onb-eng-pulse {
-          animation: onb-eng-pulse-anim 0.3s
-            cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        @keyframes onb-eng-pulse-anim {
-          0% {
-            transform: scale(1);
-          }
-          50% {
-            transform: scale(1.25);
-          }
-          100% {
-            transform: scale(1);
-          }
-        }
-
-        .onb-eng-pos-relative {
-          position: relative;
-        }
-        .onb-eng-floater-anchor {
-          position: relative;
-        }
         .onb-eng-floater {
           position: absolute;
-          font-size: 0.875rem;
+          font-size: 0.75rem;
           font-weight: 800;
           font-variant-numeric: tabular-nums;
           white-space: nowrap;
           pointer-events: none;
-          z-index: 2;
-          animation: onb-eng-float-anim 1.4s ease-out forwards;
+          z-index: 10;
+          animation: onb-eng-float-anim 1.6s cubic-bezier(0.2, 0.8, 0.2, 1)
+            forwards;
           text-shadow: 0 1px 4px
             color-mix(in srgb, currentColor 25%, transparent);
         }
         @keyframes onb-eng-float-anim {
           0% {
-            transform: translateY(0) scale(0.6);
+            transform: translateY(10px) scale(0.6);
             opacity: 0;
           }
-          10% {
-            transform: translateY(-8px) scale(1.1);
+          15% {
+            transform: translateY(0px) scale(1.1);
             opacity: 1;
           }
-          25% {
-            transform: translateY(-12px) scale(1);
+          30% {
+            transform: translateY(-5px) scale(1);
             opacity: 1;
           }
-          70% {
-            transform: translateY(-24px) scale(1);
-            opacity: 0.8;
-          }
           100% {
-            transform: translateY(-32px) scale(0.95);
+            transform: translateY(-30px) scale(0.9);
             opacity: 0;
           }
         }