How it works
A chat that starts as a sine scroller
Stand's widget is optional. The scroller along the bottom of this page is a complete Stand chat built from scratch on the Visitor API: it asks Stand who can answer, starts a conversation with the visitor's first message, sends over HTTP, listens on a WebSocket, and recovers after reloads. Everything else is a 1993 demo: a sine scroller, copper bars, a starfield and glenz vectors, drawn with WebGL 2 in a pixel font made for it.
Try it
- Watch the scroller for a moment. It waves the info desk's greeting in raster colours, the way cracktros carried their messages. Hover over it and the letters jump. Click anywhere and the party tune starts; the Music button turns it off.
- Click the scroller, tap it, or just start typing. Its letters burst into pixels, the copper bars open into a full-screen demo, and the greeting lands as the first line of the chat.
- Ask something, like when the doors open or what the coffee machine is called. Replies stream in from the right like a scroller and stop in place, letter by letter.
- Press Esc and keep reading. When a reply arrives, the scroller drops what it was saying and delivers the new message. Click it to answer. Reload the page and the chat is still there.
- Play with the glenz crystal bouncing in the hero on a wide screen. It keeps time with the music, watches your pointer and spins when you scroll. Bat it a few times, or click it, and it dives into the scroller to open the chat.
This example uses siteId: 'demo', Stand Chat's shared demo site, which works on any domain. Its demo Stand-in plays the info desk from the page's prompt. With your own Site ID, your own Stand-ins answer, and your team can take over.
1. Discover, then start on the first message
stand-client.js is the whole network side, with no UI and no dependencies. It is the Vintage terminal's client, unchanged but for where it saves the chat. It follows the custom chat UI guide, including the parts that are easy to skip: recovering after a reload or a dropped socket, merging messages without duplicates, and never starting two conversations from one click.
// Who can answer on this page? Public: no key, no token.
const offer = await get(`/v1/reps/find?siteId=${siteId}&page=${page}&greetingsEnabled=false`);
// The visitor's first message starts the conversation, once.
const session = await post('/v1/sessions', {
siteId, page,
standinProfileId: offer.standinProfileId, // or repId, when a person answers
initialMessage: text,
includeOpeningGreeting: true, openingMessage: greeting, // the scroller's words
prompt, // the info desk persona and the party's facts
});
// Later messages over HTTP, replies and handoffs over a WebSocket.
await post(`/v1/sessions/${id}/messages`, { body, type: 'text', clientMessageId }, token);
const socket = new WebSocket(`wss://api.stand.chat/ws/sessions/${id}?token=${token}`);
The greeting in the scroller is the one the conversation opens with: Stand stores it as the first message, so your team sees what the visitor saw. The prompt gives the demo Stand-in its info desk voice and the party's facts: doors, compos, the sauna.
2. Take the scroller apart
A sine scroller bends every letter column by column along the wave. When you open the chat, strip.js takes a snapshot of every lit pixel on screen. The greeting's pixels are paired with the pixels of the same letters in the chat, each on a curve that bursts outwards before it pulls home, and the rest fall away like sparks. The particles land exactly on the letters' pixels, so the chat's text takes over without a seam.
for (let k = 0; k < n; k++) {
const [sx, sy] = from[Math.floor((k * from.length) / n)]; // a pixel on the wave
const [lx, ly] = lit[Math.floor((k * lit.length) / n)]; // the same letter, in the chat
const tx = target.x + lx * target.size;
const ty = target.y + ly * target.size;
// A burst outwards first, then the pull home: a quadratic Bézier.
const angle = rnd() * Math.PI * 2;
particles.push({ sx, sy, tx, ty, cx: sx + Math.cos(angle) * burst, cy: sy + Math.sin(angle) * burst });
}
3. Write like a scroller
Replies don't type out. Each letter leaves the right edge in reading order, rides the sine wave, and stops where it belongs, so a reply arrives as a little scroller that comes to rest as text. Long replies speed up; Enter on an empty line lands everything at once.
const emit = glyph.order / rate; // when the letter leaves the right edge
const distance = startX - x; // how far it flies
const land = emit + distance / speed; // when it gets there
if (age < emit) continue; // not yet
if (age < land) {
const left = distance - (age - emit) * speed;
x += left; // still flying,
y += Math.sin(x / wavelength - now * 7) * amplitude * Math.min(1, (left / distance) * 2.5); // on the wave
}
4. Draw it like it's 1993
Nearly everything is a sprite, drawn in a few instanced WebGL 2 calls a frame: letters, copper bars, stars, particles. The pixel font is drawn in text in font.js, one glyph per little grid, and accented letters are composed from a letter and a mark, so Mäkinen and Łódź work too. Anything the font doesn't have, like emoji or Japanese, the browser draws at twice the font's resolution. The glenz vectors are the real thing: 24 see-through triangles, rotated on the CPU and drawn at the chunky virtual resolution.
const SHEETS = [
[2, `
a b c d e f g
..... #.... ..... ....# ..... ..## .....
..... #.... ..... ....# ..... .#.. .....
.###. ####. .###. .#### .###. #### .####
....# #...# #.... #...# #...# .#.. #...#
.#### #...# #.... #...# ##### .#.. #...#
#...# #...# #.... #...# #.... .#.. #...#
.#### ####. .###. .#### .###. .#.. .####
..... ..... ..... ..... ..... .... ....#
..... ..... ..... ..... ..... .... .###.
`],
// …
];
5. Let the page play along
The hero's glenz is part of the party site, not of the chat, so the two talk through events. When the glenz is clicked, or batted three times in three seconds, intro.js hands the chat its position and spin. The chat takes over: the glenz hops and drops onto the scroller, the impact bursts the letters away from where it hit, and the glenz rises to its place beside the chat. When the chat closes, the glenz drops back into the hero.
dispatchEvent(new CustomEvent('scroller-chat:open', {
detail: { glenz: { x, y, r, a, b, c } }, // where it is on screen, in CSS pixels, and its rotation
}));
addEventListener('scroller-chat:closed', () => dropBackIn());
The music keeps time for everything: music.bar() says how far the tune is through the current bar, so the glenz lands every bounce on the first beat, and music.level() flares the copper bars on the drums.
The files
stand-client.js is the part to copy: discovery, one-time creation, idempotent sends, WebSocket receive, recovery, handoffs, follow-ups and link clicks.transcript.js turns Stand's state into what the chat shows: replies, your own lines, notices, link cards and who is speaking.screen.js is the chat screen: layout, the text writer, the input line with its block cursor, scrolling and the header.strip.js is the scroller and the morph from scroller to chat.effects.js and gl.js are the demo: copper bars, starfields, glenz vectors, and WebGL 2 sprites with a glyph atlas.font.js is the pixel font; music.js a four-channel tune synthesized in Web Audio, on by default; intro.js the hero's invitation intro and its glenz, with the same effects.scroller-chat.js puts it on the page: the settings, layout, opening and closing, the keyboard and a screen-reader version of the chat.
Good to know
- Honest about AI. The header and every reply's label name who is answering and say AI Stand-in. If someone from your team takes over, the label changes and a notice says so.
- Closing isn't ending. Esc and Close send the chat back to the scroller, and it carries on there. Only End chat closes it in Stand, as the guide asks.
- Accessible under the pixels. The scroller is a button. A real textarea takes the typing, a live region announces each reply as a whole, and the chat's buttons are real buttons over the pixel labels. With reduced motion, the scroller stands still and text appears at once.
- Light on the GPU. While the chat is closed, the canvas covers only the scroller. The hero's intro only runs while it is on screen.
- Music on, the way demos are. Browsers allow no sound before a visitor's first click, tap or key press, so that is when the tune starts. The Music button in the menu or in the chat, or
/music, turns it off, and the page remembers. It pauses in a hidden tab.
- Keep the attribution. A custom UI keeps the notices and the Powered by Stand link that discovery returns, like the widget does.
- It's a beta. The Visitor API can grow new fields and events. The client ignores what it doesn't know, and you can always go back to the standard widget.
How this was made
This example is nearly a one-shot. Claude Opus 5.5, with max effort, in Claude Code, built it in one session from the prompt below and one follow-up: the pixel font, the effects, the tune and the party. It read the custom chat UI guide, tested the info desk's voice in real conversations with Stand's demo site, and checked its own work in headless Chrome, from screenshots at desktop and phone sizes to a recording of the music.
Now that AI writes the front end, a chat can look like anything your site's world calls for, even a scroller from 1993. Stand's Visitor API keeps the conversation, the AI Stand-in and your team behind it.
The prompt, lightly edited
Think of Future Crew's Unreal and other legendary demos of that era. Could some of their visual effects make a fun experience that transforms into a chat?
Imagine such an effect and build an example for this repo:
- A creative website on a fitting topic
- A demo effect that captures the attention and transforms into a chat
The follow-up
This is cool! Have the music on by default on the page. The track is awesome.
Have the bouncing shape react to the cursor and scrolling, subtly. If the visitor seems to play with it on purpose, have it open the chat, and have it take part in that animation.
If you try this yourself
- Link the custom chat UI guide. It is written as a contract for coding agents, with a brief to paste.
- Start on the
demo Site ID, so the agent can hold real conversations while it builds and tests, then switch to yours.
- Keep the network client apart from the effect.
stand-client.js here is the one from the Vintage terminal; only the presentation is new.
- Ask for the whole effect to be drawn by code, and let the agent see it: a pixel font written as text is easy for a model to draw, render, check and fix.
Copy this example
npx degit standchat/examples/raster-harbour my-scroller