Marvel Prone — Indie Psych Rock, NH Seacoast
:root{
–ink:#0c0a07;
–ink-2:#14110c;
–cream:#f2e9d6;
–cream-dim:rgba(242,233,214,.72);
–magenta:#ff2f8f;
–acid:#c7e639;
–line:rgba(242,233,214,.28);
–max:1140px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(–ink);
color:var(–cream);
font-family:’Space Grotesk’,sans-serif;
overflow-x:hidden;
padding-bottom:76px; /* room for sticky player */
}
/* the warped print, fixed behind everything, parallax-scrolled */
.print-bg{
position:fixed;top:0;left:0;right:0;height:165vh;z-index:-2;
background:url(“imgs/poster-bg.jpg”) center top/cover no-repeat;
will-change:transform;
}
.print-bg::after{
content:””;position:absolute;inset:0;
background:rgba(12,10,7,.55);
}
h1,h2,h3{
font-family:’Rubik Wet Paint’,cursive;
font-weight:400;
line-height:1.05;
margin:0;
letter-spacing:1px;
}
.label{
font-family:’Bungee’,sans-serif;
letter-spacing:3px;
text-transform:uppercase;
font-size:.7rem;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(–max);margin:0 auto;padding:0 22px;}
::selection{background:var(–magenta);color:var(–ink);}
/* ———- NAV ———- */
nav{
position:fixed;top:14px;left:50%;transform:translateX(-50%);
z-index:200;
display:flex;align-items:center;gap:6px;
background:var(–ink);
border:2px solid var(–cream);
box-shadow:4px 4px 0 var(–magenta);
padding:7px 8px 7px 16px;
max-width:94vw;
}
nav .brand{
font-family:’Bungee’,sans-serif;
font-size:.8rem;
color:var(–cream);
margin-right:8px;
white-space:nowrap;
}
nav .links{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;}
nav .links::-webkit-scrollbar{display:none;}
nav a{
font-family:’Bungee’,sans-serif;
font-size:.6rem;
letter-spacing:1px;
text-transform:uppercase;
padding:9px 11px;
white-space:nowrap;
transition:background .15s,color .15s;
}
nav a:hover{background:var(–cream);color:var(–ink);}
/* ———- HERO ———- */
.hero{
position:relative;
min-height:100vh;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;
padding:120px 20px 90px;
overflow:hidden;
}
/* the band’s painting, fading smoothly into the black print background */
.hero::before{
content:””;position:absolute;inset:0;z-index:-1;
background:url(“imgs/DAVEbanner.jpg”) center/cover no-repeat;
}
.hero::after{
content:””;position:absolute;inset:0;z-index:-1;
background:linear-gradient(
rgba(12,10,7,.62) 0%,
rgba(12,10,7,.42) 40%,
rgba(12,10,7,.75) 75%,
var(–ink) 98%
);
}
.hero-logo{
width:120px;height:120px;border-radius:50%;
margin-bottom:26px;
border:3px solid var(–cream);
box-shadow:5px 5px 0 var(–magenta);
}
.hero .label{color:var(–cream-dim);margin-bottom:20px;}
.hero h1{
font-size:clamp(3rem,11vw,7.2rem);
color:var(–cream);
transform:rotate(-2deg);
text-shadow:4px 4px 0 var(–magenta);
}
.hero .tag{
max-width:540px;
margin:30px auto 0;
font-size:1.05rem;
color:var(–cream-dim);
}
.scroll-cue{
margin-top:52px;
font-family:’Bungee’,sans-serif;
font-size:.62rem;
letter-spacing:3px;
text-transform:uppercase;
color:var(–cream);
display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-cue span{
width:2px;height:34px;background:linear-gradient(var(–cream),transparent);
animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.25;}50%{opacity:1;}}
/* ———- SECTION SHELL ———- */
section{position:relative;padding:90px 0;}
.panel{
background:var(–ink);
border:2px solid var(–cream);
box-shadow:7px 7px 0 rgba(242,233,214,.18);
padding:56px 48px;
}
.tilt-l{transform:rotate(-.5deg);}
.tilt-r{transform:rotate(.5deg);}
.eyebrow{color:var(–magenta);margin-bottom:12px;}
.section-head{max-width:620px;margin-bottom:48px;}
.section-head h2{font-size:clamp(2rem,5vw,3rem);color:var(–cream);}
.section-head p{color:var(–cream-dim);margin-top:16px;line-height:1.6;}
@media(max-width:700px){.panel{padding:36px 22px;}}
/* ———- BIO ———- */
.bio-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;}
.bio-text h2{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:22px;}
.bio-text p{line-height:1.8;color:var(–cream-dim);margin:0 0 18px;}
.bio-frame{
border:2px solid var(–cream);
box-shadow:6px 6px 0 var(–magenta);
transform:rotate(1.2deg);
aspect-ratio:4/5;
overflow:hidden;
}
.bio-frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(35%) contrast(1.05);}
.stat-row{display:flex;gap:26px;margin-top:28px;flex-wrap:wrap;}
.stat-row .num{font-family:’Bungee’,sans-serif;font-size:1.7rem;color:var(–acid);}
.stat-row .cap{font-size:.78rem;color:var(–cream-dim);margin-top:4px;}
@media(max-width:820px){.bio-grid{grid-template-columns:1fr;}.bio-frame{max-width:320px;margin:0 auto;order:-1;}}
/* ———- DISCOGRAPHY (inverted: cream paper) ———- */
.discog .panel{
background:var(–cream);
color:var(–ink);
border-color:var(–ink);
box-shadow:7px 7px 0 var(–magenta);
}
.discog .section-head h2{color:var(–ink);}
.discog .section-head p{color:rgba(12,10,7,.65);}
.album-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px;}
.album-tabs button{
font-family:’Bungee’,sans-serif;
font-size:.65rem;letter-spacing:1px;text-transform:uppercase;
background:transparent;border:2px solid var(–ink);
color:var(–ink);padding:11px 18px;cursor:pointer;
transition:all .15s;
}
.album-tabs button.active,.album-tabs button:hover{
background:var(–ink);color:var(–cream);
box-shadow:3px 3px 0 var(–magenta);
}
.album-panel{display:none;grid-template-columns:.65fr 1.35fr;gap:44px;}
.album-panel.active{display:grid;}
.album-art{
border:2px solid var(–ink);
box-shadow:5px 5px 0 var(–ink);
}
.album-year{font-family:’Bungee’,sans-serif;color:var(–magenta);font-size:.8rem;margin:16px 0 4px;}
.album-panel h3{font-size:1.9rem;color:var(–ink);margin-bottom:18px;}
.no-audio-note{font-size:.82rem;color:rgba(12,10,7,.55);margin-top:10px;font-style:italic;}
.tracklist{list-style:none;margin:0;padding:0;}
.tracklist li{
display:flex;align-items:center;gap:14px;
padding:11px 8px;border-bottom:1px solid rgba(12,10,7,.2);
font-size:.96rem;
}
.tracklist li.playable{cursor:pointer;transition:background .12s;}
.tracklist li.playable:hover{background:rgba(12,10,7,.06);}
.tracklist .tno{
font-family:’Bungee’,sans-serif;font-size:.7rem;width:26px;color:rgba(12,10,7,.5);
}
.tracklist .ticon{
width:20px;text-align:center;font-size:.8rem;color:var(–magenta);
visibility:hidden;
}
.tracklist li.playable .ticon{visibility:visible;}
.tracklist li.playing{background:var(–ink);color:var(–cream);}
.tracklist li.playing .tno{color:var(–acid);}
.tracklist li.playing:hover{background:var(–ink);}
/* equalizer bars for the playing track */
.eq{display:none;margin-left:auto;align-items:flex-end;gap:2px;height:14px;}
li.playing .eq{display:flex;}
.eq span{width:3px;background:var(–magenta);animation:eqb 0.9s ease-in-out infinite;}
.eq span:nth-child(1){height:60%;animation-delay:0s;}
.eq span:nth-child(2){height:100%;animation-delay:.2s;}
.eq span:nth-child(3){height:40%;animation-delay:.4s;}
@keyframes eqb{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1);}}
@media(max-width:820px){.album-panel{grid-template-columns:1fr;}.album-art{max-width:280px;}}
/* ———- STICKY PLAYER ———- */
#player-bar{
position:fixed;left:0;right:0;bottom:0;z-index:300;
background:var(–cream);color:var(–ink);
border-top:3px solid var(–ink);
display:none;
align-items:center;gap:14px;
padding:10px 18px;
}
#player-bar.on{display:flex;}
#pb-toggle{
width:42px;height:42px;flex-shrink:0;
background:var(–ink);color:var(–cream);
border:none;cursor:pointer;font-size:1rem;
font-family:’Bungee’,sans-serif;
box-shadow:3px 3px 0 var(–magenta);
}
#pb-title{
font-family:’Bungee’,sans-serif;font-size:.68rem;letter-spacing:1px;text-transform:uppercase;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32vw;
}
#pb-seek{flex:1;accent-color:var(–magenta);}
#pb-time{font-size:.75rem;font-variant-numeric:tabular-nums;white-space:nowrap;}
/* ———- STORY ———- */
.timeline{position:relative;padding-left:34px;}
.timeline::before{content:””;position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(–cream);}
.t-item{position:relative;padding-bottom:40px;}
.t-item:last-child{padding-bottom:0;}
.t-item::before{
content:””;position:absolute;left:-34px;top:5px;
width:11px;height:11px;
background:var(–magenta);
border:2px solid var(–cream);
}
.t-item .yr{font-family:’Bungee’,sans-serif;color:var(–acid);font-size:.8rem;margin-bottom:8px;display:block;}
.t-item p{line-height:1.75;color:var(–cream-dim);margin:0;max-width:740px;}
/* ———- SHOWS ———- */
.show-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.show-card{
background:var(–ink);
border:2px solid var(–cream);
transition:transform .15s, box-shadow .15s;
}
.show-card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(–magenta);}
.show-card img{aspect-ratio:16/10;object-fit:cover;width:100%;filter:grayscale(30%);}
.show-card .body{padding:18px 20px 22px;border-top:2px solid var(–cream);}
.show-card .venue{font-family:’Bungee’,sans-serif;font-size:.9rem;margin-bottom:6px;}
.show-card .date{color:var(–magenta);font-size:.72rem;letter-spacing:2px;text-transform:uppercase;font-family:’Bungee’,sans-serif;margin-bottom:8px;}
.show-card .note{color:var(–cream-dim);font-size:.9rem;line-height:1.5;}
@media(max-width:760px){.show-grid{grid-template-columns:1fr;}}
/* ———- PHOTOS ———- */
.slideshow{position:relative;border:2px solid var(–cream);box-shadow:7px 7px 0 rgba(242,233,214,.18);margin-bottom:40px;aspect-ratio:16/8;background:#000;}
.slideshow img{width:100%;height:100%;object-fit:cover;display:none;}
.slideshow img.show{display:block;}
.slide-btn{
position:absolute;top:50%;transform:translateY(-50%);
background:var(–ink);border:2px solid var(–cream);color:var(–cream);
width:44px;height:44px;cursor:pointer;font-size:1.1rem;
display:flex;align-items:center;justify-content:center;
transition:all .15s;
}
.slide-btn:hover{background:var(–cream);color:var(–ink);}
.slide-btn.prev{left:14px;}
.slide-btn.next{right:14px;}
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.photo-grid a{
border:2px solid var(–cream);
overflow:hidden;aspect-ratio:1/1;
transition:transform .15s, box-shadow .15s;
}
.photo-grid a:nth-child(odd){transform:rotate(-1deg);}
.photo-grid a:nth-child(even){transform:rotate(1deg);}
.photo-grid a:hover{transform:rotate(0) scale(1.03);box-shadow:5px 5px 0 var(–magenta);z-index:2;position:relative;}
.photo-grid img{width:100%;height:100%;object-fit:cover;}
@media(max-width:820px){.photo-grid{grid-template-columns:repeat(2,1fr);}}
/* ———- VIDEOS ———- */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.video-frame{position:relative;padding-top:56.25%;border:2px solid var(–cream);box-shadow:5px 5px 0 rgba(242,233,214,.18);}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
@media(max-width:760px){.video-grid{grid-template-columns:1fr;}}
/* ———- CONTACT ———- */
.contact-inner{
max-width:620px;margin:0 auto;text-align:center;
border:2px dashed var(–cream);
padding:52px 32px;
background:var(–ink);
}
.contact-inner h2{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:14px;}
.contact-inner p{color:var(–cream-dim);margin-bottom:26px;}
.mail-btn{
display:inline-block;
font-family:’Bungee’,sans-serif;
font-size:.8rem;letter-spacing:1px;text-transform:uppercase;
background:var(–cream);color:var(–ink);
padding:15px 30px;
border:2px solid var(–cream);
box-shadow:4px 4px 0 var(–magenta);
transition:transform .15s;
}
.mail-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(–magenta);}
/* ———- FOOTER ———- */
footer{padding:50px 0 44px;text-align:center;}
.social{display:flex;justify-content:center;gap:18px;margin-bottom:22px;}
.social a{
width:44px;height:44px;
border:2px solid var(–cream);
display:flex;align-items:center;justify-content:center;
font-family:’Bungee’,sans-serif;font-size:.8rem;
transition:all .15s;
}
.social a:hover{background:var(–cream);color:var(–ink);box-shadow:3px 3px 0 var(–magenta);}
footer .fine{color:var(–cream-dim);font-size:.75rem;}
@media (prefers-reduced-motion: reduce){
*{animation:none !important;transition:none !important;}
}
MARVEL PRONE
Indie Psych Rock · New Hampshire Seacoast
MARVEL
AKA DAVE. Raw, electrifying performances through heaven and hell — romance and heartbreak, written for chasing shooting stars.
The Band
Four albums deep, still diving into dark waters.
We are an indie rock band hailing from the New Hampshire seacoast, blending psychedelic, alternative, and garage rock. Our albums include Moonlightning (2016), She Hits Me (2020), Tres Hombres , and 11:22 — the last of which was recorded with acclaimed sound engineer Steve Albini.
Marvel Prone puts on raw, electrifying performances that take listeners on a sonic journey through heaven and hell, combining romance and heartbreak in Rainor Tsunami’s ambitious songwriting. We’ve played notable venues across NH and Boston — The Stone Church, The Press Room, 3S Artspace, and The Middle East.
2014
Formed on the seacoast
Discography
Music
Four records, four eras. Hit a track to play it right here.
Moonlightning
She Hits Me
Tres Hombres
11:22
2016
Moonlightning
01 ▶ DAVE, The Supermoon!02 ▶ Nocturnal Life03 ▶ Beauty Blazing Fury04 ▶ After a While05 ▶ Pufferbelly06 ▶ Twirl07 ▶ Diamond Eyes08 ▶ Moonlightning
2020
She Hits Me
01 ▶ Blue-Eyes, White Dragon02 ▶ Cuffed03 ▶ Strike-through04 ▶ Madison05 ▶ So Be It06 ▶ She Hits Me07 ▶ Little Signs08 ▶ Scrolling Through Your Feed09 ▶ Last May10 ▶ Being-there
2022
Tres Hombres
01 ▶ Intro02 ▶ Tres Hombres03 ▶ Hair Off Of A Canine’s Back04 ▶ Hold Me While I’m Burning05 ▶ Deadhang06 ▶ Misbehave07 ▶ Stasis Tube08 ▶ My White Flag09 ▶ Today Is Not Self-Hatred Day10 ▶ Outro
2022
11:22
01 ▶ Ivory02 ▶ Emma (uWu)03 ▶ 11:2204 ▶ Broke My Lip05 ▶ Sterling06 ▶ Shot Me Down07 ▶ Eternal Return of The Same Dream
Origin
Our Story
The spirit of being “marvel-prone” is to chase a shooting star — even if it means diving into dark waters.
2014
Marvel Prone forms as a psych-rock outfit on the New Hampshire seacoast.
2015
Places top-ten in a high-school songwriting contest hosted by 92.5 FM “The River” — “Nocturnal Life” airs on Boston radio. The same year, the band wins a battle of the bands at The Rochester Opera House and is awarded free studio time.
2016
Moonlightning , the band’s first album, is recorded and released that fall. A revolving lineup follows, eventually leaving songwriter and bandleader Rainor Vigneault as the only original member.
2017–19
Marvel Prone plays UNH Solarfest three years running, sharing bills with Lawrence, Vundabar, Harsh Armadillo, and Juice, plus a set at Trichomania alongside Octave Cat, The Breakfast, and Barika. Regular haunts include The Stone Church, The Dover Brickhouse, Fury’s Publick House, The Book N Bar, and Portsmouth Music and Arts Center.
2020
She Hits Me drops on May 1st, peak-pandemic — dance-punk colliding with metal, grunge, and psychedelic rock. Standouts: “Last May,” an emo-rock ode to a dating-app love affair; “Blue-Eyes, White Dragon,” equal parts Yu-Gi-Oh! tribute and grunge-metal banger; and “Scrolling Through Your Feed,” a Pixies-meets-Smiths take on social media addiction.
2022
Tres Hombres and 11:22 arrive, the latter recorded with acclaimed engineer Steve Albini.
Today
Rainor (songwriter/leader), Edward McPherson on drums, and Lukas Labrie on bass keep the sound eclectic — pulling from The White Stripes, The Strokes, Tame Impala, Vampire Weekend, prog-rock, RHCP, and LCD Soundsystem — new and exciting, but built for fans of rock’s past.
On Stage
Recent Milestones
document.getElementById(‘yr’).textContent = new Date().getFullYear();
// —- album tabs —-
document.querySelectorAll(‘.album-tabs button’).forEach(btn=>{
btn.addEventListener(‘click’,()=>{
document.querySelectorAll(‘.album-tabs button’).forEach(b=>b.classList.remove(‘active’));
document.querySelectorAll(‘.album-panel’).forEach(p=>p.classList.remove(‘active’));
btn.classList.add(‘active’);
document.getElementById(btn.dataset.album).classList.add(‘active’);
});
});
// —- slideshow —-
let slideIndex = 0;
const slides = document.querySelectorAll(‘.slide’);
function moveSlide(n){
slides[slideIndex].classList.remove(‘show’);
slideIndex = (slideIndex + n + slides.length) % slides.length;
slides[slideIndex].classList.add(‘show’);
}
window.moveSlide = moveSlide;
// —- audio player —-
const player = document.getElementById(‘player’);
const bar = document.getElementById(‘player-bar’);
const toggle = document.getElementById(‘pb-toggle’);
const titleEl = document.getElementById(‘pb-title’);
const seek = document.getElementById(‘pb-seek’);
const timeEl = document.getElementById(‘pb-time’);
let currentLi = null;
let seeking = false;
function fmt(s){
if(!isFinite(s)) return ‘0:00’;
const m = Math.floor(s/60), sec = Math.floor(s%60);
return m + ‘:’ + String(sec).padStart(2,’0′);
}
function trackName(li){
// text content minus the number/icon spans
return li.childNodes[2] ? li.childNodes[2].textContent.trim() : li.textContent.trim();
}
function setIcon(li, symbol){
const ic = li && li.querySelector(‘.ticon’);
if(ic) ic.textContent = symbol;
}
function playTrack(li){
const src = li.dataset.src;
if(currentLi === li){
if(player.paused){ player.play(); } else { player.pause(); }
return;
}
if(currentLi){ currentLi.classList.remove(‘playing’); setIcon(currentLi,’▶’); }
currentLi = li;
li.classList.add(‘playing’);
player.src = src;
player.play();
const album = li.closest(‘.tracklist’).dataset.albumTitle || ”;
titleEl.textContent = album + ‘ — ‘ + trackName(li);
bar.classList.add(‘on’);
}
document.querySelectorAll(‘.tracklist li.playable’).forEach(li=>{
li.addEventListener(‘click’, ()=>playTrack(li));
});
toggle.addEventListener(‘click’, ()=>{
if(!player.src) return;
if(player.paused) player.play(); else player.pause();
});
player.addEventListener(‘play’, ()=>{ toggle.textContent=’❚❚’; if(currentLi){ currentLi.classList.add(‘playing’); setIcon(currentLi,’❚❚’); } });
player.addEventListener(‘pause’, ()=>{ toggle.textContent=’▶’; if(currentLi) setIcon(currentLi,’▶’); });
player.addEventListener(‘timeupdate’, ()=>{
if(!seeking && player.duration){
seek.value = (player.currentTime/player.duration)*100;
}
timeEl.textContent = fmt(player.currentTime) + ‘ / ‘ + fmt(player.duration);
});
seek.addEventListener(‘input’, ()=>{ seeking = true; });
seek.addEventListener(‘change’, ()=>{
if(player.duration) player.currentTime = (seek.value/100)*player.duration;
seeking = false;
});
// auto-advance to next playable track in the same album
player.addEventListener(‘ended’, ()=>{
if(!currentLi) return;
const next = currentLi.nextElementSibling;
if(next && next.classList.contains(‘playable’)){
playTrack(next);
} else {
currentLi.classList.remove(‘playing’);
setIcon(currentLi,’▶’);
currentLi = null;
toggle.textContent=’▶’;
}
});
// —- slow parallax on the print background —-
const printBg = document.querySelector(‘.print-bg’);
const prefersReduced = window.matchMedia(‘(prefers-reduced-motion: reduce)’).matches;
let ticking = false;
function parallax(){
const maxShift = Math.max(0, printBg.offsetHeight – window.innerHeight);
const shift = Math.min(window.scrollY * 0.08, maxShift);
printBg.style.transform = ‘translateY(‘ + (-shift) + ‘px)’;
ticking = false;
}
if(!prefersReduced){
window.addEventListener(‘scroll’, ()=>{
if(!ticking){ requestAnimationFrame(parallax); ticking = true; }
}, {passive:true});
parallax();
}
Marvel Prone 