# UI inspiration - reference library

A growing, classified list of places to find UI *ideas* - real app screens, flows, landing pages - and how to use them without copying anyone's work. This is for **inspiration** (app-screen ideas), separate from the rules for making didactic documents (those are the compendium + the digest). Captured 2026-07-19.

## How to use these - the honest rules

- **Link and reference freely.** Cite the source URL when you study a pattern.
- **Take your own notes.** Writing your own plain-word notes on a pattern you saw is normal design research.
- **Capture the real app yourself** (from the App Store or a device) rather than reusing a paid gallery's curated screenshots.
- **Do not** republish a paid gallery's screen grids or video captures, or bypass a paywall - that is their product, not the underlying app's public screens.

## Classify by screen type - the "type of images"

Tag every reference by the kind of screen it shows. App category (finance, health…) and revenue/installs are **metadata on the app**, not screen tags.

1. Onboarding / welcome
2. Permission request (tracking, location, notifications, camera)
3. Sign-up / login
4. Personalization survey (persona or goal picker)
5. Paywall / pricing
6. Social proof (reviews, testimonials, "join 1M users")
7. Dashboard / home
8. List / feed
9. Detail view
10. Search / filter
11. Empty state
12. Form / data entry
13. Scan / capture (camera, barcode, document)
14. Settings / profile
15. Confirmation / success / upsell

## The sources

| Source | Best for | Free or paid | Link |
|---|---|---|---|
| **ScreensDesign** | iOS onboarding + paywall teardowns (video, sorted by revenue) | Free to browse; Pro ($) to filter and export | [screensdesign.com](https://screensdesign.com/) |
| **Mobbin** | The biggest real-screen library - iOS, Android, web; strong flow/pattern search | Freemium | [mobbin.com](https://mobbin.com/) |
| **Layers.to** | Real shipped-product screens and full flows, curated | Free | [layers.to](https://layers.to/) |
| **Page Flows** | Recorded flow videos (onboarding, checkout, sign-up) for web + app | Paid | [pageflows.com](https://pageflows.com/) |
| **Dribbble** | Concept shots and visual style - not real shipped product | Free | [dribbble.com](https://dribbble.com/) |
| **Godly** | Landing-page and marketing-site design | Free | [godly.website](https://godly.website/) |
| **Land-book** | Landing pages, by industry and style | Free | [land-book.com](https://land-book.com/) |
| **UI Sources / UI Garage / SaaS Interface** | Small free galleries of categorized UI screens | Free | - |
| **Muzli / Behance** | Broad creative inspiration; weaker on real-product fidelity | Free | - |

For real UX flows, Mobbin is the strongest and broadest; ScreensDesign is narrower (iOS only) but its video teardowns and revenue sorting are a good way to pick which apps are worth studying.

## Studied references - grows over time

### Scout - health scan app (onboarding + scan flow)

- **Source:** [screensdesign.com/apps/scout-health-analysis](https://screensdesign.com/apps/scout-health-analysis/) · the real app is on the iOS App Store (Health & Fitness).
- **Screen types seen:** personalization survey · permission request · scan/capture · detail view · settings/profile.
- **UI ideas (our notes):**
  - **Personalization survey** - "What best describes you?" persona picker, icon rows, single-select, as step one.
  - **Pre-permission explainer** - the tracking-permission prompt is wrapped in a custom screen that explains *why* before the OS asks. Ask-before-the-ask.
  - **Scan / capture** - barcode and photo scan are the core action, front and centre.
- **Worth stealing:** the pre-permission explainer before the OS dialog; the single-select persona picker to open onboarding.

## Add a reference

Drop a new `### <name>` block under *Studied references*: the source link, the screen types it shows, and two or three plain-word notes on what is worth stealing. If you want the pixels, capture the real app yourself.

## Design galleries — Viktor Oddy's working list (added 02-08-2026, from Frank)

Where to find the reference to imitate, by need. The first move of any motion or site work is picking ONE reference here (the style-reference discipline).

| Need | Gallery |
|---|---|
| Whole websites | [godly.website](https://godly.website) |
| Portfolios | [prettyfolio.com](https://prettyfolio.com) |
| Bento grids | [bentogrids.com](https://bentogrids.com) |
| Social-preview images | [ogimage.gallery](https://ogimage.gallery) |
| Mobile + web app screens | [mobbin.com](https://mobbin.com) |
| Landing pages | [purelanding.page](https://purelanding.page) |
| SaaS websites | [saaspo.com](https://saaspo.com) |
| Fonts | [uncut.wtf](https://uncut.wtf) |
| Animation | [60fps.design](https://60fps.design) |
| Brand redesigns | [rebrand.gallery](https://rebrand.gallery) |
| Icons | [hugeicons.com](https://hugeicons.com) |
| Design systems | [component.gallery](https://component.gallery) |

## Added 02-08-2026 (Viktor Oddy sweep)

| Need | Source |
|---|---|
| Scroll-animation reference site | [seesaw.website](https://seesaw.website) |
| Ready page layouts to study | Figma Community (search the style, open the file) |
| Animated background clips | [motionsites.ai/backgrounds](https://motionsites.ai) |

Digests of the 10 reviewed videos: [viktoroddy/](viktoroddy/) — process, keepers, and what we skipped, per video.

## Added 02-08-2026 (Frank)

| What | Link | Why it matters |
|---|---|---|
| Stripe Press | [press.stripe.com](https://press.stripe.com/) | The reference 3D bookshelf site — books as objects on a shelf, calm type |
| Complete Shelf | [mengto.github.io/complete-shelf](https://mengto.github.io/complete-shelf/) | The same shelf idea, open source — [code](https://github.com/mengto/complete-shelf) readable |
| SceneAI | [sceneai.art](https://sceneai.art/) | A prompt library for beautiful web sections, animated backgrounds, gradients — copy-ready, new designs weekly. Same family as motionsites.ai (Frank, 02-08-2026) |