Anatomy
One key piece of each project, explained step by step.
01
A follow-up, scoped to a passage
- Select part of an answer OCEAN’s core mechanic begins with selecting any fragment of a response. The text and selection shown here are an illustrative sample, not a product capture.
- Surface the key phrases Key phrases from the selected passage become interactive chips. The three phrases and their movement are illustrative; the case does not specify a fixed chip count or extraction timing.
- Act on just that passage One click can expand, simplify or challenge just the selected passage. Expand is chosen in this illustrative sample; the other two actions share that same scope.
- Continue in the same thread The case combines scoped follow-ups inside the conversation with streaming indicators. This illustrative continuation and its reveal timing explain that flow without implying a measured response speed.
02 Bipa
The notched bitcoin card
- The card Bipa's bitcoin credit card, in the white design the whole team voted for as the base of the first demo card.
- A notch in the bottom edge Its exclusive spec: a notch cut into the bottom edge, part of Mastercard's accessibility program for card issuers. In Brazil, Bipa was one of the first to offer it.
- Cut to Mastercard's figure Squared, 2.0 mm deep with 45° sides, 13.285 mm along the edge and 8.36 mm from the side: the squared notch indicates credit.
- $satoshinakamoto Embossed on the front: a nod to the origin, a signal to the community.
- Homologation The card dashboard, virtual card, PIN entry, credentials, Apple Pay, the contactless toggle and blocking went into an 18-page document, MASTERCARD DIGITAL FIRST, submitted to Mastercard.
03 Zentry · The Overlay
Quest progress without leaving the match
- The companion app detects a match event Zentry’s desktop companion app watches the League of Legends match and detects in-game events such as kills and purchases. Here: Mercury’s Treads bought at 12:40 (an illustrative time).
- The matching quest card highlights The purchase matches “Buy Mercury’s Treads Boots Before 15:00” and 12:40 is inside the limit. Its card takes a brighter border and lifts, so the eye finds it without reading every card.
- Its outlined bar fills The outlined progress bar fills to the quest’s goal of one purchase. Anatomy renders the container and fill in neutral tones.
- Completion glows A completing quest gets a bright border glow, then settles into the completed style: struck through with muted light details, like Pick Riven above it. The original case used gold borders and details, a blue magic fill and a cyan glow.
- The player never alt-tabs All of it happens in three cards under the score bar, inside the match. The case measured the overlay at 60 FPS with 19 ms latency: no reason to alt-tab, where a two-second distraction costs a teamfight.
04 Star Atlas
Guild governance on-chain
- A role shapes access Leader, Commander, Explorer, Worker and Recruit: the DAC management interface gives members roles with granular permissions. This reconstruction shows the role hierarchy without inventing a permission table.
- Stage the non-critical changes The management sections include Logo, Cover and Description. These three staged edits are an illustrative sample of the case’s non-critical changes, which wait to be applied together.
- Send them as one batch Non-critical changes batch and apply together to minimize transaction costs. The three-edit, one-transaction example explains that grouping; its counts are illustrative.
- Confirm critical changes separately Critical permission changes require an on-chain confirmation dialog. The interface puts that review before the wallet transaction; the dialog wording here is a reconstruction.
- Show what went on-chain State-changing actions have a clear confirmation flow. The sample ledger separates the non-critical batch from the permission change, with one visible outcome for each; it is not a live wallet or transaction log.
- Keep the treasury shared The DAC’s public identity includes verified on-chain information and ATLAS/POLIS treasury balances. Assets belong to the shared treasury rather than a leader’s personal wallet; no real balances are shown here.
05 TC
The filter island
- One chronological feed Research from BTG Pactual, XP, Genial, Eleven and others lived in one feed, without search or filters. All report titles, dates and counts in this sequence are illustrative, not TC data.
- Anchor the filter island A persistent row of pills sits below navigation and stays visible while the reports scroll. On mobile, the pills become a horizontally scrollable row.
- Expand in place Each pill opens an inline, searchable panel. The feed behind the dropdown blurs; the navigation and filter island keep their position.
- Combine brokerage and date Brokerages support multiple selections with visible chips. A date picker adds another filter without leaving Reports. The June 2019 range shown here is illustrative.
- Return to focused results Close the panel to read the filtered feed. Selected chips keep the current criteria visible. The two matching reports shown here belong only to the illustrative sample.
- Remove a chip Selected filters are removable chips. Removing XP leaves BTG Pactual and the date range selected; the one remaining report is an illustrative sample result.
06 luanralid.com
Interface sound
- The first press unlocks audio
- The element picks its token One listener on the document reads what was pressed: a plain button or link is ui.press, aria-pressed makes a toggle, aria-expanded an open or close. A mouse sounds on pointerdown, a touch when the tap is released.
- A take is drawn from the bag
- Envelope, then the master gain
- One sound per gesture
Built with Anatomy by @wheresryan22 (MIT) All experiments