The bar, the stage, the drawers

Inspiration items 6 and 7, filed 2026-10-21 from the owner's notes in chat. Direction for the exploration rounds, not a build order: "Don't need to start building stuff yet, but perhaps just noting."

What Büro actually has (burocratik.com, looked at 2026-10-21)

• A persistent bar. A dark rounded pill, about 575 px wide and 45 px tall, centred about 30 px above the bottom edge of a 1440 × 900 viewport, floating over a full-bleed 3D hero. Left: the studio glyph and a rolling one-line message ("We are Büro", the words animate in and out). Right: the current page as a small white chip ("Homepage") and a plus. On a phone the pill spans the width minus margins and keeps only the glyph, the message and the plus.
• The plus opens the menu. The button (its label is "Open/close menu") grows a blurred sheet out of the bar: the studio name, a "Let's talk" call to action, the pages (Homepage, Studios, Recognition, Work with Branding and Naming beneath it, 18 Years of Büro with Book beneath it), and the socials (the newsletter form is in the footer, not in the sheet). The chip says where you are; the plus turns into the close.
• The rolling line is a message stack, not a loop. The teardown (teardowns/burocratik/) found that the bar's text is fed by what the pointer is over, by an intersection band above the bar, by window blur and by footer presets: Burn's "bar that speaks for the canvas" (item 14) already working here. And on first load the bar is born in the centre of the screen as a greeting and glides down to the bottom, which is the owner's centre-to-bottom idea, built.
• There is no chat input on the real site. The ask box is the owner's extension of it.
• Screenshots: burocratik/desktop-top.png and burocratik/mobile-top.png, rendered headless on 2026-10-21. Büro's anniversary site is also in the scan as scan-20261020/picks/music-burocratik/ (7.3), with the same bar.

The owner's extension, in his words

• "I really like the menu at the bottom of the site on this web page, which can also be an input box for chatting with the site too."
• "You could hit the plus to expand it as a standard menu, or you could type in it and ask things like, who's on the agenda today? What are the speakers? What's the venue? Or you could offer these things."
• "The site could start with something like that perhaps in the center of the site and once you start engaging it or click around the site it'll just move to the bottom and everything will feel like more like an app you're flowing through and interacting with."
• "How things open it like a drawer. So when you open something like say someone was asking for speakers and then … the thread reveals all the speakers, they can then click one and it slides out like a drawer from the bottom of the page. So then they can close out that and go back to the main thread."
• "The chat box can also always kind of be visible slash menu and overlays everything. And so as someone's done with the section, they just simply resume from the chat box where they want to go next."
• "The background or stage area of the site, we'll call it, which is the viewport, the majority of the viewport is where the requested information is presented."

Vocabulary, from now on

• The bar. One object that is both the menu (the plus opens it) and the place you ask. It starts in the centre, docks to the bottom once the visitor engages, and overlays everything afterwards. You always resume from it.
• The stage. The rest of the viewport, most of it. It shows what was asked for: the mind's latest composition, or the page chosen from the menu.
• The drawer. The detail level. A speaker, a session, the venue: it slides up from the bottom over the stage and closes back to where you were.
• The thread. The running conversation with the mind. The stage shows its current answer, drawers show detail, closing a drawer returns to the thread.

How it maps to what is settled

• The two routes and the omnipresent assistant (decision of 2026-10-13) collapse into one control. The bar carries the standard route (the menu behind the plus) and the ask route (typing into it); the visitor does not choose at a door. The concept round's "fork at the door" pattern becomes one object with two mouths. This is the first thing the samples should test.
• The stage is where the blocks of the custom contract render (research/genui-landscape.md, section 6): one answer, one composition on the stage. The menu pages are compositions too, just fixed ones.
• The drawer is where a block opens up: the speaker card on the stage opens the speaker drawer, the session row opens the session drawer. No navigation away, the bar stays, the thread stays.
• The move from centre to bottom is the site's opening. Before the first question the bar is the invitation, with the title and whatever else the look brings (see sharpie-on-paper.md); after it, the bar is the companion.

Open questions for the samples

