# Premium metal card tilt > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The card screen of Haldane & Wray, an invented private bank. One material does all the work: a pale brushed-titanium card (a four-stop pewter gradient with a stretched fractal-noise grain) whose specular sweep slides across the surface as you tilt it. Drag on the card and it leans up to 14° toward your finger in 3D and springs back on release; on a phone that grants motion access, the device's own tilt drives it. Tapping turns it over to the back, where the CVV stays masked until you press and hold. Below sits a quiet ledger on warm bone paper: available balance in Gloock, three controls (Freeze, Limits, PIN) and three recent lines. The palette avoids the black-and-gold cliché: bone, pewter, a dark graphite for engraving and one deep spruce green for the only active colour. The language is iOS 26-ish: 18px card radius, 28px sheets with a grabber, the iOS sheet curve. ## Reference behaviour 1. On load the card is flat, front up. At 300ms it makes a short showcase: it leans to (rx 3.5°, ry −9.8°), then at 950ms to (−2.1°, 8.4°), then at 1,600ms settles flat, so the sweep crosses the card once. Skipped under reduced motion. 2. **Drag** (pointer down on the card and move): the target tilt is `rx = −14° × (dy / halfHeight)` and `ry = 14° × (dx / halfWidth)`, both clamped to ±14°, measured from the card's centre. The card follows with a lerp of .14 per frame. The sweep band moves from `background-position-x: 50%` by `−4.2% per degree of ry`; a soft radial highlight moves with the tilt too. On release the target returns to 0. 3. **Tap** (pointer up after less than 6px of travel), Enter or Space: the card flips with `rotateY(180deg)` over 700ms (`cubic-bezier(.16,1,.3,1)`). The hint under the card becomes "Tap card to turn back" and a "Hold to show CVV" pill appears beside it. 4. **Hold to show CVV**: pressing (pointer or Space/Enter held) fills the pill with spruce from the left over 350ms; at 350ms the CVV changes from "•••" to "418". Releasing, leaving, cancelling or blurring masks it again immediately. Turning the card back to the front re-masks it. 5. **Arrow keys** on the focused card tilt it 7° in that direction; it returns flat 700ms after the last press. 6. **Device orientation**: on the first touch the demo asks for motion permission where the browser requires it; when granted, `beta` (around 45°) and `gamma` drive the tilt within ±30° of travel, except while dragging. 7. **Freeze** toggles: the tile turns spruce with label "Frozen" (`aria-pressed="true"`), the card desaturates slightly and an engraved "FROZEN" plate fades in on the front (300ms). 8. **Limits** opens a sheet: "Card limits", a note, four rows (Daily card spend £5,000, Cash withdrawals £500, Online and phone On, Travel: France, 4–9 Nov Noted) and a spruce Done button. 9. **PIN** opens a sheet: "Your PIN", the note "Shown only while you hold. Nobody from Haldane & Wray will ask for it.", "••••" at 44px, a dark "Hold to show PIN" button (reveals "7302" after 350ms) and an outlined Done. 10. Sheets close with Done, the scrim or Escape, and focus returns to the control that opened them. ## Structure ``` 390 × 844 · .app padding 56 24 34, max-width 390, centred ┌──────────────────────────────────┐ │ 54px clear │ │ Haldane & Wray (EV) │ 44px header, Gloock 20 + 11px caps, 40px avatar │ PRIVATE CLIENT │ │ ┌──────────────────────────────┐ │ stage: perspective 900px, margin 16 −2 0 │ │ HALDANE & WRAY ◯◯ │ │ card 346 × 216, radius 18 │ │ TITANIUM RESERVE │ │ │ │ [chip] ))) [FROZEN] │ │ chip 44 × 34 at (22, 84) │ │ 4471 0928 6603 4471 │ │ number 21px Gloock, bottom 52 │ │ ELEANOR VANCE EXP 09/30 │ │ 11px caps, bottom 20 │ └──────────────────────────────┘ │ │ Drag to tilt · tap to turn over│ 44px row, margin-top 10 (holds the CVV pill on the back) │ AVAILABLE Limit £60,000 │ │ £48,210.36 Statement 28 Nov│ 40px figures, 24px pence │ [ Freeze ] [ Limits ] [ PIN ] │ three 66px tiles, gap 10 │ RECENT All activity │ │ (M) Maison Avelle −£358.20 │ rows: 38px disc, 10px padding, hairlines │ (F) Fernhill Wine… −£186.00 │ │ (W) From Wray Reserve +£5,000.00 │ │ 34px home indicator │ └──────────────────────────────────┘ Back face: 40px graphite stripe at top 24; signature panel 200 × 38 at (22, 84); CVV box 88 × 38 at (232, 84); lost-card line bottom-left, 11px. ``` - The card is one `