solar-background 0.1.0

package/src/style.css

@@ -0,0 +1,467 @@
+body {
+  margin: 0;
+  min-height: 100vh;
+  overflow: hidden;
+  background: radial-gradient(circle at top, #07142b 0%, #02040e 42%, #000000 100%);
+  font-family: Inter, system-ui, sans-serif;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 22%),
+    radial-gradient(circle at 80% 15%, rgba(82, 180, 255, 0.06), transparent 18%),
+    radial-gradient(circle at 60% 85%, rgba(249, 237, 173, 0.05), transparent 16%);
+  pointer-events: none;
+}
+
+.scene {
+  position: absolute;
+  inset: 0;
+  width: min(90vmin, 760px);
+  height: min(90vmin, 760px);
+  margin: auto;
+  z-index: 3;
+  transform-origin: center;
+  animation: scene-zoom 20s ease-in-out infinite alternate;
+}
+
+.sun {
+  position: absolute;
+  inset: 50%;
+  transform: translate(-50%, -50%);
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 38% 32%, #fff9d4 0%, #ffe57d 16%, #ffba3f 34%, #ff8d1d 58%, #e85a0f 80%, #b83006 96%),
+    radial-gradient(circle at 62% 55%, rgba(255, 220, 120, 0.94) 0%, rgba(255, 150, 40, 0.78) 28%, rgba(230, 100, 24, 0.5) 62%, transparent 100%);
+  box-shadow:
+    0 0 120px rgba(255, 175, 55, 0.96),
+    0 0 240px rgba(255, 135, 20, 0.3),
+    inset 0 0 32px rgba(255, 250, 210, 0.92);
+  overflow: hidden;
+  animation: sun-pulse 4.2s ease-in-out infinite alternate;
+}
+
+.sun::before {
+  content: '';
+  position: absolute;
+  inset: 10%;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.75) 0%, transparent 40%),
+    radial-gradient(circle at 50% 55%, rgba(255, 210, 90, 0.45) 0%, transparent 38%),
+    radial-gradient(circle at 65% 60%, rgba(255, 160, 45, 0.28) 0%, transparent 45%);
+  background-size: 160% 160%;
+  filter: blur(3px);
+  mix-blend-mode: screen;
+  animation: sun-surface 4.6s ease-in-out infinite alternate;
+}
+
+.sun::after {
+  content: '';
+  position: absolute;
+  inset: -22%;
+  border-radius: 50%;
+  background: conic-gradient(from 0deg, transparent 0deg 10deg, rgba(255, 224, 140, 0.18) 10deg 16deg, transparent 16deg 24deg, rgba(255, 180, 75, 0.13) 24deg 32deg, transparent 32deg 360deg);
+  opacity: 0.8;
+  filter: blur(14px);
+  animation: sun-flares 6.4s linear infinite;
+}
+
+.orbit {
+  position: absolute;
+  inset: 50%;
+  transform: translate(-50%, -50%);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 50%;
+  z-index: 4;
+}
+
+.orbit-mercury {
+  width: 130px;
+  height: 130px;
+  animation: orbit 4s linear infinite;
+}
+
+.orbit-venus {
+  width: 180px;
+  height: 180px;
+  animation: orbit 7s linear infinite reverse;
+}
+
+.orbit-earth {
+  width: 240px;
+  height: 240px;
+  animation: orbit 10s linear infinite;
+}
+
+.orbit-mars {
+  width: 300px;
+  height: 300px;
+  animation: orbit 16s linear infinite ;
+}
+
+.orbit-jupiter {
+  width: 380px;
+  height: 380px;
+  animation: orbit 24s linear infinite;
+}
+
+.orbit-saturn {
+  width: 460px;
+  height: 460px;
+  animation: orbit 32s linear infinite ;
+}
+
+.orbit-uranus {
+  width: 540px;
+  height: 540px;
+  animation: orbit 46s linear infinite reverse;
+}
+
+.orbit-neptune {
+  width: 620px;
+  height: 620px;
+  animation: orbit 56s linear infinite ;
+}
+
+.orbit-pluto {
+  width: 700px;
+  height: 700px;
+  animation: orbit 68s linear infinite;
+}
+
+@keyframes orbit {
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@keyframes sun-pulse {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    box-shadow:
+      0 0 110px rgba(255, 175, 55, 0.96),
+      0 0 230px rgba(255, 135, 20, 0.3),
+      inset 0 0 30px rgba(255, 250, 210, 0.92);
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.02);
+    box-shadow:
+      0 0 120px rgba(255, 190, 65, 0.96),
+      0 0 250px rgba(255, 140, 25, 0.32),
+      inset 0 0 34px rgba(255, 255, 220, 0.94);
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    box-shadow:
+      0 0 110px rgba(255, 175, 55, 0.96),
+      0 0 230px rgba(255, 135, 20, 0.3),
+      inset 0 0 30px rgba(255, 250, 210, 0.92);
+  }
+}
+
+@keyframes sun-surface {
+  0% {
+    background-position: 0% 0%;
+    opacity: 1;
+  }
+  50% {
+    background-position: 40% 45%;
+    opacity: 0.92;
+  }
+  100% {
+    background-position: 0% 15%;
+    opacity: 1;
+  }
+}
+
+@keyframes sun-flares {
+  from {
+    transform: rotate(0deg);
+    opacity: 0.82;
+  }
+  to {
+    transform: rotate(360deg);
+    opacity: 0.68;
+  }
+}
+
+@keyframes scene-zoom {
+  0% {
+    transform: scale(1) translateZ(0);
+  }
+  100% {
+    transform: scale(1.08) translateZ(0);
+  }
+}
+
+.planet,
+.moon {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(50%, -50%);
+  border-radius: 50%;
+  background-size: cover;
+  background-position: center;
+  box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
+  z-index: 5;
+}
+
+.mercury,
+.venus,
+.earth,
+.mars,
+.jupiter,
+.saturn,
+.uranus,
+.neptune,
+.pluto {
+  width: 16px;
+  height: 16px;
+}
+
+.moon {
+  width: 8px;
+  height: 8px;
+  background-image: url('/images/moon.png');
+  background-color: #ccc;
+}
+
+.mercury {
+  width: 14px;
+  height: 14px;
+  background-image: url('/images/mercury.png');
+}
+
+.venus {
+  width: 16px;
+  height: 16px;
+  background-image: url('/images/venus.png');
+}
+
+.earth {
+  width: 22px;
+  height: 22px;
+  background-image: url('/images/earth.png');
+}
+
+.mars {
+  width: 18px;
+  height: 18px;
+  background-image: url('/images/mars.png');
+}
+
+.jupiter {
+  width: 28px;
+  height: 28px;
+  background-image: url('/images/jupiter.png');
+}
+
+.saturn {
+  width: 26px;
+  height: 26px;
+  background-image: url('/images/saturn.png');
+}
+
+.uranus {
+  width: 22px;
+  height: 22px;
+  background-image: url('/images/uranus.png');
+}
+
+.neptune {
+  width: 20px;
+  height: 20px;
+  background-image: url('/images/neptune.png');
+}
+
+.pluto {
+  width: 14px;
+  height: 14px;
+  background-image: url('/images/pluto.png');
+}
+
+.earth .moon-orbit {
+  position: absolute;
+  inset: 50%;
+  width: 48px;
+  height: 48px;
+  transform: translate(-50%, -50%);
+  border: 1px dashed rgba(255, 255, 255, 0.18);
+  border-radius: 50%;
+  animation: orbit 3s linear infinite;
+}
+
+.earth .moon {
+  right: -6px;
+  top: 50%;
+  transform: translate(50%, -50%);
+}
+
+.star {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.zodiac-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1; /* behind the solar scene */
+}
+
+.zodiac-sign {
+  position: absolute;
+  width: min(34vmin, 360px);
+  height: min(34vmin, 360px);
+  padding: 1rem;
+  opacity: 0;
+  pointer-events: none;
+  animation: constellation-appear 3.4s ease-in-out forwards;
+  transform-origin: left;
+}
+
+.left-sign {
+  left: 2%;
+}
+
+.right-sign {
+  right: 2%;
+}
+
+.zodiac-pointer {
+  position: absolute;
+  inset: 0;
+}
+
+.pattern-star {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: radial-gradient(circle, #ffffff 0%, rgba(255,255,255,0.1) 100%);
+  box-shadow: 0 0 16px rgba(255, 255, 255, 0.6);
+}
+
+.pattern-line {
+  position: absolute;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.685);
+  box-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
+  transform-origin: left center;
+}
+
+.pattern-title {
+  position: absolute;
+  left: 1rem;
+  top: 1rem;
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: rgba(255, 255, 255, 0.92);
+  font-weight: 700;
+  text-shadow: 0 0 18px rgba(255, 255, 255, 0.15);
+}
+
+.pattern-subtitle {
+  position: absolute;
+  left: 1rem;
+  bottom: 1rem;
+  font-size: 0.92rem;
+  color: rgba(255, 255, 255, 0.76);
+}
+
+.pattern-glyph {
+  position: absolute;
+  right: 1rem;
+  top: 4rem;
+  font-size: 2.2rem;
+  line-height: 1;
+}
+
+.pattern-pair {
+  position: absolute;
+  right: 1rem;
+  bottom: 5rem;
+  font-size: 1.1rem;
+  color: rgba(255, 255, 255, 0.9);
+  letter-spacing: 0.08em;
+}
+
+@keyframes constellation-appear {
+  0% {
+    opacity: 0;
+    transform: translateY(15px) scale(0.96);
+  }
+  15% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  85% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.96);
+  }
+}
+
+.zodiac-star {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
+}
+
+.zodiac-line {
+  position: absolute;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.45);
+  transform-origin: left center;
+  box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
+}
+
+.zodiac-glyph {
+  position: absolute;
+  font-size: 48px;
+  filter: drop-shadow(0 0 8px rgba(255,255,255,0.2));
+  pointer-events: none;
+}
+
+.zodiac-label {
+  position: absolute;
+  color: rgba(255, 255, 255, 0.95);
+  font-size: 1rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-weight: 700;
+  text-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
+}
+
+@keyframes zodiac-fade {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  15% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  85% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}

package/vite.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import path from 'path'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/main.js'),
+      name: 'SolarBackground',
+      fileName: (format) => `solar-background.${format === 'es' ? 'esm' : 'umd'}.js`,
+      formats: ['es', 'umd'],
+    },
+    rollupOptions: {
+      external: [],
+    },
+  },
+})