Squashed Bank - One Bitcoin in Dollars

The brief

A public prompt. Askmill wrote it from a customer's interview, and the customer chose to put it on the public shelves. The interview itself, and anything about the person, stays private.

The prompt

The complete text, exactly as it is handed to an AI builder.

Download (.txt)

A one-screen price page in the spirit of preev.com: one huge orange number, the cost of one Bitcoin in US dollars right now, resting like a weight on the roof of a cartoon bank that gets flatter the higher the price climbs. Concept: the price is a weight and the bank is the scale. Real mechanics: fetch the spot price every 60 s from the public CoinGecko endpoint (api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd), falling back to Coinbase (api.coinbase.com/v2/prices/BTC-USD/spot); fetch the hourly 7-day series (about 168 points, /coins/bitcoin/market_chart?vs_currency=usd&days=7) on load and every 10 minutes. With low and high as the minimum and maximum of that series including the current price, t = clamp((price - low) / (high - low), 0, 1) and bank height = 100% - 65% x t: full height at the week's lowest, 35% at the week's highest. Two boxes convert both ways on every keystroke: dollars = bitcoin x price, bitcoin = dollars / price. Dollars show 2 decimals, Bitcoin up to 8 with trailing zeros trimmed, and a comma is accepted as the decimal mark. One line states: "Prices are approximate. This is not financial advice."

Mood: cheeky, sunny, deadpan; a Saturday-morning cartoon about a very serious building on a bright day. Light page, because the audience is curious newcomers and the joke must feel friendly. Palette: custard cream #FFF6E5 (page ground), burnt-coffee ink #2B1D0E (every outline and all text), coin orange #F7931A (the star), mint #7DD8B5 (bank walls and columns), bubblegum pink #FF6FA3 (roof and the banker's tie), sky blue #6EC6FF (windows). Ink on cream is at least 14:1. Coin orange is used only for the big number and the 7-day line, always as large shapes carrying an ink outline, never for small text; nothing else uses it. Allowed tints: each colour mixed with cream at 15%, 30% and 50%. No pure black or white, and no red or green for up and down.

Materials and structure: everything is drawn inline as vector shapes with flat fills, 4 px ink outlines, round joins and rounded corners; no photos, no gradients beyond one soft ground shadow. The bank is a classical front: three steps, four columns, a triangular pink roof, two blue windows and a central door, built so the columns bend and bulge outward like rubber when compressed (control points move sideways as height drops; the roof and steps keep their thickness; nothing cracks or breaks). One screen, top to bottom: the name, the number, the bank with a one-line caption, the two boxes, the 7-day line, the small print. The boxes are drawn as bank deposit slips with a thick ink border, labelled "Bitcoin" and "US dollars", with an ink equals sign between them. The 7-day line is a single orange stroke (4 px over a 7 px ink underlay, round caps) with a dot at "now", the words "7 days ago" and "now" at its ends, and two tiny ink tags, "lowest $..." and "highest $..."; no grid, no axes, no candles. A drawn bell beside the bank is the sound switch. Deliberately absent: menus, other currencies, news, sign-up, trader vocabulary.

Typography and voice: one rounded system stack everywhere: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif. The big number at clamp(56px, 16vw, 168px), weight 800, tabular numerals, formatted as "$67,412" with no cents; body 18 px, line-height 1.5; labels 12 px capitals with 0.12em letter-spacing; box digits 24 px. Voice: a solemn bank notice that has not noticed it is being flattened; never mean, never technical. Exact copy: name "SQUASHED BANK"; line beneath "What one Bitcoin costs right now, in US dollars."; chart label "THE LAST 7 DAYS"; freshness line "Updated 12 seconds ago"; bell labels "Sound: off" and "Sound: on". The caption under the bank follows t in four steps: "The bank is fine." (below 0.25), "The bank has always been this height." (0.25 to 0.5), "The bank sees no cause for concern." (0.5 to 0.75), "Structural review postponed." (above 0.75). No price available: a small sign on the door reads "The bank is closed for lunch." with "Last price from 3 minutes ago." beneath. Nothing ever fetched: "No price yet. The bank is closed for lunch." Invalid typing: "Numbers only, please. The bank insists."

