initial Dead listening exhibition

80a57f8ad4ecdb1213880b9b902c0da6f25ee714 · 2026-09-01 13:28:57 -0700 · Steve Abrams
Files touched

A .gitignore
A README.md
A index.html
Diff

commit 80a57f8ad4ecdb1213880b9b902c0da6f25ee714
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Sep 1 13:28:57 2026 -0700

    initial Dead listening exhibition
---
 .gitignore |  9 +++++++++
 README.md  | 10 ++++++++++
 index.html | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 81 insertions(+)

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..032b37b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,9 @@
+node_modules/
+.env*
+tmp/
+*.log
+.DS_Store
+dist/
+build/
+.next/
+
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e47c5fb
--- /dev/null
+++ b/README.md
@@ -0,0 +1,10 @@
+# dead.agentabrams.com
+
+A curated Grateful Dead listening exhibition built from Steve's existing
+listen-only source catalog. Recordings remain hosted by the Internet Archive;
+the site embeds source players and links back to each item page.
+
+No audio is copied or re-hosted. Playback is user-initiated and each show is
+clearly attributed as a community recording from the Grateful Dead collection
+at the Live Music Archive.
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6b92f76
--- /dev/null
+++ b/index.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="description" content="Five rooms, five eras, and five source-hosted Grateful Dead recordings from the Live Music Archive.">
+<title>DEAD · A Listening Exhibition</title>
+<style>
+:root{--ink:#f2ead8;--muted:#aaa18e;--night:#090908;--panel:#11110f;--line:#343127;--gold:#d7af59;--rose:#bd5b60;--blue:#538da2;--cols:3;--serif:Georgia,"Times New Roman",serif;--sans:Inter,Helvetica,Arial,sans-serif;--mono:"SFMono-Regular",Consolas,monospace}
+*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--night);color:var(--ink);font-family:var(--sans)}button,a,select,input{font:inherit}a{color:inherit}button{color:inherit}.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
+.top{height:66px;padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(9,9,8,.92);backdrop-filter:blur(18px);z-index:20}.mark{font-family:var(--serif);font-size:20px;letter-spacing:.06em}.mark i{color:var(--gold);font-style:normal}.nav{margin-left:auto;display:flex;gap:24px}.nav a{text-decoration:none;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em}.nav a:hover{color:var(--ink)}
+.hero{min-height:78vh;padding:clamp(70px,10vw,150px) clamp(20px,7vw,110px) 70px;display:grid;align-content:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(83,141,162,.19),rgba(189,91,96,.08) 35%,transparent 67%);right:-23vw;top:-34vw}.eyebrow{font:11px var(--mono);text-transform:uppercase;letter-spacing:.24em;color:var(--gold);margin-bottom:28px}.hero h1{font:clamp(72px,15vw,220px)/.72 var(--serif);letter-spacing:-.065em;margin:0;max-width:5ch}.hero h1 em{display:block;font-weight:normal;color:transparent;-webkit-text-stroke:1px var(--rose);padding-left:.55em}.hero-copy{max-width:590px;font:clamp(18px,2vw,27px)/1.45 var(--serif);margin:50px 0 0 clamp(0px,14vw,220px);color:#d8d0bf}.hero-meta{display:flex;gap:24px;flex-wrap:wrap;margin:32px 0 0 clamp(0px,14vw,220px);font:10px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
+.section{padding:90px clamp(20px,4vw,64px)}.section-head{display:grid;grid-template-columns:1fr 2fr;gap:40px;border-top:1px solid var(--line);padding-top:24px;margin-bottom:48px}.section-head .k{font:10px var(--mono);color:var(--gold);letter-spacing:.2em}.section-head h2{font:clamp(38px,6vw,86px)/.95 var(--serif);margin:0;font-weight:normal;letter-spacing:-.04em}.intro{margin:0 0 52px auto;max-width:670px;font:18px/1.7 var(--serif);color:var(--muted)}
+.player-shell{display:grid;grid-template-columns:minmax(270px,390px) 1fr;border:1px solid var(--line);background:var(--panel);min-height:640px}.shows{border-right:1px solid var(--line)}.show{width:100%;display:grid;grid-template-columns:54px 1fr;gap:14px;text-align:left;padding:21px;border:0;border-bottom:1px solid var(--line);background:transparent;cursor:pointer;transition:.2s}.show:hover,.show.on{background:#191813}.show.on{box-shadow:inset 3px 0 var(--gold)}.year{font:14px var(--mono);color:var(--gold)}.show b{display:block;font:19px/1.1 var(--serif);font-weight:normal}.show small{display:block;margin-top:7px;color:var(--muted);font-size:11px;line-height:1.45}.stage{padding:clamp(28px,5vw,72px);display:flex;flex-direction:column;position:relative;overflow:hidden}.stage:after{content:"";position:absolute;inset:auto -20% -55% 10%;height:70%;background:radial-gradient(ellipse,rgba(215,175,89,.12),transparent 66%);pointer-events:none}.stage .date{font:11px var(--mono);letter-spacing:.18em;color:var(--rose);text-transform:uppercase}.stage h3{font:clamp(45px,7vw,100px)/.9 var(--serif);font-weight:normal;letter-spacing:-.05em;margin:22px 0 20px;max-width:9ch}.stage .note{font:17px/1.65 var(--serif);max-width:640px;color:var(--muted);margin:0}.listen{margin-top:auto;position:relative;z-index:2}.listen-btn{margin-top:34px;border:1px solid var(--gold);background:var(--gold);color:#121008;padding:14px 20px;cursor:pointer;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.listen-btn:hover{background:#f0cb77}.frame-wrap{display:none;margin-top:24px}.frame-wrap.on{display:block}.frame-wrap iframe{width:100%;height:180px;border:1px solid var(--line);background:#000}.source-row{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:13px;color:var(--muted);font-size:11px}.source-row a{color:var(--gold)}
+.gallery-tools{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:25px}.gallery-tools label{font:10px var(--mono);text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}.gallery-tools select{margin-left:8px;background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:8px}.gallery-tools input{margin-left:8px;accent-color:var(--gold)}.builds{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:18px}.build{border:1px solid var(--line);background:var(--panel);text-decoration:none;display:flex;flex-direction:column;min-height:400px;transition:.2s}.build:hover{transform:translateY(-4px);border-color:var(--gold)}.build .visual{height:230px;background-size:cover;background-position:top center;filter:saturate(.78)}.build .copy{padding:22px;display:flex;flex-direction:column;flex:1}.build .n{font:10px var(--mono);letter-spacing:.15em;color:var(--gold)}.build h3{font:28px/1.05 var(--serif);font-weight:normal;margin:14px 0}.build p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}.build .go{margin-top:auto;padding-top:22px;font:10px var(--mono);letter-spacing:.14em;color:var(--rose);text-transform:uppercase}
+.source-note{display:grid;grid-template-columns:1fr 2fr;gap:40px;border-top:1px solid var(--line);padding-top:30px}.source-note h2{font:clamp(34px,5vw,70px)/1 var(--serif);font-weight:normal;margin:0}.source-note p{font:17px/1.7 var(--serif);color:var(--muted);max-width:730px;margin:0}.source-note strong{color:var(--ink)}footer{padding:40px clamp(20px,4vw,64px);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font:10px var(--mono);letter-spacing:.1em;color:var(--muted)}
+@media(max-width:820px){.player-shell{grid-template-columns:1fr}.shows{border-right:0}.show{grid-template-columns:48px 1fr}.stage{min-height:600px}.section-head,.source-note{grid-template-columns:1fr}.builds{--cols:2!important}.nav{display:none}}@media(max-width:540px){.hero{min-height:70vh}.hero h1{font-size:74px}.hero-copy,.hero-meta{margin-left:0}.builds{--cols:1!important}.source-row{align-items:flex-start;flex-direction:column}.section{padding-top:65px}}
+@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.build,.show{transition:none}}
+</style>
+</head>
+<body>
+<div class="grain"></div>
+<header class="top"><div class="mark"><i>◆</i> DEAD</div><nav class="nav"><a href="#listen">Listen</a><a href="#rooms">Gallery rooms</a><a href="#source">The source</a></nav></header>
+<main>
+<section class="hero"><div class="eyebrow">A listening exhibition · five rooms · five eras</div><h1>Long <em>strange</em></h1><p class="hero-copy">A visual archive with a pulse. Move through five decades of live sound, then enter the rooms the music inspired.</p><div class="hero-meta"><span>1969—1990</span><span>Community recordings</span><span>Source-hosted playback</span><span>No autoplay</span></div></section>
+
+<section class="section" id="listen"><div class="section-head"><span class="k">01 / Listening room</span><h2>Choose a night.<br>Enter the room.</h2></div><p class="intro">Five landmark dates selected from Steve’s listen-only music source. Playback stays with the Internet Archive; every recording opens back to its original item page.</p><div class="player-shell"><div class="shows" id="shows"></div><div class="stage"><span class="date" id="stageDate"></span><h3 id="stageTitle"></h3><p class="note" id="stageNote"></p><div class="listen"><button class="listen-btn" id="listenBtn">Load source player</button><div class="frame-wrap" id="frameWrap"><iframe id="player" title="Internet Archive show player" loading="lazy" allow="autoplay"></iframe><div class="source-row"><span id="sourceMeta"></span><a id="sourceLink" target="_blank" rel="noopener">View recording at the Internet Archive ↗</a></div></div></div></div></div></section>
+
+<section class="section" id="rooms"><div class="section-head"><span class="k">02 / Exhibition rooms</span><h2>The music,<br>made visible.</h2></div><div class="gallery-tools"><div><label for="sort">Sort</label><select id="sort"><option value="curated">Curated</option><option value="title">Title A→Z</option><option value="era">Era</option></select></div><div><label for="density">Density</label><input id="density" type="range" min="1" max="4" value="3"></div></div><div class="builds" id="builds"></div></section>
+
+<section class="section" id="source"><div class="source-note"><h2>The source stays the source.</h2><p><strong>These recordings are not copied, sold, or re-hosted here.</strong> They are community recordings made available for listening through the Grateful Dead collection at the Internet Archive’s Live Music Archive. The embedded player and every source link resolve to archive.org. Availability and recording notes remain governed by the source item.</p></div></section>
+</main>
+<footer><span>DEAD · agentabrams.com</span><span>Curated from Steve’s music source · Internet Archive / Live Music Archive</span><span>Listen only · no commercial reuse implied</span></footer>
+<script>
+const shows=[
+{year:1969,date:'February 27, 1969',title:'Fillmore West',sub:'San Francisco · primal psychedelic era',id:'gd69-02-27.sbd.16track.kaplan.6315.sbeok.shnf',downloads:'106k+ source listens',note:'A sixteen-track document from the run that shaped Live/Dead: spacious, volatile, and willing to let a song dissolve into pure architecture.'},
+{year:1972,date:'August 27, 1972',title:'Veneta',sub:'Oregon · field, heat, and open sky',id:'gd72-08-27.sbd.orf.3328.sbeok.shnf',downloads:'489k+ source listens',note:'An outdoor performance with the horizon left in the mix. The playing feels communal and unhurried—the sound of a band and audience occupying the same weather.'},
+{year:1974,date:'June 23, 1974',title:'Jai-Alai Fronton',sub:'Miami · Wall of Sound era',id:'gd74-06-23.sbd.cribbs.16780.sbeok.shnf',downloads:'160k+ source listens',note:'Scale without blur. This Wall of Sound performance pairs enormous dynamic range with unusually clear instrumental space.'},
+{year:1977,date:'May 8, 1977',title:'Cornell',sub:'Ithaca · Barton Hall',id:'gd77-05-08.sbd.hicks.4982.sbeok.shnf',downloads:'1.45m+ source listens',note:'The famous reference point: controlled momentum, luminous ensemble playing, and a recording that has become part of American musical memory.'},
+{year:1990,date:'March 29, 1990',title:'Nassau',sub:'Uniondale · late-era expansion',id:'gd90-03-29.aud-fob.set2.unknown.1317.sbeok.shnf',downloads:'231k+ source listens',note:'A late-period high-water mark where the band’s expanded palette meets the immediacy of a strong audience recording.'}
+];
+const rooms=[
+{n:'02',id:'long-strange-archive',title:'The Long Strange Archive',era:1965,img:'https://gallery.agentabrams.com/builds/long-strange-archive/cover.png',desc:'Handbills, tickets, photographs, fan objects, and a cultural timeline.'},
+{n:'03',id:'deadhead-print-lab',title:'Deadhead Print Lab',era:1967,img:'https://gallery.agentabrams.com/builds/deadhead-print-lab/cover.png',desc:'A working psychedelic print studio of layers, ink, paper, and type.'},
+{n:'04',id:'wall-of-sound',title:'Wall of Sound',era:1974,img:'https://gallery.agentabrams.com/builds/wall-of-sound/cover.png',desc:'Live sound as architecture, seen from four listening positions.'},
+{n:'05',id:'routes-residencies-rituals',title:'Routes, Residencies & Rituals',era:1977,img:'https://gallery.agentabrams.com/builds/routes-residencies-rituals/cover.png',desc:'Tour geography, venue memory, and the rituals of a traveling community.'},
+{n:'06',id:'objects-golden-road',title:'Objects in the Golden Road',era:1990,img:'https://gallery.agentabrams.com/builds/objects-golden-road/cover.png',desc:'Eight imagined artifacts, cataloged with provenance and care.'}
+];
+let current=3;
+const $=s=>document.querySelector(s);
+function renderShows(){ $('#shows').innerHTML=shows.map((s,i)=>`<button class="show ${i===current?'on':''}" data-i="${i}" aria-pressed="${i===current}"><span class="year">${s.year}</span><span><b>${s.title}</b><small>${s.sub}</small></span></button>`).join(''); }
+function selectShow(i){current=i;const s=shows[i];renderShows();$('#stageDate').textContent=s.date;$('#stageTitle').textContent=s.title;$('#stageNote').textContent=s.note;$('#frameWrap').classList.remove('on');$('#player').src='about:blank';$('#listenBtn').hidden=false;$('#listenBtn').textContent='Load source player';$('#sourceLink').href='https://archive.org/details/'+s.id;$('#sourceMeta').textContent=s.downloads+' · Community recording';localStorage.setItem('dead:selected-show',String(i));}
+$('#shows').addEventListener('click',e=>{const b=e.target.closest('[data-i]');if(b)selectShow(Number(b.dataset.i));});
+$('#listenBtn').addEventListener('click',()=>{const s=shows[current];$('#player').src='https://archive.org/embed/'+s.id;$('#frameWrap').classList.add('on');$('#listenBtn').hidden=true;});
+function renderRooms(){let list=rooms.slice();const sort=$('#sort').value;if(sort==='title')list.sort((a,b)=>a.title.localeCompare(b.title));if(sort==='era')list.sort((a,b)=>a.era-b.era);$('#builds').innerHTML=list.map(r=>`<a class="build" href="https://gallery.agentabrams.com/#${r.id}" target="_blank" rel="noopener"><div class="visual" style="background-image:url('${r.img}')"></div><div class="copy"><span class="n">ROOM ${r.n}</span><h3>${r.title}</h3><p>${r.desc}</p><span class="go">Enter exhibition ↗</span></div></a>`).join('');}
+const savedShow=Number(localStorage.getItem('dead:selected-show'));if(Number.isInteger(savedShow)&&savedShow>=0&&savedShow<shows.length)current=savedShow;
+const savedSort=localStorage.getItem('dead:sort');if(savedSort)$('#sort').value=savedSort;const savedDensity=localStorage.getItem('dead:density');if(savedDensity){$('#density').value=savedDensity;document.documentElement.style.setProperty('--cols',savedDensity)}
+$('#sort').addEventListener('change',()=>{localStorage.setItem('dead:sort',$('#sort').value);renderRooms()});$('#density').addEventListener('input',()=>{const v=$('#density').value;document.documentElement.style.setProperty('--cols',v);localStorage.setItem('dead:density',v)});
+selectShow(current);renderRooms();
+</script>
+</body>
+</html>
(oldest) · back to Dead Agentabrams · add source-hosted Dead listening experience 8d68829 →