PulseWave — Music Artist Landing

<nav class="pw-nav" data-rv><span class="pw-logo">PULSE<span>WAVE</span></span><div class="pw-links d-none d-md-flex"><a href="#tour">Tour</a><a href="#music">Music</a><a href="#contact">Booking</a></div></nav>
<header class="pw-hero">
  <div class="pw-eq" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
  <div class="pw-hero-in"><span class="pw-tag" data-rv>New album · "Atlas" out now</span><h1 data-rv>PULSE<br>WAVE</h1><p data-rv>Electronic producer &amp; live act. A demo artist template by <strong>ConvertAtlas</strong>.</p><div data-rv><a href="#music" class="pw-btn">▶ Listen</a><a href="#tour" class="pw-ghost">Tour dates</a></div></div>
</header>
<div class="pw-player" data-rv><div class="pw-pp">▶</div><div class="pw-track"><b>Atlas (Original Mix)</b><span>PulseWave</span></div><div class="pw-prog"><i></i></div><span class="pw-time">1:42 / 4:08</span></div>
<section id="music" class="pw-music">
  <div class="pw-head" data-rv><span class="pw-kick">// releases</span><h2>Latest drops</h2></div>
  <div class="pw-grid">
    <div class="pw-rel" data-rv><div class="pw-cover" style="background:linear-gradient(135deg,#ff2e63,#7c3aed)"></div><h4>Atlas</h4><span>Album · 2026</span></div>
    <div class="pw-rel" data-rv><div class="pw-cover" style="background:linear-gradient(135deg,#08aeea,#2af598)"></div><h4>Nightform</h4><span>EP · 2025</span></div>
    <div class="pw-rel" data-rv><div class="pw-cover" style="background:linear-gradient(135deg,#fc466b,#3f5efb)"></div><h4>Signal</h4><span>Single · 2025</span></div>
    <div class="pw-rel" data-rv><div class="pw-cover" style="background:linear-gradient(135deg,#f7971e,#ffd200)"></div><h4>Drift</h4><span>Single · 2024</span></div>
  </div>
</section>
<section id="tour" class="pw-tour" data-rv>
  <div class="pw-head"><span class="pw-kick">// on tour</span><h2>Live dates</h2></div>
  <div class="pw-date"><div><b>JUN 20</b><span>Riga · Palladium</span></div><a class="pw-tix">Tickets</a></div>
  <div class="pw-date"><div><b>JUL 04</b><span>Berlin · Berghain</span></div><a class="pw-tix">Tickets</a></div>
  <div class="pw-date pw-out"><div><b>JUL 18</b><span>Amsterdam · Melkweg</span></div><span class="pw-sold">Sold out</span></div>
  <div class="pw-date"><div><b>AUG 02</b><span>London · Fabric</span></div><a class="pw-tix">Tickets</a></div>
</section>
<section id="contact" class="pw-contact" data-rv><h2>Booking &amp; press</h2><a href="mailto:hello@convertatlas.org" class="pw-btn">hello@convertatlas.org</a></section>
<footer class="pw-foot">PULSEWAVE © 2026 · Template by <a href="https://convertatlas.org">ConvertAtlas</a></footer>

