Four original storyboard sketches: a wide arrival, a close view of the mug, an overhead notebook action, and a medium reading shot

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>Storyboard · Emi and the orange mug</title><style>
*{box-sizing:border-box}body{margin:0;background:#ece9e1;color:#24333b;font:17px/1.65 system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:24px}h1{font:700 clamp(30px,5vw,45px)/1.15 Georgia,serif;margin:10px 0 18px}h2{font:700 27px/1.3 Georgia,serif}h3{font-size:20px;line-height:1.4}p{margin:12px 0}.eyebrow{font-size:16px;font-weight:700}.brief{background:#2b414d;color:white;padding:17px 20px;border-radius:6px}section{margin:24px 0;background:#fffdfa;border:1px solid #bbc3c2;border-radius:6px;padding:20px}.strip{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panel{margin:0;min-width:0;background:#f2f1e9;border:1px solid #a9b5b7;padding:12px;border-radius:4px}.panel button{width:100%;text-align:left;margin-bottom:10px}.panel figcaption{font-size:16px;margin-top:10px}svg{display:block;width:100%;height:auto;background:#fff;border:1px solid #a5afb2}svg text{font:22px system-ui,sans-serif;fill:#26363b}button{font:inherit;padding:11px 14px;background:white;color:#263c49;border:1px solid #6d8189;border-radius:5px;cursor:pointer}button[aria-pressed=true]{background:#2d4956;color:white}button:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid #b65417;outline-offset:3px}.controls{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}.selected{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}.selected>div{min-width:0}.selected dl{margin:0}.selected dt{font-size:16px;font-weight:700}.selected dd{margin:0 0 15px}.note{padding:14px 17px;background:#f6ecdb;border-left:4px solid #ad702e}.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.fields>div{min-width:0}label{display:block;font-size:16px;font-weight:650;margin:10px 0 7px}input,textarea{width:100%;padding:11px;border:1px solid #788d95;border-radius:4px;color:#24333b;background:white;font:inherit;line-height:1.5}textarea{min-height:110px;resize:vertical}.wide{grid-column:1/-1}#confirmation{padding:15px;background:#f6ecdb}#confirmation button{margin:7px 7px 0 0}footer{font-size:16px;border-top:1px solid #bcc5c4;padding:20px 0}[hidden]{display:none!important}p,button,h1,h2,h3,dt,dd,label,figcaption{overflow-wrap:anywhere}@media(max-width:560px){main{padding:16px}section{padding:16px}.strip,.selected,.fields{grid-template-columns:1fr}.wide{grid-column:auto}.controls button{flex:1 1 135px}}
</style></head><body><main><header><div class="eyebrow">Storyboard review · original fictional scene</div><h1>Follow the mug into the next shot.</h1><p>Four rough compositions plan Emi arriving, placing an empty orange mug, opening a notebook and reading. The notebook stays on the left; the mug stays to its right once placed.</p><div class="brief">Three planned seconds per shot: 0–3, 3–6, 6–9 and 9–12. Total: 12 seconds. These are planning assumptions; no footage or recording is represented. Silent scene; no dialogue planned.</div></header>
<section><h2>The whole ordered sequence</h2><p>The same front table edge is at the bottom in every sketch, including the overhead view. Select a shot to inspect its action and framing.</p><div class="strip"><figure class="panel"><button id="shot-s1" aria-pressed="true">S1 · Wide arrival</button><div id="strip-s1"></div><figcaption>0–3 seconds · Emi carries the mug toward the table. The notebook is closed on the left.</figcaption></figure><figure class="panel"><button id="shot-s2" aria-pressed="false">S2 · Close placement</button><div id="strip-s2"></div><figcaption>3–6 seconds · Place the mug to the notebook's right; keep both positions in view.</figcaption></figure><figure class="panel"><button id="shot-s3" aria-pressed="false">S3 · Overhead opening</button><div id="strip-s3"></div><figcaption id="s3-caption">6–9 seconds · Corrected S3: notebook opens; mug stays on its right.</figcaption></figure><figure class="panel"><button id="shot-s4" aria-pressed="false">S4 · Medium reading</button><div id="strip-s4"></div><figcaption>9–12 seconds · Emi reads the open notebook. The mug remains on its right.</figcaption></figure></div><p id="board-state" class="note">The board shows corrected S3. No new action moves the mug between S2 and S4.</p></section>
<section><h2 id="shot-title">S1 · Wide arrival</h2><div class="selected"><div id="selected-sketch"></div><div><dl><dt>Framing</dt><dd id="framing"></dd><dt>Action and continuity</dt><dd id="action"></dd><dt>Sound</dt><dd id="sound">Silent scene; no dialogue planned.</dd><dt>Planned screen interval</dt><dd id="interval"></dd></dl></div></div><div id="revision-tools" hidden><h3>Review S2 → S3</h3><div class="controls" role="group" aria-label="S3 version"><button id="draft" aria-pressed="false">Inconsistent draft</button><button id="corrected" aria-pressed="true">Corrected panel</button></div><p id="revision-note" class="note">S3 mug moved in the drawing to match its established position in S2; no new story action added.</p></div><p>These rough drawings show composition and prop position. Keep the original artwork and your team's required planning format as the production record.</p></section>
<section><h2>Your separate blank panel scaffold</h2><p>Record your own shot and its open decisions. This page does not generate a missing scene or turn these notes into a video.</p><div class="fields"><div><label for="own-id">Shot ID</label><input id="own-id" type="text"></div><div><label for="own-drawing">Drawing description · what the frame must show</label><textarea id="own-drawing"></textarea></div><div><label for="own-framing">Framing and camera direction</label><textarea id="own-framing"></textarea></div><div><label for="own-action">Action and continuity with adjacent shots</label><textarea id="own-action"></textarea></div><div><label for="own-sound">Supplied sound or dialogue · or TO CONFIRM</label><textarea id="own-sound"></textarea></div><div><label for="own-duration">Planned screen duration · or TO CONFIRM</label><input id="own-duration" type="text"></div><div class="wide"><label for="own-notes">Review notes · drawing and caption changes</label><textarea id="own-notes"></textarea></div></div><p><button id="reset">Clear panel notes</button></p><div id="confirmation" hidden><p>Clear all seven typed fields? The worked storyboard and selected shot stay unchanged.</p><button id="keep">Keep panel notes</button><button id="clear">Clear all seven fields</button></div><p id="status" role="status">The seven planning fields are blank.</p></section><footer>Notes last only in this open page and disappear on reload. Nothing is filmed, uploaded, stored or exported. A storyboard is a plan; compare recorded footage with it when footage exists.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id),ids=['s1','s2','s3','s4'],fields=['own-id','own-drawing','own-framing','own-action','own-sound','own-duration','own-notes'];let selected='s1',inconsistent=false;const mug=(x,y)=>'<g class="mug"><rect x="'+x+'" y="'+y+'" width="23" height="28" rx="3" fill="#d87925" stroke="#263b44" stroke-width="3"/><path d="M'+(x+23)+' '+(y+6)+'q19 0 0 15" fill="none" stroke="#263b44" stroke-width="3"/></g>';const closed='<rect x="48" y="133" width="78" height="18" rx="2" fill="#d6dfcf" stroke="#263b44" stroke-width="3"/><path d="M53 141h68" stroke="#70857a" stroke-width="2"/>';function sketch(id){let art='',label='';if(id==='s1'){label='Wide: Emi approaches carrying an orange mug; closed notebook left on table.';art='<path d="M25 151h250v20H25z" fill="#d8c8ad" stroke="#263b44" stroke-width="3"/><path d="M42 171v29m210-29v29" stroke="#263b44" stroke-width="5"/>'+closed+'<circle cx="211" cy="47" r="18" fill="#e7d6c2" stroke="#263b44" stroke-width="3"/><path d="M193 71q18-11 36 0l8 52h-54z" fill="#b5c9d2" stroke="#263b44" stroke-width="3"/><path d="M230 80l15 18m-51-18-14 20m17 25-8 23m32-23 9 23" fill="none" stroke="#263b44" stroke-width="5"/>'+mug(243,96)+'<text x="35" y="121">Notebook</text><text x="245" y="82">Mug</text>';}
else if(id==='s2'){label='Close: a hand places the orange mug to the closed notebook right.';art='<path d="M18 120h264v62H18z" fill="#e3d5bc" stroke="#263b44" stroke-width="3"/>'+closed+'<path d="M238 20l-13 44-12 11m25-12-13 13" fill="none" stroke="#263b44" stroke-width="8" stroke-linecap="round"/>'+mug(204,127)+'<path d="M215 84v30m-8-8 8 8 8-8" fill="none" stroke="#a54f17" stroke-width="3"/><text x="29" y="207">Notebook</text><text x="189" y="207">Mug</text>';}
else if(id==='s3'){const x=inconsistent?37:224;label='Overhead: notebook opens; mug is on its '+(inconsistent?'left, inconsistent with S2.':'right, matching S2.');art='<rect x="18" y="25" width="264" height="159" fill="#e3d5bc" stroke="#263b44" stroke-width="3"/><path d="M18 184h264" stroke="#263b44" stroke-width="7"/><path d="M82 78q22-9 44 0v66q-22-9-44 0zm44 0q22-9 44 0v66q-22-9-44 0z" fill="#fefdf5" stroke="#263b44" stroke-width="3"/><path d="M92 93h24m-24 14h24m20-14h24m-24 14h24" stroke="#80949b" stroke-width="2"/><path d="M108 26l1 27 13 18m-13-18-8 12" fill="none" stroke="#263b44" stroke-width="7" stroke-linecap="round"/><circle class="mug-top" cx="'+x+'" cy="111" r="14" fill="#d87925" stroke="#263b44" stroke-width="3"/><path d="M'+(x+14)+' 106q17 6 0 12" fill="none" stroke="#263b44" stroke-width="3"/><text x="77" y="214">Notebook</text><text x="'+(inconsistent?20:213)+'" y="65">Mug</text>';}
else{label='Medium: Emi reads the open notebook; orange mug remains to its right.';art='<circle cx="150" cy="43" r="21" fill="#e7d6c2" stroke="#263b44" stroke-width="3"/><path d="M127 72q23-12 46 0l13 62h-72z" fill="#b5c9d2" stroke="#263b44" stroke-width="3"/><path d="M134 42l11 3m10 0 11-3m-16 17v7" stroke="#263b44" stroke-width="3"/><path d="M18 128h264v56H18z" fill="#e3d5bc" stroke="#263b44" stroke-width="3"/><path d="M73 143q25-9 50 0 25-9 50 0v26q-25-9-50 0-25-9-50 0z" fill="#fefdf5" stroke="#263b44" stroke-width="3"/><path d="M123 143v26m7-81-28 37m68-37-16 37" fill="none" stroke="#263b44" stroke-width="4"/>'+mug(224,140)+'<text x="45" y="211">Notebook</text><text x="214" y="109">Mug</text>';}
return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 230" role="img" aria-label="'+label+'" data-shot="'+id+'"'+(id==='s3'?' data-mug-side="'+(inconsistent?'left':'right')+'"':'')+'>'+art+'</svg>';}
const notes={s1:['S1 · Wide arrival','Wide shot establishing Emi, the table and prop positions.','Emi approaches holding an empty orange mug. The closed notebook is on the table left. The mug has not yet been placed.','0–3 seconds · proposed 3 seconds'],s2:['S2 · Close placement','Close shot retaining the notebook and the mug landing place.','Emi places the mug to the closed notebook right. Keep enough of the notebook visible to establish the relationship.','3–6 seconds · proposed 3 seconds'],s3:['S3 · Overhead opening','Overhead shot, with the same front table edge at the bottom.','','6–9 seconds · proposed 3 seconds'],s4:['S4 · Medium reading','Medium shot showing Emi reading behind the tabletop.','Emi reads the open notebook. The orange mug remains to the notebook right.','9–12 seconds · proposed 3 seconds']};
function show(){for(const id of ids)$('shot-'+id).setAttribute('aria-pressed',String(id===selected));const n=notes[selected];$('shot-title').textContent=n[0];$('framing').textContent=n[1];$('action').textContent=selected==='s3'?(inconsistent?'Inconsistent draft: Emi opens the notebook, but the drawing places the mug on its left. No supplied action moves it there from S2.':'Corrected panel: Emi opens the notebook; the mug stays on its right, matching S2.'):n[2];$('interval').textContent=n[3];$('selected-sketch').innerHTML=sketch(selected);$('revision-tools').hidden=selected!=='s3';$('draft').setAttribute('aria-pressed',String(inconsistent));$('corrected').setAttribute('aria-pressed',String(!inconsistent));$('revision-note').textContent=inconsistent?'The S3 drawing puts the mug on the left without a supplied movement. Its picture and caption both show the inconsistency.':'S3 mug moved in the drawing to match its established position in S2; no new story action added.';}
function revision(draft){inconsistent=draft;$('strip-s3').innerHTML=sketch('s3');$('s3-caption').textContent=draft?'6–9 seconds · Inconsistent S3: notebook opens, but mug appears on its left.':'6–9 seconds · Corrected S3: notebook opens; mug stays on its right.';$('board-state').textContent=draft?'The board shows an inconsistent S3. S2 places the mug on the right; no supplied action moves it left.':'The board shows corrected S3. No new action moves the mug between S2 and S4.';show();}
for(const id of ids){$('strip-'+id).innerHTML=sketch(id);$('shot-'+id).addEventListener('click',()=>{selected=id;show();});}$('draft').addEventListener('click',()=>revision(true));$('corrected').addEventListener('click',()=>revision(false));for(const id of fields)$(id).addEventListener('input',()=>{$('status').textContent="Draft changed. Review your current panel notes.";});$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept all seven panel fields. The worked storyboard is unchanged.';$('reset').focus();});$('clear').addEventListener('click',()=>{for(const id of fields)$(id).value='';$('confirmation').hidden=true;$('status').textContent='All seven panel fields were cleared. Selected shot and S3 version are unchanged.';$('own-id').focus();});show();})();</script></body></html>