Tapwire · wallet infrastructure
One tap. Zero friction.
Instant wallet connections, live status for every session, and infrastructure built for scale.
Iso deck
A macro pad in isometric line art: a cursor selects the floating tile, a tooltip types the tagline and the keys spell a word. Hover the keys to press them, type the word to connect the deck.
Use when: Developer tools, APIs, wallets and infrastructure that want a crafted, playful object instead of a screenshot: one action, made tangible.
Engine: DOM (HTML, SVG, CSS 3D), every browser
Render: …
npx shadcn@latest add @sharingan/iso-deckFirst time? Add the @sharingan registry to your project: getting started.
Add ?motion=final to the address for the repeatable still frame, or ?motion=off for the reduced-motion version.
Props
content what the hero says, real text in the DOM
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string (≤ 48 chars) | — | A short line above the headline. |
| headline * | string (8–60 chars) | — | The promise in two short lines, 3–8 words. |
| subheadline | string (≤ 160 chars) | — | One or two sentences under the headline. |
| primaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| secondaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| keyCta | object | — | The deck's front key, a link of its own (for example to a demo or the docs). |
| label * | string (2–14 chars) | — | Printed on the deck's big front key: 1–2 short words. |
| href * | string (≥ 1 chars) | — | |
| tagline | string (≤ 60 chars) | — | Typed in the tooltip beside the floating tile: one short sentence. |
| connectedLabel | string (≤ 32 chars) | — | Shown in the tooltip once the visitor spells the deck's word. |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| keys | string | "START" | The word on the keys, 3–6 letters or digits. Typing it on the page (or pressing the keys in order) connects the deck. |
| wideKey | string (≤ 10 chars) | "Connect" | The label of the wide key under the letters; empty for none. |
| rows | integer (1–2) | 2 | One row of keys, or two (with the wide key). |
| knob | boolean | true | A knob beside the keys; its dial follows the meter. |
| screen | boolean | true | A screen with a level meter that jumps with each key. |
| cable | "right" | "left" | "none" | "right" | Where the coiled cable leaves the deck. |
| accent | string (≥ 1 chars) | "var(--brand, oklch(0.84 0.17 145))" | The brand colour: the front key, the meter's top and the connected state. |
| accentAlt | string (≥ 1 chars) | — | The second tone (the floating tile, the meter's low end). By default it is derived from the accent. |
| loop | boolean | true | While nobody plays with it, the deck tells its story: select, explain, spell. |
| keyboard | boolean | true | Typing the word on the page presses the keys, while the hero is on screen. |
The same hero as a Web Component
Web Component · no framework
<sg-iso-deck>
The same engine, driven by attributes: another word, a blue accent and the cable on the left. The deck is drawn after the copy.
Docs