[{"data":1,"prerenderedAt":160},["ShallowReactive",2],{"$f3HhsF2TtDx0qNpWxlBlhKuiogiIcSKAPgGboUyLmTR8":3},{"item":4,"meta":96},{"id":5,"title":6,"alt":7,"date":8,"design-phase":9,"designer":10,"era":11,"extension":12,"featured":13,"gallery":14,"image":16,"meta":45,"narrative":83,"project":84,"source-file":83,"stem":85,"subject":86,"tags":87,"tool":93,"type":94,"__hash__":95},"archive\u002Farchive\u002F2026-q4\u002F2026-10-02-c106-sticky-title.md","Sticky Title — the Page Title Joins the Band","Scrolling down a qdash harness page: Inventory \u002F Harnesses \u002F Claude Code pinned at 15px with its hairline, the Installs and Surface pills docked under it as an outlined compact bar, on a backing a shade off the page with a soft two-layer shadow.","2026-10-02","1.0","mark","seed","md",false,[15,18,21,24,27,30,33,36,39,42],{"src":16,"alt":17},"\u002Fcycles\u002Fdesign\u002Fc106-qdash-detail-down.png","In qdash at 0.9.27: the harness title pinned at 15px, the pills docked with 16px under them; a 94px band.",{"src":19,"alt":20},"\u002Fcycles\u002Fdesign\u002Fc106-qdash-detail-rest.png","The same page at rest: the page title at its full 28px above the actor header and the pills.",{"src":22,"alt":23},"\u002Fcycles\u002Fdesign\u002Fc106-qdash-listing-down.png","A qdash listing (Inventory \u002F Harnesses) scrolled: the title beside the compact filter in a 54px band.",{"src":25,"alt":26},"\u002Fcycles\u002Fdesign\u002Fc106-p1-detail-down.png","Scrolling down: the title pinned at 15px with its hairline, the filter values only, the pills docked under the title (grey-350 outline, the active pill purple bold with a 2px ring); a 90px band with its two-layer shadow.",{"src":28,"alt":29},"\u002Fcycles\u002Fdesign\u002Fc106-p1-detail-rest.png","At rest: the title at its full 28px on the title row with the filter, the actor header and the pills below; no band.",{"src":31,"alt":32},"\u002Fcycles\u002Fdesign\u002Fc106-p1-detail-jump.png","A pill jump to Sessions lands 16px under the compact band; the Sessions pill takes the ring.",{"src":34,"alt":35},"\u002Fcycles\u002Fdesign\u002Fc106-p1-detail-filter-full.png","The Filter's bandCompact off: it keeps its labels, so the right column sets the band's height.",{"src":37,"alt":38},"\u002Fcycles\u002Fdesign\u002Fc106-p1-listing-down.png","A listing (Inventory \u002F Harnesses) scrolling down: no sub nav, so the band is one 53px row.",{"src":40,"alt":41},"\u002Fcycles\u002Fdesign\u002Fc106-p1-docs-sticky-band.png","The UxStickyBand docs page, now the sticky-band guide, opening with the mock running live in a frame.",{"src":43,"alt":44},"\u002Fcycles\u002Fdesign\u002Fc106-detail-down.png","Phase 0, the design-local mock: full-size pills and the earlier band, before the dock and the outline.",{"body":46},{"type":47,"value":48,"toc":79},"minimark",[49,53,61,72],[50,51,52],"p",{},"c104 pinned the filter and the jump pills as one band, but the page title still scrolled away, so a long page lost its name. Mark asked for the title in the band: compact while scrolling down (\"tidy, out of the way\"), room under it for sticky sub navs, and an in-between set while scrolling up.",[50,54,55,56,60],{},"The first mock teleported a compact copy of the title into the band. Mark asked why the filter could be the real component and the title couldn't. The answer was the filter's own technique: it pins as a sticky box that never changes the page's flow. So the real ",[57,58,59],"code",{},"UxPageTitle"," pins too. At rest it is an ordinary block, correct from the first paint. When it reaches the pin line it freezes at its own height and restyles inside it — 15px, the hairline kept — and settles back in place when it unpins. Sub navs register on mount, so a page with pills gets a second row and a page without them doesn't, with no switch. The filter drops its labels while the band is compact. Every mode flip was measured: the page's height and the content's position never move.",[50,62,63,64,67,68,71],{},"The motion and the details are Mark's, settled in a long design pass. Quint-in-out, one second to compact; a quicker fade; a two-layer shadow. The pills dock under the title as an outlined bar, and the band extends under them only when they arrive. Scrolling up draws the same as scrolling down, with the in-between set kept behind a switch. It now lives in the layer — ",[57,65,66],{},"\u003CUxStickyBand title>"," turns it on, and the title and pills join on their own. The ",[57,69,70],{},"UxStickyBand"," docs page is its guide, with the mock running live in a frame.",[50,73,74,75,78],{},"It shipped in q-nuxt-layer 0.9.26 and went straight into qdash: ",[57,76,77],{},"PageHeader"," became a fragment so the title could pin on every page. Mark then tuned it on the live app for 0.9.27. The backing fades in at its height instead of sliding down; the title shrinks faster than the band; the shadow is taller and lighter; the backing sits a shade off the page; the pills get a little more room below.",{"title":80,"searchDepth":81,"depth":81,"links":82},"",2,[],null,"dashboard","archive\u002F2026-q4\u002F2026-10-02-c106-sticky-title","product",[88,89,90,91,92],"c106","qcontrol","sticky","page-title","layer","Playwright capture","screengrab","afLewR2ZUi_4FbMxY7n52Ti4ZT8xhV217K9uIwiOgQI",{"eras":97,"designers":120,"subjects":128,"projects":148},[98,105,112,115],{"id":99,"name":100,"description":101,"startDate":102,"endDate":103,"order":104},"ideation","Ideation","First dashboard and site mockups, pre-brand.","2022-01","2025-09",0,{"id":106,"name":107,"description":108,"startDate":109,"endDate":110,"order":111},"pre-seed","Pre-Seed","Establishing identity, voice, and visual language.","2025-10","2026-01",1,{"id":11,"name":113,"description":114,"startDate":110,"order":81},"Seed","Building the product and its interface.",{"id":116,"name":117,"description":118,"order":119},"post-seed","Post-Seed","Scaling the product and expanding reach.",3,[121,124],{"id":10,"name":122,"role":123},"Mark","Founder \u002F Design",{"id":125,"name":126,"role":127},"sarah","Sarah Parson","Illustration \u002F Design",[129,133,137,140,144],{"id":130,"label":131,"description":132},"front-site","Front Site","Public website and marketing pages.",{"id":134,"label":135,"description":136},"pitch-deck","Pitch Deck","Investor and partner presentations.",{"id":86,"label":138,"description":139},"Product","Application UI and dashboard.",{"id":141,"label":142,"description":143},"cli","Command Line Tools","Terminal interfaces and output.",{"id":145,"label":146,"description":147},"brand-system","Brand System","Style guide, brand documents, MCP server.",[149,153,156],{"id":150,"label":151,"description":152},"brochure-site","Brochure Site","Public marketing website — messaging, landing pages, campaigns.",{"id":84,"label":154,"description":155},"Dashboard","Product application UI — the tool customers use.",{"id":157,"label":158,"description":159},"brand","Brand","Brand system, style guides, design tokens, and tooling.",1794599288175]