Starfield

1<script>
2  const stars = Array.from({ length: 60 }, (_, i) => ({
3    x: (i * 53) % 100, y: (i * 37) % 100, s: 1 + (i % 3), d: (i % 10) / 3
4  }));
5</script>
6
7<div class="sky">
8  {#each stars as st}
9    <span style="left:{st.x}%;top:{st.y}%;width:{st.s}px;height:{st.s}px;animation-delay:{st.d}s"></span>
10  {/each}
11</div>
12
13<style>
14  .sky{position:relative;width:440px;height:260px;border-radius:20px;overflow:hidden;
15    background:radial-gradient(ellipse at 50% 120%,#1e1b4b,#070710 70%)}
16  .sky span{position:absolute;border-radius:50%;background:#fff;animation:tw 2.4s ease-in-out infinite}
17  @keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}
18</style>