feat: animated location counter + original flag size

Author: onmax

app/components/CountryBubbles.vue

@@ -148,9 +148,9 @@ function createMarkerElement(country: CountryHotspot): HTMLElement {
     outline: 1.5px solid rgb(0 0 0 / 0.2); outline-offset: -1.5px;
   `
 
-  // Flag container with rounded corners
+  // Flag container with rounded corners (original icon size, clipped)
   const flagContainer = document.createElement('span')
-  flagContainer.style.cssText = 'flex-shrink: 0; width: 24px; height: 18px; border-radius: 4px; overflow: hidden; display: flex;'
+  flagContainer.style.cssText = 'flex-shrink: 0; border-radius: 4px; overflow: hidden; display: flex;'
 
   const textContainer = document.createElement('div')
   textContainer.style.cssText = 'display: flex; flex-direction: column; text-align: left;'
@@ -286,8 +286,8 @@ function flyToCountry(country: CountryHotspot) {
             <Icon name="i-tabler:navigation-filled" text-neutral-600 size-16 />
           </div>
           <!-- Flag with rounded corners -->
-          <span rounded-4 flex shrink-0 h-18 w-24 overflow-hidden>
-            <Icon :name="bubble.flagIcon" h-full w-full />
+          <span rounded-4 flex shrink-0 overflow-hidden>
+            <Icon :name="bubble.flagIcon" />
           </span>
           <div flex="~ col" text-left>
             <span text="14 neutral-900" lh-tight font-semibold>{{ bubble.name }}</span>

app/components/LocationCounter.vue

@@ -1,12 +1,29 @@
 <script setup lang="ts">
 import { consola } from 'consola'
+import { animate, useMotionValue } from 'motion-v'
 
 const { mapInstance } = useMapControls()
 const { locationCount, clusterCount } = useVisibleLocations()
 const hasVisibleFeatures = computed(() => locationCount.value > 0 || clusterCount.value > 0)
 const count = ref<number | null>(null)
 const loading = ref(false)
 
+// Animated count using motion value
+const animatedCount = useMotionValue(0)
+const displayCount = ref(0)
+
+watch(count, (newCount) => {
+  if (newCount === null)
+    return
+  animate(animatedCount, newCount, {
+    duration: 0.4,
+    ease: 'easeOut',
+    onUpdate: (latest: number) => {
+      displayCount.value = Math.round(latest)
+    },
+  })
+}, { immediate: true })
+
 const updateCount = useDebounceFn(async () => {
   if (!mapInstance.value)
     return
@@ -58,18 +75,33 @@ watch(mapInstance, (map) => {
   >
     <div
       v-if="hasVisibleFeatures && count !== null && count > 0"
-
       flex pointer-events-none bottom-8 left-0 right-0 justify-center fixed z-10
     >
       <div
         bg="white/90 backdrop-blur"
         text="neutral-700 f-xs"
-
         outline="~ 1.5 neutral/8 offset--1.5"
         font-medium px-8 py-3 rounded-full pointer-events-auto shadow-lg
       >
-        There are {{ count }} locations in this area
+        There are <span align-middle inline-flex h-16 items-center overflow-hidden><span :key="displayCount" class="animate-slide-in" inline-block tabular-nums>{{ displayCount }}</span></span> locations in this area
       </div>
     </div>
   </Transition>
 </template>
+
+<style scoped>
+.animate-slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

app/components/Search.vue

@@ -178,8 +178,8 @@ async function handleItemClick(item: SearchItem) {
 
     <ComboboxAnchor as="div" inset-x-0 top-0 absolute z-60>
       <div mt-12 px-12 w-screen relative>
-        <ComboboxInput ref="search-input" v-model="searchQuery" outline="0.5 neutral-400" name="search" placeholder="Search here" v-bind="$attrs" text-neutral px-47 py-10 rounded-full bg-neutral-0 w-full shadow transition-colors />
-        <button p-0 border-0 bg-transparent cursor-pointer translate-y-13.5 left-24 top-0 absolute @click="handleClose">
+        <ComboboxInput ref="search-input" v-model="searchQuery" outline="0.5 neutral-400" name="search" placeholder="Search here" v-bind="$attrs" text-neutral px-47 pb-12 pt-10 rounded-full bg-neutral-0 w-full shadow transition-colors />
+        <button p-0 border-0 bg-transparent cursor-pointer translate-y-13.5 left-28 top-0 absolute @click="handleClose">
           <Icon v-if="!isComboboxOpen" name="i-tabler:search" op-70 size-18 />
           <Icon v-else name="i-tabler:arrow-left" op-70 size-18 />
         </button>