PixelPilot: Instructions file for GitHub Copilot

UI/UX Animated Number Counter

Scroll-triggered animated counters for statistics and KPIs. Token-aware, accessible, respects reduced motion.

---

OVERVIEW

This skill covers:

1. Scroll-triggered counter animation
2. Easing curves per design language
3. Number formatting (commas, decimals, prefix/suffix)
4. Accessibility considerations
5. Multiple counter variants

---

BASIC IMPLEMENTATION

HTML Structure

<div class="stats-grid">
  <div class="stat">
    <span 
      class="stat__number" 
      data-count-to="10000"
      data-count-suffix="+"
      data-count-duration="2000"
    >0</span>
    <span class="stat__label">Active Users</span>
  </div>
  
  <div class="stat">
    <span 
      class="stat__number" 
      data-count-to="99.9"
      data-count-suffix="%"
      data-count-decimals="1"
    >0</span>
    <span class="stat__label">Uptime</span>
  </div>
  
  <div class="stat">
    <span 
      class="stat__number" 
      data-count-to="500"
      data-count-prefix="$"
      data-count-suffix="M"
    >0</span>
    <span class="stat__label">Revenue</span>
  </div>
</div>

CSS

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8);
  text-align: center;
}

.stat {
  padding: var(--space-6);
}

.stat__number {
  display: block;
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: var(--space-2);
  
  /* Tabular numbers for consistent width during animation */
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--text-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Design language variations */
[data-language="luxury"] .stat__number {
  font-family: var(--font-display);
  font-weight: 300;
}

[data-language="expressive"] .stat__number {
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Reduced motion: no animation, just show final value */
@media (prefers-reduced-motion: reduce) {
  .stat__number[data-counted="true"] {
    transition: none;
  }
}