Dying into It

img

Dying into It

22 August 2026 / William Anderson / Compositions, recodings, composers

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Dying Into It</title>
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link href=”https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;1,8..60,400&family=Space+Mono:wght@400;700&display=swap” rel=”stylesheet”>
<style>
:root{
–paper: #EDE4D3;
–paper-shadow: #D9CBAE;
–paper-back: #E2D6BF;
–ink: #2A2620;
–ink-soft: #55503f;
–concrete: #84827a;
–concrete-dark: #5b5952;
–water: #43616c;
–brass: #a6773a;
–brass-light: #c79a5c;
–twilight: #3d3450;
–twilight-deep: #241f30;
}

*{box-sizing:border-box;}

html,body{
margin:0; padding:0; height:100%;
background: radial-gradient(ellipse at 50% 30%, #6b6a63 0%, #4c4b46 55%, #34332f 100%);
font-family:’Source Serif 4’, serif;
color:var(–ink);
overflow:hidden;
}

.stage{
height:100%;
width:100%;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:18px;
padding:20px;
}

.eyebrow-title{
font-family:’Space Mono’, monospace;
letter-spacing:0.18em;
text-transform:uppercase;
font-size:11px;
color:#cbb98a;
opacity:0.8;
}

.book-wrap{
perspective: 2400px;
width: min(92vw, 460px);
aspect-ratio: 5 / 7;
}

.book{
position:relative;
width:100%;
height:100%;
transform-style:preserve-3d;
}

.leaf{
position:absolute;
inset:0;
transform-style:preserve-3d;
transform-origin:left center;
transition:transform 0.85s cubic-bezier(.4,.1,.2,1);
cursor:pointer;
}
@media (prefers-reduced-motion: reduce){
.leaf{ transition:none; }
}

.face{
position:absolute;
inset:0;
backface-visibility:hidden;
background:var(–paper);
border-radius:2px;
box-shadow:
0 1px 0 rgba(0,0,0,0.06) inset,
2px 0 6px rgba(0,0,0,0.15);
padding: 34px 30px 26px;
display:flex;
flex-direction:column;
overflow:hidden;
}
.face.back{
transform: rotateY(180deg);
background:var(–paper-back);
}

/* spine shadow gradient, stronger near the fold */
.face::before{
content:”“;
position:absolute; inset:0;
background:linear-gradient(90deg, rgba(0,0,0,0.10), rgba(0,0,0,0) 10%, rgba(0,0,0,0) 92%, rgba(0,0,0,0.05));
pointer-events:none;
}
.face.back::before{
background:linear-gradient(270deg, rgba(0,0,0,0.10), rgba(0,0,0,0) 10%, rgba(0,0,0,0) 92%, rgba(0,0,0,0.05));
}

.page-eyebrow{
font-family:’Space Mono’, monospace;
font-size:9.5px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(–brass);
display:flex;
justify-content:space-between;
margin-bottom:14px;
flex-shrink:0;
}

.page-heading{
font-family:’Fraunces’, serif;
font-weight:600;
font-size:20px;
line-height:1.15;
color:var(–twilight-deep);
margin:0 0 12px;
flex-shrink:0;
}

.page-body{
font-size:14.5px;
line-height:1.62;
color:var(–ink);
overflow:auto;
}
.page-body p{ margin:0 0 0.85em; }
.page-body p:last-child{ margin-bottom:0; }
.page-body em{ font-style:italic; color:var(–ink-soft); }
.page-body .arch-map{
font-family:’Space Mono’, monospace;
font-size:11.5px;
color:var(–water);
background:rgba(67,97,108,0.07);
border-left:2px solid var(–water);
padding:10px 12px;
margin:0.9em 0;
line-height:1.7;
}

.page-number{
margin-top:auto;
padding-top:10px;
font-family:’Space Mono’, monospace;
font-size:10px;
color:var(–concrete-dark);
text-align:right;
flex-shrink:0;
}

/* COVER */
.cover{
background: linear-gradient(155deg, var(–twilight) 0%, var(–twilight-deep) 100%);
color:#EDE4D3;
justify-content:center;
align-items:center;
text-align:center;
gap:0;
}
.cover .arch-mark{ width:74px; height:auto; margin-bottom:22px; opacity:0.92; }
.cover h1{
font-family:’Fraunces’, serif;
font-weight:500;
font-style:italic;
font-size:34px;
margin:0 0 14px;
letter-spacing:0.01em;
}
.cover .sub{
font-family:’Source Serif 4’, serif;
font-size:13px;
line-height:1.55;
color:#cabfa3;
max-width:280px;
margin:0 auto;
}
.cover .sub2{
margin-top:26px;
font-family:’Space Mono’, monospace;
font-size:9.5px;
letter-spacing:0.16em;
text-transform:uppercase;
color:#8b8368;
}

/* DIAGRAM PAGE */
.diagram-face{
background: var(–concrete);
color:#EDE4D3;
}
.diagram-face .page-eyebrow{ color:var(–brass-light); }
.diagram-face .page-heading{ color:#EDE4D3; }
.diagram-face svg{ width:100%; flex:1; }
.diagram-caption{
font-family:’Space Mono’, monospace;
font-size:10px;
color:#d8cfb8;
line-height:1.6;
margin-top:8px;
}

/* CLOSING PAGE */
.closing-face{
background: linear-gradient(155deg, var(–twilight) 0%, var(–twilight-deep) 100%);
color:#EDE4D3;
justify-content:center;
}
.closing-face .page-heading{ color:#EDE4D3; }
.closing-face .page-body{ color:#d8cfb8; }
.closing-face .page-eyebrow{ color:var(–brass-light); }

.controls{
display:flex;
align-items:center;
gap:18px;
}
.nav-btn{
font-family:’Space Mono’, monospace;
background:transparent;
border:1px solid rgba(203,185,138,0.35);
color:#e6dcc0;
width:38px; height:38px;
border-radius:50%;
font-size:15px;
cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background 0.2s, border-color 0.2s;
}
.nav-btn:hover{ background:rgba(203,185,138,0.12); border-color:rgba(203,185,138,0.6); }
.nav-btn:disabled{ opacity:0.25; cursor:default; }
.nav-btn:focus-visible{ outline:2px solid var(–brass-light); outline-offset:2px; }

.progress{
font-family:’Space Mono’, monospace;
font-size:11px;
color:#a89f83;
letter-spacing:0.06em;
min-width:64px;
text-align:center;
}

.hint{
font-family:’Space Mono’, monospace;
font-size:9.5px;
letter-spacing:0.08em;
color:#7d765f;
text-transform:uppercase;
}
</style>
</head>
<body>

<div class=”stage”>
<div class=”eyebrow-title”>A Companion Essay</div>

<div class=”book-wrap”>
<div class=”book” id=”book”></div>
</div>

<div class=”controls”>
<button class=”nav-btn” id=”prevBtn” aria-label=”Previous page”>‹</button>
<div class=”progress” id=”progress”>1 / 1</div>
<button class=”nav-btn” id=”nextBtn” aria-label=”Next page”>›</button>
</div>
<div class=”hint”>click a page, use the arrows, or press ← →</div>
</div>

<script>
const ARCH_SVG = `
<svg viewBox=”0 0 400 220” xmlns=”http://www.w3.org/2000/svg”>
<!– ground line –>
<line x1=”20” y1=”190” x2=”380” y2=”190” stroke=”#EDE4D3” stroke-width=”1” opacity=”0.3”/>

<!– first arch: walk one, A to A’ –>
<path d=”M 40 190 A 95 95 0 0 1 205 108” stroke=”#c79a5c” stroke-width=”1.5” fill=”none”/>

<!– voussoir ticks along the first arch –>
<g stroke=”#c79a5c” stroke-width=”1” opacity=”0.75”>
<line x1=”55” y1=”163” x2=”63” y2=”156”/>
<line x1=”80” y1=”140” x2=”90” y2=”135”/>
<line x1=”112” y1=”122” x2=”123” y2=”119”/>
<line x1=”150” y1=”111” x2=”162” y2=”110”/>
</g>

<!– second arch: walk two, A’ to A” –>
<path d=”M 205 108 A 95 95 0 0 1 360 190” stroke=”#EDE4D3” stroke-width=”1.5” fill=”none”/>

<!– voussoir ticks along the second arch –>
<g stroke=”#EDE4D3” stroke-width=”1” opacity=”0.55”>
<line x1=”240” y1=”111” x2=”252” y2=”112”/>
<line x1=”280” y1=”122” x2=”291” y2=”126”/>
<line x1=”312” y1=”140” x2=”321” y2=”147”/>
<line x1=”337” y1=”163” x2=”345” y2=”171”/>
</g>

<!– keystone A’ –>
<circle cx=”205” cy=”108” r=”6.5” fill=”#c79a5c”/>
<text x=”205” y=”94” text-anchor=”middle” font-family=”Space Mono, monospace” font-size=”12” fill=”#EDE4D3”>A&#8242;</text>

<!– endpoints –>
<circle cx=”40” cy=”190” r=”5.5” fill=”#EDE4D3”/>
<text x=”40” y=”208” text-anchor=”middle” font-family=”Space Mono, monospace” font-size=”12” fill=”#EDE4D3”>A</text>

<circle cx=”360” cy=”190” r=”5.5” fill=”#EDE4D3”/>
<text x=”360” y=”208” text-anchor=”middle” font-family=”Space Mono, monospace” font-size=”12” fill=”#EDE4D3”>A&#8243;</text>

<!– same stones, refitted: marked where the two arches meet –>
<circle cx=”188” cy=”112” r=”4.5” fill=”none” stroke=”#c79a5c” stroke-width=”1.4”/>
<circle cx=”222” cy=”112” r=”4.5” fill=”none” stroke=”#c79a5c” stroke-width=”1.4”/>
<text x=”205” y=”145” text-anchor=”middle” font-family=”Space Mono, monospace” font-size=”8.5” fill=”#c79a5c” letter-spacing=”0.8”>SAME STONES, REFITTED</text>

<!– new dirge label under the second arch –>
<text x=”292” y=”185” text-anchor=”middle” font-family=”Space Mono, monospace” font-size=”8” fill=”#d8cfb8” letter-spacing=”0.5”>new dirge &#183; new stones</text>
</svg>`;

const PAGES = [
{ type:’cover’ },

{ type:’note’, eyebrow:’A Note on Quotation’,
body:`<p>Broch’s introduction is still in copyright, and so is the Douglas Miller translation of Goethe relied on elsewhere in this essay. What follows quotes both only in short fragments and paraphrases the rest.</p>
<p>Anyone who wants the originals should go to them directly — Broch’s introduction to the Bollingen Hofmannsthal, and Gary&nbsp;W. Don’s essay on Goethe and Boretz, which is where the Goethe passage comes from.</p>` },

{ type:’section’, eyebrow:’I · The Commission’, heading:’The Commission’,
body:`<p>Harold Meltzer’s <em>Brion</em> was written for Cygnus, commissioned by the Barlow Foundation. It takes its name and its subject from Carlo Scarpa’s Brion tomb complex at San Vito d’Altivole — a cemetery folded into the landscape, water, concrete, two interlocking circles that never quite touch.</p>` },

{ type:’section’,
body:`<p>The piece opens with a pastoral: a view of the cemetery set in its landscape, calm, established plainly. That view returns — but not once, as a single frame around a single interior. It returns as the anchor of a first arch, A to A′, with a set of contrasting stones between them.</p>
<p>Then the whole walk begins again: a second pass through the cemetery, with a new dirge — but the stones this second pass fits together are not all new. Some are the same stones from the first walk, discovered now to fit against gaps the first pass walked past without noticing.</p>` },

{ type:’diagram’ },

{ type:’section’,
body:`<p>The walk closes on A″ in twilight. The form is not one arch but an arch of arches, the second built partly from the first’s own material, seen to fit differently on the second look. Cygnus’s own players, working the piece, noticed that Meltzer doesn’t write transitions between the stones within either arch. One section simply gives way to the next.</p>
<div class=”arch-map”>A — arch — A′ — —<br> — A″</div>` },

{ type:’section’,
body:`<p>Two walks through the cemetery, not one walk twice interrupted. The second walk carries its own dirge, but some of what it fits together is material the first walk already passed — stones that didn’t find their gap the first time and do on the second — before the pastoral is allowed its third and final appearance.</p>
<p>Which is, itself, hard to hold in words rather than in the actual hearing: a return that is neither wholly new material nor a repeat, but old material finally seated.</p>` },

{ type:’section’,
body:`<p>The first response to that observation is that it’s a compositional limitation — sections placed side by side without the connective tissue a more fluent piece would supply. That was more or less Brickle’s judgment on repetition generally: <em>repeats dissipate energy</em>, a modernist axiom, applied here by extension to a piece that returns to the same material rather than developing continuously away from it.</p>` },

{ type:’section’, eyebrow:’II · The Arch, Corrected’, heading:’The Arch, Corrected’,
body:`<p>The better description, arrived at only after sitting with the piece, is that the sections are not simply discrete. They are cut like stones in an arch: each one fitted to the shape of what the previous section didn’t supply, so that the whole stands because of the gaps between the stones rather than despite them.</p>
<p>This is Macherey’s law in masonry — what is absent from one stone is precisely what constitutes its fit with the next. The sections know each other, as one description of it goes, by not being quite the same.</p>` },

{ type:’section’,
body:`<p>That correction disarms Brickle’s objection rather than merely disputing it. <em>Repeats dissipate energy</em> is true of a repeat that is identical to what came before — the ear registers redundancy and stops attending. It is not true of a return that has been recut for its new position in the structure, which is what happens to Meltzer’s pastoral each time it comes back.</p>` },

{ type:’section’,
body:`<p>The nested form makes this sharper rather than simpler. Within the first arch, the pastoral returns close to literally at A′ — the near-repeat that may have been strategic, establishing the view as a fixed thing before anything is allowed to happen to it.</p>
<p>Then the piece does not simply proceed to a coda. It returns to the beginning of its own procedure: a second walk, a new dirge answering the first, a new set of stones that fall around it without repeating the first set exactly.</p>` },

{ type:’section’,
body:`<p>Only after that second arch has been built does the pastoral appear a third time, in twilight, as A″. So the piece’s largest formal gesture is not variation on a returning idea but the return of the returning-idea procedure itself — an arch about arches, closing not on a single transformed image but on the third appearance of an image already established twice: once literally, once through an entire second structure.</p>` },

{ type:’section’, eyebrow:”III · Gann’s Account”, heading:”Gann’s Account, and a Debt Worth Naming”,
body:`<p>Kyle Gann wrote about <em>Brion</em> with real attention, and what he singled out was the generosity of the return: that in composing the passage and then giving it back to the listener a second time, Meltzer was handing the audience something rather than withholding it for the sake of forward motion.</p>` },

{ type:’section’,
body:`<p>That is close kin to the arch reading above, arrived at independently and stated more simply — repetition as gift rather than as failure of nerve. Brickle’s objection and Gann’s account are not reconciled here so much as shown to have been describing two different things: Brickle was right about identical repetition, and wrong to assume that was the only kind on offer. Gann heard the actual kind.</p>
<p>That Gann took the trouble to write carefully about a Cygnus piece is a debt worth recording on its own terms.</p>` },

{ type:’section’, eyebrow:”IV · The Tomb’s Own Antinomy”, heading:”The Tomb’s Own Antinomy”,
body:`<p>Scarpa’s Brion complex is built on a contradiction Hermann Broch would have recognized immediately, because it’s the one running through his whole introduction to Hofmannsthal: the antinomy between “I”-suppression and “I”-confession.</p>
<p>A mausoleum’s function is anonymity — it commemorates a person by dissolving the particular self into monumental form. But Scarpa’s architectural language at Brion is one of the most recognizably autographic in twentieth-century building. The tomb suppresses the self it honors and asserts, unmistakably, the self who designed it.</p>` },

{ type:’section’,
body:`<p>Broch’s own description of the Habsburg Empire, elsewhere in the same introduction, could almost have been written about the tomb directly: a thing that seems to grow from a pre-existence rooted in its own soil “in order to live there an everlasting post-existential life.”</p>
<p>That is close to a literal description of what funerary architecture is for — securing existence artificially, past the point at which the natural existence it commemorates has ended.</p>` },

{ type:’section’,
body:`<p>The two circles at the heart of the tomb, offset so they never intersect, are the same antinomy given geometric form. Not one self, not two selves merged into a single continuous ring, but two shapes held permanently, precisely apart — each curve answering the curve it doesn’t touch. I and not-I, refusing either to separate cleanly or to resolve into one.</p>` },

{ type:’section’,
body:`<p>Meltzer’s pastoral does something structurally similar in time rather than in stone. It is the one identity in the piece that persists — appears, returns, is recognized as the same thing — while everything around it proceeds by difference.</p>
<p>And its final appearance stages the same refusal Scarpa’s circles stage in space: not a resolution, but a transformation that leaves the original recognizable and irrevocably changed at once.</p>` },

{ type:’section’, eyebrow:’V · Dying Into It’, heading:’Dying Into It, and Where the Idea Comes From’,
body:`<p>The phrase worth interrogating is “dying into” — the sense that a listener, faced with sections that don’t transition into one another but instead stand as discrete, arch-like units, might surrender into one rather than being carried through it.</p>` },

{ type:’section’,
body:`<p>Two lineages converge on this, and they aren’t quite the same lineage. The pairing of I and not-I, as a named philosophical dyad, belongs most precisely to Fichte — the positing self and the posited not-self, the <em>Wissenschaftslehre</em>’s central move.</p>
<p>And Fichte is, not incidentally, one of the people Jean Paul Richter named as guilty of clearing the world away for the ego’s free play in the void — the same thinker supplying the vocabulary for a tomb built to hold two selves permanently apart.</p>` },

{ type:’section’,
body:`<p>Broch’s own vocabulary — “I”-suppression, “I”-confession, “I”-extinction — is not quite Fichte’s pairing. It’s Broch’s redescription of something he finds already happening in Hofmannsthal’s late prose: walks through a landscape at dusk that fill and then extinguish the self, dissolving it toward anonymity, stopping short of full mystical loss on one side and full confession on the other. Broch is diagnosing a practice, not inventing one.</p>` },

{ type:’section’,
body:`<p>And the practice itself is older than either of them. Self-dissolution into landscape, into art, into the aesthetic object, is close to a defining gesture of Symbolism — Mallarmé’s poet vanishing from his own utterance, Pater’s doctrine of impersonal contemplation, Wagner’s <em>Liebestod</em>, all standing on Schopenhauer’s account of aesthetic contemplation as a temporary extinction of the willing self.</p>` },

{ type:’section’,
body:`<p>So: the intuition that a listener dies into Meltzer’s arch-sections may well have come from this introduction — Broch’s account of Hofmannsthal’s Venice walk giving a name to something already suspected. But the experience it names was not new when Broch described it, nor when the Symbolists practiced it.</p>
<p>What Broch supplies is a taxonomy of exactly where it stops — anonymity, and no further. That stopping point is where Meltzer’s pastoral seems to live: recognizable to the end, dissolving without disappearing.</p>` },

{ type:’section’, eyebrow:’VI · A Closing Account’, heading:’A Closing Account, Owed Rather Than Argued’,
body:`<p><em>Brion</em> was a Pulitzer finalist. It did not win. John Schaefer, host of WNYC’s <em>New Sounds</em>, is reported to have said, at the time, that Meltzer was young and that Steve Reich should win. Meltzer died not long after, of a cancer that came without warning.</p>` },

{ type:’section’,
body:`<p>If the remark was made and meant as reported, it is not a judgment on the piece in front of the jury — it is a judgment about whose turn it was. Reputation running as a queue rather than as an appraisal of the object in the room.</p>` },

{ type:’closing’,
body:`<p>It is worth setting down plainly, once, without more argument attached: a piece built as a tomb, about a tomb, was denied its recognition by an appeal to seniority, and its composer did not get another chance.</p>` }
];

const bookEl = document.getElementById(‘book’);
const prevBtn = document.getElementById(‘prevBtn’);
const nextBtn = document.getElementById(‘nextBtn’);
const progressEl = document.getElementById(‘progress’);

let current = 0; // number of pages turned (0 = showing page 0 on top)
const total = PAGES.length;

function renderContent(p, pageIndex){
if(p.type === ‘cover’){
return `<div class=”face cover”>
<svg class=”arch-mark” viewBox=”0 0 100 60”><path d=”M8 55 A42 42 0 0 1 92 55” stroke=”#c79a5c” stroke-width=”2.6” fill=”none”/><circle cx=”50” cy=”13” r=”3.4” fill=”#c79a5c”/><circle cx=”8” cy=”55” r=”2.6” fill=”#EDE4D3”/><circle cx=”92” cy=”55” r=”2.6” fill=”#EDE4D3”/></svg>
<h1>Dying Into It</h1>
<div class=”sub”>Meltzer’s <em>Brion</em>, the Gann&nbsp;/&nbsp;Brickle dispute, and what Broch’s introduction to Hofmannsthal has to do with either</div>
<div class=”sub2”>An Essay</div>
</div>`;
}
if(p.type === ‘diagram’){
return `<div class=”face diagram-face”>
<div class=”page-eyebrow”><span>The Map</span><span>${pageIndex}</span></div>
<div class=”page-heading”>An Arch of Arches</div>
${ARCH_SVG}
<div class=”diagram-caption”>Two walks through the cemetery, not one walk twice interrupted. The second arch reuses stones the first walk passed without seating.</div>
</div>`;
}
if(p.type === ‘closing’){
return `<div class=”face closing-face”>
<div class=”page-eyebrow”><span>Coda</span><span>${pageIndex}</span></div>
<div class=”page-body”>${p.body}</div>
</div>`;
}
// note or section
const eyebrowLabel = p.eyebrow || ‘Dying Into It’;
const heading = p.heading ? `<div class=”page-heading”>${p.heading}</div>` : ”;
return `<div class=”face”>
<div class=”page-eyebrow”><span>${eyebrowLabel}</span><span>${pageIndex}</span></div>
${heading}
<div class=”page-body”>${p.body}</div>
</div>`;
}

function build(){
bookEl.innerHTML = ”;
PAGES.forEach((p, i) => {
const leaf = document.createElement(‘div’);
leaf.className = ‘leaf’;
leaf.dataset.index = i;
const front = renderContent(p, i+1);
// back face: simple blank paper with faint eyebrow continuation
const back = `<div class=”face back”><div class=”page-eyebrow”><span>&nbsp;</span><span>&nbsp;</span></div></div>`;
leaf.innerHTML = front + back;
leaf.style.zIndex = total - i;
leaf.addEventListener(‘click’, () => {
const idx = parseInt(leaf.dataset.index);
if(idx === current) next();
else if(idx === current - 1) prev();
});
bookEl.appendChild(leaf);
});
update();
}

function update(){
const leaves = bookEl.querySelectorAll(‘.leaf’);
leaves.forEach((leaf, i) => {
if(i < current){
leaf.style.transform = ‘rotateY(-170deg)’;
leaf.style.zIndex = i;
} else {
leaf.style.transform = ‘rotateY(0deg)’;
leaf.style.zIndex = total - i;
}
});
prevBtn.disabled = current <= 0;
nextBtn.disabled = current >= total - 1;
progressEl.textContent = `${current+1} / ${total}`;
}

function next(){ if(current < total - 1){ current++; update(); } }
function prev(){ if(current > 0){ current–; update(); } }

nextBtn.addEventListener(‘click’, next);
prevBtn.addEventListener(‘click’, prev);
document.addEventListener(‘keydown’, (e) => {
if(e.key === ‘ArrowRight’) next();
if(e.key === ‘ArrowLeft’) prev();
});

// basic touch swipe
let touchStartX = null;
document.addEventListener(‘touchstart’, e => { touchStartX = e.touches[0].clientX; });
document.addEventListener(‘touchend’, e => {
if(touchStartX === null) return;
const dx = e.changedTouches[0].clientX - touchStartX;
if(dx < -40) next();
if(dx > 40) prev();
touchStartX = null;
});

build();
</script>
</body>
</html>




RELATED POSTS