• What exactly is on the stage before the first question, and how the bar's move reads (a slide, a shrink, a handoff to the stage).
• Whether the thread's history stays visible (a scrollable stage) or only the latest answer does (a stage that replaces itself), and how "go back" works in each.
• How deep a drawer goes before it wants to be a page, and whether drawers stack (speaker, then their session) or replace each other.
• The phone: the bar lives next to the keyboard; the drawer is the native sheet gesture; the stage is small. The design should be proven there first.
• How "offer these things" looks: suggested asks in the bar before the visitor types, and whether the menu pages are also just asks ("show me the agenda").

Custom all the way (item 9, same day)

The owner, on a screenshot of Büro's ranking cards with the site's outlined pointing-hand cursor over one (burocratik/cursor-hand-recognition.png): "I want a fully custom experience. I like the custom cursors when you hover over certain things. Reactive custom cursors, also custom scroll bars." Then: "or rather even invisible scroll bars and less scrolling."

• Reactive cursors. The cursor changes with what is under it: a hand over a card, something else over a drawer handle, over the bar, over a speaker sketch (the reveal). Desktop only by nature; the phone gets the same feedback through the element itself (press states, the sheet gesture). Büro draws its hand as a bold outlined glyph in the site's own ink, which is the point: the cursor is part of the drawing, not a system arrow. The teardown shows how: one fixed DOM element holding a stack of drawn states (a hand that tilts with the motion, eyes that blink, a pressed glove), switched by a pointer directive on the elements beneath; the ranking cards it appears over sit on the homepage under "Our Accolades" (teardowns/burocratik/).
• Invisible scroll bars, less scrolling. This leans the open question above towards a stage that replaces itself: compositions sized to the viewport, overflow in drawers, the thread advanced by asking rather than by scrolling. Where scrolling remains (a long agenda, a drawer with a biography) the bar is hidden and position is shown some other way, in the site's own language.
• Fully custom also covers the rest of the browser chrome the anti-list names: selection colour, focus rings, the loading state, the 404, the favicon, the share image. All drawn by the same hand.

The bar at rest (item 11, same day)

Your Majesty's work page (yourmajesty.co/work, looked at 2026-10-21; screenshots in yourmajesty/): the only navigation is a black capsule at the bottom centre. On arrival it reads "MENU | CONTACT". Once you scroll down past about 100 px it shrinks to a small black oval holding only the studio's monogram; it opens back into "MENU | CONTACT" when the pointer enters the oval itself (there is no proximity radius), on keyboard focus, or on any scroll up (teardowns/yourmajesty/). Menu and Contact each open a panel over the page (the nav carries a data-state for it). On the phone the capsule is the same, larger, above the thumb. Nothing else sits on the page edges; the header is the studio name in small text, top left.

The owner, in his words: "I like this really minimal menu at the bottom, which is just the logo. When you scroll it, it becomes just the logo down. And when you hover it, it reveals the word menu and the word contact, which is super. We could just have something like that, except it also revealed the chat box. So you can interact with the site by asking it things." And: "I specifically like the way this menu becomes very minimal unless used. Then it can be like the other menu I shared earlier."

So the bar gets three states, each taken from one of his examples:

• At rest: the mark alone, a small oval at the bottom centre (Your Majesty). Reached once the visitor has started reading or scrolling.
• Awake: the pointer enters the oval, the page scrolls up, or a tap on the phone: the oval opens into the menu word, the contact word and the ask field (Your Majesty's reveal, plus the owner's extension).
• In use: the plus or the menu word opens the full sheet (Büro, item 6); typing starts the thread; the bar stays docked through everything (item 7).

His open question, in his words: "I'm trying to figure out if we should have two experiences or if it should always be kind of both available, but if someone wants the site to be the interface to adapt to what they're looking for specifically rather than hunting it down they can, almost like shortcuts, or making it more minimal." Coordinator's view, for sample A to test: one site, not two experiences. The bar is the only door, and both mouths are always there; browsing and asking are two ways of using the same site, and nobody has to choose a mode at arrival. "Adapting to what they are looking for" is simply what happens when they ask, and the shortcuts are the suggested asks the awake bar can offer ("today's agenda", "who is speaking", "the venue"). The three states make the ask route unobtrusive for people who only want to browse, which is what two experiences would have been for.

Contact, personably (item 12, 2026-10-22)

