FreeEffects and animation

Orbit ring and wallet

Items orbit into a dotted ring, and payment cards fan out of a wallet as the balance rolls in.

Free
Free with a ShipSwift account.

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

+70

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:

  1. 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.
  2. 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):

  1. Card layer — a RoundedRectangle per card carrying a bold text wordmark and its balance. The lower half is intentionally covered by the front panel. zIndex keeps the ladder stacked correctly.
  2. Wallet front panel (the pocket) — an UnevenRoundedRectangle filled with walletColor, 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
animationmetalshaderSwiftUIcomponentdisplaywalletcardbalancefinance

More in Effects and animation

Metal dot fields
Free
Metal shaders: fields of dots that roll like waves and flow into living patterns, all drawn on the GPU.
Deep-space starfield
Free
A deep-space starfield in Metal: glowing nebulae drift past twinkling stars.
Neon outlines
Free
Neon outlines that bloom from the center with prism-colored edges, rendered live in Metal.
Liquid metaballs
Free
Colored blobs that drift, melt into one another like liquid, and blend their colors as they merge.
3D network graph
Free
A 3D network graph you can spin. Tap any node and its links light up, with the details below.
Floating color dots
Free
A field of bright colored dots that float and shimmer across the whole screen.
Glass color panels
Free
Stacked glass panels in mirrored layers, with neon gradients flowing through them.
Dot sphere
Free
Drag the slider and scattered points of light pull together into a perfect 3D sphere.
Cells and swirl
Free
Living patterns: a mosaic of cells that keeps reshaping, then a hypnotic color swirl.
Noise veins and blobs
Free
Organic noise shaders: glowing veins that pulse through the dark, then bold color blobs in constant flow.