From d4f51ee57fc34bf0cd2ce3d8903f560b525f2535 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 3 Mar 2026 07:55:47 +0100
Subject: [PATCH 1/3] feat: add easter egg CPR for sparkline pulse

---
 .../Package/WeeklyDownloadStats.vue           | 152 +++++++++++++++++-
 1 file changed, 149 insertions(+), 3 deletions(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index fa192bb187..aa7b8f1e5b 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -7,6 +7,7 @@ import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '~/utils/colors'
 import { applyBlocklistCorrection } from '~/utils/download-anomalies'
 import type { RepoRef } from '#shared/utils/git-providers'
 import type { VueUiSparklineConfig, VueUiSparklineDatasetItem } from 'vue-data-ui'
+import { onKeyDown } from '@vueuse/core'
 
 const props = defineProps<{
   packageName: string
@@ -205,6 +206,104 @@ const dataset = computed<VueUiSparklineDatasetItem[]>(() =>
 
 const lastDatapoint = computed(() => dataset.value.at(-1)?.period ?? '')
 
+const isLoop = ref(false)
+const showPulse = ref(true)
+const keyboardShortcuts = useKeyboardShortcuts()
+
+const cheatCode = [
+  'arrowup',
+  'arrowright',
+  'arrowleft',
+  'arrowup',
+  'arrowleft',
+  'arrowright',
+] as const
+
+type CheatKey = (typeof cheatCode)[number]
+
+const easterEgg = ref<CheatKey[]>([])
+let resetTimeout: ReturnType<typeof setTimeout> | undefined
+const easterEggResetDelay = 1500
+
+function resetEasterEgg() {
+  easterEgg.value = []
+  clearTimeout(resetTimeout)
+  resetTimeout = undefined
+}
+
+function pushEasterEggKey(key: CheatKey) {
+  clearTimeout(resetTimeout)
+  resetTimeout = setTimeout(resetEasterEgg, easterEggResetDelay)
+
+  const nextIndex = easterEgg.value.length
+
+  // Reset if the position is wrong
+  if (cheatCode[nextIndex] !== key) {
+    resetEasterEgg()
+    return
+  }
+
+  easterEgg.value.push(key)
+
+  // Match! reset & trigger
+  if (easterEgg.value.length === cheatCode.length) {
+    resetEasterEgg()
+    layEgg()
+  }
+}
+
+onKeyDown(
+  'ArrowUp',
+  e => {
+    if (!keyboardShortcuts.value) return
+    pushEasterEggKey('arrowup')
+  },
+  { dedupe: true },
+)
+
+onKeyDown(
+  'ArrowRight',
+  e => {
+    if (!keyboardShortcuts.value) return
+    pushEasterEggKey('arrowright')
+  },
+  { dedupe: true },
+)
+
+onKeyDown(
+  'ArrowLeft',
+  e => {
+    if (!keyboardShortcuts.value) return
+    pushEasterEggKey('arrowleft')
+  },
+  { dedupe: true },
+)
+
+onBeforeUnmount(() => {
+  resetEasterEgg()
+})
+
+const eggPulse = ref(false)
+
+function playEggPulse() {
+  eggPulse.value = false
+  void document.documentElement.offsetHeight
+  eggPulse.value = true
+
+  window.setTimeout(() => {
+    eggPulse.value = false
+  }, 900)
+}
+
+function layEgg() {
+  showPulse.value = false
+  nextTick(() => {
+    showPulse.value = true
+    isLoop.value = !isLoop.value
+    playEggPulse()
+  })
+}
+
 const config = computed<VueUiSparklineConfig>(() => {
   return {
     theme: 'dark',
@@ -248,8 +347,8 @@ const config = computed<VueUiSparklineConfig>(() => {
       line: {
         color: colors.value.borderHover,
         pulse: {
-          show: true, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui)
-          loop: false,
+          show: showPulse.value, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui)
+          loop: isLoop.value,
           radius: 1.5,
           color: pulseColor.value!,
           easing: 'ease-in-out',
@@ -306,7 +405,10 @@ const config = computed<VueUiSparklineConfig>(() => {
         <span v-else-if="isLoadingWeeklyDownloads" class="min-w-6 min-h-6 -m-1 p-1" />
       </template>
 
-      <div class="w-full overflow-hidden h-[76px]">
+      <div
+        class="w-full overflow-hidden h-[76px] egg-pulse-target"
+        :class="{ 'egg-pulse': eggPulse }"
+      >
         <template v-if="isLoadingWeeklyDownloads || hasWeeklyDownloads">
           <ClientOnly>
             <VueUiSparkline class="w-full max-w-xs" :dataset :config>
@@ -402,4 +504,48 @@ const config = computed<VueUiSparklineConfig>(() => {
     Geist Mono,
     monospace !important;
 }
+
+.egg-pulse-target {
+  transform-origin: center;
+  will-change: transform;
+}
+
+.egg-pulse {
+  animation: egg-heartbeat 900ms ease-in-out 0ms 1;
+}
+
+/* 3 heart pulses */
+@keyframes egg-heartbeat {
+  0% {
+    transform: scale(1);
+  }
+  10% {
+    transform: scale(1.1);
+  }
+  20% {
+    transform: scale(1);
+  }
+  35% {
+    transform: scale(1.03);
+  }
+  45% {
+    transform: scale(1);
+  }
+  60% {
+    transform: scale(1.01);
+  }
+  70% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .egg-pulse {
+    animation: none !important;
+    transform: none !important;
+  }
+}
 </style>

From d02f00d332afa47fb617fff6dc2452fea2db9588 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 3 Mar 2026 08:02:35 +0100
Subject: [PATCH 2/3] fix: follow the rabbit

---
 app/components/Package/WeeklyDownloadStats.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index aa7b8f1e5b..390e02e7a1 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -236,9 +236,9 @@ function pushEasterEggKey(key: CheatKey) {
   resetTimeout = setTimeout(resetEasterEgg, easterEggResetDelay)
 
   const nextIndex = easterEgg.value.length
-
+  const expectedKey = cheatCode[nextIndex]
   // Reset if the position is wrong
-  if (cheatCode[nextIndex] !== key) {
+  if (!expectedKey || expectedKey !== key) {
     resetEasterEgg()
     return
   }

From 4a6ec5be93b343d1c5f7adf73d46ca3e7cc348bd Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 3 Mar 2026 08:09:51 +0100
Subject: [PATCH 3/3] fix: follow the rabbit

---
 app/components/Package/WeeklyDownloadStats.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 390e02e7a1..74f3daa90b 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -206,8 +206,8 @@ const dataset = computed<VueUiSparklineDatasetItem[]>(() =>
 
 const lastDatapoint = computed(() => dataset.value.at(-1)?.period ?? '')
 
-const isLoop = ref(false)
-const showPulse = ref(true)
+const isLoop = shallowRef(false)
+const showPulse = shallowRef(true)
 const keyboardShortcuts = useKeyboardShortcuts()
 
 const cheatCode = [
@@ -221,7 +221,7 @@ const cheatCode = [
 
 type CheatKey = (typeof cheatCode)[number]
 
-const easterEgg = ref<CheatKey[]>([])
+const easterEgg = shallowRef<CheatKey[]>([])
 let resetTimeout: ReturnType<typeof setTimeout> | undefined
 const easterEggResetDelay = 1500
 
@@ -281,16 +281,22 @@ onKeyDown(
 
 onBeforeUnmount(() => {
   resetEasterEgg()
+  clearTimeout(eggPulseTimeout)
+  eggPulseTimeout = undefined
 })
 
 const eggPulse = ref(false)
 
+let eggPulseTimeout: ReturnType<typeof setTimeout> | undefined
+
 function playEggPulse() {
   eggPulse.value = false
   void document.documentElement.offsetHeight
   eggPulse.value = true
 
-  window.setTimeout(() => {
+  clearTimeout(eggPulseTimeout)
+
+  eggPulseTimeout = setTimeout(() => {
     eggPulse.value = false
   }, 900)
 }