*{box-sizing:border-box}body{margin:0;background:#08070d;color:#f0eef7;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}a{text-decoration:none}
.pw-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px 30px}
.pw-logo{font-weight:900;letter-spacing:.06em;font-size:1.05rem}.pw-logo span{color:#ff2e63}
.pw-links{gap:26px}.pw-links a{color:#a39db8;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}.pw-links a:hover{color:#ff2e63}
.pw-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pw-eq{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:0 20px;opacity:.32}
.pw-eq span{flex:1;max-width:22px;background:linear-gradient(#ff2e63,#7c3aed);border-radius:4px 4px 0 0;animation:pwEq 1.1s ease-in-out infinite}
.pw-eq span:nth-child(even){animation-duration:.85s}.pw-eq span:nth-child(3n){animation-duration:1.4s}.pw-eq span:nth-child(4n){animation-duration:.7s}
@keyframes pwEq{0%,100%{height:12%}50%{height:88%}}
.pw-hero-in{position:relative;text-align:center;z-index:1;padding:0 24px}
.pw-tag{display:inline-block;border:1px solid rgba(255,46,99,.4);background:rgba(255,46,99,.1);border-radius:999px;padding:7px 16px;font-size:.8rem;color:#ff8fab;margin-bottom:22px}
.pw-hero h1{font-size:clamp(3.4rem,16vw,11rem);font-weight:900;line-height:.84;margin:0;letter-spacing:-.04em;background:linear-gradient(120deg,#fff,#ff8fab);-webkit-background-clip:text;background-clip:text;color:transparent}
.pw-hero p{color:#a39db8;font-size:1.05rem;max-width:420px;margin:22px auto 28px}
.pw-btn{display:inline-block;background:#ff2e63;color:#fff;font-weight:700;padding:13px 28px;border-radius:999px;margin-right:12px;transition:.18s}
.pw-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,46,99,.4)}
.pw-ghost{display:inline-block;border:1px solid rgba(255,255,255,.25);color:#f0eef7;padding:13px 26px;border-radius:999px}
.pw-ghost:hover{border-color:#ff2e63;color:#ff2e63}
.pw-player{max-width:560px;margin:-30px auto 0;position:relative;z-index:2;display:flex;align-items:center;gap:14px;background:rgba(20,17,32,.9);border:1px solid #2a2440;border-radius:16px;padding:14px 18px;backdrop-filter:blur(8px)}
.pw-pp{width:42px;height:42px;border-radius:50%;background:#ff2e63;display:grid;place-items:center;color:#fff;flex-shrink:0}
.pw-track{flex-shrink:0}.pw-track b{display:block;font-size:.92rem}.pw-track span{color:#8d86a8;font-size:.78rem}
.pw-prog{flex:1;height:5px;background:#2a2440;border-radius:3px;overflow:hidden}.pw-prog i{display:block;width:40%;height:100%;background:linear-gradient(90deg,#ff2e63,#7c3aed)}
.pw-time{font-size:.76rem;color:#8d86a8;white-space:nowrap}
.pw-music,.pw-tour{max-width:1000px;margin:0 auto;padding:70px 24px}
.pw-kick{font-family:ui-monospace,monospace;color:#ff2e63;font-size:.82rem}
.pw-head{margin-bottom:30px}.pw-head h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin:6px 0 0}
.pw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:760px){.pw-grid{grid-template-columns:repeat(2,1fr)}.pw-links{display:none}}
.pw-rel:hover .pw-cover{transform:scale(1.04) rotate(-1deg)}
.pw-cover{height:200px;border-radius:14px;margin-bottom:10px;transition:transform .3s;box-shadow:0 16px 40px rgba(0,0,0,.4)}
.pw-rel h4{margin:0;font-size:1.05rem}.pw-rel span{color:#8d86a8;font-size:.82rem}
.pw-date{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid #1c1830}
.pw-date b{font-size:1.1rem;margin-right:16px;color:#ff2e63}.pw-date span{color:#c9c4dc}
.pw-tix{color:#fff;border:1px solid #ff2e63;padding:8px 20px;border-radius:999px;font-size:.84rem;cursor:pointer;transition:.18s}.pw-tix:hover{background:#ff2e63}
.pw-out{opacity:.6}.pw-sold{color:#8d86a8;font-size:.84rem;text-transform:uppercase;letter-spacing:.08em}
.pw-contact{text-align:center;padding:90px 24px}.pw-contact h2{font-size:clamp(2rem,5vw,3rem);font-weight:800;margin:0 0 24px}
.pw-foot{text-align:center;padding:28px;color:#6b6585;font-size:.84rem;border-top:1px solid #1c1830}.pw-foot a{color:#ff2e63}
[data-rv]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}[data-rv].in{opacity:1;transform:none}

document.querySelectorAll('.pw-eq span').forEach(function(s){s.style.animationDelay=(Math.random()*-1.2)+'s'});
var pp=document.querySelector('.pw-pp'),prog=document.querySelector('.pw-prog i'),playing=false,w=40,iv;
pp.addEventListener('click',function(){playing=!playing;pp.textContent=playing?'❚❚':'▶';if(playing){iv=setInterval(function(){w=(w+0.5)%100;prog.style.width=w+'%'},120)}else clearInterval(iv)});
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.12});
document.querySelectorAll('[data-rv]').forEach(function(el,i){el.style.transitionDelay=(i%3*70)+'ms';io.observe(el)});