670 lines
24 KiB
HTML
670 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Das — SURYA</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Space+Grotesk:wght@300;400&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: none;
|
|
}
|
|
html::-webkit-scrollbar { display: none; }
|
|
|
|
body {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
background: #030305;
|
|
color: white;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ========== THE CONTINUOUS WORLD ========== */
|
|
#world {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Gradient background that shifts with scroll */
|
|
#gradient-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
transition: background 0.5s ease;
|
|
}
|
|
|
|
/* Organic blob shapes */
|
|
.blob {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
opacity: 0.4;
|
|
transition: all 1s ease;
|
|
}
|
|
|
|
#blob1 {
|
|
width: 50vw;
|
|
height: 50vw;
|
|
top: -10%;
|
|
left: -10%;
|
|
}
|
|
|
|
#blob2 {
|
|
width: 40vw;
|
|
height: 40vw;
|
|
bottom: -10%;
|
|
right: -10%;
|
|
}
|
|
|
|
#blob3 {
|
|
width: 30vw;
|
|
height: 30vw;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
/* The soul orb - persistent element */
|
|
#soul {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, white 0%, rgba(255,255,255,0.5) 50%, transparent 70%);
|
|
box-shadow: 0 0 60px 20px rgba(255,255,255,0.3);
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: all 0.8s ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
#soul::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -20px;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
animation: soul-ring 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes soul-ring {
|
|
0%, 100% { transform: scale(1); opacity: 0.5; }
|
|
50% { transform: scale(1.5); opacity: 0; }
|
|
}
|
|
|
|
/* Second soul (appears during "with u") */
|
|
#soul2 {
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, #fbbf24 0%, rgba(251,191,36,0.5) 50%, transparent 70%);
|
|
box-shadow: 0 0 40px 15px rgba(251,191,36,0.3);
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
opacity: 0;
|
|
transition: all 1s ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Particle system */
|
|
#particles {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 2px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.4);
|
|
animation: float-up 15s linear infinite;
|
|
}
|
|
|
|
@keyframes float-up {
|
|
0% { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
|
|
10% { opacity: 1; transform: translateY(90vh) translateX(10px) scale(1); }
|
|
90% { opacity: 1; }
|
|
100% { transform: translateY(-10vh) translateX(-10px) scale(0.5); opacity: 0; }
|
|
}
|
|
|
|
/* Wave/ripple effect */
|
|
.ripple {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
animation: ripple-expand 4s ease-out infinite;
|
|
}
|
|
|
|
@keyframes ripple-expand {
|
|
0% { width: 0; height: 0; opacity: 0.5; }
|
|
100% { width: 100vw; height: 100vw; opacity: 0; }
|
|
}
|
|
|
|
/* Stars (appear later in journey) */
|
|
.star {
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
transition: opacity 1s;
|
|
}
|
|
|
|
/* ========== CONTENT LAYER ========== */
|
|
#content {
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
.scene {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.scene-inner {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
max-width: 700px;
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
|
|
.scene.visible .scene-inner {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.track-num {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.4em;
|
|
color: rgba(255,255,255,0.25);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.track-title {
|
|
font-size: clamp(2.5rem, 8vw, 5rem);
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
line-height: 1;
|
|
margin-bottom: 1.5rem;
|
|
transition: color 0.5s;
|
|
}
|
|
|
|
.track-lyric {
|
|
font-size: clamp(1rem, 2vw, 1.3rem);
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
color: rgba(255,255,255,0.6);
|
|
line-height: 2;
|
|
}
|
|
|
|
/* Intro special */
|
|
.intro-title {
|
|
font-size: clamp(4rem, 15vw, 10rem);
|
|
font-weight: 300;
|
|
letter-spacing: 0.15em;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.intro-sub {
|
|
font-size: 1.1rem;
|
|
color: rgba(255,255,255,0.4);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.intro-artist {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.3em;
|
|
color: rgba(255,255,255,0.2);
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.scroll-hint {
|
|
position: absolute;
|
|
bottom: 40px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
}
|
|
|
|
.scroll-hint span {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.2em;
|
|
color: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.scroll-line {
|
|
width: 1px;
|
|
height: 40px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
|
|
margin: 10px auto 0;
|
|
animation: scroll-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes scroll-pulse {
|
|
0%, 100% { opacity: 0.3; height: 40px; }
|
|
50% { opacity: 0.8; height: 50px; }
|
|
}
|
|
|
|
/* Finale */
|
|
.finale-inner {
|
|
text-align: center;
|
|
}
|
|
|
|
.finale-title {
|
|
font-size: clamp(1.8rem, 4vw, 2.5rem);
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.platform-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 0.8rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.platform-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.7rem 1.2rem;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 50px;
|
|
color: white;
|
|
text-decoration: none;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 0.8rem;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.platform-btn:hover {
|
|
background: rgba(251,191,36,0.1);
|
|
border-color: rgba(251,191,36,0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.platform-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.social-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 0.8rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.social-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: rgba(255,255,255,0.02);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgba(255,255,255,0.4);
|
|
text-decoration: none;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.social-btn:hover {
|
|
background: rgba(251,191,36,0.2);
|
|
color: white;
|
|
}
|
|
|
|
.social-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.credit {
|
|
margin-top: 3rem;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 0.6rem;
|
|
color: rgba(255,255,255,0.15);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* Progress indicator */
|
|
#progress {
|
|
position: fixed;
|
|
left: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 2px;
|
|
height: 50vh;
|
|
background: rgba(255,255,255,0.05);
|
|
z-index: 200;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
#progress-fill {
|
|
width: 100%;
|
|
background: linear-gradient(180deg, #a78bfa, #fbbf24);
|
|
border-radius: 1px;
|
|
transition: height 0.1s;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
#progress { display: none; }
|
|
.scene-inner { padding: 1.5rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Progress -->
|
|
<div id="progress">
|
|
<div id="progress-fill" style="height: 0%"></div>
|
|
</div>
|
|
|
|
<!-- THE CONTINUOUS WORLD -->
|
|
<div id="world">
|
|
<div id="gradient-bg"></div>
|
|
<div class="blob" id="blob1"></div>
|
|
<div class="blob" id="blob2"></div>
|
|
<div class="blob" id="blob3"></div>
|
|
<div id="particles"></div>
|
|
<div id="ripples"></div>
|
|
<div id="stars"></div>
|
|
<div id="soul"></div>
|
|
<div id="soul2"></div>
|
|
</div>
|
|
|
|
<!-- CONTENT -->
|
|
<div id="content">
|
|
<!-- Intro -->
|
|
<section class="scene" data-phase="intro">
|
|
<div class="scene-inner">
|
|
<h1 class="intro-title">SURYA</h1>
|
|
<p class="intro-sub">a journey through feeling</p>
|
|
<p class="intro-artist">DAS</p>
|
|
</div>
|
|
<div class="scroll-hint">
|
|
<span>SCROLL</span>
|
|
<div class="scroll-line"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 01 Skin -->
|
|
<section class="scene" data-phase="skin">
|
|
<div class="scene-inner">
|
|
<p class="track-num">01</p>
|
|
<h2 class="track-title">skin</h2>
|
|
<p class="track-lyric">"I don't know how to fit in my own skin<br>don't feel at home in this world I'm living in"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 02 U Saved Me -->
|
|
<section class="scene" data-phase="saved">
|
|
<div class="scene-inner">
|
|
<p class="track-num">02</p>
|
|
<h2 class="track-title">u saved me</h2>
|
|
<p class="track-lyric">"you saved me from my broken soul<br>we gave each other full control"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 03 Nothing -->
|
|
<section class="scene" data-phase="nothing">
|
|
<div class="scene-inner">
|
|
<p class="track-num">03</p>
|
|
<h2 class="track-title">nothing</h2>
|
|
<p class="track-lyric">"I lost my heart, now I feel nothing<br>it's been a while since I've felt something"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 04 Sweet Relief -->
|
|
<section class="scene" data-phase="relief">
|
|
<div class="scene-inner">
|
|
<p class="track-num">04</p>
|
|
<h2 class="track-title">sweet relief</h2>
|
|
<p class="track-lyric">"I'm seeing ghosts<br>they've got their hands around my throat"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 05-06 Nature -->
|
|
<section class="scene" data-phase="nature">
|
|
<div class="scene-inner">
|
|
<p class="track-num">05—06</p>
|
|
<h2 class="track-title">nature's call</h2>
|
|
<p class="track-lyric">"thank you for joining us on this drive"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 07 Dreamcatcher -->
|
|
<section class="scene" data-phase="dream">
|
|
<div class="scene-inner">
|
|
<p class="track-num">07</p>
|
|
<h2 class="track-title">dreamcatcher</h2>
|
|
<p class="track-lyric">"I'm falling through the cracks<br>of all the plans I made inside my head"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 08 IDK -->
|
|
<section class="scene" data-phase="idk">
|
|
<div class="scene-inner">
|
|
<p class="track-num">08</p>
|
|
<h2 class="track-title">idk</h2>
|
|
<p class="track-lyric">"I don't know how to sleep alone<br>these drugs don't work on me no more"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 09 With U (THE TURN) -->
|
|
<section class="scene" data-phase="with">
|
|
<div class="scene-inner">
|
|
<p class="track-num">09</p>
|
|
<h2 class="track-title">with u</h2>
|
|
<p class="track-lyric">"when I'm with you, life becomes less hard<br>I'm floating through the stars"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 10 Poor You Poor Me -->
|
|
<section class="scene" data-phase="poor">
|
|
<div class="scene-inner">
|
|
<p class="track-num">10</p>
|
|
<h2 class="track-title">poor you poor me</h2>
|
|
<p class="track-lyric">"you left your cardigan and makeup on my bed"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 11-12 Run -->
|
|
<section class="scene" data-phase="run">
|
|
<div class="scene-inner">
|
|
<p class="track-num">11—12</p>
|
|
<h2 class="track-title">run to u</h2>
|
|
<p class="track-lyric">"if the sky was falling<br>I would run to you"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 13 Medications -->
|
|
<section class="scene" data-phase="meds">
|
|
<div class="scene-inner">
|
|
<p class="track-num">13</p>
|
|
<h2 class="track-title">medications</h2>
|
|
<p class="track-lyric">"the medications in my drawer<br>can't protect me from the war<br>that's raging in my head"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 14 Hollow -->
|
|
<section class="scene" data-phase="hollow">
|
|
<div class="scene-inner">
|
|
<p class="track-num">14</p>
|
|
<h2 class="track-title">hollow</h2>
|
|
<p class="track-lyric">"life's so hollow without you<br>you took my sorrow and flew it to the moon"</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Finale -->
|
|
<section class="scene" data-phase="finale">
|
|
<div class="scene-inner finale-inner">
|
|
<h2 class="finale-title">ready to feel something?</h2>
|
|
<div class="platform-row">
|
|
<a href="#" class="platform-btn"><svg viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>Spotify</a>
|
|
<a href="#" class="platform-btn"><svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>YouTube</a>
|
|
<a href="#" class="platform-btn"><svg viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0z"/></svg>SoundCloud</a>
|
|
</div>
|
|
<div class="social-row">
|
|
<a href="#" class="social-btn"><svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4z"/></svg></a>
|
|
<a href="#" class="social-btn"><svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
|
|
<a href="#" class="social-btn"><svg viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg></a>
|
|
</div>
|
|
<p class="credit">SURYA — DAS — 2026</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
// ========== WORLD STATE ==========
|
|
const phases = {
|
|
intro: { bg: 'radial-gradient(ellipse at 50% 80%, #1a0a2e 0%, #0a0510 100%)', blob1: '#4a1a6e', blob2: '#1a0a3e', blob3: '#2a1a4e', soul: { scale: 1, glow: 'rgba(255,255,255,0.3)' }, title: '#ffffff' },
|
|
skin: { bg: 'radial-gradient(ellipse at 30% 70%, #2a0a3e 0%, #0a0515 100%)', blob1: '#6a2a8e', blob2: '#2a0a4e', blob3: '#4a1a6e', soul: { scale: 0.8, glow: 'rgba(244,114,182,0.4)' }, title: '#f472b6' },
|
|
saved: { bg: 'radial-gradient(ellipse at 70% 50%, #0a1a3e 0%, #050a1a 100%)', blob1: '#1a4a7e', blob2: '#0a2a5e', blob3: '#2a3a6e', soul: { scale: 1.2, glow: 'rgba(34,211,238,0.4)' }, title: '#22d3ee' },
|
|
nothing: { bg: 'radial-gradient(ellipse at 50% 50%, #1a1a1a 0%, #0a0a0a 100%)', blob1: '#2a2a2a', blob2: '#1a1a1a', blob3: '#151515', soul: { scale: 0.5, glow: 'rgba(100,100,100,0.2)' }, title: '#666666' },
|
|
relief: { bg: 'radial-gradient(ellipse at 40% 60%, #1a0a2a 0%, #0a0515 100%)', blob1: '#4a2a6e', blob2: '#2a1a4e', blob3: '#3a1a5e', soul: { scale: 0.7, glow: 'rgba(167,139,250,0.4)' }, title: '#a78bfa' },
|
|
nature: { bg: 'radial-gradient(ellipse at 50% 70%, #0a2a1a 0%, #050f0a 100%)', blob1: '#1a5a3a', blob2: '#0a3a2a', blob3: '#2a4a3a', soul: { scale: 1, glow: 'rgba(94,234,212,0.4)' }, title: '#5eead4' },
|
|
dream: { bg: 'radial-gradient(ellipse at 60% 40%, #1a1a3a 0%, #0a0a1a 100%)', blob1: '#3a3a7e', blob2: '#2a2a5e', blob3: '#4a4a6e', soul: { scale: 0.6, glow: 'rgba(196,181,253,0.4)' }, title: '#c4b5fd' },
|
|
idk: { bg: 'radial-gradient(ellipse at 50% 50%, #2a1a2a 0%, #0f0a0f 100%)', blob1: '#4a2a4a', blob2: '#2a1a2a', blob3: '#3a2a3a', soul: { scale: 0.4, glow: 'rgba(244,114,182,0.3)' }, title: '#f472b6' },
|
|
with: { bg: 'radial-gradient(ellipse at 50% 50%, #1a2a4a 0%, #0a1020 100%)', blob1: '#3a5a8e', blob2: '#2a4a7e', blob3: '#4a6a9e', soul: { scale: 1.5, glow: 'rgba(251,191,36,0.5)' }, title: '#fbbf24', showSoul2: true, showStars: true },
|
|
poor: { bg: 'radial-gradient(ellipse at 60% 50%, #2a1a1a 0%, #100a0a 100%)', blob1: '#5a3a2a', blob2: '#3a2a1a', blob3: '#4a3a2a', soul: { scale: 1, glow: 'rgba(251,146,60,0.4)' }, title: '#fb923c' },
|
|
run: { bg: 'radial-gradient(ellipse at 70% 40%, #0a2a3a 0%, #051520 100%)', blob1: '#2a5a7a', blob2: '#1a4a6a', blob3: '#3a6a8a', soul: { scale: 1.3, glow: 'rgba(34,211,238,0.5)' }, title: '#22d3ee' },
|
|
meds: { bg: 'radial-gradient(ellipse at 50% 60%, #2a0a0a 0%, #100505 100%)', blob1: '#5a1a1a', blob2: '#3a0a0a', blob3: '#4a1515', soul: { scale: 0.8, glow: 'rgba(239,68,68,0.4)' }, title: '#ef4444' },
|
|
hollow: { bg: 'radial-gradient(ellipse at 50% 30%, #2a2a1a 0%, #0f0f0a 100%)', blob1: '#5a5a2a', blob2: '#3a3a1a', blob3: '#4a4a2a', soul: { scale: 1, glow: 'rgba(251,191,36,0.4)' }, title: '#fbbf24' },
|
|
finale: { bg: 'radial-gradient(ellipse at 50% 100%, #3a2a0a 0%, #1a1005 50%, #0a0a05 100%)', blob1: '#7a5a1a', blob2: '#5a4a1a', blob3: '#6a5a2a', soul: { scale: 2, glow: 'rgba(251,191,36,0.6)' }, title: '#fbbf24', showStars: true }
|
|
};
|
|
|
|
// Elements
|
|
const gradientBg = document.getElementById('gradient-bg');
|
|
const blob1 = document.getElementById('blob1');
|
|
const blob2 = document.getElementById('blob2');
|
|
const blob3 = document.getElementById('blob3');
|
|
const soul = document.getElementById('soul');
|
|
const soul2 = document.getElementById('soul2');
|
|
const particlesEl = document.getElementById('particles');
|
|
const starsEl = document.getElementById('stars');
|
|
const progressFill = document.getElementById('progress-fill');
|
|
const scenes = document.querySelectorAll('.scene');
|
|
|
|
// Create particles
|
|
for (let i = 0; i < 40; i++) {
|
|
const p = document.createElement('div');
|
|
p.className = 'particle';
|
|
p.style.left = Math.random() * 100 + '%';
|
|
p.style.animationDelay = Math.random() * 15 + 's';
|
|
p.style.animationDuration = (12 + Math.random() * 8) + 's';
|
|
particlesEl.appendChild(p);
|
|
}
|
|
|
|
// Create stars (hidden initially)
|
|
for (let i = 0; i < 60; i++) {
|
|
const s = document.createElement('div');
|
|
s.className = 'star';
|
|
s.style.left = Math.random() * 100 + '%';
|
|
s.style.top = Math.random() * 100 + '%';
|
|
s.style.animationDelay = Math.random() * 3 + 's';
|
|
if (Math.random() > 0.7) {
|
|
s.style.width = '4px';
|
|
s.style.height = '4px';
|
|
}
|
|
starsEl.appendChild(s);
|
|
}
|
|
const stars = starsEl.querySelectorAll('.star');
|
|
|
|
// Current phase
|
|
let currentPhase = 'intro';
|
|
|
|
function updateWorld(phase) {
|
|
if (phase === currentPhase) return;
|
|
currentPhase = phase;
|
|
|
|
const p = phases[phase];
|
|
if (!p) return;
|
|
|
|
// Background
|
|
gradientBg.style.background = p.bg;
|
|
|
|
// Blobs
|
|
blob1.style.background = p.blob1;
|
|
blob2.style.background = p.blob2;
|
|
blob3.style.background = p.blob3;
|
|
|
|
// Soul
|
|
soul.style.transform = `translate(-50%, -50%) scale(${p.soul.scale})`;
|
|
soul.style.boxShadow = `0 0 ${60 * p.soul.scale}px ${20 * p.soul.scale}px ${p.soul.glow}`;
|
|
|
|
// Soul 2 (for "with u")
|
|
if (p.showSoul2) {
|
|
soul2.style.opacity = '1';
|
|
soul2.style.transform = 'translate(calc(-50% + 40px), calc(-50% - 20px))';
|
|
} else {
|
|
soul2.style.opacity = '0';
|
|
soul2.style.transform = 'translate(-50%, -50%)';
|
|
}
|
|
|
|
// Stars
|
|
stars.forEach(s => {
|
|
s.style.opacity = p.showStars ? (0.3 + Math.random() * 0.7) : '0';
|
|
});
|
|
|
|
// Title colors
|
|
const title = document.querySelector(`[data-phase="${phase}"] .track-title`);
|
|
if (title) title.style.color = p.title;
|
|
}
|
|
|
|
// Intersection Observer
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
const phase = entry.target.dataset.phase;
|
|
updateWorld(phase);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
scenes.forEach(s => observer.observe(s));
|
|
|
|
// Scroll progress
|
|
window.addEventListener('scroll', () => {
|
|
const scrollTop = window.scrollY;
|
|
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
const progress = (scrollTop / docHeight) * 100;
|
|
progressFill.style.height = progress + '%';
|
|
|
|
// Subtle blob movement based on scroll
|
|
const moveAmount = scrollTop * 0.02;
|
|
blob1.style.transform = `translate(${Math.sin(moveAmount) * 20}px, ${Math.cos(moveAmount) * 20}px)`;
|
|
blob2.style.transform = `translate(${Math.cos(moveAmount) * 15}px, ${Math.sin(moveAmount) * 15}px)`;
|
|
});
|
|
|
|
// Initial state
|
|
scenes[0].classList.add('visible');
|
|
updateWorld('intro');
|
|
|
|
console.log('☀️ SURYA — one continuous journey');
|
|
</script>
|
|
</body>
|
|
</html>
|