Add sparkle animation to bg-dots via SVG overlay

[Copilot]

Animate individual dots to sparkle independently. Repeating background images can't animate individual elements, so an SVG overlay approach is used.

Approach

• Base layer unchanged: Original bg-dots-light/bg-dots-dark background preserved
• SVG overlay: 9 circles positioned at exact grid coordinates with independent animation timing
• Pixel-perfect alignment: viewBox="0 0 974 47" matches background SVG; dots placed on 9px grid

<!-- viewBox matches background SVG -->
<svg viewBox="0 0 974 47" preserveAspectRatio="xMinYMin slice">
  <circle class="twinkle-dot twinkle-1" cx="10" cy="10" r="1" />
  <circle class="twinkle-dot twinkle-2" cx="100" cy="19" r="1" />
  <!-- ... -->
</svg>

Animation

• 2.2-3.5s cycles with staggered delays (0-2s)
• Dots flash visible at 80-90% of cycle, invisible otherwise
• prefers-reduced-motion disables animation
• prefers-color-scheme adjusts fill colors

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
starpod	Ready	Preview, Comment	Feb 4, 2026 5:51pm