---
id: "2113133244166094864"
source: https://x.com/shedsgns/status/2113133244166094864
author: "Juliette (@shedsgns)"
media: "video, 3000x1688, 9.0s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Nested Radius Wallet Sheet

## Summary
A small bottom sheet offering three sign-in options and a blue "Other methods" button, shown next to the browser inspector to make one point: inner corners look right when their radius equals the outer radius minus the padding (20px outside, 8px padding, 12px inside). A clean lesson in concentric corners, demonstrated on a real component.

## Style
- Theme: light (with a dark inspector)
- Mood: precise, educational, clean, calm
- Tags: border-radius, nested-corners, bottom-sheet, wallet-picker, devtools, css-tip, ios-style
- Category: Components, Auth

## Palette
| Role | Hex |
|---|---|
| Page | #F2F2F7 |
| Sheet | #FFFFFF |
| Row | #F7F7F9 |
| Hairline | #C9CCD3 |
| Action blue | #007AFF |
| Ink | #202020 |
| Inspector | #202020 |
| Inspector panel | #343336 |
| Inspector text | #4E4F51 |

## Typography
- Row labels: system sans, medium, dark. SF Pro or Inter (500).
- Button: same sans, medium, white on blue.
- Inspector: monospaced code with syntax colours. JetBrains Mono (400).

## Layout
- 16:9 frame (3000x1688) split: component on the left half on a light grey page, browser inspector on the right half.
- Sheet: 320px wide, 8px padding, 20px radius, small grabber notch at the top.
- Three 48px rows (icon tile, label, chevron), then a 48px full-width blue button.
- The video zooms in on the button's corner and the matching CSS rule.

## Elements
- Rows: very light grey fill, inner radius 12px, a 28px rounded icon tile on the left, grey chevron on the right.
- Placeholder icons for three providers (a wave logo, a ghost, a multicolour G).
- Button: `#007AFF`, height 48px, radius `calc(20px - 8px)`.
- Inspector: DOM tree with `.sheet`, `.wallets`, `.sheet__button`; styles panel showing width, padding, radius.

## Motion
- Starts on the full layout; the cursor highlights `.sheet` in the DOM and its styles.
- Zooms into the styles panel (padding 8px, radius 20px), then to the button (radius calc).
- Zooms back out to show the whole sheet with concentric corners.

## Rebuild it
1. Sheet: `w-80 p-2 rounded-[20px] bg-white shadow-sm` on a `#F2F2F7` page.
2. Rows and button inside use `rounded-[12px]` (outer 20 minus padding 8); expose it as a CSS variable: `--inner: calc(var(--outer) - var(--pad))`.
3. Row: `flex items-center gap-3 h-12 px-3 bg-neutral-50` with an icon tile and a chevron icon.
4. Button: `h-12 w-full rounded-[12px] bg-[#007AFF] text-white font-medium`.
5. Use placeholder provider names and icons.

## Generation prompt
A clean iOS-style bottom sheet on a light grey page: three light rows with small rounded icon tiles and chevrons, and a full-width bright blue "Other methods" button, with perfectly concentric rounded corners; beside it a dark browser inspector showing the CSS for padding and border radius; precise, educational, minimal, no real brand logos.