Planets/index.html at main · Krish-Parekh/Planets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Planets - Interactive Three.js Experience</title>

  <meta name="title" content="Planets - Interactive Three.js Experience">
  <meta name="description"
    content="An interactive Three.js scene showcasing four planets arranged on an orbit with a starfield background and smooth scroll-driven transitions. Explore Earth, Scilla, Volcanic worlds, and Venus in this immersive WebGL experience.">
  <meta name="keywords"
    content="Three.js, WebGL, planets, interactive, 3D, space, astronomy, Earth, Venus, volcanic, Scilla, solar system, space exploration, interactive planets, 3D visualization, astronomy simulation">
  <meta name="author" content="Krish Parekh - Planets Project">
  <meta name="robots" content="index, follow">
  <meta name="language" content="English">
  <meta name="revisit-after" content="7 days">

  <meta property="og:type" content="website">
  <meta property="og:url" content="">
  <meta property="og:title" content="Planets - Interactive Three.js Experience">
  <meta property="og:description"
    content="An interactive Three.js scene showcasing four planets arranged on an orbit with a starfield background and smooth scroll-driven transitions. Explore Earth, Scilla, Volcanic worlds, and Venus in this immersive WebGL experience.">
  <meta property="og:image" content="./planets.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Interactive 3D planets scene with Earth, Scilla, Volcanic world, and Venus">
  <meta property="og:site_name" content="Planets Interactive Experience">
  <meta property="og:locale" content="en_US">

  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="">
  <meta property="twitter:title" content="Planets - Interactive Three.js Experience">
  <meta property="twitter:description"
    content="An interactive Three.js scene showcasing four planets arranged on an orbit with a starfield background and smooth scroll-driven transitions. Explore Earth, Scilla, Volcanic worlds, and Venus in this immersive WebGL experience.">
  <meta property="twitter:image" content="./planets.png">
  <meta property="twitter:image:alt"
    content="Interactive 3D planets scene with Earth, Scilla, Volcanic world, and Venus">

  <meta name="theme-color" content="#000000">
  <meta name="msapplication-TileColor" content="#000000">
  <meta name="application-name" content="Planets Interactive Experience">

  <link rel="stylesheet" href="./src/style.css">
</head>

<body>
  <div id="audio-toggle" class="fixed top-6 right-6 z-20 cursor-pointer group">
    <div class="w-12 h-12 p-4">
      <svg id="audio-on-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
        <!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
        <path fill="white" class="w-full h-full"
          d="M176 96C149.5 96 128 117.5 128 144L128 496C128 522.5 149.5 544 176 544L240 544C266.5 544 288 522.5 288 496L288 144C288 117.5 266.5 96 240 96L176 96zM400 96C373.5 96 352 117.5 352 144L352 496C352 522.5 373.5 544 400 544L464 544C490.5 544 512 522.5 512 496L512 144C512 117.5 490.5 96 464 96L400 96z" />
      </svg>

      <svg id="audio-off-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
        <!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
        <path fill="white" class="w-full h-full"
          d="M187.2 100.9C174.8 94.1 159.8 94.4 147.6 101.6C135.4 108.8 128 121.9 128 136L128 504C128 518.1 135.5 531.2 147.6 538.4C159.7 545.6 174.8 545.9 187.2 539.1L523.2 355.1C536 348.1 544 334.6 544 320C544 305.4 536 291.9 523.2 284.9L187.2 100.9z" />
      </svg>
    </div>
  </div>
  <div id="loading-screen"
    class="absolute bg-neutral-950 top-0 left-0 w-screen h-screen z-10 flex flex-col items-center justify-center">
    <h1 id="loading-text"
      class="text-white text-4xl md:text-9xl font-bold font-serif pointer-events-none tracking-tighter mb-8">
      Loading...0% </h1>

    <div id="audio-choice-buttons" class="hidden w-full flex-col md:flex-row justify-center items-center gap-8">
      <button id="enter-with-audio"
        class="group relative inline-block overflow-hidden border border-white px-8 py-3 focus:ring-3 focus:outline-hidden">
        <span class="absolute inset-y-0 left-0 w-[2px] bg-white transition-all group-hover:w-full"></span>

        <span class="relative text-lg font-medium font-serif text-white transition-colors group-hover:text-black">
          Enter with music
        </span>
      </button>
      <button id="enter-without-audio"
        class="group relative inline-block overflow-hidden border border-white px-8 py-3 focus:ring-3 focus:outline-hidden">
        <span class="absolute inset-y-0 right-0 w-[2px] bg-white transition-all group-hover:w-full"></span>
        <span class="relative text-lg font-medium font-serif text-white transition-colors group-hover:text-black">
          Enter without music
        </span>
      </button>
    </div>
  </div>

  <div id="main" class="w-full h-screen bg-black overflow-hidden pointer-events-none">
    <div class="w-full h-screen absolute top-0 left-0 z-[2] text-white">
      <div class="absolute top-[8%] left-1/2 -translate-x-1/2 text-center">
        <div class="w-full h-[4em]  md:h-[9em] overflow-hidden">
          <h1 class="h-full text-5xl md:text-9xl font-bold font-serif tracking-tighter heading">Earth</h1>
          <h1 class="h-full text-5xl md:text-9xl font-bold font-serif tracking-tighter heading">Scilla</h1>
          <h1 class="h-full text-5xl md:text-9xl font-bold font-serif tracking-tighter heading">Volcanic</h1>
          <h1 class="h-full text-5xl md:text-9xl font-bold font-serif tracking-tighter heading">Venus</h1>
        </div>
        <p class="text-md planet-desc font-serif"></p>
        <div
          class="w-96 h-px bg-gradient-to-r from-transparent via-white to-transparent mt-4 opacity-50 animate-pulse hidden md:block cursor-none mx-auto">
        </div>
      </div>

      <div class="absolute bottom-8 w-full flex flex-col justify-center items-center text-center">
        <p class="text-sm font-serif opacity-70 mb-2 ">Scroll to explore</p>
        <div class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center">
          <div class="w-1 h-3 bg-white/50 rounded-full mt-2 animate-bounce"></div>
        </div>
      </div>
    </div>
    <canvas></canvas>
  </div>

  <script type="module" src="src/main.js"></script>
</body>

</html>