Entrance: at 0 ms the name, the bank at full height, both boxes (1 Bitcoin prefilled, or the saved amount) and the last saved price are already drawn, so the page is never empty and paints without waiting for the network. 300-900 ms: the orange number drops from above and lands on the roof with one bounce (cubic-bezier(.3,1.6,.5,1)). 900-1700 ms: the bank sinks to its current height on a soft spring. 1700-2200 ms: the 7-day line draws itself left to right. Afterwards the page stays alive on its own: the bank breathes by 1% every 4 s, a pair of eyes blinks in a window every 10-20 s, and each fresh price nudges the height over 600 ms.

Interaction: typing in either box rewrites the other at once. Tapping or clicking the bank (a button named "Bank") opens the door a crack; a tiny banker in an ink suit and pink tie peeks out, looks up at the number, and hides again, 900 ms in all. Moving a pointer or finger along the 7-day line shows a small ink tag such as "Tuesday, $66,900". Keyboard: Tab order is Bitcoin box, dollar box, bank, 7-day line, bell; Enter or Space on the bank makes the banker peek; Left and Right arrows on the focused line step hour by hour; Escape skips any animation; Shift+B outside the boxes replays the weekly-high moment. Every target is at least 44 px, focus is a 3 px ink ring with 3 px offset, and there is no keyboard trap. Phone: one column, the number spanning the full width, boxes stacked. Wide screen: a centred column of at most 720 px with generous cream around it, boxes side by side around the equals sign, the line stretched beneath.

Signature moment: when a fresh price exceeds the highest value of the 7-day series (at most once every 10 minutes, never during the entrance). 0-250 ms: the number lifts 12 px. 250-450 ms: it slams down and the bank overshoots to 85% of its new height. 450-1100 ms: the bank wobbles like jelly, three decaying swings. At 600 ms the door flies open. 700-2300 ms: the tiny banker bolts out with a briefcase, runs to the right edge of the page and vanishes. 2300-2800 ms: the door swings shut and the bank settles at its new, flatter height while the caption returns to its deadpan line. Resting state: an ink tag "New high this week" stays by the line until the next refresh. Hidden detail: the banker's hat falls off and stays on the ground until the page is reloaded, one hat per escape.

Sound: one sound only, a soft rubbery thud with a short squeak at 250 ms of the weekly-high moment, synthesised, created only after the bell is switched on, off by default; the wobble is its visual equivalent. Reduced motion: no drop, breathing, wobble or run; the bank changes height with a 200 ms fade, the line appears complete, and at a weekly high the banker simply stands beside the door for 3 s. Without a price: the last number stays at 50% opacity, the bank holds still, the door sign hangs, and retries continue every 60 s. Accessibility: a polite live region announces the price only when it is refreshed after a failure and at a weekly high; the number, bank height and line each have a text alternative. Performance: under 150 vector nodes, transforms only, one price request per minute, updates paused while the tab is hidden and refreshed on return, file under 60 KB. Persistence: localStorage key "squashedbank.v1" holds the last amount and box, the sound choice, and the last price with its time. Prohibitions: no ads, pop-ups, cookies, tracking, sign-up, or words such as bullish, bearish or market cap. Deliver as a single self-contained HTML file with no external files, fonts or images; the only network requests are the two price sources. Done when: (1) with internet, the orange number, the squashed bank and the 7-day line are all in place within 3 s; (2) typing 0.5 under Bitcoin shows half the big number under US dollars, and typing dollars fills Bitcoin; (3) with internet off, "The bank is closed for lunch." appears and the last number stays, faded; (4) Shift+B plays the banker's escape and leaves one hat on the ground; (5) the bank stands at full height at the week's lowest and at 35% at the week's highest.

DESCRIPTION
A custard-cream page with almost nothing on it: the words SQUASHED BANK in small ink capitals, and beneath them a fat, rounded orange number with a thick dark outline, the price of one Bitcoin in dollars, sitting squarely on the pink roof of a mint-green cartoon bank. On opening, the number drops from above, bounces once, and the bank sinks under it, its four columns bowing outward like rubber until it reaches the height this week's price deserves. A solemn caption underneath insists "The bank is fine." Below, two deposit slips turn Bitcoin into dollars and back as fast as one can type, and a single orange line traces the last seven days from left to right, marked only with its lowest and highest points. Tap the bank and a tiny banker peeks out of the door, glances up at the weight above him, and ducks back in. When the price sets a new high for the week the number slams down, the building wobbles like jelly, and the banker flees across the page with his briefcase, leaving his hat behind. If the price cannot arrive, a sign appears on the door: "The bank is closed for lunch."

