diff --git a/docker/index.html b/docker/index.html
index 3f8fe82..79bba48 100644
--- a/docker/index.html
+++ b/docker/index.html
@@ -2732,10 +2732,11 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
 
   function renderFoodItemsHtml(items, startIndex) {
     return items.map((item, idx) => {
-      const globalIdx = startIndex + idx;
       const kh = parseKh(item.kh);
+      // Cap --i at batch size: max animation delay = 49 × 50ms = 2.45s
+      const animIdx = idx % SEARCH_PAGE_SIZE;
       return `
-        <li class="food-item" data-index="${voedingsmiddelen.indexOf(item)}" style="--i:${globalIdx}" role="button" tabindex="0">
+        <li class="food-item" data-index="${voedingsmiddelen.indexOf(item)}" style="--i:${animIdx}" role="button" tabindex="0">
           <div class="food-item-left">
             <div class="food-item-name">${escapeHtml(displayNaam(item.naam))}</div>
             <div class="food-item-cat">${escapeHtml(item.cat)}</div>
diff --git a/index.html b/index.html
index 3f8fe82..79bba48 100644
--- a/index.html
+++ b/index.html
@@ -2732,10 +2732,11 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
 
   function renderFoodItemsHtml(items, startIndex) {
     return items.map((item, idx) => {
-      const globalIdx = startIndex + idx;
       const kh = parseKh(item.kh);
+      // Cap --i at batch size: max animation delay = 49 × 50ms = 2.45s
+      const animIdx = idx % SEARCH_PAGE_SIZE;
       return `
-        <li class="food-item" data-index="${voedingsmiddelen.indexOf(item)}" style="--i:${globalIdx}" role="button" tabindex="0">
+        <li class="food-item" data-index="${voedingsmiddelen.indexOf(item)}" style="--i:${animIdx}" role="button" tabindex="0">
           <div class="food-item-left">
             <div class="food-item-name">${escapeHtml(displayNaam(item.naam))}</div>
             <div class="food-item-cat">${escapeHtml(item.cat)}</div>