solar-background 0.1.0

package/src/main.js

@@ -0,0 +1,1076 @@
+const solarBackgroundStyle = `
+.solar-background-root {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
+  background: radial-gradient(circle at top, #07142b 0%, #02040e 42%, #000000 100%);
+  font-family: Inter, system-ui, sans-serif;
+}
+
+.solar-background-root::before {
+  content: '';
+  position: absolute;
+  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;
+}
+
+.solar-background-root .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;
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+}
+
+.solar-background-root .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;
+  z-index: 6;
+}
+
+.solar-background-root .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;
+}
+
+.solar-background-root .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;
+}
+
+.solar-background-root .orbit {
+  position: absolute;
+  inset: 50%;
+  transform: translate(-50%, -50%);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 50%;
+  z-index: 4;
+}
+
+.solar-background-root .orbit-mercury {
+  width: 130px;
+  height: 130px;
+  animation: orbit 4s linear infinite;
+}
+
+.solar-background-root .orbit-venus {
+  width: 180px;
+  height: 180px;
+  animation: orbit 7s linear infinite reverse;
+}
+
+.solar-background-root .orbit-earth {
+  width: 240px;
+  height: 240px;
+  animation: orbit 10s linear infinite;
+}
+
+.solar-background-root .orbit-mars {
+  width: 300px;
+  height: 300px;
+  animation: orbit 16s linear infinite;
+}
+
+.solar-background-root .orbit-jupiter {
+  width: 380px;
+  height: 380px;
+  animation: orbit 24s linear infinite;
+}
+
+.solar-background-root .orbit-saturn {
+  width: 460px;
+  height: 460px;
+  animation: orbit 32s linear infinite;
+}
+
+.solar-background-root .orbit-uranus {
+  width: 540px;
+  height: 540px;
+  animation: orbit 46s linear infinite reverse;
+}
+
+.solar-background-root .orbit-neptune {
+  width: 620px;
+  height: 620px;
+  animation: orbit 56s linear infinite;
+}
+
+.solar-background-root .orbit-pluto {
+  width: 700px;
+  height: 700px;
+  animation: orbit 68s linear infinite;
+}
+
+@keyframes orbit {
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+.solar-background-root .planet,
+.solar-background-root .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;
+}
+
+.solar-background-root .mercury,
+.solar-background-root .venus,
+.solar-background-root .earth,
+.solar-background-root .mars,
+.solar-background-root .jupiter,
+.solar-background-root .saturn,
+.solar-background-root .uranus,
+.solar-background-root .neptune,
+.solar-background-root .pluto {
+  width: 16px;
+  height: 16px;
+}
+
+.solar-background-root .moon {
+  width: 8px;
+  height: 8px;
+  background-color: #ccc;
+}
+
+.solar-background-root .mercury {
+  width: 14px;
+  height: 14px;
+  background-image: url('/images/mercury.png');
+}
+
+.solar-background-root .venus {
+  width: 16px;
+  height: 16px;
+  background-image: url('/images/venus.png');
+}
+
+.solar-background-root .earth {
+  width: 22px;
+  height: 22px;
+  background-image: url('/images/earth.png');
+}
+
+.solar-background-root .mars {
+  width: 18px;
+  height: 18px;
+  background-image: url('/images/mars.png');
+}
+
+.solar-background-root .jupiter {
+  width: 28px;
+  height: 28px;
+  background-image: url('/images/jupiter.png');
+}
+
+.solar-background-root .saturn {
+  width: 26px;
+  height: 26px;
+  background-image: url('/images/saturn.png');
+}
+
+.solar-background-root .uranus {
+  width: 22px;
+  height: 22px;
+  background-image: url('/images/uranus.png');
+}
+
+.solar-background-root .neptune {
+  width: 20px;
+  height: 20px;
+  background-image: url('/images/neptune.png');
+}
+
+.solar-background-root .pluto {
+  width: 14px;
+  height: 14px;
+  background-image: url('/images/pluto.png');
+}
+
+.solar-background-root .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;
+}
+
+.solar-background-root .earth .moon {
+  right: -6px;
+  top: 50%;
+  transform: translate(50%, -50%);
+}
+
+.solar-background-root .star {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.solar-background-root .zodiac-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.solar-background-root .zodiac-sign {
+  position: absolute;
+  width: var(--solar-card-width, min(34vmin, 360px));
+  height: var(--solar-card-height, min(34vmin, 360px));
+  padding: var(--solar-card-padding, 2rem);
+  opacity: 0;
+  pointer-events: none;
+  animation: constellation-appear 3.4s ease-in-out forwards;
+  transform-origin: center;
+  border-radius: var(--solar-card-radius, 24px);
+  background: var(--solar-card-bg, transparent);
+  border: 1px solid var(--solar-card-border, rgba(255, 255, 255, 0.12));
+  box-shadow: var(--solar-card-boxshadow, rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset);
+  will-change: opacity, transform;
+}
+
+.solar-background-root .left-sign {
+  left: 10%;
+}
+
+.solar-background-root .right-sign {
+  right: 2%;
+}
+
+.solar-background-root .pattern-star {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  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);
+}
+
+.solar-background-root .pattern-line {
+  position: absolute;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.45);
+  box-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
+  transform-origin: left center;
+}
+
+.solar-background-root .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);
+}
+
+.solar-background-root .pattern-subtitle {
+  position: absolute;
+  left: 1rem;
+  bottom: var(--pattern-subtitle-bottom, 1rem);
+  font-size: var(--pattern-subtitle-size, 0.92rem);
+  color: var(--pattern-subtitle-color, rgba(255, 255, 255, 0.76));
+}
+
+.solar-background-root .pattern-glyph {
+  position: absolute;
+  right: 1rem;
+  top: 3rem;
+  font-size: 2.2rem;
+  line-height: 1;
+}
+
+.solar-background-root .pattern-pair {
+  position: absolute;
+  right: 1rem;
+  bottom: var(--pattern-pair-bottom, 4rem);
+  font-size: var(--pattern-pair-size, 1.1rem);
+  color: var(--pattern-pair-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);
+  }
+}
+
+@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);
+  }
+}
+`
+
+const zodiacAnimalConstellations = [
+  {
+    zodiac: 'Sagittarius',
+    animal: 'Rat',
+    traits: ['Deeply curious', 'Highly sociable', 'Quick-witted', 'Freedom-loving'],
+    zodiacStars: [
+      { id: 'S1', x: 40, y: 30, name: 'Kaus Media' },
+      { id: 'S2', x: 45, y: 45, name: 'Kaus Australis' },
+      { id: 'S3', x: 55, y: 50, name: 'Ascella' },
+      { id: 'S4', x: 60, y: 35, name: 'Nunki' },
+      { id: 'S5', x: 50, y: 25, name: 'Kaus Borealis' },
+      { id: 'S6', x: 30, y: 25, name: 'Alnasl' },
+    ],
+    zodiacLines: [
+      ['S1', 'S2'],
+      ['S2', 'S3'],
+      ['S3', 'S4'],
+      ['S4', 'S5'],
+      ['S5', 'S1'],
+      ['S1', 'S6'],
+      ['S2', 'S5'],
+    ],
+    animalStars: [
+      { id: 'R1', x: 20, y: 70, name: 'Snout' },
+      { id: 'R2', x: 35, y: 60, name: 'Head' },
+      { id: 'R3', x: 30, y: 45, name: 'Ear' },
+      { id: 'R4', x: 55, y: 65, name: 'Body' },
+      { id: 'R5', x: 75, y: 75, name: 'Tail Base' },
+      { id: 'R6', x: 90, y: 60, name: 'Tail Tip' },
+    ],
+    animalLines: [
+      ['R1', 'R2'],
+      ['R2', 'R3'],
+      ['R3', 'R2'],
+      ['R2', 'R4'],
+      ['R4', 'R5'],
+      ['R5', 'R6'],
+    ],
+  },
+  {
+    zodiac: 'Capricorn',
+    animal: 'Ox',
+    traits: ['Hardworking', 'Methodical', 'Disciplined', 'Stable'],
+    zodiacStars: [
+      { id: 'C1', x: 20, y: 30, name: 'Algedi' },
+      { id: 'C2', x: 25, y: 35, name: 'Dabih' },
+      { id: 'C3', x: 45, y: 60, name: 'Rucha' },
+      { id: 'C4', x: 70, y: 50, name: 'Nashira' },
+      { id: 'C5', x: 75, y: 45, name: 'Deneb Algedi' },
+    ],
+    zodiacLines: [
+      ['C1', 'C2'],
+      ['C2', 'C3'],
+      ['C3', 'C4'],
+      ['C4', 'C5'],
+      ['C5', 'C1'],
+    ],
+    animalStars: [
+      { id: 'O1', x: 25, y: 35, name: 'Left Horn' },
+      { id: 'O2', x: 40, y: 45, name: 'Head' },
+      { id: 'O3', x: 55, y: 35, name: 'Right Horn' },
+      { id: 'O4', x: 40, y: 65, name: 'Front Legs' },
+      { id: 'O5', x: 70, y: 60, name: 'Back' },
+      { id: 'O6', x: 75, y: 75, name: 'Hind Legs' },
+    ],
+    animalLines: [
+      ['O1', 'O2'],
+      ['O3', 'O2'],
+      ['O2', 'O4'],
+      ['O2', 'O5'],
+      ['O5', 'O6'],
+    ],
+  },
+  {
+    zodiac: 'Aquarius',
+    animal: 'Tiger',
+    traits: ['Fiercely independent', 'Natural leader', 'Unpredictable'],
+    zodiacStars: [
+      { id: 'AQ1', x: 30, y: 20, name: 'Sadalmelik' },
+      { id: 'AQ2', x: 45, y: 30, name: 'Sadalsuud' },
+      { id: 'AQ3', x: 40, y: 50, name: 'Ancha' },
+      { id: 'AQ4', x: 60, y: 65, name: 'Skat' },
+    ],
+    zodiacLines: [
+      ['AQ1', 'AQ2'],
+      ['AQ2', 'AQ3'],
+      ['AQ3', 'AQ4'],
+    ],
+    animalStars: [
+      { id: 'T1', x: 20, y: 40, name: 'Jaw' },
+      { id: 'T2', x: 35, y: 30, name: 'Crown' },
+      { id: 'T3', x: 50, y: 45, name: 'Shoulder' },
+      { id: 'T4', x: 45, y: 70, name: 'Forepaw' },
+      { id: 'T5', x: 70, y: 50, name: 'Spine' },
+      { id: 'T6', x: 85, y: 35, name: 'Tail' },
+    ],
+    animalLines: [
+      ['T1', 'T2'],
+      ['T2', 'T3'],
+      ['T3', 'T4'],
+      ['T3', 'T5'],
+      ['T5', 'T6'],
+    ],
+  },
+  {
+    zodiac: 'Pisces',
+    animal: 'Rabbit',
+    traits: ['Gentle', 'Highly sensitive', 'Artistic', 'Peace-loving'],
+    zodiacStars: [
+      { id: 'P1', x: 20, y: 20, name: 'Alpherg' },
+      { id: 'P2', x: 40, y: 40, name: 'Baten Kaitos' },
+      { id: 'P3', x: 60, y: 60, name: 'Alrescha' },
+      { id: 'P4', x: 75, y: 45, name: 'Fumalsamakah' },
+    ],
+    zodiacLines: [
+      ['P1', 'P2'],
+      ['P2', 'P3'],
+      ['P3', 'P4'],
+    ],
+    animalStars: [
+      { id: 'RB1', x: 30, y: 25, name: 'Ear Tip 1' },
+      { id: 'RB2', x: 35, y: 25, name: 'Ear Tip 2' },
+      { id: 'RB3', x: 33, y: 40, name: 'Head' },
+      { id: 'RB4', x: 20, y: 45, name: 'Nose' },
+      { id: 'RB5', x: 55, y: 50, name: 'Spine' },
+      { id: 'RB6', x: 70, y: 60, name: 'Tail' },
+    ],
+    animalLines: [
+      ['RB1', 'RB3'],
+      ['RB2', 'RB3'],
+      ['RB4', 'RB3'],
+      ['RB3', 'RB5'],
+      ['RB5', 'RB6'],
+    ],
+  },
+  {
+    zodiac: 'Aries',
+    animal: 'Dragon',
+    traits: ['Bold', 'Fiercely confident', 'Passionate', 'Dynamic'],
+    zodiacStars: [
+      { id: 'A1', x: 30, y: 30, name: 'Hamal' },
+      { id: 'A2', x: 55, y: 40, name: 'Sheratan' },
+      { id: 'A3', x: 70, y: 55, name: 'Mesarthim' },
+    ],
+    zodiacLines: [
+      ['A1', 'A2'],
+      ['A2', 'A3'],
+    ],
+    animalStars: [
+      { id: 'D1', x: 20, y: 30, name: 'Dragon Horn' },
+      { id: 'D2', x: 30, y: 45, name: 'Head' },
+      { id: 'D3', x: 45, y: 40, name: 'Neck Crest' },
+      { id: 'D4', x: 55, y: 60, name: 'Body Coil' },
+      { id: 'D5', x: 75, y: 55, name: 'Lower Tail' },
+      { id: 'D6', x: 85, y: 70, name: 'Tail Flare' },
+    ],
+    animalLines: [
+      ['D1', 'D2'],
+      ['D2', 'D3'],
+      ['D3', 'D4'],
+      ['D4', 'D5'],
+      ['D5', 'D6'],
+    ],
+  },
+  {
+    zodiac: 'Virgo',
+    animal: 'Snake',
+    traits: ['Deeply analytical', 'Wise', 'Perfectionistic', 'Private'],
+    zodiacStars: [
+      { id: 'V1', x: 30, y: 25, name: 'Zavijava' },
+      { id: 'V2', x: 40, y: 40, name: 'Porrima' },
+      { id: 'V3', x: 55, y: 45, name: 'Spica' },
+      { id: 'V4', x: 70, y: 35, name: 'Heze' },
+      { id: 'V5', x: 65, y: 20, name: 'Vindemiatrix' },
+    ],
+    zodiacLines: [
+      ['V1', 'V2'],
+      ['V2', 'V3'],
+      ['V3', 'V4'],
+      ['V4', 'V5'],
+      ['V2', 'V5'],
+    ],
+    animalStars: [
+      { id: 'SN1', x: 30, y: 30, name: 'Head' },
+      { id: 'SN2', x: 45, y: 35, name: 'Upper Coil' },
+      { id: 'SN3', x: 40, y: 55, name: 'Middle Body' },
+      { id: 'SN4', x: 60, y: 60, name: 'Lower Coil' },
+      { id: 'SN5', x: 75, y: 45, name: 'Tail Tip' },
+    ],
+    animalLines: [
+      ['SN1', 'SN2'],
+      ['SN2', 'SN3'],
+      ['SN3', 'SN4'],
+      ['SN4', 'SN5'],
+    ],
+  },
+  {
+    zodiac: 'Gemini',
+    animal: 'Horse',
+    traits: ['Energetic', 'Highly adaptable', 'Talkative', 'Restless'],
+    zodiacStars: [
+      { id: 'G1', x: 30, y: 25, name: 'Castor' },
+      { id: 'G2', x: 35, y: 30, name: 'Pollux' },
+      { id: 'G3', x: 55, y: 50, name: 'Mebsuta' },
+      { id: 'G4', x: 60, y: 55, name: 'Alhena' },
+    ],
+    zodiacLines: [
+      ['G1', 'G3'],
+      ['G2', 'G4'],
+      ['G1', 'G2'],
+      ['G3', 'G4'],
+    ],
+    animalStars: [
+      { id: 'H1', x: 25, y: 30, name: 'Mane' },
+      { id: 'H2', x: 40, y: 35, name: 'Chest' },
+      { id: 'H3', x: 35, y: 65, name: 'Front Hoof' },
+      { id: 'H4', x: 65, y: 40, name: 'Flank' },
+      { id: 'H5', x: 75, y: 70, name: 'Rear Hoof' },
+    ],
+    animalLines: [
+      ['H1', 'H2'],
+      ['H2', 'H3'],
+      ['H2', 'H4'],
+      ['H4', 'H5'],
+    ],
+  },
+  {
+    zodiac: 'Cancer',
+    animal: 'Goat',
+    traits: ['Nurturing', 'Family-oriented', 'Creative', 'Emotional'],
+    zodiacStars: [
+      { id: 'CN1', x: 50, y: 20, name: 'Tegmine' },
+      { id: 'CN2', x: 50, y: 45, name: 'Asellus Borealis' },
+      { id: 'CN3', x: 35, y: 70, name: 'Acubens' },
+      { id: 'CN4', x: 65, y: 70, name: 'Altarf' },
+    ],
+    zodiacLines: [
+      ['CN1', 'CN2'],
+      ['CN2', 'CN3'],
+      ['CN2', 'CN4'],
+    ],
+    animalStars: [
+      { id: 'GT1', x: 35, y: 25, name: 'Left Horn' },
+      { id: 'GT2', x: 45, y: 35, name: 'Head' },
+      { id: 'GT3', x: 40, y: 60, name: 'Front Leg' },
+      { id: 'GT4', x: 65, y: 45, name: 'Torso' },
+      { id: 'GT5', x: 70, y: 65, name: 'Back Leg' },
+    ],
+    animalLines: [
+      ['GT1', 'GT2'],
+      ['GT2', 'GT3'],
+      ['GT2', 'GT4'],
+      ['GT4', 'GT5'],
+    ],
+  },
+  {
+    zodiac: 'Leo',
+    animal: 'Monkey',
+    traits: ['Energetic', 'Charismatic', 'Confident', 'Center of attention'],
+    zodiacStars: [
+      { id: 'L1', x: 35, y: 30, name: 'Algieba' },
+      { id: 'L2', x: 30, y: 45, name: 'Regulus' },
+      { id: 'L3', x: 55, y: 45, name: 'Chertan' },
+      { id: 'L4', x: 70, y: 35, name: 'Denebola' },
+    ],
+    zodiacLines: [
+      ['L1', 'L2'],
+      ['L2', 'L3'],
+      ['L3', 'L4'],
+      ['L4', 'L1'],
+    ],
+    animalStars: [
+      { id: 'M1', x: 30, y: 35, name: 'Crown Head' },
+      { id: 'M2', x: 45, y: 45, name: 'Shoulders' },
+      { id: 'M3', x: 35, y: 65, name: 'Reaching Arm' },
+      { id: 'M4', x: 65, y: 50, name: 'Hips' },
+      { id: 'M5', x: 80, y: 30, name: 'Curled Tail' },
+    ],
+    animalLines: [
+      ['M1', 'M2'],
+      ['M2', 'M3'],
+      ['M2', 'M4'],
+      ['M4', 'M5'],
+    ],
+  },
+  {
+    zodiac: 'Taurus',
+    animal: 'Rooster',
+    traits: ['Highly practical', 'Grounded', 'Fiercely loyal', 'Detail-oriented'],
+    zodiacStars: [
+      { id: 'TA1', x: 25, y: 25, name: 'El???' },
+      { id: 'TA2', x: 45, y: 40, name: 'Aldebaran' },
+      { id: 'TA3', x: 65, y: 55, name: 'Ain' },
+      { id: 'TA4', x: 35, y: 60, name: 'Alcyone (Pleiades)' },
+    ],
+    zodiacLines: [
+      ['TA1', 'TA2'],
+      ['TA2', 'TA3'],
+      ['TA2', 'TA4'],
+    ],
+    animalStars: [
+      { id: 'RS1', x: 25, y: 35, name: 'Beak' },
+      { id: 'RS2', x: 35, y: 25, name: 'Comb' },
+      { id: 'RS3', x: 45, y: 45, name: 'Breast' },
+      { id: 'RS4', x: 65, y: 35, name: 'Feather Plume' },
+      { id: 'RS5', x: 50, y: 65, name: 'Spur/Leg' },
+    ],
+    animalLines: [
+      ['RS1', 'RS3'],
+      ['RS2', 'RS3'],
+      ['RS3', 'RS4'],
+      ['RS3', 'RS5'],
+    ],
+  },
+  {
+    zodiac: 'Libra',
+    animal: 'Dog',
+    traits: ['Driven by justice', 'Fair play', 'Extreme loyalty'],
+    zodiacStars: [
+      { id: 'LB1', x: 45, y: 25, name: 'Zubeneschamali' },
+      { id: 'LB2', x: 35, y: 45, name: 'Zubenelgenubi' },
+      { id: 'LB3', x: 60, y: 50, name: 'Zubenelhakrabi' },
+    ],
+    zodiacLines: [
+      ['LB1', 'LB2'],
+      ['LB1', 'LB3'],
+      ['LB2', 'LB3'],
+    ],
+    animalStars: [
+      { id: 'DG1', x: 25, y: 40, name: 'Muzzle' },
+      { id: 'DG2', x: 40, y: 35, name: 'Perked Ear' },
+      { id: 'DG3', x: 45, y: 55, name: 'Front Paw' },
+      { id: 'DG4', x: 65, y: 50, name: 'Rump' },
+      { id: 'DG5', x: 80, y: 40, name: 'Alert Tail' },
+    ],
+    animalLines: [
+      ['DG1', 'DG2'],
+      ['DG2', 'DG3'],
+      ['DG2', 'DG4'],
+      ['DG4', 'DG5'],
+    ],
+  },
+  {
+    zodiac: 'Scorpius',
+    animal: 'Pig',
+    traits: ['Intense', 'Deeply passionate', 'Luxurious', 'Emotional inner world'],
+    zodiacStars: [
+      { id: 'SC1', x: 25, y: 30, name: 'Dschubba' },
+      { id: 'SC2', x: 40, y: 35, name: 'Antares' },
+      { id: 'SC3', x: 55, y: 55, name: 'Shaula' },
+      { id: 'SC4', x: 70, y: 70, name: 'Lesath' },
+    ],
+    zodiacLines: [
+      ['SC1', 'SC2'],
+      ['SC2', 'SC3'],
+      ['SC3', 'SC4'],
+    ],
+    animalStars: [
+      { id: 'PG1', x: 25, y: 50, name: 'Snout' },
+      { id: 'PG2', x: 40, y: 40, name: 'Head/Ear' },
+      { id: 'PG3', x: 60, y: 45, name: 'Round Flank' },
+      { id: 'PG4', x: 45, y: 65, name: 'Plump Leg' },
+      { id: 'PG5', x: 75, y: 40, name: 'Curly Tail' },
+    ],
+    animalLines: [
+      ['PG1', 'PG2'],
+      ['PG2', 'PG3'],
+      ['PG2', 'PG4'],
+      ['PG3', 'PG5'],
+    ],
+  },
+]
+
+const zodiacGlyphMap = {
+  Aries: '♈',
+  Taurus: '♉',
+  Gemini: '♊',
+  Cancer: '♋',
+  Leo: '♌',
+  Virgo: '♍',
+  Libra: '♎',
+  Scorpio: '♏',
+  Sagittarius: '♐',
+  Capricorn: '♑',
+  Aquarius: '♒',
+  Pisces: '♓',
+}
+
+const animalGlyphMap = {
+  Rat: '🐀',
+  Ox: '🐂',
+  Tiger: '🐅',
+  Rabbit: '🐇',
+  Dragon: '🐉',
+  Snake: '🐍',
+  Horse: '🐎',
+  Goat: '🐐',
+  Monkey: '🐒',
+  Rooster: '🐓',
+  Dog: '🐕',
+  Pig: '🐖',
+}
+
+const instanceMap = new WeakMap()
+
+function injectStyle() {
+  if (document.getElementById('solar-background-style')) {
+    return
+  }
+
+  const styleElement = document.createElement('style')
+  styleElement.id = 'solar-background-style'
+  styleElement.textContent = solarBackgroundStyle
+  document.head.appendChild(styleElement)
+}
+
+function createSceneMarkup() {
+  return `
+    <div class="scene">
+      <div class="sun"></div>
+      <div class="orbit orbit-mercury"><div class="planet mercury"></div></div>
+      <div class="orbit orbit-venus"><div class="planet venus"></div></div>
+      <div class="orbit orbit-earth">
+        <div class="planet earth">
+          <div class="moon-orbit"><div class="moon"></div></div>
+        </div>
+      </div>
+      <div class="orbit orbit-mars"><div class="planet mars"></div></div>
+      <div class="orbit orbit-jupiter"><div class="planet jupiter"></div></div>
+      <div class="orbit orbit-saturn"><div class="planet saturn"></div></div>
+      <div class="orbit orbit-uranus"><div class="planet uranus"></div></div>
+      <div class="orbit orbit-neptune"><div class="planet neptune"></div></div>
+      <div class="orbit orbit-pluto"><div class="planet pluto"></div></div>
+    </div>
+    <div class="zodiac-layer"></div>
+  `
+}
+
+function createStars(root, starCount = 12260) {
+  for (let i = 0; i < starCount; i++) {
+    const star = document.createElement('span')
+    star.className = 'star'
+    const size = Math.random() * 1 + 0.8
+    star.style.width = `${size}px`
+    star.style.height = `${size}px`
+    star.style.top = `${Math.random() * 100}%`
+    star.style.left = `${Math.random() * 100}%`
+    star.style.opacity = `${Math.random() * 0.6 + 0.2}`
+    star.style.transform = 'translate(-50%, -50%)'
+    root.appendChild(star)
+  }
+}
+
+function createPatternCard(root, data, type, side, cycleDuration) {
+  const zodiacLayer = root.querySelector('.zodiac-layer')
+  if (!zodiacLayer) return
+
+  const patternStars = type === 'zodiac' ? data.zodiacStars : data.animalStars
+  const patternLines = type === 'zodiac' ? data.zodiacLines : data.animalLines
+
+  const card = document.createElement('div')
+  card.className = `zodiac-sign ${type}-sign ${side}-sign`
+  card.style.top = `${Math.random() * 34 + 10}%`
+
+  const title = document.createElement('div')
+  title.className = 'pattern-title'
+  title.textContent = type === 'zodiac' ? `${data.zodiac} Constellation` : `${data.animal} Pattern`
+  card.appendChild(title)
+
+  const subtitle = document.createElement('div')
+  subtitle.className = 'pattern-subtitle'
+  subtitle.textContent = type === 'zodiac' ? data.traits.join(' • ') : `Animal: ${data.animal}`
+  card.appendChild(subtitle)
+
+  const glyph = document.createElement('div')
+  glyph.className = 'pattern-glyph'
+  glyph.textContent = type === 'zodiac' ? zodiacGlyphMap[data.zodiac] : animalGlyphMap[data.animal] || data.animal
+  card.appendChild(glyph)
+
+  const pair = document.createElement('div')
+  pair.className = 'pattern-pair'
+  pair.textContent = type === 'zodiac' ? data.animal : data.zodiac
+  card.appendChild(pair)
+
+  zodiacLayer.appendChild(card)
+
+  const rect = card.getBoundingClientRect()
+  const w = rect.width
+  const h = rect.height
+  const starMap = new Map(patternStars.map((star) => [star.id, star]))
+
+  patternStars.forEach((star) => {
+    const mark = document.createElement('span')
+    mark.className = 'pattern-star'
+    mark.style.left = `${star.x}%`
+    mark.style.top = `${star.y}%`
+    card.appendChild(mark)
+  })
+
+  patternLines.forEach(([a, b]) => {
+    const from = starMap.get(a)
+    const to = starMap.get(b)
+    if (!from || !to) return
+
+    const x1 = (from.x / 100) * w
+    const y1 = (from.y / 100) * h
+    const x2 = (to.x / 100) * w
+    const y2 = (to.y / 100) * h
+    const dx = x2 - x1
+    const dy = y2 - y1
+    const line = document.createElement('span')
+    line.className = 'pattern-line'
+    line.style.width = `${Math.sqrt(dx * dx + dy * dy)}px`
+    line.style.left = `${x1}px`
+    line.style.top = `${y1}px`
+    line.style.transform = `rotate(${Math.atan2(dy, dx)}rad)`
+    card.appendChild(line)
+  })
+
+  setTimeout(() => {
+    if (zodiacLayer.contains(card)) zodiacLayer.removeChild(card)
+  }, cycleDuration - 300)
+}
+
+function shuffle(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[array[i], array[j]] = [array[j], array[i]]
+  }
+  return array
+}
+
+function showNextZodiacAnimalPair(root, cycleDuration = 4200, animalDelay = 1400) {
+  const meta = instanceMap.get(root) || {}
+  let order = meta.order
+  let idx = typeof meta.index === 'number' ? meta.index : 0
+
+  if (!order || !order.length) {
+    order = shuffle(Array.from({ length: zodiacAnimalConstellations.length }, (_, i) => i))
+    idx = 0
+  }
+
+  const data = zodiacAnimalConstellations[order[idx]]
+  createPatternCard(root, data, 'zodiac', 'left', cycleDuration)
+  setTimeout(() => createPatternCard(root, data, 'animal', 'right', cycleDuration), animalDelay)
+
+  idx++
+  if (idx >= order.length) {
+    order = shuffle(order.slice())
+    idx = 0
+  }
+
+  instanceMap.set(root, { ...meta, order, index: idx, interval: meta.interval })
+}
+
+function createSolarBackground(target = document.body, options = {}) {
+  injectStyle()
+
+  const container = typeof target === 'string' ? document.querySelector(target) : target
+  if (!container) {
+    throw new Error('SolarBackground: mount target not found')
+  }
+
+  if (container !== document.body) {
+    const computed = getComputedStyle(container)
+    if (computed.position === 'static') {
+      container.style.position = 'relative'
+    }
+  }
+
+  const wrapper = document.createElement('div')
+  wrapper.className = 'solar-background-root'
+  wrapper.style.position = options.wrapperPosition || 'absolute'
+  wrapper.style.inset = '0'
+  wrapper.style.width = '100%'
+  wrapper.style.height = '100%'
+  wrapper.style.zIndex = options.wrapperZIndex ?? '-1'
+  wrapper.style.pointerEvents = 'none'
+
+  wrapper.innerHTML = createSceneMarkup()
+  container.appendChild(wrapper)
+
+  createStars(wrapper, options.starCount ?? 260)
+
+  const cycleDuration = options.cycleDuration ?? 4200
+  const animalDelay = options.animalDelay ?? 1400
+  // initialize ordered sequence so each sign shows before repeating
+  const initialOrder = options.order || shuffle(Array.from({ length: zodiacAnimalConstellations.length }, (_, i) => i))
+  instanceMap.set(wrapper, { order: initialOrder, index: 0 })
+  showNextZodiacAnimalPair(wrapper, cycleDuration, animalDelay)
+  const interval = setInterval(() => showNextZodiacAnimalPair(wrapper, cycleDuration, animalDelay), cycleDuration)
+  const meta = instanceMap.get(wrapper) || {}
+  meta.interval = interval
+  instanceMap.set(wrapper, meta)
+  return wrapper
+}
+
+function destroySolarBackground(root) {
+  const data = instanceMap.get(root)
+  if (data) {
+    clearInterval(data.interval)
+  }
+  if (root && root.parentNode) {
+    root.parentNode.removeChild(root)
+  }
+  instanceMap.delete(root)
+}
+
+function initializeBackgroundElement(element) {
+  injectStyle()
+  element.classList.add('solar-background-root')
+  element.style.display = 'block'
+  element.style.position = 'absolute'
+  element.style.inset = '0'
+  element.style.width = '100%'
+  element.style.height = '100%'
+  element.style.pointerEvents = 'none'
+  element.style.zIndex = '-1'
+  element.innerHTML = createSceneMarkup()
+  createStars(element, 1260)
+  const initialOrder = shuffle(Array.from({ length: zodiacAnimalConstellations.length }, (_, i) => i))
+  instanceMap.set(element, { order: initialOrder, index: 0 })
+  showNextZodiacAnimalPair(element)
+  const interval = setInterval(() => showNextZodiacAnimalPair(element), 4200)
+  const meta = instanceMap.get(element) || {}
+  meta.interval = interval
+  instanceMap.set(element, meta)
+}
+
+class SolarBackgroundElement extends HTMLElement {
+  connectedCallback() {
+    if (this.__solarBackgroundInitialized) {
+      return
+    }
+
+    initializeBackgroundElement(this)
+    this.__solarBackgroundInitialized = true
+  }
+
+  disconnectedCallback() {
+    const data = instanceMap.get(this)
+    if (data) {
+      clearInterval(data.interval)
+      instanceMap.delete(this)
+    }
+  }
+}
+
+if (!customElements.get('solar-background')) {
+  customElements.define('solar-background', SolarBackgroundElement)
+}
+
+export { createSolarBackground, destroySolarBackground }