08 · AI-native interface art: how a "mind" can show itself without the chat bubble or the orb

Research note for the ETS27 concept round · 2026-10-14 · lens: how the best designers express intelligence, conversation and "the machine thinking", and how a generative-UI answer can look designed instead of looking like a chatbot. Reference renders live in concepts/research/refs/<slug>/ (1440×900 desktop, 390 mobile); this note points at the exact PNGs it argues from.

The verdict in four sentences

The sites and essays that make intelligence feel real never draw the intelligence. They draw an instrument, a document, a plate of sand, a table, a shelf, and let the thinking show up as a change in that material: a readout that recomputes, a figure that settles, a section that appears in the right place, rows that dim. The chat bubble, the glowing sphere and the mannequin head all make the same mistake: they put a face on the mind instead of giving it a medium to act on. For ETS27 the question is therefore not "what does the mind look like" but "what does the mind do to the page", and every provocation below is a different answer to that.

What I studied

| Reference | URL | How | What it is | |---|---|---|---| | The Shape of Intelligence (Jamie McKaye, Awwwards nominee 2026-09-26) | https://shapeofintelligence.com | rendered refs/shapeofint/ (desktop-top, s1, s2, mobile-top) + read | an eight-chapter history of AI as an interactive exhibition, ray-marched type, live in-browser classifier | | Chladni · A Geometry of Sound (georgi-draganov, Awwwards nominee 2026-10-10) | https://chladni-plate-experiment.vercel.app | rendered refs/chladni/ (gate, then after-click-* past the "begin muted" gate) | thin-plate physics with sand settling into nodal lines, a lab you can play | | Igloo Inc (Awwwards Site of the Year 2024) | https://www.igloo.inc | rendered refs/igloo-inc/ (needed a 16 s settle to pass its preloader) | WebGL ice-block igloo with a survey-style measurement overlay | | Lusion | https://lusion.co | rendered refs/lusion/ (16 s settle) + Awwwards case study read | studio site with a physics toy hero, Aeonik | | Active Theory | https://activetheory.net | rendered refs/activetheory/ (sits on an entry emblem; no scroll) | studio site whose entry is a >>> prompt inside a radial organism | | Unseen Studio | https://unseen.co | rendered refs/unseen/ (audio gate) | pale pink gate with cartoon eyes, Neue Montreal + Saol Display | | Obys | https://obys.agency | rendered refs/obys/ (still preloading at 3.5 s; counter "82") | preloader as a stack of tiny posters | | Resn | https://resn.co.nz | rendered refs/resn/ (one page error; sits on its entry object) | a dark low-poly gem with the logo refracted inside it, chromatic fringe, Fort typeface; the 2015-era "WebGL object in the dark" entry, now a period piece | | teenage engineering | https://teenage.engineering | rendered refs/teenage-eng/ (top, s1, s2) | pictogram nav over a full-bleed black-and-white storefront photograph | | Refik Anadol | https://refikanadol.com | rendered refs/refik-anadol/ (top, s1) | generated rainforest hero behind a frosted panel; Dataland news card | | Are.na | https://www.are.na | rendered refs/are-na/ (top, s1, s2) | a numbered list that invites you to add a line; a live search demo; a colophon | | Dynamicland (Bret Victor) | https://dynamicland.org and https://dynamicland.org/2024/FAQ/ | rendered refs/dynamicland/ + FAQ read | the site is a photograph of a shelf of printed documents | | U.S. Graphics Company (Berkeley Mono) | https://usgraphics.com | rendered refs/usgraphics/ (403 to plain fetch; ingested through the brain's url-ingest lane) | engineering-document aesthetic with a published design philosophy | | Rauno Freiberg | https://rauno.me and https://rauno.me/craft/interaction-design | rendered refs/rauno/ + essay read | OS-like portfolio; the "invisible details" essay | | Maggie Appleton, Language Model Sketchbook | https://maggieappleton.com/lm-sketchbook | read | Daemons, Branches, Epi; "chatbots are the lazy solution" | | Linus Lee (thesephist) | https://thesephist.com/posts/latent/ · /posts/synth/ · /posts/notation/ · /research/ | read | documents you can talk to, latent-space handles, synthesizer controls for thought, notation as intelligence | | The Interface of Theseus (arXiv 2609.06770) | https://arxiv.org/abs/2609.06770 | read | "just-in-time interfaces: rapid, discardable, on-demand" | | Seven agent interface architectures beyond the chatbot | https://www.aiacceleratorinstitute.com/nobody-wants-another-chatbot-7-interface-architectures-worth-building/ | read | canvas, generative UI, MCP apps, activity panel, approval checkpoints, graph debugger, ambient | | Awwwards experimental index | https://www.awwwards.com/websites/experimental/ | read | the current nominee list (Shape of Intelligence and Chladni came from here) |

