Add expense Gagan

Interactive prototype of the Settld expense composer. Five side-by-side frames show the form across its lifecycle — from empty to fully populated with optionals. Every field is live: type a title to see glyph autosuggestion, enter an amount, open the people picker, and add tag/receipt/note extras.

What to test

  • Type a title (e.g. "farzi cafe", "goa flight") and watch the category glyph autosuggestion kick in
  • Tap the glyph icon to open the peel-open palette and manually override the category
  • Tap the amount area, enter a number, and watch the odometer digit rolls animate
  • Tap "paid by" pill to cycle through payers (You → Aarav → Priya → …)
  • Tap "split with" or the "+ add" chip to open the bottom-sheet people picker with search
  • Tap "+ more" ghost row to reveal tag / attach receipt / add note options
  • Observe the "next: how to split?" CTA unlock (breathing pulse) once amount + at least one person are set
  • Frame 05 shows the picker sheet pre-opened over a populated form

Components used

  • InkText — per-character ink-landing animation on title input
  • AmountRoll — odometer-style digit strips for the amount field
  • GlyphPalette — peel-open category picker (6 options)
  • SplitPreview — live colour-bar strip below split-with row
  • PickerSheet — bottom sheet with search, recents, groups, all contacts
  • MoreSheet — mini contextual sheet for tag / receipt / note
  • IOSDevice — ios-frame wrapper with dynamic island + status bar

Viewport

390 x 844 — iPhone 15 standard. Five frames rendered in a scrollable canvas. No tweaks panel.