VISUAL TECHNIQUES
- Inline vector bank built from parametric paths: column sides are quadratic curves whose control points move outward as height falls from 100% to 35%
- Squash mapping t = clamp((price - low) / (high - low), 0, 1), height = 100% - 65% x t, recomputed on every refresh
- Under-damped spring for height changes (600 ms, about 8% overshoot); three-swing decaying wobble for the weekly high
- Flat cartoon rendering: 4 px ink outlines #2B1D0E, round joins, six fixed colours plus 15/30/50% cream tints
- Big number as outlined display type: coin orange #F7931A fill, ink stroke painted behind the fill, tabular numerals, clamp(56px, 16vw, 168px)
- Drop-and-bounce entrance with cubic-bezier(.3,1.6,.5,1), staggered at 300, 900 and 1700 ms
- 7-day line as one polyline of about 168 hourly points: 4 px orange over a 7 px ink underlay, drawn in by stroke-dash offset over 500 ms
- Nearest-point lookup on the line for the day-and-price tag, driven by pointer, touch or arrow keys
- Tiny banker as a grouped figure with a two-frame run cycle, moved by transform across the page; door hinged with a scaleX swing
- Caption chosen from four deadpan lines by quartile of t, cross-faded in 200 ms
- Two-source price fetching with an 8 s timeout, 60 s polling, visibility-based pause, and a faded stale state with a door sign
- Two-way conversion with input sanitising (comma or point as decimal mark, 8-decimal Bitcoin, 2-decimal dollars)
- One synthesised sound through Web Audio: low sine thud with a fast pitch drop plus a short squeak, created only after the bell is switched on
- Versioned localStorage record "squashedbank.v1" for amount, active box, sound choice and last known price

INTERACTION MODEL
Typing a number in the Bitcoin box fills the US dollars box instantly, and typing in the dollars box fills the Bitcoin box; anything that is not a number shows "Numbers only, please. The bank insists." under the boxes. Tapping or clicking the bank, or pressing Enter or Space while it is focused, opens the door a crack so the tiny banker peeks out, looks up and hides. Moving a pointer or dragging a finger along the 7-day line shows an ink tag with the day and the price at that point; with the line focused, Left and Right arrows step through it hour by hour. Tab moves in order through the Bitcoin box, the dollars box, the bank, the line and the bell, each with a visible 3 px ink focus ring; all targets are at least 44 px. The bell toggles the single sound, which starts off. Escape skips any running animation and jumps to its resting state. Shift+B, pressed outside the boxes, replays the weekly-high escape. The price refreshes by itself every 60 s and the bank eases to its new height; when no price arrives, the last number fades to half strength, the bank holds still and the door sign reads "The bank is closed for lunch." until a price returns. With reduced motion, nothing drops, wobbles or runs: heights change with a short fade, the line appears complete, and at a weekly high the banker stands beside the door for 3 seconds.

What's inside this prompt

The sections of this prompt, in order, with their length.

1. Overview 186 words
2. Mood 129 words
3. Materials and structure 199 words
4. Typography and voice 189 words
5. Entrance 118 words
6. Interaction 174 words
7. Signature moment 144 words
8. Sound 303 words
9. Description 198 words
10. Visual techniques 285 words
11. Interaction model 247 words

More app prompts

• App prompt · 1,473 words

  Hearthbook

  An app where my partner and I write down what we spend on the house, so we can see each month whether the money will last.

  Example by Askmill

• App prompt · 2,315 words

  La Sporta

  Our buying group of 38 families in Padova needs one place for the monthly orders instead of a spreadsheet and WhatsApp.

  Worked example (simulated interview)

• App prompt · 2,319 words

  Panjski dnevnik

  I keep 14 hives near Ljubljana and want to log inspections on my phone with gloves on.

  Worked example (simulated interview)

• App prompt · 2,394 words

  The Under-9s, Saturday Sorted

  I coach an under-9s team in Bristol and want one app for availability, lifts, oranges and kit washing.

  Worked example (simulated interview)