Orbit ring and wallet
Items orbit into a dotted ring, and payment cards fan out of a wallet as the balance rolls in.
Copies a short instruction with your private download link. Paste it into your agent: it downloads the whole skill (the source code, the setup steps and the mistakes we already made for you) and builds the screen.
Works with
What it does
Dot Orbit
Programmatic background of animated dots — each dot lives in its own Voronoi cell and orbits around the cell center, rotating individually. 3×3 cell scan finds the closest dot, and a 1–10 color palette is sampled with optional step quantization. Randomizers use hash functions so no noise texture is bound.
Requires iOS 18+ / macOS 15+ (SwiftUI ShaderLibrary / Shader / Metal stitchable).
Wallet
SWWallet is a playful wallet "pocket" that holds a stack of payment cards. Three (or more) cards are tucked into an olive-green pouch from the top opening: the upper half of each card peeks out while the lower half slides behind the wallet's front panel, creating a real "card inserted into a pocket" look. The front panel shows the combined total balance plus a "Total Balance" caption and an eye toggle that reveals or hides every amount at once.
Two states, driven by a single isRevealed flag:
- Hidden (default) — cards are tucked deep into the pouch and stacked on top of each other; the total reads as a row of bullets (••••••) and the eye button shows
eye.slash. - Revealed — cards spring out one after another into a staggered ladder (first card highest, last card nearest the pocket opening); the total morphs into the real sum (thousands-separated) and the eye button shows
eye.
The staggered "pop out" is built from a per-card .animation modifier with a .delay(index * 0.07), so each card bounces out slightly after the previous one. Number changes use .contentTransition(.numericText()) so the bullets and digits cross-fade smoothly.
Layering (ZStack, bottom to top):
- Card layer — a
RoundedRectangleper card carrying a bold text wordmark and its balance. The lower half is intentionally covered by the front panel.zIndexkeeps the ladder stacked correctly. - Wallet front panel (the pocket) — an
UnevenRoundedRectanglefilled withwalletColor, overlapping the lower half of the cards. Its top edge is the pocket opening. The panel carries: white dashed stitching inset along its edge, the big rounded total balance + caption, and the eye toggle button at the bottom center.
Brand note: wordmarks are rendered as plain bold Text only — no official brand logo image assets are bundled (this is a public repo). Swap the SWWalletCard.sample data for your own accounts.
On `currencyCode`: amounts are formatted with .currency(code:), so the symbol and grouping follow the supplied ISO currency code and the device locale.
What you get
- ✓866 lines of source code, ready to paste
- ✓File Layout
- ✓Source Code
- ✓Usage
- ✓Integration Notes
- ✓Known Tuning Points