---
type: Domain Recipe
title: Live Product Demos
description: Recipes for small working product mock-ups (calculators, queues, palettes, sequencers, scripted assistants) that answer honestly and pass the showcase floor.
domain: expression
lifecycle: experimental
provenance_kind: local
---
# Live Product Demos
Primary role: visual technique recipe.
## Repository Boundary
Product-layer HTML, CSS, and JavaScript for `showcase/` works and consumer pages. Never add these to reusable Layout pattern CSS.
## Reusable Method
The most engaging moment in nearly every one of the 54 brand studies is a piece of the product that works: the Wise converter, the Ramp expense queue, the Raycast palette, the teenage engineering sequencer, the Revolut assistant, the Tesla range estimator. They share one shape: a small input, a visible output that changes immediately, and an honest status when an action would need a real backend.
### Input To Output In Reading Order
Recompute everything on every `input` event and write results in the order a reader scans them. The Wise converter writes fee, converted amount, rate, and received amount top to bottom.
```html
```
```js
const calc = () => {
const a = Math.max(0, parseFloat(amt.value.replace(/,/g, "")) || 0);
const fee = a && Math.max(1, a * 0.0041);
fee_.textContent = fee.toFixed(2); rate_.textContent = RATE.toFixed(4);
got.textContent = ((a - fee) * RATE).toLocaleString("en-US", { maximumFractionDigits: 2 });
};
amt.addEventListener("input", calc); calc();
```
### Queues And Toggles
Lists the visitor can clear (Ramp approvals) and switches they can flip (policy rules) need the state in attributes and a spoken confirmation.
```js
li.setAttribute("data-done", ""); // CSS styles the finished row
status.textContent = `${item} approved`; // role="status", visually hidden
left.textContent = remaining ? `${remaining} left` : "All clear";
```
Use `role="switch"` with `aria-checked` for on/off rules and `aria-pressed` for segmented choices.
### Scripted Assistants
A chat mock answers a fixed set of prompt chips. Append both the question and the answer to a `role="log"` region, cap its length, and make every answer say what would really happen.
```js
log.append(q, a); // textContent only, never innerHTML with visitor text
while (log.children.length > 4) log.firstElementChild.remove();
```
### Honest Actions
Anything that would sign up, buy, send, or book is a `