A little slide deck.slides.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="stuff:kind" content="slides"><meta name="stuff:slide-size" content="1280x720"><title>A little more room · Stuff</title>
<style>
*{box-sizing:border-box}body{margin:0;background:#dedbd4;color:#292a25;font-family:Arial,sans-serif}.slide-canvas{width:1280px;height:720px;position:relative;padding:58px 70px;overflow:hidden;margin:24px auto;background:#f5f1e7;display:none}.slide-canvas.active{display:block}.slide-masthead{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.16em;font-size:15px}.slide-wordmark{font-size:42px;font-weight:800;letter-spacing:-.06em;text-transform:none}.slide-content{position:relative;z-index:1;margin-top:72px;max-width:1050px}.slide-content h1,.slide-content h2{font-size:86px;line-height:1.02;letter-spacing:-.065em;margin:0 0 28px;max-width:870px}.slide-content p{font-size:28px;line-height:1.5;max-width:820px;margin:0}.slide-footer{position:absolute;bottom:38px;left:70px;right:70px;display:flex;justify-content:space-between;font-size:15px;letter-spacing:.03em}.ink{background:#292a25;color:#f5f1e7}.lime{background:#d8e6a3}.paper{background:#f5f1e7}.orb{position:absolute;width:400px;height:400px;border-radius:50%;background:#e9a07a;right:-90px;top:230px}.slide-points{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:46px}.slide-points section{padding-top:20px;border-top:2px solid #292a2535}.slide-points h3{font-size:30px;letter-spacing:-.04em;margin:0 0 14px}.slide-points p{font-size:22px;line-height:1.5}.kicker{font-size:16px;text-transform:uppercase;letter-spacing:.15em}.notes{display:none}.metrics{display:flex;gap:70px;margin-top:55px}.metrics strong{font-size:100px;line-height:1;display:block;letter-spacing:-.07em}.metrics span{display:block;font-size:22px;margin-top:12px}.shape{position:absolute;right:60px;top:185px;opacity:.8}nav{text-align:center;padding:20px}nav button{font:inherit;padding:12px 20px;border:0;border-radius:8px;background:#292a25;color:white;margin:0 5px}@media print{@page{size:13.333in 7.5in;margin:0}body{background:none}.slide-canvas{display:block!important;margin:0;break-after:page}nav{display:none}}
</style></head><body>
<article class="slide-canvas ink active"><header class="slide-masthead"><span class="slide-wordmark">stuff ✳</span><span>A little more room</span></header><div class="orb"></div><div class="slide-content"><h1>Your files.<br>With fewer hoops.</h1><p>A shared home for notes, decks, models,<br>and whatever your agent made at 2 a.m.</p></div><footer class="slide-footer"><span>Original sample deck · no external assets</span><span>01 / 04</span></footer><aside class="notes">Start with the everyday problem: files are easy to create and surprisingly hard to keep together. This is synthetic product sample content, not a claim about adoption or performance.</aside></article>
<article class="slide-canvas paper"><header class="slide-masthead"><span class="slide-wordmark">stuff ✳</span><span>Built for the handoff</span></header><div class="slide-content"><h2>Bring it. Open it. Share it.</h2><div class="slide-points"><section><h3>Bring the original.</h3><p>Upload a file or folder. Keep its identity, bytes, and history.</p></section><section><h3>Take a look.</h3><p>Read a document, inspect a sheet, or give a 3D model a spin.</p></section><section><h3>Let someone in.</h3><p>Share with a person, a scoped agent, or anyone with your link.</p></section></div></div><footer class="slide-footer"><span>People and agents use the same file permissions.</span><span>02 / 04</span></footer><aside class="notes">Use the next/previous buttons or arrow keys. Stuff provides presentation controls without executing scripts embedded in the uploaded deck. The original remains available to download.</aside></article>
<article class="slide-canvas lime"><header class="slide-masthead"><span class="slide-wordmark">stuff ✳</span><span>The useful bits</span></header><div class="slide-content"><h2>More than a filename.</h2><div class="metrics"><div><strong>Office</strong><span>Pages, slides, sheets</span></div><div><strong>3D</strong><span>Orbit, inspect, animate</span></div><div><strong>HTML</strong><span>A deck right here</span></div></div></div><footer class="slide-footer"><span>Views help. Originals stay original.</span><span>03 / 04</span></footer><aside class="notes">Office viewing is read-only. Spreadsheet values are cached, not recalculated. 3D previews support self-contained GLB/glTF plus OBJ and STL geometry. HTML decks use embedded styles and static slides.</aside></article>
<article class="slide-canvas paper"><header class="slide-masthead"><span class="slide-wordmark">stuff ✳</span><span>Go make something</span></header><svg class="shape" width="300" height="300" viewBox="0 0 300 300"><circle cx="150" cy="150" r="140" fill="#e9a07a"/><path d="M85 170 Q150 245 215 170" fill="none" stroke="#292a25" stroke-width="10"/><circle cx="108" cy="115" r="10" fill="#292a25"/><circle cx="192" cy="115" r="10" fill="#292a25"/></svg><div class="slide-content"><h2>Put your stuff<br>somewhere nice.</h2><p>The weird stuff is welcome, too.</p></div><footer class="slide-footer"><span>stuff.ac</span><span>04 / 04</span></footer><aside class="notes">This deck also opens as a standalone HTML file. It follows the article.slide-canvas convention used by the EL OS and Rove/Internal deck players.</aside></article>
<nav><button id="prev">← Previous</button><button id="next">Next →</button></nav><script>const slides=[...document.querySelectorAll('.slide-canvas')];let page=0;function go(n){page=Math.max(0,Math.min(n,slides.length-1));slides.forEach((s,i)=>s.classList.toggle('active',i===page))}document.querySelector('#prev').onclick=()=>go(page-1);document.querySelector('#next').onclick=()=>go(page+1);addEventListener('keydown',e=>{if(e.key==='ArrowRight')go(page+1);if(e.key==='ArrowLeft')go(page-1)});</script></body></html>

Read or download the original file