Public vault · flows · compare families

Flows

A screen is only good relative to the one before it. Each flow is one product's screens in order, with notes on what every step does well. Captured from public pages; nothing behind a login.

• Stripe Checkout — choose an integration, then configure it

  Stripe · 2 screens · summary is a model draft

  Stripe splits evaluation into two distinct screens: first an effort-sorted chooser ('No code' vs 'UI components') with a single shared demo CTA, then a live checkout preview beside grouped feature toggles that mutate the form in real time.

  1. 1. integration chooser
  2. 2. Checkout preview with options
• Cal.com — book a meeting

  Cal.com · 2 screens · summary is a model draft

  A three-column date and slot picker collapses into a two-column confirmation form while keeping the left-hand meeting context card anchored in place, so the invitee never loses sight of who they are meeting and when.

  1. 1. pick a date and time
  2. 2. booking details form
• Plausible — drill into a traffic source

  Plausible Analytics · 3 screens · summary is a model draft

  Clicking any source row filters the entire single-page dashboard in place and pins a removable filter chip in the top bar; opening the period menu exposes single-key shortcuts for every date range.

  1. 1. live demo dashboard
  2. 2. filtered to one source
  3. 3. period picker
• Excalidraw — sketch, then export

  Excalidraw · 3 screens · summary is a model draft

  An un-gated canvas with a four-item onboarding overlay gives way to a clean workspace, and exporting opens a split modal where a live preview of the actual drawing updates as background and dark-mode switches are toggled.

  1. 1. empty canvas
  2. 2. a first sketch
  3. 3. export image dialog
• Squoosh — pick an image, compare codecs

  Squoosh · 3 screens · summary is a model draft

  A dropzone with four one-click sample photos opens directly into a full-bleed before/after split comparator with twin floating codec cards showing real-time byte savings.

  1. 1. start screen
  2. 2. editor, before/after split
  3. 3. codec switched to WebP
• Linear — triage inbox to keyboard command action

  Linear · 3 screens

  Triage starts in a split master-detail inbox where single-key verbs sit directly over the issue body. Pressing ⌘K opens a 640px centered command palette that morphs in place into a sub-menu with breadcrumb context when assigning a cycle or owner.

  1. 1. Triage Inbox & Split Inspector
  2. 2. Command Menu (⌘K) Filtered State
  3. 3. Sub-menu Assignee & Cycle Picker
• Raycast — launcher query to parameterized quicklink

  Raycast · 3 screens

  The root launcher resolves inline math and currency queries in a 50/50 split card, then turns parameterized quicklinks into inline tab-navigable token slots inside the search input before opening a 35/65 split preview and metadata inspector.

  1. 1. Root Launcher & Calculator Bar
  2. 2. Parameterized Quicklink Inline Slots
  3. 3. Split Preview & Metadata Table
• Vercel — git push to deployment logs and preview comments

  Vercel · 3 screens

  Build logs collapse passing phases into timed accordions and auto-expand warnings; the live preview docks a 40px pill toolbar for DOM-anchored spatial comments; and production promotion or rollback shows a side-by-side commit diff before execution.

  1. 1. Deployment Build Logs & Check Summary
  2. 2. Preview Toolbar & Visual Comment Pin
  3. 3. Production Promote & Instant Rollback Dialog
• Stripe Press — 3D spine browser to margin-annotated chapter

  Stripe Press · 2 screens

  Visitors browse a tactile shelf of 3D foil-stamped book spines that rotate on scroll, then step directly into a three-zone web edition with a sticky chapter rail, a 62ch serif reading column, and margin sidenotes aligned to their anchor sentences.

  1. 1. 3D Spine Catalog Shelf
  2. 2. Margin-Annotated Web Edition Reader
• iOS Dynamic Island — compact sensor pill to spring-expanded live activity

  Apple iOS / Uber · 3 screens

  A 36pt OLED black capsule splits leading iconography and trailing tabular countdowns around the hardware cutout, morphs via a critically damped spring into a 168pt card on long-press, and surfaces real-time vehicle ETA progress and license plate telemetry.

  1. 1. Compact Capsule Dual-Sensor Readout
  2. 2. Fluid Spring Long-Press Expanded Card
  3. 3. Real-Time ETA Progress Bar & License Plate Pill
• PostHog Website OS — desktop icon workspace to pricing slider and docs explorer

  PostHog · 3 screens

  Visitors land on a full-viewport in-browser desktop with double-clickable app icons, open an interactive event-volume pricing calculator inside a draggable OS window frame, and inspect technical documentation in a three-pane file-tree explorer.

  1. 1. Draggable Multi-Window Product Workspace & Dock
  2. 2. Interactive Event Volume Slider Inside OS Frame
  3. 3. Split-Tree File Manager & Markdown Reader Window
• SSENSE — dual-sidebar designer index to sticky wing product detail and ledger bag

  SSENSE · 3 screens

  Browsing starts in a 4-column uncropped lookbook flanked by sticky left/right 11px uppercase filter trees, transitions to a product detail page where construction specs and size selection pin at 35vh beside scrolling photography, and concludes in an accounting-ledger bag.

  1. 1. Left/Right Monospace Category Tree & Uncropped Lookbook Grid
  2. 2. Sticky Dual-Wing Spec Rail & Center-Scroll Gallery
  3. 3. Brutalist 11px Uppercase Ledger & Instant Size Swap