mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Greg Kilmer
61 lines
2.4 KiB
Plaintext
61 lines
2.4 KiB
Plaintext
---
|
|
/**
|
|
* StarField.astro
|
|
* ---------------------------------------------------------------------------
|
|
* A static field of tiny scattered stars + a few brighter sparkles, as inline
|
|
* SVG. Use as an ambient, non-animated decorative layer behind hero blocks or
|
|
* inside frames — the *animated* star field lives in AnimatedBackground.tsx.
|
|
*
|
|
* Stars are deterministic (hard-coded positions) so the layout is stable and
|
|
* cheap. Pointer-events disabled; inherits `currentColor`.
|
|
*
|
|
* Usage:
|
|
* <StarField class="absolute inset-0 h-full w-full" style="color: var(--color-amber); opacity:.5" />
|
|
*/
|
|
interface Props {
|
|
class?: string;
|
|
style?: string;
|
|
/** Seed for how many sparkles; keeps the markup compact. */
|
|
density?: 'sparse' | 'default' | 'dense';
|
|
}
|
|
const { class: className = '', style = '', density = 'default' } = Astro.props;
|
|
|
|
// Pre-baked star positions (cx, cy, r) on a 100x100 viewBox; scaled by density.
|
|
const baseDots: [number, number, number][] = [
|
|
[8, 12, 0.5], [22, 6, 0.7], [34, 18, 0.4], [47, 9, 0.6], [61, 14, 0.5],
|
|
[73, 5, 0.8], [86, 16, 0.4], [94, 8, 0.5], [14, 28, 0.4], [29, 34, 0.6],
|
|
[43, 27, 0.5], [57, 36, 0.4], [68, 29, 0.7], [81, 38, 0.5], [92, 31, 0.4],
|
|
[6, 46, 0.6], [19, 52, 0.4], [31, 47, 0.5], [44, 55, 0.4], [58, 49, 0.7],
|
|
[71, 54, 0.5], [84, 47, 0.4], [96, 55, 0.5], [12, 66, 0.4], [26, 72, 0.6],
|
|
[39, 64, 0.5], [52, 73, 0.4], [65, 67, 0.5], [78, 74, 0.7], [90, 68, 0.4],
|
|
[9, 84, 0.5], [23, 90, 0.4], [36, 86, 0.6], [49, 92, 0.4], [62, 85, 0.5],
|
|
[75, 91, 0.7], [88, 88, 0.4], [16, 40, 0.4], [50, 22, 0.4], [80, 60, 0.4],
|
|
];
|
|
// Brighter 4-point sparkles (cx, cy, size).
|
|
const sparkles: [number, number, number][] = [
|
|
[20, 20, 2.2], [70, 30, 1.8], [40, 60, 2.4], [85, 75, 1.6], [12, 70, 1.4],
|
|
];
|
|
|
|
const step = density === 'sparse' ? 2 : density === 'dense' ? 1 : 1;
|
|
const dots = baseDots.filter((_, i) => i % step === 0);
|
|
---
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 100 100"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
class={className}
|
|
style={style}
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
{dots.map(([x, y, r]) => (
|
|
<circle cx={x} cy={y} r={r} />
|
|
))}
|
|
{sparkles.map(([x, y, s]) => (
|
|
<path
|
|
d={`M${x} ${y - s}c${s * 0.18} ${s * 0.6} ${s * 0.4} ${s * 0.82} ${s} ${s}c${-s * 0.6}${s * 0.18} ${-s * 0.82}${s * 0.4} ${-s}${s}c${-s * 0.18}${-s * 0.6} ${-s * 0.4}${-s * 0.82} ${-s}${-s}c${s * 0.6}${-s * 0.18} ${s * 0.82}${-s * 0.4} ${s}${-s}z`}
|
|
opacity="0.9"
|
|
/>
|
|
))}
|
|
</svg>
|