Skip to content

Add sparkle animation to bg-dots via SVG overlay #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Copilot wants to merge 13 commits into from
Closed

Add sparkle animation to bg-dots via SVG overlay #37

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
167807d
Initial plan
Copilot Feb 4, 2026
b4c4ac6
Add sparkle animation to bg-dots via opacity keyframe animation
Copilot Feb 4, 2026
73f4f95
Remove package-lock.json (project uses pnpm)
Copilot Feb 4, 2026
c4046a0
Improve sparkle animation with varied non-uniform glimmer effect
Copilot Feb 4, 2026
17f116d
Remove package-lock.json (project uses pnpm)
Copilot Feb 4, 2026
fb349c0
Add subtle twinkle animation to bg-dots preserving original styling
Copilot Feb 4, 2026
48e8b4c
Remove package-lock.json (project uses pnpm)
Copilot Feb 4, 2026
62778f4
Add individual dot twinkle animation with SVG overlay
Copilot Feb 4, 2026
301dd80
Remove package-lock.json (project uses pnpm)
Copilot Feb 4, 2026
54f3b1c
Increase sparkle animation rate for bg-dots
Copilot Feb 4, 2026
9f0fd92
Remove package-lock.json (project uses pnpm)
Copilot Feb 4, 2026
f4853b9
Fix twinkle dot positioning to align with background grid
Copilot Feb 4, 2026
2875b89
Remove package-lock.json (project uses pnpm)
Copilot Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 57 additions & 1 deletion src/components/Dots.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,59 @@
<div class="absolute top-0 left-0 flex h-12 w-full justify-center p-2">
<div class="bg-dots-light dark:bg-dots-dark h-12 w-full bg-repeat-x"></div>
<div class="relative h-12 w-full">
<!-- Base dots layer -->
<div class="bg-dots-light dark:bg-dots-dark absolute inset-0 bg-repeat-x"></div>

<!-- Twinkling dots overlay - viewBox matches background SVG -->
<svg class="absolute inset-0 h-full w-full" viewBox="0 0 974 47" preserveAspectRatio="xMinYMin slice">
<!-- Positioned at exact grid coordinates (9px spacing, starting at 1) -->
<circle class="twinkle-dot twinkle-1" cx="10" cy="10" r="1" />
<circle class="twinkle-dot twinkle-2" cx="100" cy="19" r="1" />
<circle class="twinkle-dot twinkle-3" cx="226" cy="10" r="1" />
<circle class="twinkle-dot twinkle-4" cx="370" cy="1" r="1" />
<circle class="twinkle-dot twinkle-5" cx="478" cy="19" r="1" />
<circle class="twinkle-dot twinkle-6" cx="595" cy="10" r="1" />
<circle class="twinkle-dot twinkle-7" cx="721" cy="1" r="1" />
<circle class="twinkle-dot twinkle-8" cx="838" cy="19" r="1" />
<circle class="twinkle-dot twinkle-9" cx="919" cy="10" r="1" />
</svg>
</div>
</div>

<style>
.twinkle-dot {
opacity: 0;
fill: #9090A0;
}

@media (prefers-color-scheme: dark) {
.twinkle-dot {
fill: #667188;
}
}

.twinkle-1 { animation: twinkle 2.5s ease-in-out infinite 0.2s; }
.twinkle-2 { animation: twinkle 3s ease-in-out infinite 0.8s; }
.twinkle-3 { animation: twinkle 2.8s ease-in-out infinite 0.4s; }
.twinkle-4 { animation: twinkle 3.5s ease-in-out infinite 1.5s; }
.twinkle-5 { animation: twinkle 2.2s ease-in-out infinite 1s; }
.twinkle-6 { animation: twinkle 3.2s ease-in-out infinite 0s; }
.twinkle-7 { animation: twinkle 2.6s ease-in-out infinite 1.8s; }
.twinkle-8 { animation: twinkle 2.9s ease-in-out infinite 0.6s; }
.twinkle-9 { animation: twinkle 3.4s ease-in-out infinite 2s; }

@keyframes twinkle {
0%, 70%, 100% {
opacity: 0;
}
80%, 90% {
opacity: 1;
}
}

@media (prefers-reduced-motion: reduce) {
.twinkle-dot {
animation: none;
opacity: 0;
}
}
</style>