Blocked or gated, for the record: Igloo and Lusion show only a preloader at a 3.5 s settle (both pass at 16 s); Chladni and Unseen need a click ("begin muted", "enter without audio"); Active Theory holds on its emblem until you click into it; Obys was still counting up at 3.5 s. None of this is a fault of the sites; it is a reminder that a gate is a design decision these studios make deliberately (see "What works" item 8).

What actually works, and why

1. The answer is the hero: type at 200–260 px with an object threaded through it (Shape of Intelligence). The home screen sets "The Shape of Intelligence" in ABC Diatype at roughly 250 px on a pale grey-green ground (about #f1f3f1) with near-black ink, and a ray-marched ribbon sculpture passes between the words "Shape" and "Intelligence" (desktop-top). The sculpture is the idea, not decoration: a slider under it reads "Change the shape of an idea · 01 Rules · 02 Learning · 03 Context" and re-forms the ribbon. One accent only, a saturated blue (about #2340ff), used for the slider, the active label and the full-bleed closing section "Keep questioning." (desktop-s2). Labels are set in ABC Diatype Mono at 11–12 px, tracked. Chapter 04 (desktop-s1) puts a live readout in the page — "Training accuracy — · Training steps 0 · Two blobs: 40 in tray A, 40 in tray B. Run the model to draw the wire." — and the footer exposes provenance like a lab notebook: "cutoff 2026-06-30 · reviewed 2026-09-12 · build d2a7bca · events.json · llms.txt · MCP". Why it works: the intelligence is never pictured; it is a number that changes and a shape that moves when you touch a control. The page also carries "Sound off · Motion on" toggles in the chrome as first-class controls, not an apology.

2. A physical system draws the answer (Chladni). Past the gate (after-click-top) the page is black (#0a0a0a), the display is Instrument Serif at about 120 px ("A Geometry of Sound"), labels are Geist Mono small caps at 11 px ("CYMATICS · 1787", "STORY LAB FIGURES ABOUT", "PAUSE PLATE", "SOUND"), and one warm gold is the only colour. The hero is a tilted plate on which cream sand grains flee the vibrating regions and settle on the nodal lines; the copy says it exactly: "Bow a sand-dusted plate and the sound draws itself: the grains flee the parts that move and settle where the plate stands still." Scrolling changes the frequency and the figure re-forms (after-click-s2 shows a different figure with the chapter text faded). Why it works: a question becomes a frequency and the picture is a consequence, not an illustration. This is the single best model I found for "the mind reveals only what you ask for". The gate itself is an instrument readout — "READY", a thin didone "100", "BEGIN WITH SOUND / BEGIN MUTED / SKIP TO THE LAB" — which makes waiting feel like a device warming up rather than a spinner.

3. Measurement as atmosphere (Igloo Inc). One colour world (a grey-blue monochrome snowfield), one mono face for everything that is not the logo, and over the igloo a survey overlay: small numerals (40, 37, 33, 21, 30) pinned to specific blocks and joined by hairlines (desktop-top). Nothing explains the numbers; they read as "this object is being studied". The copy sits in the corners in mono — "// Copyright © 2026", "////// Manifesto", "Scroll down to discover.", "Sound: Off" — so the centre stays empty for the object. Why it works: annotation implies a mind looking at the thing. For ETS27 this is a direct lead: the mind's answers can be annotations pinned to the program, not panels beside it.

4. The instrument company shows a photograph, not a render (teenage engineering). The nav is five pictograms (a propeller, a shop box, a square, a finder lens) with lowercase labels in their own te-20/te-40 faces, a block of Japanese microtext as a texture, and then a full-bleed black-and-white photograph of the Lafayette Street store with its neon "TEENAGE ENGINEERING™ DEPARTMENT STORE" (desktop-top). Further down the only large type on the page is "NOW OPEN! WED–SUN 11AM–7PM" (desktop-s2). Why it works: a company whose whole identity is tactile instruments refuses to simulate one on screen; it shows the real place and lets the pictograms carry the instrument feeling. Lesson: if ETS27 wants "switchboard", "dial" or "patch bay", draw them as pictograms and hairline controls, never as glossy 3D knobs.

5. Dense, explicit, nothing hidden (U.S. Graphics Company). A boxed page on grey with a colour-bar logo, nav as six bordered buttons, dotted and dashed section rules, a two-column office page where the right column is a bordered table of thirteen sentences: "Emergent over prescribed aesthetics. Expose state and inner workings. Dense, not sparse. Explicit is better than implicit. Verbosity over opacity. Ignore design trends. Timeless and unfashionable. Flat, not hierarchical. Don't infantilize users." A Berkeley Mono specimen reads "HAL9000 EXABYTE" in eight weights (desktop-top). Why it works: the page looks like the inside of the machine, and that is what makes it trustworthy. For a site whose mind composes answers from a knowledge snapshot, exposing state (which snapshot, which records, which day) is a style, not a disclosure.

6. A document that invites you to add to it (Are.na). "Are.na is / a. Online software for saving and organizing… / b. A toolkit for assembling new worlds from the scraps of the old / c. [+]" — the third item is an empty slot with a plus (desktop-top). Under it a live counter: "For the last 15 years and 66 days". The how-it-works demo (desktop-s1) is a search field holding "spatial discontinuity" with blocks fading up around it. The footer states "Are.na is entirely set in Areal, a custom typeface by Dinamo" (desktop-s2). Why it works: the page is a document with an open line in it; the visitor is invited to write the next clause. That is the opposite of a composer box: the composer is inside the text.

7. The computer is a place, and the program is in the photo (Dynamicland). The home page is one photograph of a wooden shelf with printed cards ("6-minute intro, 2024 · Video, 6 min", "Progress report 2021 · Handwritten letter, 8 pages") under hand-lettered section labels "ORIENTATION", "PROGRESS REPORTS", "DREAMS" (desktop-top, s1). The FAQ states the values: "Visible. Seeing big, seeing the whole, immersed in context, show and tell, the program is in the photo, see how it works, nothing hidden, not magic, no black box." Why it works: it treats computation as a property of physical material. For ETS27 (a summit that has always leaned on music, art and conversation) the mind could live on a table, not in a cloud.

8. Gates that are instruments, preloaders that are typography (Lusion, Obys, Igloo, Active Theory, Unseen). Lusion's preloader is a white bar and "094" in Aeonik at about 120 px, bottom-left (refs/lusion/ first render); the loaded page is a pale lavender ground (#eef0fa) with a statement in 40 px Aeonik and a framed physics toy of blue, white and black pipe-junctions you can throw (desktop-top after retry). Igloo's loader is a line of glyphs "==---==+==" on grey-blue. Active Theory's entry is a >>> prompt inside a hatched circle wrapped by symmetric teal tendrils on black, set in nbarchitekt. Unseen's gate is a pair of cartoon eyes on pink with "ENTER WITHOUT AUDIO" underlined. Why it matters: the best studios make the first second a designed event rather than a spinner, and they tie it to the site's idea (Lusion's counter is in the display face; Active Theory's prompt is literally a prompt). Caveat: every one of these is also a gate, and a gate costs an event site a visitor who only wanted the dates. ETS27 can have a first-second event without a gate.

9. The cursor is an instrument (Rauno Freiberg). The portfolio replaces the pointer with a thin "+" crosshair, runs a ruler-style progress strip at the top ("▭ ||||||||||||"), sets the biography in a 72 px grotesk with hanging indents inside a white card over which a flat yellow disc floats (desktop-top). The essay's principles that matter here: implicit input ("context-aware interfaces infer intent without explicit action"), Fitts's law ("the bigger the target, and the closer it is to where your pointer is, the better"), and frequency versus novelty ("high-frequency interactions shouldn't animate"). Why it matters: a "cursor that thinks" must be cheap and quiet; a crosshair that annotates what it hovers is right, a trailing particle swarm is wrong.

10. The essays agree on one thing: give the mind a shared surface, not a pipe. Appleton: "the chatbot interface is the lazy solution"; her Daemons live in the margin of the writing and "highlight sentences and propose revisions". Linus Lee: "Conversations are a bad way to keep track of information" and the alternative is "documents you can talk to", where "the agent (shell) and I were both manipulating some shared environment collaboratively"; his synthesizer essay imagines "sliders and knobs", "track views where sentences become measures", "spectrograms displaying concept prominence". His notation essay: "We think in languages; we think with notations." The Theseus paper: interfaces that are "rapid, discardable, on-demand". The seven-architectures piece: "Chat windows were always the entry point to agentic AI rather than the destination", and the one that fits an event site is generative UI inside a canvas, with an activity panel that shows what the agent did. Together: the answer should land in a place that persists (a document, a table, a dial), the visitor should be able to touch it (a handle, a slider, a row), and the mind's work should be visible (a source line, a pulled-by-the-mind bar, a readout).

11. Refik Anadol's own site is the warning. A generated rainforest with a lone figure, a frosted teal panel bottom-right ("UPCOMING · Machine Dreams : Rainforest · LEARN" in an outlined button), and below it dark pigment-fluid renders behind a glass card ("NEWS · Dataland on LA Times") (desktop-top, s1). The data sculptures are extraordinary in a museum; on a web page the vocabulary (iridescent fluid, glass panel, generated nature) is now exactly what a prompt that says "AI website" produces. The Awwwards quarter stats confirm the drift: immersive 3D was 61 % of Site of the Day winners in Q1 2026 (up from 23 % in Q1 2024), so a WebGL dreamscape is itself the default now.

What has become cliché (the AI-specific list)

How the mind can manifest: a catalogue of design elements

Each entry says what the element is, how it looks on the page, why it reads as thinking, and the risk.

A. A voice in the typography. The mind speaks in the display face at hero size; its say line (the brief caps it at 45 words) is typeset as a running head or a pull-quote in the page grid, never inside a container. A variable-font weight or optical-size axis moves a few units while it composes and settles when the answer closes; the caret is a punctuation mark (a middle dot, a bar) at the end of the line. Reads as thinking because the page itself is speaking, as a newspaper headline does. Risk: a second typeface for the mind is tempting; resist it, use the same family at a different weight or in italic.

B. A field that reacts. The ground is a slow reaction-diffusion or flow field rendered in one ink on one paper colour (Chladni's sand-on-slate, not a rainbow). A question perturbs it; the answer settles it into a figure; idle, it drifts almost imperceptibly. Reads as thinking because disturbance-then-settlement is what thinking looks like from outside. Risk: noise for its own sake. The field must be seeded by the question (word count, day, topic) so two different questions give two different figures, and reduced-motion visitors get the settled figure as a still.

C. A cursor that looks. The pointer is a thin crosshair or bracket; what it hovers gets a hairline annotation (Igloo's survey numerals) and a one-word gloss in mono ("speaker", "tuesday", "ticket"). When the mind is composing, the crosshair ticks like a second hand. Reads as thinking because annotation implies attention. Risk: anything that trails or glows. Keep it to a 1 px line and 11 px mono text.

D. A document that writes itself. The site is one long typeset document with a table of contents in the margin (Are.na's lettered list, Linus Lee's "documents you can talk to"). Asking the mind inserts a numbered section at the right place — "04 · Tuesday's speakers" lands under "03 · The agenda" — and the contents grows a line. Older answers do not scroll away; they stay as sections you can re-read. Reads as thinking because something was written, in order, with a heading. Risk: it becomes a wall of text; the inserted sections must be components (grids, timetables), not prose.

E. A radar or dial. The four days (Monday 3 to Thursday 6 May, half-day Thursday) are a single dial or a 96-hour arc; sessions are ticks; the mind's answer lights the ticks that match and a hand sweeps to them. Reads as thinking because a sweep is search made visible. Risk: a dial shows when, not who; pair it with element D or H for names.

F. A loom. Speakers are warp threads (vertical, one per person, 147 of them is a texture), sessions are weft; an answer is a woven band across the threads it involves, and the band is where the speaker cards hang. Reads as thinking because the answer is literally composed from existing threads, which is what the component catalog does. Risk: too literal a tapestry; keep it to hairlines and type.

G. A switchboard or patch bay. Days, tracks and ticket classes are jacks drawn as pictograms (teenage engineering's nav, not 3D knobs); the mind patches a cable from the question to the records it pulled, and the cable stays until you unplug it. Reads as thinking because routing is choice. Risk: skeuomorphism; draw it flat, in one ink, with the hairline weight of a circuit diagram.

H. An index that filters in place. The entire program on one screen as a dense mono table (usgraphics density, every speaker and session in 12 px rows). An answer dims every row the mind does not mean and leaves the others at full ink; nothing new appears, attention changes. Reads as thinking because selection is the purest visible form of understanding. Risk: unreadable on a phone; the phone gets the same table at one column with the dimmed rows collapsed.

I. Marginalia. The standard site is plain and typeset; the mind writes in the margin in a second hand (italic, same family), with proofreader marks pointing into the page (Appleton's Daemons that "highlight sentences and propose revisions"). The "ask the mind" route is simply the margin taking over the page. Reads as thinking because it is a reader's hand, not a machine's. Risk: hard to do on a phone; the margin becomes a footnote strip.

J. The readout. The opening is numbers in a mono: days until the summit, 4 days, speakers announced, 1 city, ticket phase ends in n days. Every answer recomputes the readout ("12 speakers · Tuesday · 2 keynotes") the way Shape of Intelligence's "Training steps" or Chladni's "100" do. Reads as thinking because a number that changes is the oldest sign of a working machine. Risk: dashboards. Keep it to one line of figures, never tiles.

Making a generative-UI answer look designed, not like a chatbot

These are rules a concept can adopt wholesale; they come straight from the references above.

  1. No bubbles, no avatars, no left-right alternation. An answer is a block in the page grid, in the page's column rhythm, with a heading in the page's display face and a hairline rule above it.
  2. The say line is a caption or running head in the mono or italic cut, 45 words max, never inside a box. The components under it are the answer; the words are the label.
  3. The question stays visible as the section's heading ("Who's speaking Tuesday", set in sentence case), so the thread reads as a table of contents, not as a transcript. Number the sections (01, 02, 03) and keep them.
  4. One reveal per answer: components come in with a single staggered stagger of about 120 ms per item, then stop. Nothing loops. High-frequency actions (a follow-up chip, a filter) do not animate at all.
  5. "Thinking" is a change of state in an existing element — the field reorganising, the readout spinning, the crosshair ticking — never a shimmer skeleton or a pulsing dot row.
  6. The composer is a line to write on: a hairline rule with a caret at the left and the suggestion verbs set along the rule in small caps, like a form on paper. Not a rounded box, not a pill, not a send button; Enter sends, and the rule shows it.
  7. Sources are footnotes: a superscript number on the fact, a one-line source at the end of the section in mono. The owner's brief already asks for a source line; set it as a footnote and it becomes a design feature.
  8. Expose state in the chrome, lab-notebook style: "snapshot 2026-10-13 · 77 speakers · 50 sessions · sample data" in 11 px mono in the footer. This is the honest version of the "placeholder" flag the brief requires.
  9. Every component inherits its type and spacing from the page; the mind is allowed to pick components and ids, never a style. This is the brief's own rule and it is what keeps generated UI from looking generated.
  10. Give the visitor handles, not just chips: a day slider, a track toggle, a "fewer / more" control on a grid (Shape of Intelligence's slider, Linus Lee's handles). Touching a handle is a question too, and it never needs a sentence.

Provocations for ETS27

  1. The sand plate. The hero is a dark plate dusted with pale grains; every question is a frequency, the answer settles the grains into a figure, and the speaker cards land on the nodal lines. Dates, city and theme sit in the corners in 11 px mono the whole time, so nothing is gated.
  2. A voice at 400 pt. Ask "who's speaking Tuesday" and the word TUESDAY sets itself across the viewport in the display face; the speakers hang from its letters like Shape of Intelligence's ribbon through "Intelligence". The answer is the hero; the page has no other hero.
  3. The ledger. The whole site is one typeset document with a lettered contents list in the margin ("a. the dates · b. the theme · c. +"). Asking the mind writes the next section in place and adds its line to the contents; a return visitor finds the document they wrote last time.
  4. The index. Every speaker and session on one screen as a 12 px mono table in one ink on one paper colour. The mind never adds anything; it dims what you did not ask for, and the crosshair cursor glosses whatever you hover.
  5. The dial. 96 hours from Monday 3 to Thursday 6 May as one radial dial at 900 px; sessions are ticks; the mind's hand sweeps to the ones that match and names them in the centre. Tickets and venue are the two fixed marks on the rim.
  6. The patch bay. A flat pictogram board (teenage engineering's hand) with jacks for days, tracks and ticket classes; the mind patches a cable from your question to the records it pulled and the cable stays plugged until you pull it. Standard route = all cables in.
  7. Marginalia. A plain, fast, beautifully typeset standard site; the mind lives in the margin in italic with proofreader marks reaching into the page. "Ask the mind" is just the margin widening until it is the page.
  8. The readout. The site opens on one line of live figures in a mono — "201 days · 4 days · 147 voices · Austin · phase 1 ends in 36 days" — and every answer recomputes the line before anything else appears. Numbers first, cards second, words last.
  9. The loom. 147 vertical hairline threads, one per speaker, as the page texture; an answer is a woven band across the threads it involves, and that band is the speaker grid. Scroll weaves the standard site band by band.
  10. The survey. The program as a single large object (a plan of the venue, or an abstract solid when the venue is unannounced) with Igloo-style numerals pinned by hairlines; the mind's answers are new pins. Nothing floats, nothing glows; the page looks like a drawing being measured.

Notes for the concept builders