Lineation studio • poetry planning — Plan a concrete image, preserve a fixed word sequence across two lineation trials, record line-ending choices and actual reader…

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Lineation studio • poetry planning</title><style>*{box-sizing:border-box}body{margin:0;background:var(--bg,#eef3f6);color:#172a39;font:16px/1.5 system-ui,sans-serif}main{max-width:1200px;margin:auto;padding:28px}h1{font-size:clamp(27px,4vw,42px);line-height:1.12;margin:8px 0 12px;letter-spacing:-.035em}h2{font-size:23px;line-height:1.2;margin:0 0 18px}h3{font-size:17px;margin:14px 0 8px}p{margin:8px 0 16px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:var(--accent,#176b71)}.lead{max-width:75ch;color:#405568}.panel{background:#fff;border:1px solid #cdd9e1;border-radius:14px;padding:24px;margin:18px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.wide{grid-template-columns:1.6fr 1fr}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metric{border-left:4px solid var(--accent,#176b71);background:#f4f8fa;padding:18px}.big{display:block;font-size:36px;font-weight:800;line-height:1.2}.muted,small{color:#536879;font-size:14px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}button{background:var(--accent,#176b71);color:white;border:2px solid transparent;border-radius:8px;padding:10px 16px;min-height:44px;cursor:pointer;font:inherit;font-weight:650}button.secondary{background:#e8eff4;color:#172a39}button:disabled{opacity:.48;cursor:default}button[aria-pressed=true]{outline:3px solid #172a39;outline-offset:2px}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #de7616;outline-offset:3px}label{display:block;font-weight:650;margin:12px 0 6px}input,select,textarea{font:inherit;color:inherit;border:1px solid #8b9eae;border-radius:6px;background:white;padding:10px;width:100%;min-height:44px}textarea{resize:vertical;min-height:110px}input[type=checkbox]{width:22px;min-height:22px;vertical-align:middle}table{border-collapse:collapse;width:100%;font-size:14px}th{text-align:left;background:#eff4f7;color:#3d5261}th,td{padding:12px;border-bottom:1px solid #dce5eb;vertical-align:top}.scroll{overflow-x:auto}caption{text-align:left;margin-bottom:12px;font-weight:700}.notice{background:#eef5f9;border-left:4px solid #628ba1;padding:14px;margin:14px 0}.error{color:#9c2924;font-weight:650}.pill{display:inline-block;border-radius:30px;padding:4px 10px;background:#e5f3ee;color:#17614f;font-size:13px;font-weight:750}.draft{white-space:pre-wrap;font:17px/1.65 Georgia,serif}.rule{display:block;width:100%;text-align:left;margin:10px 0}.rule strong{font-size:26px}details{margin:18px 0}summary{cursor:pointer;font-weight:700;padding:12px;background:#e9eff3;border-radius:6px;min-height:44px}footer{margin:30px 0;color:#536879;font-size:14px}ol,ul{padding-left:23px}.time-input{max-width:90px}.section-no{font-size:52px;color:#b5c8d5;font-weight:800;line-height:1}.tag{font-weight:700;color:var(--accent,#176b71)}[hidden]{display:none!important}@media(max-width:760px){main{padding:18px}.grid,.wide{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr}.panel{padding:18px}.big{font-size:30px}th,td{padding:9px}}:root{--accent:#526c88;--bg:#f4f3ef}main{max-width:1160px}h1{font-family:Georgia,serif;font-weight:500;font-size:clamp(31px,4.5vw,49px)}.drafts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.sheet{padding:30px;background:#fffef9;border:1px solid #dad8ca;box-shadow:0 7px 20px #3d4b5910}.poem{font:clamp(20px,2.3vw,27px)/1.65 Georgia,serif;margin:25px 0}.verse-line{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;padding-left:1.5em;text-indent:-1.5em}.endings{border-top:1px solid #d9dce1;padding-top:15px;color:#4a5f70;font-size:14px}.audit{border-left:4px solid #90a7bc;background:#e9eef1;padding:16px}.panel textarea{min-height:85px}#custom{min-height:170px;font:20px/1.6 Georgia,serif}@media(max-width:700px){.drafts{grid-template-columns:1fr}.sheet{padding:22px}}</style></head><body><main>
<span class="eyebrow">Writing studio / original 14-word experiment</span><h1>Let the line endings ask a question.</h1><p class="lead">Keep one sentence intact and test what changes when its lines end elsewhere.</p>
<div class="row" aria-label="Draft comparison views"><button type="button" id="both">Compare A + B</button><button type="button" id="view-a" class="secondary">Focus A</button><button type="button" id="view-b" class="secondary">Focus B</button><button type="button" id="view-c" class="secondary">Try arrangement C</button></div>
<section class="drafts"><article class="sheet" id="sheet-a"><span class="eyebrow">A / four intentional lines</span><div class="poem" id="poem-a"></div><p class="endings" id="ends-a"></p></article><article class="sheet" id="sheet-b"><span class="eyebrow">B / three intentional lines</span><div class="poem" id="poem-b"></div><p class="endings" id="ends-b"></p></article></section>
<p id="comparison" class="audit" aria-live="polite">Both drafts preserve the same 14 words, their order, capital The and the final period.</p>
<section class="panel" id="custom-panel" hidden><h2>Arrangement C / change only the line breaks</h2><label for="custom">Your lineation trial</label><textarea id="custom">The rain taps
the empty chair
while a folded note
waits on the seat.</textarea><p id="custom-error" class="error" role="status"></p><div id="custom-preview" class="poem"></div><p id="custom-audit" class="endings"></p><button type="button" id="restore-c" class="secondary">Restore C to the A arrangement</button></section>
<section class="panel"><h2>Observe the layout. Test the effect.</h2><div class="scroll"><table><thead><tr><th>Observable choice</th><th>Question for a reading</th></tr></thead><tbody><tr><td>A keeps “the empty chair” together.</td><td>Does this grouping make the chair image easier to hold?</td></tr><tr><td>B ends on “empty”; “chair” starts the next line.</td><td>Does “empty” receive extra attention, or does the break distract?</td></tr><tr><td>A keeps “folded note” together.</td><td>What does the reader notice about the note?</td></tr><tr><td>B ends on “folded”; “note” starts the next line.</td><td>Does the delayed noun create an expectation?</td></tr></tbody></table></div><p class="muted">Numbered rows mark author-chosen lines. A continuation caused by a narrow display is not a new intentional ending. One line is not automatically one sentence; a break does not require a fixed pause.</p></section>
<div class="grid"><section class="panel"><h2>Plan the image</h2><p>Scene: rain, an empty chair and a folded note.</p><label for="purpose">Intended purpose</label><input id="purpose" type="text" value="Explore quiet waiting"><label for="images">Image bank</label><textarea id="images">Rain tapping; empty chair; folded note on the seat</textarea><p>Open facts: who left the note, what it says, who might arrive and how any speaker feels. The intention “quiet waiting” does not establish a reader’s emotion.</p></section><section class="panel"><h2>Record an actual reading</h2><label for="reading-mode">Reading context type</label><select id="reading-mode"><option value="">Not recorded</option><option value="self">Self-reading observation</option><option value="peer">Peer reading observation</option></select><label for="observed-variant">Variant read</label><select id="observed-variant"><option value="">Not recorded</option><option value="A">A</option><option value="B">B</option><option value="C">C</option></select><label for="context">Actual reading context</label><textarea id="context"></textarea><label for="reader-words">Reader’s actual words / observed emphasis</label><textarea id="reader-words"></textarea><label for="relevant">Relevant line / word</label><textarea id="relevant"></textarea><label for="interpretation">Writer’s separate interpretation</label><textarea id="interpretation"></textarea><p class="muted">Ask which word drew attention and where the arrangement helped or got in the way. Leave these fields blank until a reading occurs.</p></section></div>
<section class="panel"><h2>Choose a revision / no universal winner</h2><label for="chosen">Chosen arrangement</label><select id="chosen"><option value="">Not chosen</option><option value="A">A</option><option value="B">B</option><option value="C">Third arrangement C</option></select><div class="grid"><label for="revision-evidence">Evidence for the revision choice</label><textarea id="revision-evidence"></textarea><label for="revision-change">Change I will make</label><textarea id="revision-change"></textarea><label for="purpose-link">Relation to my intended purpose</label><textarea id="purpose-link"></textarea><label for="uncertainty">Uncertainty I will keep</label><textarea id="uncertainty"></textarea></div><button type="button" id="review-notes" class="secondary">Review planning completeness</button><p id="notes-state" class="notice" aria-live="polite"></p><label for="plan-text">Writing plan and exact draft arrangements</label><textarea id="plan-text" readonly></textarea><button type="button" id="select-plan-text" class="secondary">Select text</button><p id="plan-text-status" class="muted">Select the text, then use your device’s copy command. Nothing is saved.</p></section>
<details><summary>Optional 20-minute classroom sequence</summary><div class="scroll"><table><caption>Editable planned minutes</caption><thead><tr><th>Activity</th><th>Minutes</th><th>Elapsed</th></tr></thead><tbody><tr><td>Intention</td><td><label class="muted" for="t-0">Intention minutes</label><input class="time-input" id="t-0" type="number" min="1" max="120" value="3"></td><td id="t-range-0"></td></tr><tr><td>Images and fixed word draft</td><td><label class="muted" for="t-1">Images and fixed word draft minutes</label><input class="time-input" id="t-1" type="number" min="1" max="120" value="4"></td><td id="t-range-1"></td></tr><tr><td>Two lineations</td><td><label class="muted" for="t-2">Two lineations minutes</label><input class="time-input" id="t-2" type="number" min="1" max="120" value="5"></td><td id="t-range-2"></td></tr><tr><td>Read and compare</td><td><label class="muted" for="t-3">Read and compare minutes</label><input class="time-input" id="t-3" type="number" min="1" max="120" value="5"></td><td id="t-range-3"></td></tr><tr><td>Revision reflection</td><td><label class="muted" for="t-4">Revision reflection minutes</label><input class="time-input" id="t-4" type="number" min="1" max="120" value="3"></td><td id="t-range-4"></td></tr></tbody></table></div><p id="t-total" class="tag" aria-live="polite"></p><button type="button" id="t-restore" class="secondary">Restore original timing</button></details><footer>Original writing fixture. No audio analysis, poetry score, peer feedback collection, publication or saved edits. Keep your native draft and actual reading notes as maintained records; manually copy text you want to retain.</footer></main><script>const $=id=>document.getElementById(id);const on=(id,fn)=>$(id).addEventListener('click',fn);const text=(id,value)=>$(id).textContent=value;const bind=(id,fn,event='input')=>$(id).addEventListener(event,fn);const selectText=id=>{if(!$(id).value){text(id+'-status','Complete the required fields before selecting text.');return;}$(id).focus();$(id).select();text(id+'-status','Text selected. Use your device’s copy command; nothing has been sent or saved.');};
const NL=String.fromCharCode(10);const baseline='The rain taps the empty chair while a folded note waits on the seat.',A=["The rain taps","the empty chair","while a folded note","waits on the seat."],B=["The rain taps the empty","chair while a folded","note waits on the seat."],fields=["purpose","images","context","reader-words","relevant","interpretation","revision-evidence","revision-change","purpose-link","uncertainty"];let mode='both';function audit(value){const lines=value.replace(/\r/g,'').split(NL);if(!value.trim()||lines.some(x=>!x.trim()))return {valid:false,error:'Use nonempty intentional lines; do not add blank stanza lines in this fixed comparison.'};const words=lines.map(l=>l.trim().split(/\s+/)).flat();if(words.join(' ')!==baseline)return {valid:false,error:'Keep the exact 14 words, their order, capital The and the final period. Change line breaks only.'};const clean=lines.map(l=>l.trim());return {valid:true,lines:clean,words:words.length,endings:clean.map(l=>l.split(/\s+/).at(-1).replace(/\.$/,'')),splits:['empty chair','folded note'].filter(pair=>{const [left,right]=pair.split(' ');return clean.some((l,i)=>l.endsWith(left)&&clean[i+1]?.startsWith(right));})};}function poem(id,lines){const box=$(id);box.textContent='';lines.forEach((line,i)=>{const p=document.createElement('p');p.setAttribute('class','verse-line');p.textContent=(i+1)+'  '+line;box.append(p);});}function show(m){mode=m;$('sheet-a').hidden=m==='b'||m==='c';$('sheet-b').hidden=m==='a'||m==='c';$('custom-panel').hidden=m!=='c';['both','a','b','c'].forEach(k=>$(k==='both'?'both':'view-'+k).setAttribute('aria-pressed',String(k===m)));text('comparison',m==='c'?'Trial C changes the arrangement, not the revision decision or actual reading notes.':m==='a'?'A endings: taps / chair / note / seat. Both adjective–noun pairs stay within lines.':m==='b'?'B endings: empty / folded / seat. Empty–chair and folded–note cross intentional breaks.':'A: 4 lines. B: 3 lines. Both preserve the same 14 words and punctuation.');}on('both',()=>show('both'));['a','b','c'].forEach(k=>on('view-'+k,()=>show(k)));function custom(){const r=audit($('custom').value);text('custom-error',r.valid?'':r.error);if(!r.valid){$('custom-preview').textContent='';text('custom-audit','No valid lineation audit.');}else{poem('custom-preview',r.lines);text('custom-audit',r.lines.length+' intentional lines · 14 words · endings: '+r.endings.join(' / ')+'. Split pairs: '+(r.splits.join('; ')||'none')+'.');}plan();}function plan(){const r=audit($('custom').value),s=schedule();text('notes-state','No automatic interpretation or preferred arrangement. Reading notes and revision choices require your own evidence.');if(!r.valid||!s){$('plan-text').value='';return;}$('plan-text').value=['POETRY PLANNING / ORIGINAL FIXTURE','Scene: rain, empty chair, folded note.','Intended purpose: '+$('purpose').value,'Images: '+$('images').value,'Fixed baseline: '+baseline,'A:'+NL+A.join(NL),'A endings: taps / chair / note / seat','B:'+NL+B.join(NL),'B endings: empty / folded / seat','Trial C:'+NL+r.lines.join(NL),'C endings: '+r.endings.join(' / '),'Reading type: '+($('reading-mode').value||'[not recorded]'),'Variant read: '+($('observed-variant').value||'[not recorded]'),...fields.slice(2).map(k=>k+': '+($(k).value||'[not recorded]')),'Chosen arrangement: '+($('chosen').value||'[not chosen]'),'Optional planned sequence: '+s.total+' minutes',...timeNames.map((n,i)=>s.blocks[i].start+'–'+s.blocks[i].end+' min: '+n),'Reading notes are not universal effects or an automatic quality judgment.'].join(NL);}fields.forEach(k=>bind(k,plan));['reading-mode','observed-variant','chosen'].forEach(k=>bind(k,plan,'change'));bind('custom',custom);on('restore-c',()=>{$('custom').value=A.join(NL);custom();});on('review-notes',()=>{if(!audit($('custom').value).valid||!schedule()){text('notes-state','Resolve the invalid lineation or timing before preparing the plan.');return;}const need=['reading-mode','observed-variant','context','reader-words','relevant','interpretation','chosen','revision-evidence','revision-change','purpose-link','uncertainty'].filter(k=>!$(k).value.trim());text('notes-state',need.length?need.length+' reading/revision fields are unrecorded. No observation or revision has been inferred.':'Reading and revision notes are supplied for your review. This does not establish that one draft is better for every reader.');});on('select-plan-text',()=>selectText('plan-text'));poem('poem-a',A);poem('poem-b',B);text('ends-a','Intentional endings: taps / chair / note / seat');text('ends-b','Intentional endings: empty / folded / seat');const timeNames=["Intention","Images and fixed word draft","Two lineations","Read and compare","Revision reflection"],timeDefaults=[3,4,5,5,3];function schedule(){let total=0;const blocks=[];for(let i=0;i<timeDefaults.length;i++){const v=$('t-'+i).value;if(!/^\d+$/.test(v)||+v<1||+v>120)return null;blocks.push({start:total,end:total+(+v)});total+=+v;}return {total,blocks};}function updateTiming(){const s=schedule();text('t-total',s?s.total+' minutes':'Timing incomplete');timeDefaults.forEach((_,i)=>text('t-range-'+i,s?s.blocks[i].start+'–'+s.blocks[i].end+' min':'—'));plan();}timeDefaults.forEach((_,i)=>bind('t-'+i,updateTiming));on('t-restore',()=>{timeDefaults.forEach((v,i)=>$('t-'+i).value=String(v));updateTiming();});updateTiming();custom();show('both');globalThis.app={audit,schedule,get:()=>mode};</script></body></html>