ED. (ed.studio, looked at 2026-10-22; screenshots in edstudio/): the footer is two white rounded cards on light grey. The wide one carries the two flags and the acknowledgement of country. The small one is the contact block: four round buttons in a row, a black handset in a light grey circle, a mail icon drawn as a little open envelope (two crossed strokes, almost a lowercase m; a 92 px PNG, not an SVG) in the same grey circle, the Instagram gradient circle, and a round portrait of a man in a shirt and tie that reads as a deadpan joke avatar rather than a staff photo (it links to the studio's LinkedIn page; teardown in teardowns/edstudio/, where the "Call to Action" scatter turns out to be a 2 s tween with draggable buttons, not a physics drop). No labels, no "contact us", no form. The rest of the site has the same humour: the section above the footer is a giant heading that literally says "Call to Action", scattered with every client's own "Start a project" button, each labelled like a design-system component ("Button/Sydney Film Festival", "Button/Art Gallery of Ballarat"); and the clients run across the top as a row of story-style circles (logos and faces).

The owner: "I like the contact block here especially the mail icon. And the way it's done it looks fun and personable."

For ETS27: the contact word in the awake bar can open exactly this, a short row of round buttons instead of a form, with the icons drawn in the site's own hand (the marker, item 8) and a real face on the end, one of the Zpryme team, so writing to the summit means writing to a person. The same row is the natural footer of any drawer that ends in "talk to us" (sponsorship, press, group tickets). Keep the humour where ED. keeps it, in the deadpan labels and the face, not in the icons wobbling.

The name as the grid (item 13, 2026-10-22)

Burn (burnstudio.co, looked at 2026-10-22; screenshots in burnstudio/): the landing is a white page with a faint dot grid and, in the centre, eleven grey rounded blocks laid out so that together they spell BURN, with a small TM at the corner and "A Multi-Platform Creative Company" beneath. Nothing else. Each block is a project. Until the pointer arrives, a random block lights up every two seconds with a project's preview; the first hover stops that and the hovered block takes over; a click dismisses the landing and the site behind it appears. So the logo is also the work index, and the word stays readable as a shape while the blocks change. On the phone the same blocks sit at the foot of a full-bleed film still, translucent, under the headline and a "Menu" pill; a light/dark mode switch and a live clock are the only other furniture.

The owner: "Burn Studios are great. Exercise in minimal design. I like how they use the grid on the home page to write their company name. Burn. And it's minimal until you hover or act on it. Perhaps something to borrow from or consider here."

For ETS27: the same move with the theme. "free your mind" (or ETS27, or 27) built from cells on the stage before the first question, each cell a speaker, a session or a theme, revealing itself under the pointer and opening its drawer on a click; the word is the index. It is the grid-shaped cousin of the dot cloud (item 10): the cloud is the mind at rest, the word is the mind spelling itself. With the marker look (item 8) the cells can be marker-drawn squares on the paper, or the word written in the hand with the cells only appearing when the pointer comes near. One of the two idle stages, not both, is the decision for sample A.

The grid, and a bar that speaks for the canvas (item 14, 2026-10-22)

Burn's work page (burnstudio.co/work; screenshots burnstudio/work-*.png): the same dot grid as the landing, 24 columns on a desktop and 8 on a phone, computed from the viewport width and handed to the page as one CSS variable. The marks are small crosses, and the 24 and 8 count cross cells; the project grid itself has 8 columns on a desktop and 1 on a phone. Every thumbnail is one column wide (three cross pitches) and differs only in height (2, 4 or 6 pitches), scattered across the page with empty cells between them, each with a small mono caption beneath ("N 58 TYPE C"). On /work the menu starts top left and sits at the bottom after a project visit, which is the state the owner saw (teardowns/burnstudio/). The menu is a group of grey pills ("BURN · Work · All · List") with a four-arrow drag handle beside it; the handle lets you drag the menu anywhere on the screen (jQuery UI draggable, handle only). When the pointer enters a thumbnail, the preview video plays and the menu extends with a new pill carrying that project's code and title; when it leaves, the pill retracts. On the phone the thumbnails stack full width, the "∷ Menu" pill sits at the top, and a bar at the foot shows the code and title of whichever project is nearest the middle of the screen as you scroll. A light/dark switch and a live clock are the only other furniture.

The owner: "They stick to that grid where every element is laid out according to the grid even if of various sizes and in random spots on the grid but adheres to the grid. And when you hover over items the menu appears on the bottom but the hover extends the menu and reveals more about what you're hovering over. I like that localized minimalism where information is in one section of the screen changes as far as the interactive part while you hover on stuff that's on the main canvas of the page." And: "They have a little drag icon that appears next to the menu that lets you move the menu anywhere you want on the screen. That is really cool."

For ETS27, three things to keep:

• One grid under everything the mind composes. The stage carries a fixed grid; every block the mind places (a speaker card, a session row, a map, a quote) snaps to it at one of a few allowed sizes. The model chooses what appears; the grid decides where it can sit. That is how a generated composition stops looking generated, and it belongs in the component contract (research/genui-landscape.md, section 6) as a layout rule, not a style.
• The bar speaks for the canvas. Hovering a speaker on the stage writes their name and session into the bar; leaving clears it; on the phone the item nearest the middle writes itself in as you scroll. Information changes in one place while the canvas stays quiet. With the marker look the bar's text can be the one thing that is written out live.
• A bar you can move. The drag handle fits "a fully custom experience" (item 9): the bar is an object the visitor owns, not chrome. Caveats for the sample: remember the position for the session, offer a snap back to the bottom, and keep dragging off the phone, where it fights scrolling; a long press could stand in.

Pills with tissue (item 16, 2026-10-22)

Floema's navigation (floema.com/en; the owner's crop in floema/nav-hover-owner-crop.png, the page at rest in floema/desktop-top.png): four white pills at the top right, PRODUCTS, ABOUT, SUSTAINABILITY, JOURNAL, which at rest touch and read as one strip. When the pointer comes near they move apart, and the white skin stretches between them, so the gaps have soft concave sides and the strip looks like one flexible thing rather than four buttons. Technique, confirmed by the teardown (teardowns/floema/): no filter at all. One SVG behind the links draws rounded rectangles plus metaball bridges between them, redrawn by a ResizeObserver while CSS animates the pills' margins apart; the same skin dresses the call-to-action buttons and the phone menu's search field. The site is by Büro too (Nuxt 4, GSAP, Lenis, a three.js image tunnel in a worker on the home).

