Generate Social Proof Counter Section

What This Sidekick Query Does

Create a social proof counter section with animated statistics:

Counter Items (each counter includes):

  Large number value: [NUMBER]
  Number prefix (optional): e.g., “$”, “#”
  Number suffix (optional): e.g., “+”, “%”, “K”, “M”
  Label text below number: [LABEL_TEXT]
  Small icon above or beside number (optional)


Suggested Counters:

  Happy customers: [NUMBER]+
  Orders shipped: [NUMBER]+
  Products sold: [NUMBER]+
  Countries served: [NUMBER]+
  Years in business: [NUMBER]+
  5-star reviews: [NUMBER]+
  Satisfaction rate: [NUMBER]%


Animation Settings:

  Count-up animation from 0 to target number
  Animation duration: [DURATION] milliseconds
  Animation easing: [linear/ease-out/ease-in-out]
  Trigger: animate when section scrolls into viewport
  Animate only once or every time in view: [once/always]


Layout Options:

  Counters per row: [3/4/5/6]
  Counter alignment: [center/left]
  Dividers between counters: [none/vertical-line]
  Layout style: [inline-row/cards/icon-boxes]


Design Settings:

  Background: [color/gradient/image]
  Number color: [NUMBER_COLOR]
  Number font size: [SIZE]px
  Label color: [LABEL_COLOR]
  Section heading: [SECTION_HEADING]
  Padding: [TOP_PADDING]px / [BOTTOM_PADDING]px


Requirements:

  IntersectionObserver for scroll-triggered animation
  Responsive: 2 per row on tablet, 1-2 on mobile
  Accessible: numbers readable without animation
  Lightweight (no heavy animation libraries)
  Support for [NUMBER] counter items

Expected Output

Tips to Improve Results