Initial commit: website + innerbloom demo v24/05/2026
- Padel Planner SPA - Innerbloom demo page
This commit is contained in:
Nova Coder
+709
@@ -0,0 +1,709 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Innerbloom — RÜFÜS DU SOL</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ─── RESET ─── */
|
||||
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
||||
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#1A1F2C transparent}
|
||||
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#0B0E14;color:#e2e2e6;overflow-x:hidden;
|
||||
-webkit-font-smoothing:antialiased}
|
||||
|
||||
/* ─── TOKENS ─── */
|
||||
:root{
|
||||
--bg:#0B0E14;
|
||||
--surface:#11151F;
|
||||
--surface-light:#1A1F2C;
|
||||
--border:#1F2540;
|
||||
--accent-from:#9B51E0;
|
||||
--accent-to:#00F2FE;
|
||||
--text:#f1f1f5;
|
||||
--text-dim:#6B7185;
|
||||
--text-muted:#464B5C;
|
||||
--glow-violet:rgba(155,81,224,0.3);
|
||||
--glow-cyan:rgba(0,242,254,0.2);
|
||||
--transition-slow:all 0.8s cubic-bezier(0.22,1,0.36,1);
|
||||
}
|
||||
|
||||
/* ─── SCROLL ANIMATIONS ─── */
|
||||
.reveal{
|
||||
opacity:0;
|
||||
filter:blur(8px);
|
||||
transform:translateY(30px);
|
||||
transition:opacity 1s ease-out,transform 1s ease-out,filter 1.2s ease-out;
|
||||
}
|
||||
.reveal.visible{
|
||||
opacity:1;
|
||||
filter:blur(0);
|
||||
transform:translateY(0);
|
||||
}
|
||||
.reveal-delay-1{transition-delay:0.15s}
|
||||
.reveal-delay-2{transition-delay:0.3s}
|
||||
.reveal-delay-3{transition-delay:0.5s}
|
||||
.reveal-delay-4{transition-delay:0.7s}
|
||||
|
||||
/* ─── GRID BACKGROUND ─── */
|
||||
.grid-bg{
|
||||
position:fixed;inset:0;z-index:0;pointer-events:none;
|
||||
background:
|
||||
linear-gradient(to right,rgba(100,116,139,0.06) 1px,transparent 1px),
|
||||
linear-gradient(to bottom,rgba(100,116,139,0.06) 1px,transparent 1px);
|
||||
background-size:60px 60px;
|
||||
}
|
||||
|
||||
/* ─── ORB GLOW ─── */
|
||||
.orb{
|
||||
position:fixed;border-radius:50%;pointer-events:none;z-index:0;
|
||||
filter:blur(80px);
|
||||
transition:transform 1.5s ease-out,opacity 2s ease-out;
|
||||
}
|
||||
.orb-violet{
|
||||
width:500px;height:500px;
|
||||
background:radial-gradient(circle,var(--glow-violet),transparent 70%);
|
||||
top:-10%;left:-5%;
|
||||
animation:orbPulse 8s ease-in-out infinite;
|
||||
}
|
||||
.orb-cyan{
|
||||
width:400px;height:400px;
|
||||
background:radial-gradient(circle,var(--glow-cyan),transparent 70%);
|
||||
bottom:-8%;right:-8%;
|
||||
animation:orbPulse 10s ease-in-out infinite 2s;
|
||||
}
|
||||
@keyframes orbPulse{
|
||||
0%,100%{opacity:0.5;transform:scale(1) translate(0,0)}
|
||||
50%{opacity:0.8;transform:scale(1.1) translate(20px,-20px)}
|
||||
}
|
||||
|
||||
/* ─── HERO ─── */
|
||||
.hero{
|
||||
position:relative;z-index:1;min-height:100vh;
|
||||
display:flex;flex-direction:column;justify-content:center;align-items:center;
|
||||
text-align:center;padding:40px 24px 60px;
|
||||
}
|
||||
|
||||
.hero-label{
|
||||
display:inline-flex;align-items:center;gap:8px;
|
||||
background:rgba(155,81,224,0.1);border:1px solid rgba(155,81,224,0.25);
|
||||
border-radius:100px;padding:6px 16px 6px 12px;margin-bottom:32px;
|
||||
font-size:12px;font-weight:400;letter-spacing:1px;
|
||||
color:var(--accent-from);text-transform:uppercase;
|
||||
}
|
||||
.hero-label-dot{
|
||||
width:6px;height:6px;border-radius:50%;
|
||||
background:linear-gradient(135deg,var(--accent-from),var(--accent-to));
|
||||
animation:dotPulse 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:0.3}}
|
||||
|
||||
.hero-title{
|
||||
font-size:clamp(3rem,10vw,8rem);font-weight:200;letter-spacing:-1.5px;
|
||||
line-height:0.95;margin-bottom:8px;
|
||||
background:linear-gradient(135deg,#f1f1f5 0%,#6B7185 50%,#f1f1f5 100%);
|
||||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
||||
background-clip:text;
|
||||
}
|
||||
.hero-title span{
|
||||
background:linear-gradient(135deg,var(--accent-from),var(--accent-to));
|
||||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
||||
background-clip:text;
|
||||
}
|
||||
.hero-sub{
|
||||
font-size:clamp(0.9rem,2vw,1.25rem);font-weight:300;color:var(--text-dim);
|
||||
max-width:480px;margin:16px auto 40px;line-height:1.7;letter-spacing:0.3px;
|
||||
}
|
||||
.hero-bpm{
|
||||
font-size:13px;font-weight:400;color:var(--text-muted);letter-spacing:3px;
|
||||
text-transform:uppercase;margin-bottom:48px;
|
||||
}
|
||||
.hero-bpm span{color:var(--accent-to);}
|
||||
|
||||
/* ─── TIMELINE ─── */
|
||||
.timeline-section{
|
||||
position:relative;z-index:1;max-width:800px;margin:0 auto;padding:60px 24px 120px;
|
||||
}
|
||||
.timeline-label{
|
||||
font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;
|
||||
color:var(--text-muted);margin-bottom:40px;text-align:center;
|
||||
}
|
||||
.timeline{
|
||||
display:flex;flex-direction:column;gap:16px;
|
||||
}
|
||||
.timeline-item{
|
||||
display:grid;grid-template-columns:80px 1fr;gap:24px;
|
||||
padding:20px 24px;
|
||||
background:rgba(26,31,44,0.5);
|
||||
border:1px solid var(--border);
|
||||
border-radius:12px;
|
||||
transition:var(--transition-slow);
|
||||
cursor:default;
|
||||
}
|
||||
.timeline-item:hover{
|
||||
border-color:rgba(155,81,224,0.3);
|
||||
background:rgba(26,31,44,0.7);
|
||||
transform:translateX(4px);
|
||||
}
|
||||
.timeline-time{
|
||||
font-size:13px;font-weight:300;color:var(--text-dim);padding-top:2px;
|
||||
font-variant-numeric:tabular-nums;
|
||||
}
|
||||
.timeline-time span{
|
||||
display:block;font-size:10px;color:var(--text-muted);margin-top:2px;
|
||||
}
|
||||
.timeline-visual{
|
||||
display:flex;flex-direction:column;gap:6px;
|
||||
}
|
||||
.timeline-bar{
|
||||
height:3px;border-radius:3px;
|
||||
background:linear-gradient(90deg,var(--accent-from),var(--accent-to));
|
||||
transition:var(--transition-slow);
|
||||
opacity:0.3;
|
||||
}
|
||||
.timeline-item:hover .timeline-bar{opacity:0.7;}
|
||||
.timeline-bar-1{width:20%}
|
||||
.timeline-bar-2{width:35%}
|
||||
.timeline-bar-3{width:55%}
|
||||
.timeline-bar-4{width:75%}
|
||||
.timeline-bar-5{width:90%}
|
||||
.timeline-bar-6{width:100%}
|
||||
.timeline-desc{
|
||||
font-size:14px;font-weight:300;color:var(--text-dim);line-height:1.6;
|
||||
margin-top:4px;
|
||||
}
|
||||
.timeline-desc strong{color:var(--text);font-weight:400;}
|
||||
|
||||
/* ─── LISTEN SECTION ─── */
|
||||
.listen-section{
|
||||
position:relative;z-index:1;max-width:800px;margin:0 auto;
|
||||
padding:80px 24px 120px;text-align:center;
|
||||
}
|
||||
.listen-title{
|
||||
font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;
|
||||
color:var(--text-muted);margin-bottom:32px;
|
||||
}
|
||||
.listen-grid{
|
||||
display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
|
||||
}
|
||||
.listen-btn{
|
||||
display:inline-flex;align-items:center;gap:10px;
|
||||
padding:14px 28px;border-radius:10px;
|
||||
background:rgba(26,31,44,0.6);border:1px solid var(--border);
|
||||
color:var(--text-dim);font-size:14px;font-weight:400;
|
||||
text-decoration:none;transition:var(--transition-slow);
|
||||
}
|
||||
.listen-btn:hover{
|
||||
background:rgba(26,31,44,0.9);
|
||||
border-color:rgba(155,81,224,0.4);
|
||||
color:var(--text);
|
||||
transform:translateY(-2px);
|
||||
}
|
||||
.listen-btn svg{width:24px;height:24px;flex-shrink:0;}
|
||||
|
||||
/* ─── VISUALIZER ─── */
|
||||
.visualizer{
|
||||
position:relative;z-index:1;max-width:600px;margin:80px auto 0;
|
||||
padding:0 24px;
|
||||
}
|
||||
.visualizer-bars{
|
||||
display:flex;justify-content:center;align-items:flex-end;gap:4px;height:80px;
|
||||
}
|
||||
.visualizer-bar{
|
||||
width:6px;border-radius:3px;background:var(--surface-light);
|
||||
animation:barAnim 1.4s ease-in-out infinite;
|
||||
}
|
||||
.visualizer-bar:nth-child(1){height:20%;animation-delay:0s;background:linear-gradient(to top,var(--accent-from),var(--accent-to))}
|
||||
.visualizer-bar:nth-child(2){height:40%;animation-delay:0.1s;background:linear-gradient(to top,var(--accent-from),var(--accent-to))}
|
||||
.visualizer-bar:nth-child(3){height:60%;animation-delay:0.2s;background:linear-gradient(to top,var(--accent-from),var(--accent-to))}
|
||||
.visualizer-bar:nth-child(4){height:80%;animation-delay:0.3s;background:linear-gradient(to top,var(--accent-from),var(--accent-to))}
|
||||
.visualizer-bar:nth-child(5){height:100%;animation-delay:0.4s;background:linear-gradient(to top,var(--accent-from),var(--accent-to))}
|
||||
.visualizer-bar:nth-child(6){height:80%;animation-delay:0.5s;background:linear-gradient(to top,var(--accent-from),var(--accent-to))}
|
||||
.visualizer-bar:nth-child(7){height:60%;animation-delay:0.6s;background:linear-gradient(to top,var(--accent-from),var(--accent-to))}
|
||||
.visualizer-bar:nth-child(8){height:40%;animation-delay:0.7s;background:linear-gradient(to top,var(--accent-from),var(--accent-to))}
|
||||
.visualizer-bar:nth-child(9){height:20%;animation-delay:0.8s;background:linear-gradient(to top,var(--accent-from),var(--accent-to))}
|
||||
|
||||
@keyframes barAnim{
|
||||
0%,100%{opacity:0.3;height:20%}
|
||||
25%{opacity:0.6;height:60%}
|
||||
50%{opacity:1;height:100%}
|
||||
75%{opacity:0.6;height:60%}
|
||||
}
|
||||
|
||||
.listen-count{
|
||||
font-size:13px;color:var(--text-muted);margin-top:32px;letter-spacing:0.5px;
|
||||
}
|
||||
.listen-count span{color:var(--accent-to);}
|
||||
|
||||
/* ─── FOOTER ─── */
|
||||
.footer{
|
||||
position:relative;z-index:1;max-width:800px;margin:0 auto;
|
||||
padding:60px 24px 40px;text-align:center;
|
||||
border-top:1px solid var(--border);
|
||||
}
|
||||
.footer-text{
|
||||
font-size:12px;color:var(--text-muted);letter-spacing:1px;
|
||||
}
|
||||
.footer-text a{
|
||||
color:var(--accent-to);text-decoration:none;
|
||||
transition:opacity 0.3s;
|
||||
}
|
||||
.footer-text a:hover{opacity:0.7}
|
||||
|
||||
/* ─── RESPONSIVE ─── */
|
||||
@media(max-width:600px){
|
||||
.timeline-item{grid-template-columns:1fr;gap:8px;padding:16px 18px}
|
||||
.timeline-time{font-size:12px}
|
||||
.timeline-desc{font-size:13px}
|
||||
.listen-btn{width:100%;justify-content:center}
|
||||
}
|
||||
|
||||
/* ─── SECTION 2: CORE CONTENT ─── */
|
||||
.content-section{
|
||||
position:relative;z-index:1;max-width:900px;margin:0 auto;
|
||||
padding:80px 24px 100px;
|
||||
}
|
||||
.content-grid{
|
||||
display:grid;grid-template-columns:1fr 1fr;gap:24px;
|
||||
}
|
||||
@media(max-width:600px){.content-grid{grid-template-columns:1fr}}
|
||||
.content-card{
|
||||
background:rgba(26,31,44,0.4);border:1px solid var(--border);
|
||||
border-radius:14px;padding:32px;
|
||||
transition:var(--transition-slow);
|
||||
}
|
||||
.content-card:hover{
|
||||
border-color:rgba(155,81,224,0.25);
|
||||
transform:translateY(-2px);
|
||||
background:rgba(26,31,44,0.6);
|
||||
}
|
||||
.content-number{
|
||||
font-size:11px;font-weight:500;letter-spacing:2px;color:var(--text-muted);
|
||||
margin-bottom:12px;
|
||||
}
|
||||
.content-heading{
|
||||
font-size:20px;font-weight:300;letter-spacing:-0.3px;margin-bottom:12px;
|
||||
color:var(--text);
|
||||
}
|
||||
.content-text{
|
||||
font-size:14px;font-weight:300;color:var(--text-dim);line-height:1.8;
|
||||
}
|
||||
|
||||
/* ─── SECTION 3: OMSLAGPUNT ─── */
|
||||
.turn-section{
|
||||
position:relative;z-index:1;max-width:800px;margin:0 auto;
|
||||
padding:120px 24px;text-align:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
.turn-section::before{
|
||||
content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
|
||||
width:600px;height:600px;
|
||||
background:radial-gradient(circle,rgba(155,81,224,0.08),transparent 70%);
|
||||
pointer-events:none;
|
||||
}
|
||||
.turn-inner{position:relative;z-index:1}
|
||||
.turn-label{
|
||||
font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;
|
||||
color:var(--accent-from);margin-bottom:20px;
|
||||
display:inline-block;
|
||||
background:rgba(155,81,224,0.1);border:1px solid rgba(155,81,224,0.2);
|
||||
padding:6px 14px;border-radius:100px;
|
||||
}
|
||||
.turn-title{
|
||||
font-size:clamp(2.2rem,6vw,4rem);font-weight:200;letter-spacing:-1px;
|
||||
line-height:1.05;margin-bottom:20px;
|
||||
}
|
||||
.turn-title span{
|
||||
background:linear-gradient(135deg,var(--accent-from),var(--accent-to));
|
||||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
||||
background-clip:text;
|
||||
}
|
||||
.turn-text{
|
||||
font-size:15px;font-weight:300;color:var(--text-dim);
|
||||
max-width:500px;margin:0 auto;line-height:1.8;
|
||||
}
|
||||
|
||||
/* ─── SCROLL INDICATOR ─── */
|
||||
.scroll-indicator{
|
||||
display:flex;flex-direction:column;align-items:center;gap:8px;
|
||||
margin-top:20px;margin-bottom:0;
|
||||
}
|
||||
.scroll-dot{
|
||||
width:4px;height:4px;border-radius:50%;
|
||||
background:linear-gradient(135deg,var(--accent-from),var(--accent-to));
|
||||
animation:scrollDotAnim 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes scrollDotAnim{
|
||||
0%{opacity:1;transform:translateY(0)}
|
||||
50%{opacity:0.3;transform:translateY(8px)}
|
||||
100%{opacity:1;transform:translateY(0)}
|
||||
}
|
||||
.scroll-line{
|
||||
width:1px;height:30px;
|
||||
background:linear-gradient(to bottom,rgba(155,81,224,0.4),transparent);
|
||||
}
|
||||
.scroll-text{
|
||||
font-size:9px;letter-spacing:3px;text-transform:uppercase;
|
||||
color:var(--text-muted);
|
||||
}
|
||||
|
||||
/* ─── SECTION 5: CLIMAX ─── */
|
||||
.climax-section{
|
||||
position:relative;z-index:1;max-width:800px;margin:0 auto;
|
||||
padding:140px 24px;text-align:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
.climax-bg-glow{
|
||||
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
|
||||
width:700px;height:700px;
|
||||
background:radial-gradient(circle,rgba(0,242,254,0.1) 0%,rgba(155,81,224,0.08) 30%,transparent 70%);
|
||||
pointer-events:none;
|
||||
animation:climaxPulse 4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes climaxPulse{
|
||||
0%,100%{opacity:0.6;transform:translate(-50%,-50%) scale(1)}
|
||||
50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
|
||||
}
|
||||
.climax-inner{position:relative;z-index:1}
|
||||
.climax-label{
|
||||
font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;
|
||||
color:var(--accent-to);margin-bottom:20px;
|
||||
display:inline-block;
|
||||
background:rgba(0,242,254,0.08);border:1px solid rgba(0,242,254,0.2);
|
||||
padding:6px 14px;border-radius:100px;
|
||||
}
|
||||
.climax-title{
|
||||
font-size:clamp(2.5rem,8vw,5rem);font-weight:200;letter-spacing:-1px;
|
||||
line-height:1.0;margin-bottom:20px;
|
||||
}
|
||||
.climax-title span{
|
||||
background:linear-gradient(135deg,var(--accent-to),var(--accent-from));
|
||||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
||||
background-clip:text;
|
||||
}
|
||||
.climax-text{
|
||||
font-size:15px;font-weight:300;color:var(--text-dim);
|
||||
max-width:480px;margin:0 auto;line-height:1.8;
|
||||
}
|
||||
.climax-cta{
|
||||
display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
|
||||
margin-top:48px;
|
||||
}
|
||||
.cta-btn{
|
||||
display:inline-flex;align-items:center;gap:10px;
|
||||
padding:16px 32px;border-radius:12px;font-size:15px;font-weight:400;
|
||||
text-decoration:none;transition:var(--transition-slow);
|
||||
}
|
||||
.cta-primary{
|
||||
background:linear-gradient(135deg,var(--accent-from),var(--accent-to));
|
||||
color:#fff;
|
||||
box-shadow:0 4px 30px rgba(155,81,224,0.3);
|
||||
}
|
||||
.cta-primary:hover{
|
||||
box-shadow:0 8px 40px rgba(155,81,224,0.5);
|
||||
transform:translateY(-2px);
|
||||
}
|
||||
.cta-secondary{
|
||||
background:rgba(26,31,44,0.6);border:1px solid var(--border);
|
||||
color:var(--text-dim);
|
||||
}
|
||||
.cta-secondary:hover{
|
||||
border-color:rgba(155,81,224,0.3);
|
||||
color:var(--text);
|
||||
transform:translateY(-2px);
|
||||
}
|
||||
|
||||
/* ─── TIMELINE ─── */
|
||||
.timeline-section{
|
||||
position:relative;z-index:1;max-width:800px;margin:0 auto;
|
||||
padding:60px 24px 120px;
|
||||
}
|
||||
.timeline-label{
|
||||
font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;
|
||||
color:var(--text-muted);margin-bottom:40px;text-align:center;
|
||||
}
|
||||
.timeline{
|
||||
display:flex;flex-direction:column;gap:16px;
|
||||
}
|
||||
.timeline-item{
|
||||
display:grid;grid-template-columns:80px 1fr;gap:24px;
|
||||
padding:20px 24px;
|
||||
background:rgba(26,31,44,0.5);
|
||||
border:1px solid var(--border);
|
||||
border-radius:12px;
|
||||
transition:var(--transition-slow);
|
||||
cursor:default;
|
||||
}
|
||||
.timeline-item:hover{
|
||||
border-color:rgba(155,81,224,0.3);
|
||||
background:rgba(26,31,44,0.7);
|
||||
transform:translateX(4px);
|
||||
}
|
||||
.timeline-time{
|
||||
font-size:13px;font-weight:300;color:var(--text-dim);padding-top:2px;
|
||||
font-variant-numeric:tabular-nums;
|
||||
}
|
||||
.timeline-time span{
|
||||
display:block;font-size:10px;color:var(--text-muted);margin-top:2px;
|
||||
}
|
||||
.timeline-visual{
|
||||
display:flex;flex-direction:column;gap:6px;
|
||||
}
|
||||
.timeline-bar{
|
||||
height:3px;border-radius:3px;
|
||||
background:linear-gradient(90deg,var(--accent-from),var(--accent-to));
|
||||
transition:var(--transition-slow);
|
||||
opacity:0.3;
|
||||
}
|
||||
.timeline-item:hover .timeline-bar{opacity:0.7;}
|
||||
.timeline-bar-1{width:20%}
|
||||
.timeline-bar-2{width:35%}
|
||||
.timeline-bar-3{width:55%}
|
||||
.timeline-bar-4{width:75%}
|
||||
.timeline-bar-5{width:90%}
|
||||
.timeline-bar-6{width:100%}
|
||||
.timeline-desc{
|
||||
font-size:14px;font-weight:300;color:var(--text-dim);line-height:1.6;
|
||||
margin-top:4px;
|
||||
}
|
||||
.timeline-desc strong{color:var(--text);font-weight:400;}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid-bg"></div>
|
||||
<div class="orb orb-violet"></div>
|
||||
<div class="orb orb-cyan"></div>
|
||||
|
||||
<!-- ─── SECTION 1: HERO / BOVEN DE VOUW (0:00 – Ambient Intro) ─── -->
|
||||
<section class="hero">
|
||||
<div class="hero-label reveal visible">
|
||||
<span class="hero-label-dot"></span>
|
||||
RÜFÜS DU SOL · 2025
|
||||
</div>
|
||||
<h1 class="hero-title reveal visible reveal-delay-1">
|
||||
Inner<br><span>bloom</span>
|
||||
</h1>
|
||||
<p class="hero-sub reveal visible reveal-delay-2">
|
||||
Een meeslepende reis door 122 BPM van sonische melancholie.<br>
|
||||
Negen minuten en 52 seconden van opbouw en emotie.
|
||||
</p>
|
||||
<div class="hero-bpm reveal visible reveal-delay-3">
|
||||
122 <span>●</span> Am <span>●</span> Original Mix
|
||||
</div>
|
||||
|
||||
<!-- Scroll indicator (de kickdrum) -->
|
||||
<div class="scroll-indicator reveal visible reveal-delay-4">
|
||||
<div class="scroll-dot"></div>
|
||||
<div class="scroll-line"></div>
|
||||
<span class="scroll-text">scroll</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── SECTION 2: CORE CONTENT (De Baslijn & Eerste Vocals) ─── -->
|
||||
<section class="content-section">
|
||||
<div class="content-grid">
|
||||
<div class="content-card reveal">
|
||||
<div class="content-number">01</div>
|
||||
<h2 class="content-heading">De basis</h2>
|
||||
<p class="content-text">Een diepe, lage puls. De kickdrum en baslijn vestigen de fundering. Hier komt de eerste, fragiele vocal van Tyrone Lindqvist binnen — ver weg, bedolven onder galm.</p>
|
||||
</div>
|
||||
<div class="content-card reveal reveal-delay-1">
|
||||
<div class="content-number">02</div>
|
||||
<h2 class="content-heading">Ritme</h2>
|
||||
<p class="content-text">Hihats en percussie verschijnen geleidelijk. Het grid begint vorm te krijgen. Contentblokken schuiven op hun plek, ruim en mysterieus.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Visualizer -->
|
||||
<div class="visualizer reveal reveal-delay-2" style="margin-top:80px">
|
||||
<div class="visualizer-bars">
|
||||
<div class="visualizer-bar"></div>
|
||||
<div class="visualizer-bar"></div>
|
||||
<div class="visualizer-bar"></div>
|
||||
<div class="visualizer-bar"></div>
|
||||
<div class="visualizer-bar"></div>
|
||||
<div class="visualizer-bar"></div>
|
||||
<div class="visualizer-bar"></div>
|
||||
<div class="visualizer-bar"></div>
|
||||
<div class="visualizer-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── SECTION 3: HET OMSLAGPUNT (4:00 – De Synth Lead) ─── -->
|
||||
<section class="turn-section">
|
||||
<div class="turn-inner">
|
||||
<div class="turn-label reveal">⏺ 4:00 — The Filter Opens</div>
|
||||
<h2 class="turn-title reveal reveal-delay-1">
|
||||
De iconische<br>
|
||||
<span>synth</span>
|
||||
</h2>
|
||||
<p class="turn-text reveal reveal-delay-2">
|
||||
Het low-pass filter opent. De melancholische, filter-synth verschijnt —
|
||||
een geluid dat je herkent nog voor de drums invallen. Dit is het DNA van Innerbloom.
|
||||
</p>
|
||||
<p class="turn-text reveal reveal-delay-3" style="color:var(--text-dim);font-size:14px;margin-top:12px">
|
||||
Neon cyaan en violet verschijnen. De interface wordt helderder, scherper.
|
||||
Parallax verschuift de achtergronden subtiel.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── SECTION 4: TIMELINE (Het Verloop) ─── -->
|
||||
<section class="timeline-section">
|
||||
<div class="timeline-label reveal">The Progressive Build</div>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-item reveal reveal-delay-1">
|
||||
<div class="timeline-time">0:00 <span>intro</span></div>
|
||||
<div class="timeline-visual">
|
||||
<div class="timeline-bar timeline-bar-1"></div>
|
||||
<div class="timeline-desc"><strong>Stilte en verwachting.</strong> Enkel een zachte puls. De interface ademt — achtergrondgloed pulseert.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item reveal reveal-delay-2">
|
||||
<div class="timeline-time">2:00 <span>foundation</span></div>
|
||||
<div class="timeline-visual">
|
||||
<div class="timeline-bar timeline-bar-2"></div>
|
||||
<div class="timeline-desc"><strong>De basis legt zich.</strong> Kick en hihat verschijnen. Elementen worden zichtbaar, nog wazig, nog wachtend.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item reveal reveal-delay-3">
|
||||
<div class="timeline-time">4:00 <span>the filter opens</span></div>
|
||||
<div class="timeline-visual">
|
||||
<div class="timeline-bar timeline-bar-3"></div>
|
||||
<div class="timeline-desc"><strong>De iconische synth.</strong> Het low-pass filter opent. Neon-violet verschijnt. De site wordt helderder, scherper. De blauwdruk van Innerbloom.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item reveal reveal-delay-4">
|
||||
<div class="timeline-time">5:30 <span>vocals</span></div>
|
||||
<div class="timeline-visual">
|
||||
<div class="timeline-bar timeline-bar-4"></div>
|
||||
<div class="timeline-desc"><strong>Lindqvist' stem.</strong> Fragiel, ver weg in de galm. Typografie wordt leesbaar. De emotie doorsnijdt de duisternis.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item reveal reveal-delay-5">
|
||||
<div class="timeline-time">7:00 <span>climax</span></div>
|
||||
<div class="timeline-visual">
|
||||
<div class="timeline-bar timeline-bar-5"></div>
|
||||
<div class="timeline-desc"><strong>Alles is open.</strong> De volle track. Neon-gloed, cyaan en violet dansen. De piek van de ervaring.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item reveal reveal-delay-6">
|
||||
<div class="timeline-time">9:52 <span>release</span></div>
|
||||
<div class="timeline-visual">
|
||||
<div class="timeline-bar timeline-bar-6"></div>
|
||||
<div class="timeline-desc"><strong>Terug naar stilte.</strong> De reverb sterft uit. De gloed fades. Je blijft achter, alleen met de echo.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── SECTION 5: DE CLIMAX (De Drop / "If you want me") ─── -->
|
||||
<section class="climax-section">
|
||||
<div class="climax-bg-glow"></div>
|
||||
<div class="climax-inner">
|
||||
<div class="climax-label reveal">⏺ 7:00 — The Climax</div>
|
||||
<h2 class="climax-title reveal reveal-delay-1">
|
||||
"If you want<br>
|
||||
<span>me</span>"
|
||||
</h2>
|
||||
<p class="climax-text reveal reveal-delay-2">
|
||||
De volledige track opent. De stem van Lindqvist doorsnijdt de duisternis.
|
||||
Neon-gloed vult het scherm. Cyaan en violet dansen in een hypnotiserend verloop.
|
||||
</p>
|
||||
<p class="climax-text reveal reveal-delay-3" style="color:var(--text-dim);font-size:14px;margin-top:12px;max-width:500px">
|
||||
Hier knalt het contrast eruit — felle glow-effecten, scherpe lijnen, maximale visuele impact.
|
||||
Dit is het punt van conversie. De boodschap.
|
||||
</p>
|
||||
<div class="climax-cta reveal reveal-delay-4">
|
||||
<a href="#listen" class="cta-btn cta-primary">
|
||||
<span>Ervaar Innerbloom</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
<a href="https://rufusdusol.com" target="_blank" rel="noopener" class="cta-btn cta-secondary">
|
||||
RÜFÜS DU SOL
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── LISTEN / AFTERGLOW ─── -->
|
||||
<section class="listen-section" id="listen">
|
||||
<div class="listen-title reveal">Luister nu</div>
|
||||
<div class="listen-grid">
|
||||
<a class="listen-btn reveal reveal-delay-1" href="https://open.spotify.com/track/6G6TzM6eE3vjYlqGkSd9qT" target="_blank" rel="noopener">
|
||||
<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M128 0C57.308 0 0 57.309 0 128c0 70.696 57.309 128 128 128 70.697 0 128-57.304 128-128C256 57.314 198.697.007 127.998.007l.001-.006Zm58.699 184.614c-2.293 3.76-7.215 4.952-10.975 2.644-30.053-18.357-67.885-22.515-112.44-12.335a7.981 7.981 0 0 1-9.552-6.007 7.968 7.968 0 0 1 6-9.553c48.76-11.14 90.583-6.344 124.323 14.276 3.76 2.308 4.952 7.215 2.644 10.975Zm15.667-34.853c-2.89 4.695-9.034 6.178-13.726 3.289-34.406-21.148-86.853-27.273-127.548-14.92-5.278 1.594-10.852-1.38-12.454-6.649-1.59-5.278 1.386-10.842 6.655-12.446 46.485-14.106 104.275-7.273 143.787 17.007 4.692 2.89 6.175 9.034 3.286 13.72v-.001Zm1.345-36.293C162.457 88.964 94.394 86.71 55.007 98.666c-6.325 1.918-13.014-1.653-14.93-7.978-1.917-6.328 1.65-13.012 7.98-14.935C93.27 62.027 168.434 64.68 215.929 92.876c5.702 3.376 7.566 10.724 4.188 16.405-3.362 5.69-10.73 7.565-16.4 4.187h-.006Z" fill="#1ED760"/></svg>
|
||||
Spotify
|
||||
</a>
|
||||
<a class="listen-btn reveal reveal-delay-2" href="https://music.apple.com/nl/album/innerbloom/1440875158?i=1440875162" target="_blank" rel="noopener">
|
||||
<svg viewBox="0 0 361 361" xmlns="http://www.w3.org/2000/svg"><path d="M360 112.61c0-4.3 0-8.6-.02-12.9-.02-3.62-.06-7.24-.16-10.86-.21-7.89-.68-15.84-2.08-23.64-1.42-7.92-3.75-15.29-7.41-22.49a75.633 75.633 0 0 0-33.06-33.05c-7.19-3.66-14.56-5.98-22.47-7.41C287 .86 279.04.39 271.15.18c-3.62-.1-7.24-.14-10.86-.16-4.3-.02-8.6-.02-12.9-.02H112.61c-4.3 0-8.6 0-12.9.02-3.62.02-7.24.06-10.86.16C80.96.4 73 .86 65.2 2.27c-7.92 1.42-15.28 3.75-22.47 7.41A75.633 75.633 0 0 0 9.67 42.73c-3.66 7.2-5.99 14.57-7.41 22.49C.86 73.02.39 80.98.18 88.86.08 92.48.04 96.1.02 99.72 0 104.01 0 108.31 0 112.61v134.77c0 4.3 0 8.6.02 12.9.02 3.62.06 7.24.16 10.86.21 7.89.68 15.84 2.08 23.64 1.42 7.92 3.75 15.29 7.41 22.49a75.633 75.633 0 0 0 33.06 33.05c7.19 3.66 14.56 5.98 22.47 7.41 7.8 1.4 15.76 1.87 23.65 2.08 3.62.1 7.24.14 10.86.16 4.3.03 8.6.02 12.9.02h134.77c4.3 0 8.6 0 12.9-.02 3.62-.02 7.24-.06 10.86-.16 7.89-.21 15.85-.68 23.65-2.08 7.92-1.42 15.28-3.75 22.47-7.41a75.633 75.633 0 0 0 33.06-33.05c3.66-7.2 5.99-14.57 7.41-22.49 1.4-7.8 1.87-15.76 2.08-23.64.1-3.62.14-7.24.16-10.86.03-4.3.02-8.6.02-12.9V112.61z" fill="#fa233b"/><path d="m254.5 55-.04.01-107 21.59h-.04c-2.79.59-4.98 1.58-6.67 3-2.04 1.71-3.17 4.13-3.6 6.95-.09.6-.24 1.82-.24 3.62v133.92c0 3.13-.25 6.17-2.37 8.76s-4.74 3.37-7.81 3.99l-6.99 1.41c-8.84 1.78-14.59 2.99-19.8 5.01-4.98 1.93-8.71 4.39-11.68 7.51-5.89 6.17-8.28 14.54-7.46 22.38.7 6.69 3.71 13.09 8.88 17.82 3.49 3.2 7.85 5.63 12.99 6.66 5.33 1.07 11.01.7 19.31-.98 4.42-.89 8.56-2.28 12.5-4.61 3.9-2.3 7.24-5.37 9.85-9.11 2.62-3.75 4.31-7.92 5.24-12.35.96-4.57 1.19-8.7 1.19-13.26V142.81c0-6.22 1.76-7.86 6.78-9.08l93.09-18.75c5.79-1.11 8.52.54 8.52 6.61v79.29c0 3.14-.03 6.32-2.17 8.92-2.12 2.59-4.74 3.37-7.81 3.99l-6.99 1.41c-8.84 1.78-14.59 2.99-19.8 5.01-4.98 1.93-8.71 4.39-11.68 7.51-5.89 6.17-8.49 14.54-7.67 22.38.7 6.69 3.92 13.09 9.09 17.82 3.49 3.2 7.85 5.56 12.99 6.6 5.33 1.07 11.01.69 19.31-.98 4.42-.89 8.56-2.22 12.5-4.55 3.9-2.3 7.24-5.37 9.85-9.11 2.62-3.75 4.31-7.92 5.24-12.35.96-4.57 1-8.7 1-13.26V64.46c.02-6.16-3.23-9.96-9.02-9.46z" fill="#fff"/></svg>
|
||||
Apple Music
|
||||
</a>
|
||||
<a class="listen-btn reveal reveal-delay-3" href="https://www.youtube.com/watch?v=1m2MrC9G0W8" target="_blank" rel="noopener">
|
||||
<svg viewBox="0 0 256 180" xmlns="http://www.w3.org/2000/svg"><path d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 123.43a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.345 8.34-89.084-.165-123.595z" fill="#FF0000"/><path d="m102.421 128.06 66.328-38.418-66.328-38.418z" fill="#fff"/></svg>
|
||||
YouTube
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="listen-count reveal">
|
||||
<span>122</span> BPM · <span>A mineur</span> · 9:52
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── FOOTER ─── -->
|
||||
<footer class="footer">
|
||||
<p class="footer-text">
|
||||
Innerbloom · RÜFÜS DU SOL<br>
|
||||
<a href="https://rufusdusol.com" target="_blank" rel="noopener">rufusdusol.com</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// ─── SCROLL REVEAL ───
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.15 });
|
||||
|
||||
document.querySelectorAll('.reveal:not(.visible)').forEach(el => observer.observe(el));
|
||||
|
||||
// ─── PARALLAX ORBS ───
|
||||
const orbs = document.querySelectorAll('.orb');
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
const x = (e.clientX / window.innerWidth - 0.5) * 20;
|
||||
const y = (e.clientY / window.innerHeight - 0.5) * 20;
|
||||
orbs.forEach((orb, i) => {
|
||||
const factor = i === 0 ? -1 : 1;
|
||||
orb.style.transform = `translate(${x * factor}px, ${y * factor}px)`;
|
||||
});
|
||||
});
|
||||
|
||||
// ─── VISUALIZER DYNAMIC ───
|
||||
const bars = document.querySelectorAll('.visualizer-bar');
|
||||
function updateBars() {
|
||||
const heights = [20, 40, 60, 80, 100, 80, 60, 40, 20];
|
||||
bars.forEach((bar, i) => {
|
||||
const h = heights[i] + (Math.random() - 0.5) * 30;
|
||||
bar.style.height = h + '%';
|
||||
});
|
||||
}
|
||||
setInterval(updateBars, 800);
|
||||
|
||||
console.log('🌊 Innerbloom · RÜFÜS DU SOL');
|
||||
console.log('🎵 122 BPM · Am · 9:52');
|
||||
console.log('✨ "If you want to know how I feel, just listen to Innerbloom."');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user