The owner: "I really like the navigation that when you hover the way the little pills separate but have a little connecting, quote-unquote, tissue between them so they kind of look flexible and are responsive on hover, perhaps tap too. I really like that mechanism."

For ETS27: this is a candidate for the awake state of the bar (item 11): the mark, the menu word, the contact word and the ask field as pills of one skin that separate as the pointer approaches, and for the suggested asks the bar offers. It also fits the marker look: ink that pools between two strokes. On the phone the separation can happen on first touch, before the tap lands.

Physics on the stage (item 19, 2026-10-22)

MultiversX's site by Büro (multiversx.madebyburo.com; the owner's crop in multiversx/tags-owner-crop.png): in the "Ecosystem" chapter nine coloured pills with the ecosystem's words drop from the top of their container, bounce along its floor and against each other, come to rest tilted and overlapping, and can then be dragged and thrown. The pills are ordinary DOM spans (.tags-playground holding .physics-tag-container > .physics-tag), so a physics engine is moving real text, not a canvas drawing; the engine is not yet named (no global, Nuxt 2 bundle), which the second teardown wave will settle, along with the restitution, friction and drag feel the owner likes.

The owner: "The physics model is really good … when someone searches for speakers or opens the speakers page we could have all the speakers drop from the top of the screen and kind of bounce into the screen and then they could drag them around, throw them around or click on them … It's very responsive and feels very natural."

For ETS27: the speakers answer as a drop. The mind composes the speaker block and the names (or the marker sketches, item 8) fall onto the stage, settle against the bar, and stay draggable and throwable; a click opens the drawer. It is a third idle-stage candidate next to the dot cloud (item 10) and the name as a grid (item 13), and the one with the most "free your mind" in it. Caveats for the sample: real DOM bodies keep the names selectable and accessible; a reduced-motion visitor gets the settled state at once; on the phone the container is the viewport width and the drop must finish within a second or two; a hundred bodies is fine for a 2D engine, a thousand is not, so the drop should carry the shortlist the mind chose, not the whole lineup.