{"generated":"2026-09-16","product":"SaturnAI","free":["ai-slop","homogenized-premium","recipe-unmistakable-site","brand-liquid-death","graza","bruno-simon-portfolio","drop-mechanics","copy-checkout-calm","offer-tier-clarity","data-brutalism","priced-in-decoration-2026"],"mode":"free","source":"https://saturnai.tools/design/agent/library.json","agent":"https://saturnai.tools/design/llms.txt","connect":"https://saturnai.tools/design/connect/","law":"compose → direction. Logo test. Never clone one card. No AI slop, no homogenized premium.","cards":[{"slug":"chatgpt","title":"ChatGPT","kind":"app","category":"ai-dev-tools","tier":"A","platforms":["web","desktop","mobile"],"tags":["ai-chat","model-picker","voice-orb","canvas","markdown-rendering","default-surface"],"patterns":["ai-chat-and-copilot-ux","voice-ui","onboarding-flows","command-palettes-and-keyboard-ux","monetization-upsell-moments","settings-screens"],"updated":"2026-07-22","links":{"site":"https://chatgpt.com","mobbin":"https://mobbin.com/apps/chatgpt"},"one_liner":"the single-column, centered-composer chat window that became the reference frame every other AI product gets compared against, whether it wants to be or not.","words":906,"file":"apps/chatgpt.md","thumb":"jpg"},{"slug":"claude-app","title":"Claude","kind":"app","category":"ai-dev-tools","tier":"S","platforms":["web","ios","android","desktop"],"tags":["warm-paper","serif-voice","artifacts-panel","no-bubble-chat","projects-ia","anti-clinical-ai"],"patterns":["ai-chat-and-copilot-ux","chat-and-messaging-ui","settings-screens","onboarding-flows","dark-mode-and-theming","sharing-and-export-flows"],"updated":"2026-07-22","links":{"site":"https://claude.ai","mobbin":"https://mobbin.com/apps/claude"},"one_liner":"An assistant that reads like a page, not a terminal — warm paper surfaces, a serif voice for prose, and a split-pane \"artifact\" that separates the conversation from the thing the conversation produced.","words":953,"file":"apps/claude-app.md","thumb":"jpg"},{"slug":"cursor","title":"Cursor","kind":"app","category":"ai-dev-tools","tier":"A","platforms":["desktop"],"tags":["ai-ide","inline-diff","dark-first","keyboard-driven","tab-predict","vscode-fork"],"patterns":["ai-chat-and-copilot-ux","command-palettes-and-keyboard-ux","tables-and-dense-data","undo-confirmation-destructive","settings-screens","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://cursor.com","mobbin":"https://mobbin.com/apps/cursor"},"one_liner":"A VS Code fork that turned \"AI writes your code\" into a UI problem — the inline diff, the Tab-to-accept ghost text, and the Composer pane are the vocabulary every AI-coding tool since has copied.","words":885,"file":"apps/cursor.md","thumb":"jpg"},{"slug":"elevenlabs","title":"ElevenLabs","kind":"app","category":"ai-dev-tools","tier":"S","platforms":["web"],"tags":["voice-studio-craft","waveform-ui","model-release-timeline","use-case-first-browsing","agent-analytics","restraint-over-ai-cliche"],"patterns":["ai-chat-and-copilot-ux","dashboards-and-consoles","tables-and-dense-data","media-players","docs-and-changelogs","product-detail-pages"],"updated":"2026-07-26","links":{"site":"https://elevenlabs.io"},"one_liner":"An AI voice/audio platform that skips the purple-gradient sci-fi shorthand most generative-AI products default to, and instead builds trust with a dated model-release timeline on the homepage, real named enterprise logos, and inline audio demos that play instead of just being described.","words":892,"file":"apps/elevenlabs.md","thumb":"jpg"},{"slug":"gemini-app","title":"Gemini","kind":"app","category":"ai-dev-tools","tier":"A","platforms":["web","ios","android"],"tags":["google-gradient","generative-ui","canvas-mode","gen-queue","translucent-chrome","spring-motion"],"patterns":["ai-chat-and-copilot-ux","media-players","loading-skeletons-optimistic-ui","dark-mode-and-theming","motion-language-systems","bottom-sheets-and-modals"],"updated":"2026-07-22","links":{"site":"https://gemini.google.com","mobbin":"https://mobbin.com/apps/gemini"},"one_liner":"A chat-first surface that has to also be an image/video studio and a code canvas — its whole design problem is making three very different output types (text, media grids, live-editable documents) feel like one continuous conversation.","words":919,"file":"apps/gemini-app.md","thumb":"jpg"},{"slug":"github","title":"GitHub + Mobile","kind":"app","category":"ai-dev-tools","tier":"A","platforms":["web","ios","android"],"tags":["primer-design-system","contribution-graph","pr-review","diff-ui","dev-tools","octicons","mobile-triage"],"patterns":["progress-and-data-viz","tables-and-dense-data","dashboards-and-consoles","docs-and-changelogs","push-notification-strategy","command-palettes-and-keyboard-ux"],"updated":"2026-07-22","links":{"site":"https://github.com","mobbin":"https://mobbin.com/apps/github"},"one_liner":"The place code review, contribution tracking, and a documented open-source design system (Primer) fused into a UI vocabulary — diff-review UX and the contribution heatmap — that got copied into products that have nothing to do with code.","words":862,"file":"apps/github.md","thumb":"jpg"},{"slug":"granola","title":"Granola","kind":"app","category":"ai-dev-tools","tier":"A","platforms":["mac","ios"],"tags":["ai-notetaker","warm-neutral","low-density","template-driven","meeting-tools","calm-ui"],"patterns":["onboarding-flows","permission-priming","ai-chat-and-copilot-ux","sharing-and-export-flows","microcopy-and-ux-writing"],"updated":"2026-07-22","links":{"site":"https://granola.ai","mobbin":"https://mobbin.com/apps/granola"},"one_liner":"No bot joins your call, no cloud audio upload — a small floating notepad sits over your meeting, you type sparse shorthand, and the AI enhances it into structured notes the moment the call ends.","words":896,"file":"apps/granola.md","thumb":"jpg"},{"slug":"notebooklm","title":"NotebookLM","kind":"app","category":"ai-dev-tools","tier":"A","platforms":["web","ios"],"tags":["source-grounded-ai","citation-trust","audio-overview","three-pane-layout","generative-artifacts","material-design"],"patterns":["ai-chat-and-copilot-ux","media-players","docs-and-changelogs","dashboards-and-consoles","sharing-and-export-flows"],"updated":"2026-07-22","links":{"site":"https://notebooklm.google","mobbin":"https://mobbin.com/apps/notebooklm"},"one_liner":"Google's research notebook that never lets an AI answer float free of its source — every claim is a clickable citation chip, and the same source pool can be regenerated into a podcast, a study guide, or a mind map on demand.","words":1038,"file":"apps/notebooklm.md","thumb":"jpg"},{"slug":"perplexity","title":"Perplexity","kind":"app","category":"ai-dev-tools","tier":"S","platforms":["web","ios","android"],"tags":["answer-engine","citations","teal-editorial","sources-panel","search-ux","follow-up-rail"],"patterns":["ai-chat-and-copilot-ux","search-ux","tooltips-and-feature-discovery","dashboards-and-consoles","onboarding-flows"],"updated":"2026-07-22","links":{"site":"https://perplexity.ai","mobbin":"https://mobbin.com/apps/perplexity"},"one_liner":"Search reframed as a written answer with its sources shown inline as clickable chips, not a results list — the product that gave \"cite as you generate\" a reusable grammar.","words":808,"file":"apps/perplexity.md","thumb":"jpg"},{"slug":"replit","title":"Replit","kind":"app","category":"ai-dev-tools","tier":"A","platforms":["web","ios"],"tags":["ai-agent-ux","mobile-ide","dark-first","chat-driven-build","deployment-ux","dense-console"],"patterns":["ai-chat-and-copilot-ux","dashboards-and-consoles","command-palettes-and-keyboard-ux","onboarding-flows","checkout-and-cart","loading-skeletons-optimistic-ui"],"updated":"2026-07-22","links":{"site":"https://replit.com"},"one_liner":"Replit rebuilt its whole product around a chat pane that writes, runs, and deploys code, demoting the traditional file-tree-and-editor view to a secondary tab most non-engineer users never open.","words":966,"file":"apps/replit.md","thumb":"jpg"},{"slug":"suno","title":"Suno","kind":"app","category":"ai-dev-tools","tier":"A","platforms":["web","mobile"],"tags":["prompt-to-track","bracket-metatag-control","dual-take-generation","auto-matched-cover-art","branch-not-overwrite-iteration","streaming-grammar-over-sci-fi"],"patterns":["ai-chat-and-copilot-ux","media-players","sharing-and-export-flows","onboarding-flows","forms-and-input"],"updated":"2026-07-26","links":{"site":"https://suno.com"},"one_liner":"A prompt-to-track generator whose real product decision isn't the model, it's the packaging — every generation arrives as two takes to choose between and a matched cover image bundled in, so a thirty-second AI output leaves the tool looking like a finished single instead of a raw file dump.","words":914,"file":"apps/suno.md","thumb":"jpg"},{"slug":"v0","title":"v0 (Vercel)","kind":"app","category":"ai-dev-tools","tier":"A","platforms":["web"],"tags":["generative-ui","shadcn","dark-first","code-preview-duality","chat-driven","streaming-generation"],"patterns":["ai-chat-and-copilot-ux","dashboards-and-consoles","forms-and-input","loading-skeletons-optimistic-ui","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://v0.dev","mobbin":"https://mobbin.com/apps/v0"},"one_liner":"A split-pane generative UI tool where prompts stream directly into working React/Tailwind/shadcn components — less \"app to admire\" than an aesthetic distribution engine every AI-scaffolded product now inherits from.","words":831,"file":"apps/v0.md","thumb":"jpg"},{"slug":"vercel-dashboard","title":"Vercel","kind":"app","category":"ai-dev-tools","tier":"S","platforms":["web"],"tags":["dark-first","geist-design-system","deploy-logs","monospace-accents","dev-tools","restraint"],"patterns":["dashboards-and-consoles","tables-and-dense-data","loading-skeletons-optimistic-ui","settings-screens","command-palettes-and-keyboard-ux","docs-and-changelogs"],"updated":"2026-07-22","links":{"site":"https://vercel.com/dashboard","mobbin":"https://mobbin.com/apps/vercel"},"one_liner":"A hosting console that turns \"did my deploy work\" into a single scannable status glyph, backed by the Geist design system Vercel built and open-sourced for exactly this kind of dense, dark, developer-facing UI.","words":812,"file":"apps/vercel-dashboard.md","thumb":"jpg"},{"slug":"warp","title":"Warp","kind":"app","category":"ai-dev-tools","tier":"A","platforms":["mac","linux"],"tags":["terminal-reinvented","block-based-output","command-palette","ai-inline","dev-tools","keyboard-driven","agentic-ai"],"patterns":["command-palettes-and-keyboard-ux","ai-chat-and-copilot-ux","permission-priming","dashboards-and-consoles","onboarding-flows","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://www.warp.dev","mobbin":"https://mobbin.com/apps/warp"},"one_liner":"Rewrote the terminal's oldest interaction — a scrolling wall of text — into discrete, addressable \"blocks,\" then layered a command palette and inline AI on top of a surface that had resisted modern UI for 40 years.","words":951,"file":"apps/warp.md","thumb":"jpg"},{"slug":"aesop","title":"Aesop","kind":"app","category":"commerce-marketplaces","tier":"S","platforms":["web"],"tags":["quiet-luxury","editorial-serif","muted-palette","apothecary-trust","copy-as-design","dtc","brand-consistency"],"patterns":["product-detail-pages","checkout-and-cart","microcopy-and-ux-writing","landing-page-anatomy","navigation-systems"],"updated":"2026-07-22","links":{"site":"https://aesop.com","mobbin":"https://mobbin.com/apps/aesop"},"one_liner":"A skincare DTC site that sells restraint itself — no urgency copy, no review stars, no popups; trust is built entirely through typography, ingredient prose, and photographic consistency.","words":745,"file":"apps/aesop.md","thumb":"jpg"},{"slug":"alt-marketplace","title":"Alt","kind":"app","category":"commerce-marketplaces","tier":"A","platforms":["ios","web"],"tags":["fintech-borrowed","cards-as-assets","dark-first","portfolio-viz","collectibles","market-data"],"patterns":["progress-and-data-viz","product-detail-pages","checkout-and-cart","dark-mode-and-theming","order-tracking","search-ux"],"updated":"2026-07-22","links":{"site":"https://alt.xyz","mobbin":"https://mobbin.com/apps/alt"},"one_liner":"Sports/trading-card marketplace and vault that treats every card like a ticker — portfolio net-worth chart up top, price history under every card, comps instead of star ratings — borrowing Robinhood/Coinbase's visual language to make a physical collectible read as a liquid asset.","words":834,"file":"apps/alt-marketplace.md","thumb":"jpg"},{"slug":"amazon","title":"Amazon","kind":"app","category":"commerce-marketplaces","tier":"B","platforms":["ios","android","web"],"tags":["density","conversion","dark-patterns","trust-signals","search-dominant","marketplace"],"patterns":["search-ux","checkout-and-cart","product-detail-pages","reviews-and-social-proof","order-tracking","anti-patterns-dark-patterns"],"updated":"2026-07-22","links":{"site":"https://www.amazon.com","mobbin":"https://mobbin.com/apps/amazon"},"one_liner":"Ugly by every modern visual-design metric and still the most-converting commerce surface on earth — because it optimizes for friction removal and earned trust, not for looking good.","words":1041,"file":"apps/amazon.md","thumb":"jpg"},{"slug":"apple-store-app","title":"Apple Store","kind":"app","category":"commerce-marketplaces","tier":"S","platforms":["ios"],"tags":["minimal-chrome","huge-type","product-configurator","zero-urgency","white-space","sf-pro","apple-pay","restrained-motion"],"patterns":["product-detail-pages","checkout-and-cart","pickers-steppers-controls","order-tracking","monetization-upsell-moments"],"updated":"2026-07-22","links":{"site":"https://apple.com/store","mobbin":"https://mobbin.com/apps/apple-store"},"one_liner":"A shopping app with almost nothing on the page but the product, huge type, and a price — proof that stripping out persuasion tactics can be more persuasive than adding them.","words":782,"file":"apps/apple-store-app.md","thumb":"jpg"},{"slug":"collectors-psa","title":"Collectors (PSA)","kind":"app","category":"commerce-marketplaces","tier":"A","platforms":["ios","web"],"tags":["grading-authentication","population-data","set-registry","cert-lookup","collectibles","gamified-ranking","legacy-enterprise-ux"],"patterns":["tables-and-dense-data","progress-and-data-viz","streaks-and-gamification","order-tracking","search-ux","product-detail-pages"],"updated":"2026-07-22","links":{"site":"https://www.psacard.com","mobbin":"https://mobbin.com/apps/psa-card"},"one_liner":"The third-party grading company that turned \"how many exist at this grade\" into a public data product and set-completion into a leaderboard sport — the population-data-plus-GPA-ranking mechanism is the real invention, the visual surface is enterprise-plain and not worth copying.","words":761,"file":"apps/collectors-psa.md","thumb":"jpg"},{"slug":"depop","title":"Depop","kind":"app","category":"commerce-marketplaces","tier":"A","platforms":["ios","android"],"tags":["social-commerce","gen-z","resale","ugc-photography","grid-feed","dm-negotiation","profile-as-shop"],"patterns":["feeds-and-ranking","profile-screens","dm-commerce-and-community-selling","product-detail-pages","camera-and-capture-ui","search-ux"],"updated":"2026-07-22","links":{"site":"https://www.depop.com","mobbin":"https://mobbin.com/apps/depop"},"one_liner":"Peer-to-peer fashion resale where the unit of the app is the Instagram-grid, not the product page — every seller is a mini-brand, every purchase is a DM negotiation first.","words":918,"file":"apps/depop.md","thumb":"jpg"},{"slug":"ebay","title":"eBay","kind":"app","category":"commerce-marketplaces","tier":"B","platforms":["ios","android","web"],"tags":["auctions","marketplace","collectibles","trust-signals","dense-listings","legacy-modernized"],"patterns":["live-commerce-and-auctions","checkout-and-cart","product-detail-pages","reviews-and-social-proof","search-ux"],"updated":"2026-07-22","links":{"site":"https://www.ebay.com","mobbin":"https://mobbin.com/apps/ebay"},"one_liner":"A 30-year-old bid/buy marketplace that rebuilt its surface around condition, authentication, and vaulted collectibles without abandoning the countdown-timer urgency that made it eBay.","words":844,"file":"apps/ebay.md","thumb":"jpg"},{"slug":"etsy","title":"Etsy","kind":"app","category":"commerce-marketplaces","tier":"A","platforms":["ios","android","web"],"tags":["handmade-warmth","seller-story","trust-signals","favoriting","reviews","marketplace"],"patterns":["product-detail-pages","reviews-and-social-proof","search-ux","checkout-and-cart","profile-screens","monetization-upsell-moments"],"updated":"2026-07-22","links":{"site":"https://www.etsy.com","mobbin":"https://mobbin.com/apps/etsy"},"one_liner":"A marketplace that sells the maker before it sells the item — every surface (listing, review, favorite) is engineered to answer \"can I trust this stranger with my money\" rather than \"is this the cheapest option.\"","words":884,"file":"apps/etsy.md","thumb":"jpg"},{"slug":"farfetch","title":"Farfetch","kind":"app","category":"commerce-marketplaces","tier":"A","platforms":["web","mobile"],"tags":["neutral-gallery-canvas","brand-first-plp","delivery-tier-as-merchandising","complete-the-look","multi-boutique-trust","dual-density-browsing"],"patterns":["product-detail-pages","search-ux","checkout-and-cart","landing-page-anatomy","order-tracking"],"updated":"2026-07-26","links":{"site":"https://www.farfetch.com"},"one_liner":"A luxury aggregator spanning thousands of independent boutiques and department stores that solves the trust problem of \"who am I actually buying from\" by running a deliberately neutral near-white, charcoal-type canvas everywhere, then in 2026 pushed further — reframing each brand's own category page as an immersive \"Elevated Brand Page\" that opens on story before it opens on a grid.","words":944,"file":"apps/farfetch.md","thumb":"jpg"},{"slug":"goat","title":"GOAT","kind":"app","category":"commerce-marketplaces","tier":"S","platforms":["ios","android"],"tags":["product-360-spin","editorial-photography","authentication-trust","black-on-white","resale-marketplace","offer-bidding","price-per-variant"],"patterns":["product-detail-pages","drops-and-restocks","checkout-and-cart","order-tracking","search-ux","reviews-and-social-proof"],"updated":"2026-07-22","links":{"site":"https://www.goat.com","mobbin":"https://mobbin.com/apps/goat"},"one_liner":"Streetwear/sneaker resale app that sells trust and object-presence as hard as it sells the shoe — a 360° product spin and an authentication-checkpoint tracker do more selling than any copy on the page.","words":771,"file":"apps/goat.md","thumb":"jpg"},{"slug":"grailed","title":"Grailed","kind":"app","category":"commerce-marketplaces","tier":"A","platforms":["ios","android","web"],"tags":["black-and-white","editorial-restraint","offer-negotiation","authenticity-review","menswear-resale","dense-grid","trust-signals"],"patterns":["product-detail-pages","checkout-and-cart","search-ux","feeds-and-ranking","reviews-and-social-proof","monetization-upsell-moments"],"updated":"2026-08-02","links":{"site":"https://www.grailed.com","mobbin":"https://mobbin.com/apps/grailed"},"one_liner":"Menswear resale marketplace built almost entirely in black, white, and product photography — where negotiation (Make Offer) and authenticity review (in-house photo review for high-risk items, machine moderation otherwise, plus an audited trusted-seller tier) are first-class, disclosed UI objects, not afterthought badges.","words":951,"file":"apps/grailed.md","thumb":"jpg"},{"slug":"gumroad","title":"Gumroad","kind":"app","category":"commerce-marketplaces","tier":"A","platforms":["web"],"tags":["neubrutalist","solo-seller","creator-commerce","checkout","storefront","bold-type"],"patterns":["checkout-and-cart","product-detail-pages","pricing-pages-web","landing-page-anatomy","monetization-upsell-moments","dashboards-and-consoles"],"updated":"2026-07-22","links":{"site":"https://gumroad.com","mobbin":"https://mobbin.com/apps/gumroad"},"one_liner":"A creator storefront platform that rebuilt itself around thick borders, hard shadows, and stock system fonts — trading polish for speed-of-trust, so a single person can look credible enough to take a card number in under a minute.","words":858,"file":"apps/gumroad.md","thumb":"jpg"},{"slug":"mr-porter","title":"MR PORTER","kind":"app","category":"commerce-marketplaces","tier":"A","platforms":["web","ios"],"tags":["menswear-editorial","magazine-commerce","racing-green-brand","the-journal","lookbook-photography","considered-edit"],"patterns":["product-detail-pages","landing-page-anatomy","checkout-and-cart","search-ux","drops-and-restocks"],"updated":"2026-07-26","links":{"site":"https://www.mrporter.com"},"one_liner":"A luxury menswear retailer whose top-level navigation puts editorial content (The Journal) on equal footing with the shop itself, and whose PDPs are shot as styled outfit editorials rather than product-on-white — the reference for treating commerce and criticism as one continuous read instead of two destinations.","words":802,"file":"apps/mr-porter.md","thumb":"jpg"},{"slug":"nike-snkrs","title":"Nike SNKRS","kind":"app","category":"commerce-marketplaces","tier":"A","platforms":["ios","android"],"tags":["drops","hype-commerce","raffle-entry","editorial-feed","scarcity-ui","countdown-timers","ar-unlock"],"patterns":["drops-and-restocks","feeds-and-ranking","product-detail-pages","push-notification-strategy","camera-and-capture-ui"],"updated":"2026-07-22","links":{"site":"https://www.nike.com/snkrs","mobbin":"https://mobbin.com/apps/nike-snkrs"},"one_liner":"A shoppable editorial feed built around one mechanic — the draw — where the interface's whole job is to make waiting, losing, and winning each feel like a distinct, legible product state.","words":975,"file":"apps/nike-snkrs.md","thumb":"jpg"},{"slug":"shop-shopify","title":"Shop (Shopify)","kind":"app","category":"commerce-marketplaces","tier":"S","platforms":["ios","android"],"tags":["post-purchase","order-tracking","one-tap-checkout","arrival-motion","trust-badges","cross-merchant"],"patterns":["order-tracking","checkout-and-cart","push-notification-strategy","product-detail-pages","monetization-upsell-moments","live-activities-widgets"],"updated":"2026-07-22","links":{"site":"https://shop.app","mobbin":"https://mobbin.com/apps/shop"},"one_liner":"A cross-merchant tracking + checkout layer that turns the dead zone between \"order placed\" and \"order arrived\" into the most emotionally engineered screen in commerce, then closes the loop with Shop Pay's one-tap buy.","words":872,"file":"apps/shop-shopify.md","thumb":"jpg"},{"slug":"ssense","title":"SSENSE","kind":"app","category":"commerce-marketplaces","tier":"S","platforms":["web","ios"],"tags":["brutalist-typography","white-space","editorial-commerce","grid-density","luxury-retail","minimal-motion","product-photography"],"patterns":["product-detail-pages","search-ux","checkout-and-cart","drops-and-restocks"],"updated":"2026-07-22","links":{"site":"https://ssense.com","mobbin":"https://mobbin.com/apps/ssense"},"one_liner":"Montreal fashion marketplace that turned extreme white space and grid discipline into a status signal — the reference for restraint-as-luxury in product-page design.","words":707,"file":"apps/ssense.md","thumb":"jpg"},{"slug":"stockx","title":"StockX","kind":"app","category":"commerce-marketplaces","tier":"S","platforms":["ios","android","web"],"tags":["bid-ask-market","price-history-charts","authentication-trust","sneaker-resale","market-ui","verification-flow"],"patterns":["product-detail-pages","order-tracking","progress-and-data-viz","checkout-and-cart","drops-and-restocks"],"updated":"2026-07-22","links":{"site":"https://stockx.com","mobbin":"https://mobbin.com/apps/stockx"},"one_liner":"Turns sneaker/streetwear resale into a two-sided market — bid/ask pricing, a stock-style price chart, and a physical authentication process made visible — so buying a used shoe feels like a financial trade with a paper trail, not a gamble on a stranger.","words":955,"file":"apps/stockx.md","thumb":"jpg"},{"slug":"temu","title":"Temu","kind":"app","category":"commerce-marketplaces","tier":"B","platforms":["ios","android"],"tags":["maximalist","gamification","dark-patterns","urgency-ui","high-density","low-trust"],"patterns":["feeds-and-ranking","checkout-and-cart","streaks-and-gamification","push-notification-strategy","monetization-upsell-moments","anti-patterns-dark-patterns"],"updated":"2026-07-22","links":{"site":"https://www.temu.com","mobbin":"https://mobbin.com/apps/temu"},"one_liner":"A discovery marketplace built like a slot machine — every screen stacks urgency, gamified rewards, and price theater to keep thumbs moving, at the direct cost of the trust signals a storefront normally needs.","words":905,"file":"apps/temu.md","thumb":"jpg"},{"slug":"whatnot","title":"Whatnot","kind":"app","category":"commerce-marketplaces","tier":"S","platforms":["ios","android","web"],"tags":["live-commerce","auctions","real-time-bidding","hype-mechanics","seller-tools","gamified-checkout"],"patterns":["live-commerce-and-auctions","dm-commerce-and-community-selling","checkout-and-cart","streaks-and-gamification","push-notification-strategy","chat-and-messaging-ui"],"updated":"2026-07-22","links":{"site":"https://www.whatnot.com","mobbin":"https://mobbin.com/apps/whatnot"},"one_liner":"Live-video auction marketplace (trading cards, sneakers, collectibles, pop culture) where the entire UI is built to keep a viewer's eyes on the seller's face and hands while a bid ledger, buy-now rail, and chat all update under it without stealing focus.","words":962,"file":"apps/whatnot.md","thumb":"jpg"},{"slug":"affinity-photo","title":"Affinity (by Canva)","kind":"app","category":"creative-editors","tier":"A","platforms":["desktop","web"],"tags":["free-pro-tools","unified-workspace","non-destructive-editing","no-subscription-theater","canva-integration","craft-positioning"],"patterns":["product-detail-pages","landing-page-anatomy","onboarding-flows","settings-screens"],"updated":"2026-07-26","links":{"site":"https://www.affinity.studio"},"one_liner":"Serif's Affinity suite spent a decade selling professional photo/vector/layout tools as a one-time $70 purchase against Adobe's subscription model; after Canva's acquisition it went further in October 2025 and made the entire unified app free — trading the purchase-price differentiator for a bigger one (zero cost, zero subscription) while keeping the same \"no rented software\" promise its whole audience already trusted it for.","words":885,"file":"apps/affinity-photo.md","thumb":"jpg"},{"slug":"canva","title":"Canva","kind":"app","category":"creative-editors","tier":"A","platforms":["web","ios","android"],"tags":["template-first","drag-and-drop","brand-kits","mass-market","non-designer","democratization"],"patterns":["onboarding-flows","paywalls-and-pricing-sheets","activation-checklists","search-ux","sharing-and-export-flows","monetization-upsell-moments"],"updated":"2026-07-22","links":{"site":"https://canva.com","mobbin":"https://mobbin.com/apps/canva"},"one_liner":"Canva doesn't teach layout, typography, or color theory — it lets you search for the outcome (\"Instagram story,\" \"resume,\" \"birthday flyer\") and hands you a finished composition to swap photos and words into, collapsing the whole creative process into pick-then-edit.","words":1025,"file":"apps/canva.md","thumb":"jpg"},{"slug":"capcut","title":"CapCut","kind":"app","category":"creative-editors","tier":"S","platforms":["ios","android","desktop"],"tags":["mobile-timeline","template-economy","auto-captions","contextual-toolbar","magnetic-snapping","export-flow","dark-canvas"],"patterns":["video-editors-and-timelines","sharing-and-export-flows","monetization-upsell-moments","onboarding-flows","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://www.capcut.com","mobbin":"https://mobbin.com/apps/capcut"},"one_liner":"ByteDance's editor made a pro-grade multi-track timeline usable with a thumb by hiding almost everything behind one contextual toolbar, then turned \"editing\" into \"pick a template and drop in your clips.\"","words":908,"file":"apps/capcut.md","thumb":"jpg"},{"slug":"davinci-resolve","title":"DaVinci Resolve","kind":"app","category":"creative-editors","tier":"A","platforms":["desktop","ipad"],"tags":["pro-nle","page-based-ia","node-graph","dense-toolbars","dark-first","keyboard-driven"],"patterns":["video-editors-and-timelines","tables-and-dense-data","command-palettes-and-keyboard-ux","settings-screens","navigation-systems","progress-and-data-viz"],"updated":"2026-07-22","links":{"site":"https://www.blackmagicdesign.com/products/davinciresolve","mobbin":"https://mobbin.com/apps/davinci-resolve"},"one_liner":"A free color-grading tool that grew into a full NLE by putting Edit, Color, Fairlight, and Deliver in separate full-screen \"pages\" instead of one crowded window — the strongest counter-example to consumer minimalism in the library.","words":1000,"file":"apps/davinci-resolve.md","thumb":"jpg"},{"slug":"descript","title":"Descript","kind":"app","category":"creative-editors","tier":"A","platforms":["desktop","web"],"tags":["edit-by-transcript","doc-editor-paradigm","filler-word-removal","screen-recording","waveform-ui","ai-assisted-editing"],"patterns":["video-editors-and-timelines","media-players","undo-confirmation-destructive","dashboards-and-consoles","tooltips-and-feature-discovery","loading-skeletons-optimistic-ui"],"updated":"2026-07-22","links":{"site":"https://www.descript.com","mobbin":"https://mobbin.com/apps/descript"},"one_liner":"A screen-recording + video/podcast editor whose core bet is that a transcript IS the timeline — you cut, reorder, and remove filler words by editing a document, and the video re-cuts underneath you.","words":995,"file":"apps/descript.md","thumb":"jpg"},{"slug":"detail-app","title":"Detail","kind":"app","category":"creative-editors","tier":"A","platforms":["ipad","mac"],"tags":["ai-editing","auto-cut","video-timelines","ipad-native","minimal-chrome","social-video","capture-and-edit"],"patterns":["video-editors-and-timelines","camera-and-capture-ui","onboarding-flows","sharing-and-export-flows","monetization-upsell-moments","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://detail.tv","mobbin":"https://mobbin.com/apps/detail"},"one_liner":"Named 2025 iPad App of the Year (App Store Awards, 2025-12-04) for an AI auto-cut engine that turns raw footage into a paced first draft — positioned as a single app that replaces the shoot → dump-to-desktop → edit → export pipeline.","words":637,"file":"apps/detail-app.md","thumb":"jpg"},{"slug":"figma","title":"Figma","kind":"app","category":"creative-editors","tier":"S","platforms":["web","desktop"],"tags":["multiplayer-canvas","infinite-canvas","properties-panel","dev-mode","plugin-ecosystem","component-driven"],"patterns":["dashboards-and-consoles","tables-and-dense-data","command-palettes-and-keyboard-ux","tooltips-and-feature-discovery","settings-screens","sharing-and-export-flows"],"updated":"2026-07-22","links":{"site":"https://figma.com","mobbin":"https://mobbin.com/apps/figma"},"one_liner":"The design tool that proved a browser-based, real-time-multiplayer canvas could replace native software — and set the reference IA for any app that pairs a freeform canvas with a dense properties panel.","words":909,"file":"apps/figma.md","thumb":"jpg"},{"slug":"framer","title":"Framer","kind":"app","category":"creative-editors","tier":"S","platforms":["web"],"tags":["visual-canvas","no-code","publish-in-one-click","ai-section-gen","cms","marketing-site-as-movement"],"patterns":["landing-page-anatomy","forms-and-input","tooltips-and-feature-discovery","dashboards-and-consoles","pricing-pages-web","motion-language-systems"],"updated":"2026-07-22","links":{"site":"https://framer.com","mobbin":"https://mobbin.com/apps/framer"},"one_liner":"A freeform visual canvas that outputs a real, hosted, responsive website — the reference for collapsing design tool and CMS and publish pipeline into one surface, and for using its own marketing site as a proof-of-craft billboard.","words":856,"file":"apps/framer.md","thumb":"jpg"},{"slug":"halide","title":"Halide","kind":"app","category":"creative-editors","tier":"S","platforms":["ios"],"tags":["pro-camera","manual-controls","progressive-disclosure","haptics","dark-first","viewfinder-ui"],"patterns":["camera-and-capture-ui","pickers-steppers-controls","onboarding-flows","tooltips-and-feature-discovery","progress-and-data-viz"],"updated":"2026-07-22","links":{"site":"https://halide.cam","mobbin":"https://mobbin.com/apps/halide"},"one_liner":"A manual camera app (Lux, makers of Halide/Spectre/Kino) that proves advanced controls don't need a settings panel — they live as draggable zones on top of the live image itself, revealed only when asked for.","words":823,"file":"apps/halide.md","thumb":"jpg"},{"slug":"inshot","title":"InShot","kind":"app","category":"creative-editors","tier":"B","platforms":["ios","android"],"tags":["video-editing","icon-toolbar","aspect-ratio","ad-supported","casual-creator","contextual-toolbar","sticker-economy"],"patterns":["video-editors-and-timelines","monetization-upsell-moments","sharing-and-export-flows","bottom-sheets-and-modals","camera-and-capture-ui"],"updated":"2026-07-22","links":{"site":"https://inshot.com","mobbin":"https://mobbin.com/apps/inshot"},"one_liner":"A tool-tray video/photo editor built around a single mechanic — the bottom bar swaps into whatever tool you tapped — aimed at casual creators who need a ratio-correct export, not a timeline.","words":857,"file":"apps/inshot.md","thumb":"jpg"},{"slug":"klim-type","title":"Klim Type Foundry","kind":"app","category":"creative-editors","tier":"A","platforms":["web"],"tags":["type-criticism-as-marketing","homage-typeface-lineage","plain-black-on-white-specimen","fonts-in-use-attribution","essay-length-product-copy","no-lifestyle-imagery"],"patterns":["product-detail-pages","docs-and-changelogs","landing-page-anatomy"],"updated":"2026-07-26","links":{"site":"https://klim.co.nz"},"one_liner":"A Wellington, New Zealand foundry that replaces the industry's usual \"inspired by\" one-liner with a genuine short essay of type-historical criticism for every release — naming the exact source typeface it's answering (Helvetica, Futura, Franklin Gothic, Plantin, Clearface) and arguing its design position in relation to it — while the site itself stays almost entirely black-text-on-white, letting the writing and the letterforms carry the entire sell.","words":1107,"file":"apps/klim-type.md","thumb":"jpg"},{"slug":"lightroom-mobile","title":"Lightroom Mobile","kind":"app","category":"creative-editors","tier":"A","platforms":["ios","android"],"tags":["pro-editing","masking-ux","before-after","preset-sync","dark-editor-chrome","non-destructive"],"patterns":["photo-editors","bottom-sheets-and-modals","tooltips-and-feature-discovery","sharing-and-export-flows","paywalls-and-pricing-sheets","onboarding-flows"],"updated":"2026-07-22","links":{"site":"https://adobe.com/products/photoshop-lightroom","mobbin":"https://mobbin.com/apps/lightroom"},"one_liner":"Adobe took a desktop tool built around panels and sliders and rebuilt its entire interaction model around one horizontal filmstrip and one bottom sheet, so masking and curves work with a single thumb.","words":943,"file":"apps/lightroom-mobile.md","thumb":"jpg"},{"slug":"lottiefiles","title":"LottieFiles","kind":"app","category":"creative-editors","tier":"A","platforms":["web","desktop"],"tags":["motion-asset-platform","designer-dev-handoff","state-machines","no-code-interactivity","ai-motion-copilot","plugin-ecosystem"],"patterns":["product-detail-pages","docs-and-changelogs","sharing-and-export-flows","ai-chat-and-copilot-ux"],"updated":"2026-07-26","links":{"site":"https://lottiefiles.com"},"one_liner":"LottieFiles started as a marketplace and file-conversion utility around the open Lottie/dotLottie animation format, then built Lottie Creator — a full browser-based editor with state machines, a natural-language \"Motion Copilot,\" and real-time data binding — so the same company that standardized the file format now owns the tool most people use to actually author it.","words":894,"file":"apps/lottiefiles.md","thumb":"jpg"},{"slug":"midjourney-web","title":"Midjourney (web)","kind":"app","category":"creative-editors","tier":"A","platforms":["web"],"tags":["gallery-first","prompt-grammar","parameter-chips","rating-loops","generative","imagine-bar"],"patterns":["feeds-and-ranking","product-detail-pages","tooltips-and-feature-discovery","monetization-upsell-moments","sharing-and-export-flows","ai-chat-and-copilot-ux"],"updated":"2026-07-22","links":{"site":"https://www.midjourney.com","mobbin":"https://mobbin.com/apps/midjourney"},"one_liner":"Midjourney moved off Discord onto its own site by keeping the prompt as the only input surface but rebuilding everything downstream as an infinite image grid — generation, rating, and remixing all happen by hovering and clicking tiles, not by scrolling a chat log.","words":960,"file":"apps/midjourney-web.md","thumb":"jpg"},{"slug":"pangram-pangram","title":"Pangram Pangram","kind":"app","category":"creative-editors","tier":"A","platforms":["web"],"tags":["live-pangram-specimens","type-as-product-and-ui","try-for-free-gate","fonts-in-use-social-proof","microsite-per-typeface","status-badge-taxonomy"],"patterns":["product-detail-pages","landing-page-anatomy","pricing-pages-web","docs-and-changelogs","sharing-and-export-flows"],"updated":"2026-07-26","links":{"site":"https://pangrampangram.com"},"one_liner":"Instead of showing static preview images of its typefaces, Pangram Pangram renders every card on the homepage as a live, in-browser specimen — real pangram sentences (its namesake device) set in the actual webfont at actual weight — so the interface itself is the proof of the product, and a \"Try for Free\" gate replaces the industry-standard locked PDF specimen sheet.","words":1146,"file":"apps/pangram-pangram.md","thumb":"jpg"},{"slug":"photoroom","title":"Photoroom","kind":"app","category":"creative-editors","tier":"A","platforms":["ios","android","web"],"tags":["ai-utility","background-removal","batch-editing","commerce-photos","one-tap-tools","template-driven"],"patterns":["photo-editors","camera-and-capture-ui","onboarding-flows","paywalls-and-pricing-sheets","product-detail-pages","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://www.photoroom.com","mobbin":"https://mobbin.com/apps/photoroom"},"one_liner":"A tap-in, tap-out editor built around one killer primitive (instant background removal) that expanded into batch processing and shoppable-photo templates without losing the single-purpose feel.","words":850,"file":"apps/photoroom.md","thumb":"jpg"},{"slug":"procreate","title":"Procreate","kind":"app","category":"creative-editors","tier":"S","platforms":["ipad"],"tags":["gesture-driven","brush-engine","one-time-purchase","pro-tool","quickmenu","dark-canvas"],"patterns":["tooltips-and-feature-discovery","undo-confirmation-destructive","motion-language-systems","settings-screens","sharing-and-export-flows","onboarding-flows"],"updated":"2026-07-22","links":{"site":"https://procreate.com","mobbin":"https://mobbin.com/apps/procreate"},"one_liner":"iPad painting app that gets out of the way of the canvas — nearly every command lives in a gesture or a radial menu, not a menu bar, and the chrome disappears the instant you touch the screen.","words":851,"file":"apps/procreate.md","thumb":"jpg"},{"slug":"rive","title":"Rive","kind":"app","category":"creative-editors","tier":"S","platforms":["web","desktop"],"tags":["state-machines","interactive-motion","node-graph","real-time-rendering","design-dev-handoff","live-community-gallery"],"patterns":["motion-language-systems","landing-page-anatomy","docs-and-changelogs","sharing-and-export-flows","product-detail-pages"],"updated":"2026-07-26","links":{"site":"https://rive.app"},"one_liner":"An interactive-animation editor whose central move is authoring motion as a visual graph of states and transitions rather than a timeline of baked clips — so what a designer builds in the tool is the literal thing that ships, at native frame rates, on any platform, with no export-then-rebuild step in between.","words":908,"file":"apps/rive.md","thumb":"jpg"},{"slug":"runway","title":"Runway","kind":"app","category":"creative-editors","tier":"A","platforms":["web"],"tags":["ai-generation","dark-first","credit-economy","generation-queue","creative-tools","async-jobs"],"patterns":["video-editors-and-timelines","monetization-upsell-moments","loading-skeletons-optimistic-ui","progress-and-data-viz","dashboards-and-consoles","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://runwayml.com","mobbin":"https://mobbin.com/apps/runway"},"one_liner":"A dark-canvas AI video/image studio (Gen-3/Gen-4 model family) built around a single hard problem most tools now share — generation is slow and async, so the UI's whole job is making the wait legible and the cost visible before you commit credits.","words":893,"file":"apps/runway.md","thumb":"jpg"},{"slug":"spline","title":"Spline","kind":"app","category":"creative-editors","tier":"A","platforms":["web"],"tags":["layer-based-materials","no-code-state-machine","one-script-embed","community-remix-library","own-brand-typeface","browser-native-3d"],"patterns":["product-detail-pages","sharing-and-export-flows","landing-page-anatomy","onboarding-flows","docs-and-changelogs"],"updated":"2026-07-26","links":{"site":"https://spline.design"},"one_liner":"A browser-native 3D design platform that strips the two biggest barriers out of spatial design — install-and-learn-a-DCC-tool and node-graph shader authoring — by running entirely in-tab with Figma-familiar panels, and lets a finished scene ship as a single drop-in web component instead of an exported, re-imported asset.","words":867,"file":"apps/spline.md","thumb":"jpg"},{"slug":"theatre-js","title":"Theatre.js","kind":"app","category":"creative-editors","tier":"A","platforms":["web"],"tags":["animation-sequencer","dopesheet-ui","keyframe-editing","dev-tool-overlay","open-source","stack-agnostic"],"patterns":["motion-language-systems","video-editors-and-timelines","docs-and-changelogs"],"updated":"2026-07-26","links":{"site":"https://www.theatrejs.com"},"one_liner":"A JavaScript animation library that ships an actual film-editor-style sequencer UI (tracks, keyframes, a scrubbable playhead) as a floating overlay on top of any running web page — proving a motion-design tool can live inside a developer's real running app instead of exporting to it.","words":851,"file":"apps/theatre-js.md","thumb":"jpg"},{"slug":"vn-editor","title":"VN Video Editor","kind":"app","category":"creative-editors","tier":"A","platforms":["ios","android","desktop"],"tags":["dark-first","prosumer","multi-track-timeline","curve-speed","lut-workflow","dense-toolbar","no-watermark-free","precision-editing"],"patterns":["video-editors-and-timelines","bottom-sheets-and-modals","sharing-and-export-flows","dark-mode-and-theming","onboarding-flows"],"updated":"2026-07-22","links":{"site":"https://vn.video","mobbin":"https://mobbin.com/apps/vn"},"one_liner":"A near-black, icon-dense multi-track editor that ports Premiere-grade concepts (bezier speed curves, LUTs, keyframes) into a phone, and earns trust by staying out of the footage's way.","words":772,"file":"apps/vn-editor.md","thumb":"jpg"},{"slug":"vsco","title":"VSCO","kind":"app","category":"creative-editors","tier":"A","platforms":["ios","android"],"tags":["filter-first","editorial","no-likes","preset-economy","muted-palette","taste-as-product"],"patterns":["photo-editors","video-editors-and-timelines","profile-screens","monetization-upsell-moments","feeds-and-ranking","sharing-and-export-flows"],"updated":"2026-07-22","links":{"site":"https://vsco.co","mobbin":"https://mobbin.com/apps/vsco"},"one_liner":"A filter/preset editing app that built its entire identity on removing the metrics (no likes, no public follower counts on the feed) so the grid reads as curation, not competition.","words":780,"file":"apps/vsco.md","thumb":"jpg"},{"slug":"cash-app","title":"Cash App","kind":"app","category":"fintech-trading","tier":"S","platforms":["ios","android"],"tags":["brand-green","cashtag-identity","amount-first-entry","gamified-savings","p2p-payments","anti-bank"],"patterns":["onboarding-flows","checkout-and-cart","profile-screens","monetization-upsell-moments","referral-and-invite","progress-and-data-viz"],"updated":"2026-07-22","links":{"site":"https://cash.app","mobbin":"https://mobbin.com/apps/cash-app"},"one_liner":"A P2P wallet that made currency feel expressive — huge amount-first entry, a durable public $cashtag identity, and celebration motion where every competitor plays it clinical.","words":811,"file":"apps/cash-app.md","thumb":"jpg"},{"slug":"coinbase","title":"Coinbase","kind":"app","category":"fintech-trading","tier":"A","platforms":["ios","android","web"],"tags":["fintech","crypto-trading","staged-disclosure","trust-ui","dense-data","price-charts","kyc-onboarding"],"patterns":["onboarding-flows","product-detail-pages","dashboards-and-consoles","tables-and-dense-data","progress-and-data-viz","checkout-and-cart"],"updated":"2026-07-22","links":{"site":"https://coinbase.com","mobbin":"https://mobbin.com/apps/coinbase"},"one_liner":"A regulated exchange that solved \"crypto for normies\" by running two products in one app — a simple buy/sell surface by default, and a dense professional terminal (Advanced Trade) one deliberate tap away.","words":893,"file":"apps/coinbase.md","thumb":"jpg"},{"slug":"copilot-money","title":"Copilot Money","kind":"app","category":"fintech-trading","tier":"S","platforms":["ios"],"tags":["personal-finance","custom-charts","category-icons","haptics","ada-award","light-first","data-viz"],"patterns":["dashboards-and-consoles","progress-and-data-viz","onboarding-flows","permission-priming","tables-and-dense-data","haptics-and-sound"],"updated":"2026-07-22","links":{"site":"https://copilot.money","mobbin":"https://mobbin.com/apps/copilot-money"},"one_liner":"Bank-linked budgeting app (Apple Design Award winner, 2023) that treats every transaction as a chart-able data point — the reference for turning boring ledger data into custom, native-feeling visualization without resorting to a generic charting library's look.","words":794,"file":"apps/copilot-money.md","thumb":"jpg"},{"slug":"hyperliquid","title":"Hyperliquid","kind":"app","category":"fintech-trading","tier":"A","platforms":["web"],"tags":["dark-first","trading-terminal","dense","monospace-numerals","derivatives","on-chain"],"patterns":["dashboards-and-consoles","tables-and-dense-data","progress-and-data-viz","forms-and-input","pickers-steppers-controls","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://app.hyperliquid.xyz","mobbin":"https://mobbin.com/apps/hyperliquid"},"one_liner":"An order-book trading terminal that copies the Binance/FTX-era professional layout almost exactly, then wins on latency-feel and information density rather than novel visual design.","words":890,"file":"apps/hyperliquid.md","thumb":"jpg"},{"slug":"kalshi","title":"Kalshi","kind":"app","category":"fintech-trading","tier":"A","platforms":["web","ios"],"tags":["prediction-markets","regulated-fintech","kyc-onboarding","probability-ui","data-viz","light-mode","event-contracts"],"patterns":["onboarding-flows","permission-priming","progress-and-data-viz","tables-and-dense-data","checkout-and-cart","microcopy-and-ux-writing"],"updated":"2026-07-22","links":{"site":"https://kalshi.com","mobbin":"https://mobbin.com/apps/kalshi"},"one_liner":"Turns \"buy a derivatives contract\" into \"tap YES on a headline\" — the whole product is built to make a regulated, KYC-gated exchange feel like scrolling a feed of yes/no questions.","words":923,"file":"apps/kalshi.md","thumb":"jpg"},{"slug":"kraken-pro","title":"Kraken Pro","kind":"app","category":"fintech-trading","tier":"A","platforms":["ios","web"],"tags":["dark-terminal","data-brutalism","orderbook","dense-tables","monospace","real-time"],"patterns":["dashboards-and-consoles","tables-and-dense-data","progress-and-data-viz","forms-and-input","command-palettes-and-keyboard-ux"],"updated":"2026-07-22","links":{"site":"https://pro.kraken.com","mobbin":"https://mobbin.com/apps/kraken-pro"},"one_liner":"Multi-pane order-book/chart/ticket workspace built for eyes that scan numbers all day — density is the feature, not a compromise.","words":875,"file":"apps/kraken-pro.md","thumb":"jpg"},{"slug":"mercury-bank","title":"Mercury","kind":"app","category":"fintech-trading","tier":"S","platforms":["web","ios"],"tags":["editorial-fintech","restraint","warm-neutral","dense-tables","b2b-banking","serif-accent"],"patterns":["dashboards-and-consoles","tables-and-dense-data","onboarding-flows","forms-and-input","settings-screens","checkout-and-cart"],"updated":"2026-07-22","links":{"site":"https://mercury.com","mobbin":"https://mobbin.com/apps/mercury"},"one_liner":"Startup banking that reads like a design studio's own tool, not a bank — the reference for treating money UI as calm, dense information design instead of a wall of gradients and shields.","words":826,"file":"apps/mercury-bank.md","thumb":"jpg"},{"slug":"monzo","title":"Monzo","kind":"app","category":"fintech-trading","tier":"A","platforms":["ios","android"],"tags":["coral-brand","feed-as-ledger","friendly-fintech","pots","salary-sorter","card-linked"],"patterns":["dashboards-and-consoles","feeds-and-ranking","progress-and-data-viz","push-notification-strategy","onboarding-flows","monetization-upsell-moments"],"updated":"2026-07-22","links":{"site":"https://monzo.com","mobbin":"https://mobbin.com/apps/monzo"},"one_liner":"UK challenger bank that made money legible — a real-time transaction feed doubling as a ledger, plus \"pots\" and a salary sorter that turn saving into a placement problem instead of a discipline problem.","words":857,"file":"apps/monzo.md","thumb":"jpg"},{"slug":"polymarket","title":"Polymarket","kind":"app","category":"fintech-trading","tier":"A","platforms":["web","ios"],"tags":["odds-as-price","prediction-markets","crypto-native","dense-data","trust-ux","real-time"],"patterns":["tables-and-dense-data","progress-and-data-viz","checkout-and-cart","feeds-and-ranking","dashboards-and-consoles","order-tracking"],"updated":"2026-07-22","links":{"site":"https://polymarket.com","mobbin":"https://mobbin.com/apps/polymarket"},"one_liner":"An event-market exchange that turns \"what do people think will happen\" into a single trustable number — cents-as-percent — and builds every surface around defending that number's credibility.","words":927,"file":"apps/polymarket.md","thumb":"jpg"},{"slug":"public-com","title":"Public","kind":"app","category":"fintech-trading","tier":"A","platforms":["mobile","web"],"tags":["no-pfof-trust","multi-asset-single-login","thematic-investment-plans","ticker-comment-threads","ai-fundamentals-summary","adult-portfolio-craft"],"patterns":["dashboards-and-consoles","onboarding-flows","pricing-pages-web","tables-and-dense-data","reviews-and-social-proof","forms-and-input"],"updated":"2026-07-26","links":{"site":"https://public.com"},"one_liner":"A multi-asset brokerage that put a done-away-with revenue stream — payment for order flow — at the center of its brand, then built a single login spanning stocks, bonds, treasuries, crypto, and fractionalized collectibles around a navy-and-cream register that reads like a serious financial product instead of a gamified trading app.","words":959,"file":"apps/public-com.md","thumb":"jpg"},{"slug":"ramp","title":"Ramp","kind":"app","category":"fintech-trading","tier":"A","platforms":["web"],"tags":["dense-tables","fintech","approval-workflows","accent-restraint","command-palette","enterprise-ui","spend-management"],"patterns":["dashboards-and-consoles","tables-and-dense-data","command-palettes-and-keyboard-ux","forms-and-input","onboarding-flows","loading-skeletons-optimistic-ui"],"updated":"2026-07-22","links":{"site":"https://ramp.com","mobbin":"https://mobbin.com/apps/ramp"},"one_liner":"Corporate-card-and-spend-management platform where black-and-white restraint plus one lime accent carries an entire finance-ops product without the density ever tipping into noise.","words":757,"file":"apps/ramp.md","thumb":"jpg"},{"slug":"revolut","title":"Revolut","kind":"app","category":"fintech-trading","tier":"A","platforms":["ios","android"],"tags":["super-app","card-controls","animated-balances","premium-upsell","dark-mode","dense-nav","live-ticker"],"patterns":["dashboards-and-consoles","monetization-upsell-moments","progress-and-data-viz","settings-screens","dark-mode-and-theming","pickers-steppers-controls"],"updated":"2026-07-22","links":{"site":"https://revolut.com","mobbin":"https://mobbin.com/apps/revolut"},"one_liner":"A banking-plus-crypto-plus-stocks-plus-insurance app that hides its own sprawl behind a two-tab-deep hub, so density never reaches the home screen.","words":864,"file":"apps/revolut.md","thumb":"jpg"},{"slug":"robinhood","title":"Robinhood","kind":"app","category":"fintech-trading","tier":"S","platforms":["ios","android","web"],"tags":["fintech","dark-mode","data-viz","order-flow","gamification-ethics","chart-interaction","dollar-based-investing"],"patterns":["progress-and-data-viz","checkout-and-cart","onboarding-flows","streaks-and-gamification","anti-patterns-dark-patterns","dashboards-and-consoles"],"updated":"2026-07-22","links":{"site":"https://robinhood.com","mobbin":"https://mobbin.com/apps/robinhood"},"one_liner":"Turned a share-price ticker into a single huge number and a one-tap buy button; the industry's cautionary tale on where consumer-product delight mechanics cross into gamified financial risk.","words":898,"file":"apps/robinhood.md","thumb":"jpg"},{"slug":"stripe-dashboard","title":"Stripe Dashboard","kind":"app","category":"fintech-trading","tier":"S","platforms":["web","ios"],"tags":["test-live-mode","api-object-browser","docs-embedded","dense-tables","fintech-trust","monospace-data"],"patterns":["dashboards-and-consoles","tables-and-dense-data","docs-and-changelogs","forms-and-input","settings-screens","error-offline-recovery"],"updated":"2026-07-22","links":{"site":"https://dashboard.stripe.com","mobbin":"https://mobbin.com/apps/stripe"},"one_liner":"The console every \"admin panel\" secretly wants to be — dense object tables, a hard test/live boundary, and inline docs that make raw API data legible without a second tab.","words":834,"file":"apps/stripe-dashboard.md","thumb":"jpg"},{"slug":"tradingview","title":"TradingView","kind":"app","category":"fintech-trading","tier":"S","platforms":["web","ios","android"],"tags":["charting","dense","dark-first","drawing-tools","social-layer","watchlists"],"patterns":["tables-and-dense-data","progress-and-data-viz","dashboards-and-consoles","tooltips-and-feature-discovery","monetization-upsell-moments","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://tradingview.com","mobbin":"https://mobbin.com/apps/tradingview"},"one_liner":"A full charting engine (bars, drawing tools, alerts, social \"ideas\" feed) squeezed into a workspace that stays legible at extreme information density — the reference for how a data-dense financial tool avoids feeling like a spreadsheet.","words":897,"file":"apps/tradingview.md","thumb":"jpg"},{"slug":"wealthfront","title":"Wealthfront","kind":"app","category":"fintech-trading","tier":"A","platforms":["web","ios","android"],"tags":["robo-advisor","calm-money-ui","serious-money-type","automated-investing","disclosure-as-ui","persona-routing"],"patterns":["dashboards-and-consoles","onboarding-flows","progress-and-data-viz","forms-and-input","paywalls-and-pricing-sheets","settings-screens"],"updated":"2026-07-26","links":{"site":"https://www.wealthfront.com"},"one_liner":"Automated-investing platform that sells long-term money management with oversized APY/return numerals, a visible legal footnote clipped to nearly every claim, and a homepage that splits visitors into \"let us manage it\" vs. \"I'll manage it myself\" through layout alone — no quiz required.","words":858,"file":"apps/wealthfront.md","thumb":"jpg"},{"slug":"wise","title":"Wise","kind":"app","category":"fintech-trading","tier":"A","platforms":["web","ios","android"],"tags":["fee-transparency","real-exchange-rate","cross-border-payments","green-trust-brand","multi-currency","honest-pricing"],"patterns":["checkout-and-cart","pricing-pages-web","onboarding-flows","forms-and-input","dashboards-and-consoles","microcopy-and-ux-writing"],"updated":"2026-07-26","links":{"site":"https://wise.com"},"one_liner":"Cross-border money app whose homepage isn't a pitch, it's a working calculator — type an amount and currency pair and it shows the real mid-market rate, the exact fee, and the arrival time before asking for a signup, turning \"we're transparent about fees\" from a claim into something you can watch happen.","words":845,"file":"apps/wise.md","thumb":"jpg"},{"slug":"alto-odyssey","title":"Alto's Odyssey","kind":"app","category":"games-frontends","tier":"A","platforms":["ios","android"],"tags":["ambient","silhouette-art","one-thumb-input","gradient-skies","zen-mode","minimal-hud"],"patterns":["onboarding-flows","motion-language-systems","streaks-and-gamification","monetization-upsell-moments","navigation-systems","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://www.altoodyssey.com","mobbin":"https://mobbin.com/apps/altos-odyssey"},"one_liner":"Sandboarding endless-runner (Snowman, 2018, sequel to Alto's Adventure) that turns a single tap-and-hold gesture and a shifting sky into the entire interface — near-zero chrome, the lighting engine does the branding.","words":849,"file":"apps/alto-odyssey.md","thumb":"jpg"},{"slug":"backbone","title":"Backbone","kind":"app","category":"games-frontends","tier":"A","platforms":["ios","android"],"tags":["dark-first","controller-hardware","capture-ui","game-aggregation","box-art-color","editorial-grid"],"patterns":["onboarding-flows","camera-and-capture-ui","paywalls-and-pricing-sheets","permission-priming","live-activities-widgets","sharing-and-export-flows"],"updated":"2026-07-22","links":{"site":"https://playbackbone.com","mobbin":"https://mobbin.com/apps/backbone"},"one_liner":"The app half of the Backbone One controller — a game-library aggregator and capture/share layer whose entire design job is to disappear behind a physical button press and the game's own box art.","words":811,"file":"apps/backbone.md","thumb":"jpg"},{"slug":"balatro","title":"Balatro","kind":"app","category":"games-frontends","tier":"S","platforms":["all"],"tags":["juice","crt-shader","score-theater","pixel-type","reward-feel","motion-punch"],"patterns":["streaks-and-gamification","progress-and-data-viz","motion-language-systems","haptics-and-sound","monetization-upsell-moments","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://www.playbalatro.com","mobbin":"https://mobbin.com/apps/balatro"},"one_liner":"A poker-roguelike deck-builder whose entire UI exists to make one number get bigger in the most theatrical way possible — the reference for \"juice\" (synchronized motion + sound + escalation) that any reward moment can borrow.","words":847,"file":"apps/balatro.md","thumb":"jpg"},{"slug":"death-stranding-2","title":"Death Stranding 2 (UI)","kind":"app","category":"games-frontends","tier":"A","platforms":["console"],"tags":["diegetic-ui","holographic-hud","immersion-first","kojima-productions","radial-menu","world-as-interface"],"patterns":["progress-and-data-viz","motion-language-systems","navigation-systems","haptics-and-sound","dashboards-and-consoles","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://www.playstation.com/en-us/games/death-stranding-2-on-the-beach/","mobbin":"https://mobbin.com/apps/death-stranding-2"},"one_liner":"Every readout is sourced to an in-world object (the Odradek scanner, the porter cuff-link, the BB pod monitor) rather than floating screen furniture — verified 2026-07 as the case designers still cite for \"plausible\" diegetic interface craft, the immersion-first counterweight to Zenless Zone Zero's maximalist-motion pole.","words":825,"file":"apps/death-stranding-2.md","thumb":"jpg"},{"slug":"delta-emulator","title":"Delta","kind":"app","category":"games-frontends","tier":"S","platforms":["ios"],"tags":["emulation","skin-system","retro-gaming","sideloading-legacy","ios-native","controller-overlays","save-states"],"patterns":["onboarding-flows","permission-priming","dark-mode-and-theming","bottom-sheets-and-modals","settings-screens"],"updated":"2026-07-22","links":{"site":"https://deltaemulator.com","mobbin":"https://mobbin.com/apps/delta"},"one_liner":"Riley Testut's multi-console iOS emulator (GBA/NES/SNES/N64/DS and more) — years of AltStore sideloading refined its trust-and-import UX before Apple's 2024 rule change let it ship on the App Store proper, where it hit #1 Overall in days.","words":817,"file":"apps/delta-emulator.md","thumb":"jpg"},{"slug":"emulationstation-de","title":"ES-DE (EmulationStation Desktop Edition)","kind":"app","category":"games-frontends","tier":"A","platforms":["desktop","android"],"tags":["theme-driven","controller-first","ten-foot-ui","retro-gaming","scraper-flow","dark-first","badge-system","grid-and-carousel"],"patterns":["dark-mode-and-theming","navigation-systems","settings-screens","search-ux","media-players"],"updated":"2026-07-22","links":{"site":"https://es-de.org"},"one_liner":"A ROM/game library frontend whose entire visual identity is swappable via a theme engine, while a small deliberately-unthemeable core (menus, scraper, settings) stays fixed so the app never breaks no matter what skin is loaded.","words":911,"file":"apps/emulationstation-de.md","thumb":"jpg"},{"slug":"fortnite","title":"Fortnite (shop & events)","kind":"app","category":"games-frontends","tier":"A","platforms":["console","ios","android"],"tags":["item-shop","battle-pass","fomo-urgency","rarity-color-coding","live-events","drop-mechanics","gamification","monetization"],"patterns":["drops-and-restocks","monetization-upsell-moments","streaks-and-gamification","progress-and-data-viz","anti-patterns-dark-patterns","scrollytelling-product-reveals"],"updated":"2026-07-22","links":{"site":"https://www.fortnite.com","mobbin":"https://mobbin.com/apps/fortnite"},"one_liner":"A cosmetics storefront disguised as a game screen — it turned \"the shop resets at midnight\" into the most-imitated urgency loop in consumer software, and event takeovers into a marketing format of their own.","words":959,"file":"apps/fortnite.md","thumb":"jpg"},{"slug":"monument-valley","title":"Monument Valley","kind":"app","category":"games-frontends","tier":"A","platforms":["ios","android"],"tags":["isometric-minimalism","palette-storytelling","silent-onboarding","low-chrome","puzzle-game","motion-restraint"],"patterns":["onboarding-flows","motion-language-systems","tooltips-and-feature-discovery","navigation-systems","microcopy-and-ux-writing"],"updated":"2026-07-22","links":{"site":"https://www.monumentvalleygame.com","mobbin":"https://mobbin.com/apps/monument-valley"},"one_liner":"ustwo's isometric puzzle game (2014, sequel 2017, MV3 2024) proved a UI can be entirely non-verbal — architecture itself is the tutorial, the menu, and the plot.","words":799,"file":"apps/monument-valley.md","thumb":"jpg"},{"slug":"nintendo-switch-ui","title":"Nintendo Switch UI","kind":"app","category":"games-frontends","tier":"S","platforms":["console"],"tags":["console-ui","instant-resume","sound-design","low-density","controller-first","icon-grid","dark-minimal"],"patterns":["navigation-systems","settings-screens","haptics-and-sound","motion-language-systems","profile-screens","loading-skeletons-optimistic-ui"],"updated":"2026-07-22","links":{"site":"https://www.nintendo.com/switch/","mobbin":"https://mobbin.com/apps/nintendo-switch"},"one_liner":"A system shell built around one promise — press a button, be in the game in under a second — and every visual choice (low density, huge tiles, sound-confirmed state changes) exists to protect that promise.","words":921,"file":"apps/nintendo-switch-ui.md","thumb":"jpg"},{"slug":"nyt-games","title":"NYT Games","kind":"app","category":"games-frontends","tier":"S","platforms":["ios","android","web"],"tags":["daily-ritual","streaks","share-artifact","puzzle-ui","minimal-chrome","emoji-grid","casual-games"],"patterns":["streaks-and-gamification","sharing-and-export-flows","onboarding-flows","push-notification-strategy","monetization-upsell-moments","motion-language-systems"],"updated":"2026-07-22","links":{"site":"https://www.nytimes.com/games","mobbin":"https://mobbin.com/apps/nyt-games"},"one_liner":"Wordle, Connections, Spelling Bee, and Strands prove that one puzzle a day, a strict color-state grid, and a text-only share artifact can build the most-copied habit loop in mobile — without a single dark pattern.","words":879,"file":"apps/nyt-games.md","thumb":"jpg"},{"slug":"persona-5-ui","title":"Persona 5 (menu UI)","kind":"app","category":"games-frontends","tier":"S","platforms":["console"],"tags":["diagonal-grid","red-black","hand-lettered-type","transition-as-brand","comic-panel-ui","motion-sync-audio","jrpg-menu"],"patterns":["navigation-systems","motion-language-systems","onboarding-flows","progress-and-data-viz","streaks-and-gamification"],"updated":"2026-07-22","links":{"site":"https://www.atlus.com/persona5royal/","mobbin":"https://mobbin.com/apps/persona-5"},"one_liner":"A JRPG pause menu redesigned as a Phantom Thieves calling card — one diagonal cut angle, one red/black/white palette, and transitions treated as the main character, not connective tissue.","words":891,"file":"apps/persona-5-ui.md","thumb":"jpg"},{"slug":"playnite","title":"Playnite","kind":"app","category":"games-frontends","tier":"A","platforms":["windows"],"tags":["dual-mode-ui","ten-foot-ui","metadata-management","controller-navigation","theme-system","library-aggregation"],"patterns":["dashboards-and-consoles","tables-and-dense-data","settings-screens","media-players","navigation-systems","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://playnite.link","mobbin":"https://mobbin.com/apps/playnite"},"one_liner":"Open-source game-library aggregator (Steam/Epic/GOG/Xbox/emulators unified into one catalog) that ships two fully separate themes — dense desktop mode and sparse controller-first fullscreen mode — over a single shared data layer.","words":828,"file":"apps/playnite.md","thumb":"jpg"},{"slug":"ps5-ui","title":"PlayStation 5 UI","kind":"app","category":"games-frontends","tier":"A","platforms":["console"],"tags":["10-foot-ui","dark-first","focus-driven","ambient-audio","activity-cards","controller-nav"],"patterns":["live-activities-widgets","navigation-systems","motion-language-systems","haptics-and-sound","dashboards-and-consoles"],"updated":"2026-07-22","links":{"site":"https://www.playstation.com/ps5/","mobbin":"https://mobbin.com/apps/playstation-5-system-software"},"one_liner":"A home screen and overlay system built for one input (D-pad + face buttons) and one viewing distance (10 feet) that solved live-status-at-a-glance years before mobile widgets caught up.","words":803,"file":"apps/ps5-ui.md","thumb":"jpg"},{"slug":"retroarch","title":"RetroArch","kind":"app","category":"games-frontends","tier":"B","platforms":["all"],"tags":["menu-labyrinth","no-onboarding","jargon-walls","dense-settings","dark-theme","cross-platform","emulation-frontend"],"patterns":["navigation-systems","settings-screens","onboarding-flows","anti-patterns-dark-patterns","media-players"],"updated":"2026-07-22","links":{"site":"https://www.retroarch.com","mobbin":"https://mobbin.com/apps/retroarch"},"one_liner":"The libretro-based multi-emulator frontend that proves engine power and interface clarity are separable — every UX sin an emulation app can commit, RetroArch commits at least once, which is exactly why it's worth studying.","words":960,"file":"apps/retroarch.md","thumb":"jpg"},{"slug":"steam-deck-ui","title":"Steam (Deck UI)","kind":"app","category":"games-frontends","tier":"S","platforms":["desktop","handheld"],"tags":["controller-first","tile-grid","overlay-ui","dark-first","big-picture","gamepad-nav"],"patterns":["navigation-systems","settings-screens","dashboards-and-consoles","tooltips-and-feature-discovery","motion-language-systems","bottom-sheets-and-modals"],"updated":"2026-07-22","links":{"site":"https://store.steampowered.com/bigpicture","mobbin":"https://mobbin.com/apps/steam"},"one_liner":"Valve's SteamOS/Big Picture shell proves a games library can be fully gamepad-driven without becoming a clunky console menu — spatial tile navigation, a system-wide overlay, and per-game settings that never make you touch a keyboard.","words":868,"file":"apps/steam-deck-ui.md","thumb":"jpg"},{"slug":"xbox-ui","title":"Xbox Series UI","kind":"app","category":"games-frontends","tier":"B","platforms":["console"],"tags":["10-foot-ui","dark-first","carousel-merchandising","focus-navigation","dpad-driven","high-density"],"patterns":["navigation-systems","monetization-upsell-moments","push-notification-strategy","dashboards-and-consoles","feeds-and-ranking"],"updated":"2026-07-22","links":{"site":"https://www.xbox.com","mobbin":"https://mobbin.com/apps/xbox"},"one_liner":"A D-pad-navigated, carousel-stacked home shell built to keep Game Pass in front of you at all times — the console-UI counterpart to PS5's post-2023 quieter, card-based redesign.","words":894,"file":"apps/xbox-ui.md","thumb":"jpg"},{"slug":"zenless-zone-zero","title":"Zenless Zone Zero (UI)","kind":"app","category":"games-frontends","tier":"S","platforms":["console","ios","android"],"tags":["diegetic-ui","tv-static-transitions","comic-panels","gacha-merchandising","hazard-stripe-branding","maximalist-readable"],"patterns":["motion-language-systems","navigation-systems","monetization-upsell-moments","loaders-and-site-intros","progress-and-data-viz"],"updated":"2026-07-22","links":{"site":"https://zenless.hoyoverse.com","mobbin":"https://mobbin.com/apps/zenless-zone-zero"},"one_liner":"HoYoverse's action-RPG frames its entire UI as an in-universe TV channel — menu transitions are TV-static wipes and comic-book panel cuts, not fades — proving that heavy chrome stays readable if every transition earns its runtime with a rule instead of decoration.","words":924,"file":"apps/zenless-zone-zero.md","thumb":"jpg"},{"slug":"aime-leon-dore","title":"Aimé Leon Dore","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["standing-uniform-nav-category","serialized-collaboration-capsules","integrated-function-as-hero-spec","place-referenced-colorways","named-creative-director","synchronized-timed-drops"],"patterns":["landing-page-anatomy","product-detail-pages","drops-and-restocks","docs-and-changelogs"],"updated":"2026-07-26","links":{"site":"https://www.aimeleondore.com"},"one_liner":"A New York menswear label whose New Balance partnership doesn't read as one-off collabs but as an ongoing, individually named and dated series — like a numbered discography — while a standing \"Uniform Collections\" nav category quietly separates permanent wardrobe staples from the seasonal churn around them.","words":844,"file":"apps/aime-leon-dore.md","thumb":"jpg"},{"slug":"arcteryx","title":"Arc'teryx","kind":"app","category":"genz-brands","tier":"A","platforms":["web","ios"],"tags":["technical-outdoor","construction-detail-insets","bird-glyph","alpine-testing-photography","sub-brand-crossover","drop-mechanics"],"patterns":["product-detail-pages","scrollytelling-product-reveals","landing-page-anatomy"],"updated":"2026-07-26","links":{"site":"https://arcteryx.com"},"one_liner":"A technical alpine-gear house whose PDP reads as much like an engineering schematic as a fashion photo — macro insets of taped seams and laminate panel lines sit next to a spec table of waterproof rating, denier, and packed weight — and that same credibility gets exported wholesale into a stealth-luxury sub-brand (Veilance) and limited streetwear collabs without diluting either.","words":861,"file":"apps/arcteryx.md","thumb":"jpg"},{"slug":"arket","title":"Arket","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["material-honesty","nordic-modernism","lifestyle-marketplace","monochrome-grey","cafe-as-brand","slow-retail"],"patterns":["product-detail-pages","landing-page-anatomy","checkout-and-cart"],"updated":"2026-07-26","links":{"site":"https://www.arket.com"},"one_liner":"H&M Group's Nordic lifestyle brand sells clothing, homeware, and a vegetarian café through one shared grey system — the same shade of grey on walls, hangers, fixtures, and digital chrome — proving that treating a store like an edited market instead of a single-category shop can carry a \"slow living\" premium without ever raising the price ceiling into true luxury.","words":845,"file":"apps/arket.md","thumb":"jpg"},{"slug":"byredo","title":"Byredo","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["conceptual-fragrance","stark-photography","name-as-poetry","apothecary-minimalism","artist-collabs","sound-on-load"],"patterns":["product-detail-pages","landing-page-anatomy","scrollytelling-product-reveals","checkout-and-cart","sound-on-web"],"updated":"2026-07-26","links":{"site":"https://www.byredo.com"},"one_liner":"Ben Gorham's Stockholm perfume label treats each fragrance name as the actual product — \"Gypsy Water,\" \"Bal d'Afrique,\" \"Mister Marvelous\" — then wraps that poetry in apothecary-plain packaging and stark, near-clinical photography so nothing visual competes with the name doing the selling.","words":1060,"file":"apps/byredo.md","thumb":"jpg"},{"slug":"charli-xcx-brat","title":"BRAT (Charli XCX)","kind":"app","category":"genz-brands","tier":"S","platforms":["web"],"tags":["anti-design","flat-color-system","lowercase-wordmark","meme-culture","campaign-identity","lo-fi-premium","remix-culture","one-color-system"],"patterns":["landing-page-anatomy","sharing-and-export-flows","drops-and-restocks","motion-language-systems"],"updated":"2026-08-02","links":{"site":"https://charlixcx.com"},"one_liner":"A single flat lime green and a stretched, deliberately low-resolution lowercase wordmark, applied with zero exceptions across every surface — proof that lo-fi reads as premium the instant it's executed with total discipline, and a system its own creator retired after one cycle.","words":1029,"file":"apps/charli-xcx-brat.md","thumb":"jpg"},{"slug":"corteiz","title":"Corteiz","kind":"app","category":"genz-brands","tier":"A","platforms":["web","ios"],"tags":["password-gated-commerce","scarcity-theater","guerrilla-drops","anti-design","community-currency","streetwear","single-product-pages"],"patterns":["drops-and-restocks","checkout-and-cart","auth-and-signin","anti-patterns-dark-patterns","maps-and-location","sharing-and-export-flows"],"updated":"2026-07-22","links":{"site":"https://www.corteiz.com","mobbin":"https://mobbin.com/apps/corteiz"},"one_liner":"London streetwear label that turned checkout itself into the marketing — a password wall (\"Alcatraz\"), GPS-coordinate drops (\"RAAAAAAAID\"), and a trade-in currency (Bolo Exchange) replace ordinary browse-and-buy with a game you have to win to get a hoodie.","words":818,"file":"apps/corteiz.md","thumb":"jpg"},{"slug":"cos-stores","title":"COS","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["architectural-minimalism","high-street-luxury","monochrome-grid","considered-design","material-focus","seasonal-lookbook"],"patterns":["product-detail-pages","landing-page-anatomy","checkout-and-cart"],"updated":"2026-07-26","links":{"site":"https://www.cos.com"},"one_liner":"H&M Group's premium sister brand proves a mass-manufactured wardrobe can look engineered rather than cheap purely through gallery-flat photography, sculptural silhouette framing, and a total absence of fast-fashion urgency chrome — the site sells proportion and material, never a discount.","words":814,"file":"apps/cos-stores.md","thumb":"jpg"},{"slug":"diptyque","title":"Diptyque","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["oval-label","candle-heritage","illustration-heritage","parchment-palette","editorial-commerce","maison-storytelling"],"patterns":["product-detail-pages","landing-page-anatomy","reviews-and-social-proof","checkout-and-cart"],"updated":"2026-07-26","links":{"site":"https://www.diptyqueparis.com"},"one_liner":"A 1961 Paris maison (34 Boulevard Saint-Germain, still the brand's origin myth) that built its entire visual identity around one repeatable object — the oval label — so a candle, a fragrance, and a home spray all read as the same house on sight, decades before \"brand system\" was a phrase anyone used.","words":992,"file":"apps/diptyque.md","thumb":"jpg"},{"slug":"dover-street-market","title":"Dover Street Market","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["shop-in-shop-retail","beautiful-chaos","biannual-changeover","raffle-scarcity","region-fragmented-storefronts","zine-as-brand-voice"],"patterns":["landing-page-anatomy","drops-and-restocks","navigation-systems","product-detail-pages","checkout-and-cart"],"updated":"2026-07-26","links":{"site":"https://www.doverstreetmarket.com"},"one_liner":"Rei Kawakubo's \"Beautiful Chaos\" retail concept — dozens of independently art-directed micro-boutiques colliding under one roof — survives the jump to e-commerce by replacing a conventional product grid with a vertically stacked deck of full-bleed collection tiles, each one a self-contained shop, and by splintering the storefront itself into separate city-specific sites rather than one global cart.","words":1136,"file":"apps/dover-street-market.md","thumb":"jpg"},{"slug":"fishwife","title":"Fishwife","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["tinned-fish-cult","illustration-led-packaging","pastel-palette","founder-led-cpg","vintage-poster-art","dinner-party-merchandising"],"patterns":["product-detail-pages","landing-page-anatomy","reviews-and-social-proof","checkout-and-cart","microcopy-and-ux-writing"],"updated":"2026-07-26","links":{"site":"https://eatfishwife.com"},"one_liner":"Founded 2020 by Becca Millstein and Caroline Goldfarb, Fishwife turned a genuinely unglamorous category — canned sardines and mussels — into a screenshot-able cult object by hiring one illustrator (Danny \"Danbo\" Miller, on the brand since day one) to make every tin a small vintage-poster painting, then let the illustrated can itself do all the marketing.","words":966,"file":"apps/fishwife.md","thumb":"jpg"},{"slug":"fly-by-jing","title":"Fly By Jing","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["hot-pink-identity","founder-voice","chili-sauce-cult","membership-club","saturated-color-blocking","sichuan-heritage"],"patterns":["product-detail-pages","landing-page-anatomy","reviews-and-social-proof","checkout-and-cart","referral-and-invite"],"updated":"2026-07-26","links":{"site":"https://flybyjing.com"},"one_liner":"Jing Gao's 2018 Sichuan-condiment line turned a $12 jar of chili crisp into a status object by refusing every \"ethnic food aisle\" visual cliché — hot-pink saturation, bold display type, and a founder-voice manifesto instead of muted earth tones and a recipe-card layout — and it worked well enough to land the jar on Nordstrom shelves.","words":979,"file":"apps/fly-by-jing.md","thumb":"jpg"},{"slug":"frank-ocean-homer","title":"Homer (Frank Ocean)","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["luxury-web","print-catalog","deadpan-photography","anti-ecommerce","jewelry","editorial-layout"],"patterns":["product-detail-pages","landing-page-anatomy","checkout-and-cart","scrollytelling-product-reveals","premium-web-microinteractions"],"updated":"2026-07-22","links":{"site":"https://homer.com","mobbin":"https://mobbin.com/apps/homer"},"one_liner":"Frank Ocean's jewelry/lifestyle label sells five-figure gold objects through a site that reads like a photocopied art-book catalog rather than a store, and proves that at the right price point desire can outrun conversion-rate-optimization entirely.","words":947,"file":"apps/frank-ocean-homer.md","thumb":"jpg"},{"slug":"gentle-monster","title":"Gentle Monster","kind":"app","category":"genz-brands","tier":"S","platforms":["web"],"tags":["retail-futurism","kinetic-installations","gallery-commerce","gen-z-luxury","spectacle-craft","editorial-minimalism"],"patterns":["landing-page-anatomy","product-detail-pages","scrollytelling-product-reveals","drops-and-restocks","premium-web-microinteractions","loaders-and-site-intros"],"updated":"2026-07-22","links":{"site":"https://www.gentlemonster.com","mobbin":"https://mobbin.com/apps/gentle-monster"},"one_liner":"Korean eyewear label that treats every flagship store as a rotating art exhibition and every product page as its digital echo — the reference for \"weird enough to be expensive.\"","words":797,"file":"apps/gentle-monster.md","thumb":"jpg"},{"slug":"graza","title":"Graza","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["squeeze-bottle-icon","primary-color-branding","binary-sku-architecture","illustrated-typography","kitchen-utility-story"],"patterns":["product-detail-pages","landing-page-anatomy","pickers-steppers-controls"],"updated":"2026-07-26","links":{"site":"https://graza.co"},"one_liner":"A DTC olive oil brand that ditched the dark-glass, wine-bottle language of \"premium\" olive oil entirely and packaged its product in a bright green ketchup-style squeeze bottle — then built its whole site around a two-SKU choice (Drizzle vs. Sizzle) simple enough to make in under two seconds.","words":798,"file":"apps/graza.md","body":"# Graza — olive oil branded like a condiment, not a delicacy\n\n**One-liner:** A DTC olive oil brand that ditched the dark-glass, wine-bottle language of \"premium\" olive oil entirely and packaged its product in a bright green ketchup-style squeeze bottle — then built its whole site around a two-SKU choice (Drizzle vs. Sizzle) simple enough to make in under two seconds.\n\n## Design DNA\n- **Color system:** one saturated kelly/lime green (bottle color roughly `#6FA83B`) used as the brand-defining hue across the site chrome, packaging, and social content — a primary-color, almost fast-food-adjacent loudness that directly inverts the earthy olive-branch, dark-glass palette every legacy and \"artisanal\" olive oil brand uses (compare Le Labo's amber-glass restraint for the opposite instinct applied to a different category).\n- **The bottle-as-logo (the signature device):** the squeeze bottle's silhouette — shaped like a ketchup or mustard bottle, not a traditional oil cruet — functions as the brand's primary graphic mark. It's reused as a flat icon/cutout across the site independent of the wordmark, meaning the product's own industrial-design choice does the branding work a logo would normally do.\n- **Binary SKU architecture as UX:** the entire product line is built around a two-choice decision — \"Drizzle\" (finishing oil, don't cook with it) and \"Sizzle\" (cooking oil, use it daily) — color-coded by cap and reinforced with blunt naming and copy (\"made for eating, never heating\"). A third SKU, \"Frizzle\" (high-heat neutral oil), was added later but the core mechanic stays a fast, near-binary pick — the opposite of a wall of single-origin, region-and-varietal-labeled bottles that force a slow, expertise-gated decision.\n- **Typography:** chunky, rounded, slightly hand-illustrated display type for section headers and product names, set in loud all-caps callouts (\"DRIZZLE,\" \"SIZZLE\") that function as product-line names rather than descriptive labels — a playful, almost cereal-box register, not a Mediterranean-heritage serif.\n- **Photography:** kitchen-counter lifestyle shots showing the bottle mid-squeeze, in-use, often mid-motion over food — utility captured in the act, not a styled flat-lay of olives and rustic linen that legacy olive oil brands default to.\n- **Naming as differentiation engine:** by branding the two products by *use case* (finishing vs. cooking) rather than by varietal or region, Graza turns what's usually an expert-only decision (which olive, which region, which acidity) into a plain-language usage choice anyone can make instantly.\n- **Packaging-solves-a-problem narrative:** the entire brand story centers on the squeeze bottle solving a real kitchen annoyance (decanting, pour control, mess) rather than leading with terroir or heritage copy — utility is the hook, not romance.\n- **Irreverent, direct-address copywriting:** exclamation-heavy, casual, second-person copy (\"you're gonna want to drizzle this on everything\") throughout the site — tone matches the bright packaging rather than adopting a more \"premium\" hushed register.\n\n## Signature components\n- **Two/three-bottle comparison module:** a simple side-by-side card set (Drizzle / Sizzle / Frizzle) with one-line use-case copy and matching cap-color coding, functioning as the entire product-selection UI for the whole catalog.\n- **Bottle-silhouette iconography:** the squeeze-bottle shape reused as a flat graphic element in navigation, favicon, and marketing sections independent of any product photography.\n- **\"How to use it\" illustrated diagram:** simple line-illustration content showing squeeze technique/use cases, reinforcing the utility angle over a heritage/terroir story.\n- **Cap-color-coded variant system:** color-coding (green cap vs. gold cap, etc.) doubles as both a physical product feature and the site's variant-picker visual language.\n\n## Steal / Avoid\n**Steal:** collapsing a category that normally requires expert knowledge (varietal, region, acidity) into a plain-language, near-binary use-case choice — directly reusable for any product line suffering from decision paralysis (too many near-identical SKUs); making the product's own industrial design (a distinctive bottle/case shape) do double duty as the brand's primary graphic mark instead of commissioning a separate logo; using loud, saturated primary color deliberately against category convention (every competitor uses earthy/dark tones) as a stand-out mechanic — works whenever the entire competitive set has converged on the same \"premium\" palette.\n\n**Avoid:** the direct-address, exclamation-heavy copy voice only works if the underlying product is genuinely simple and approachable — forcing this tone onto a technical or trust-sensitive category (financial products, health/peptides) undercuts credibility rather than building warmth; reducing SKU count to two or three only works if the underlying product quality is consistent enough that \"just pick one\" doesn't cost the customer meaningful choice — a category with real quality variance between options needs the comparison data, not a shortcut past it.\n\n## Use when\nLanding pages and product-picker UI for a category with too many near-identical, jargon-gated SKUs, where collapsing choice to two or three plain-language options (by use case, not by spec) would reduce decision fatigue and speed up conversion. Not a fit for categories where buyers actively want granular comparison data (technical gear, graded collectibles) or where a playful, loud tone would undermine trust.","thumb":"jpg"},{"slug":"jacquemus","title":"Jacquemus","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["surrealist-campaigns","pastel-palette","editorial-commerce","whitespace-luxury","ig-native-stunts","price-integrity"],"patterns":["product-detail-pages","landing-page-anatomy","scrollytelling-product-reveals","checkout-and-cart","loaders-and-site-intros","sharing-and-export-flows"],"updated":"2026-07-22","links":{"site":"https://www.jacquemus.com","mobbin":"https://mobbin.com/apps/jacquemus"},"one_liner":"French ready-to-wear house whose product IS the campaign, not the interface — giant-bag stunts and pastel Provence worlds drive Instagram virality while the actual e-commerce shell stays deliberately plain so nothing competes with the imagery or discounts the price.","words":1010,"file":"apps/jacquemus.md","thumb":"jpg"},{"slug":"le-labo","title":"Le Labo","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["apothecary-labels","batch-ritual","city-exclusives","typewriter-type","kraft-packaging","ingredient-transparency"],"patterns":["product-detail-pages","landing-page-anatomy","sharing-and-export-flows"],"updated":"2026-07-26","links":{"site":"https://www.lelabofragrances.com"},"one_liner":"A niche perfumer that photographs and copy-writes every bottle like a hand-filled pharmacy prescription — batch number, blend date, and a customer's name printed on a plain paper label — turning the anti-glamour of an apothecary counter into the entire luxury claim, while most fragrance brands do the opposite and chase glossy bottle photography.","words":772,"file":"apps/le-labo.md","thumb":"jpg"},{"slug":"lemaire","title":"Lemaire","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["soft-tailoring","still-life-photography","muted-earth-palette","croissant-bag","atelier-typography","anti-hype-commerce"],"patterns":["product-detail-pages","landing-page-anatomy","scrollytelling-product-reveals"],"updated":"2026-07-26","links":{"site":"https://www.lemaire.fr"},"one_liner":"French atelier brand (Christophe Lemaire + Sarah-Linh Tran) that sells soft, draped tailoring by shooting it next to fruit and folded linen instead of on a runway backdrop — a domestic-still-life visual language that makes clothes look lived-in and considered rather than aspirational-cold.","words":789,"file":"apps/lemaire.md","thumb":"jpg"},{"slug":"liquid-death","title":"Liquid Death","kind":"app","category":"genz-brands","tier":"S","platforms":["web"],"tags":["death-metal-aesthetic","merch-as-content","gothic-typography","canned-water","premium-irreverence","licensing-partnerships","voice-discipline"],"patterns":["landing-page-anatomy","product-detail-pages","drops-and-restocks","microcopy-and-ux-writing","checkout-and-cart","sharing-and-export-flows"],"updated":"2026-07-22","links":{"site":"https://liquiddeath.com","mobbin":"https://mobbin.com/apps/liquid-death"},"one_liner":"Canned water styled and shot like a craft beer/energy-drink brand, built to $1.4B on a single insight — treat a boring commodity with blue-chip beverage production values and a metal-show voice, and the joke sells the water.","words":956,"file":"apps/liquid-death.md","thumb":"jpg"},{"slug":"maison-margiela","title":"Maison Margiela","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["blank-label-anonymity","four-white-stitches","tabi-house-code","numbered-line-system","deconstructivist-restraint","artisanal-line-0"],"patterns":["landing-page-anatomy","product-detail-pages","checkout-and-cart","docs-and-changelogs"],"updated":"2026-07-26","links":{"site":"https://www.maisonmargiela.com"},"one_liner":"Since 1988 the house's signature mark has been a blank white label held on by four visible white corner stitches — a calling card that names nothing — and that founding refusal to brand the product has been engineered into a full numbered-line taxonomy (Lines 0–23) plus a standing house code, the split-toe Tabi boot, so the site's entire job is presenting anonymity and craft as the luxury signal instead of a logo.","words":1132,"file":"apps/maison-margiela.md","thumb":"jpg"},{"slug":"muji","title":"MUJI","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["no-brand-branding","emptiness-ku-philosophy","shadowless-product-photography","single-chromatic-accent","kraft-paper-canvas","anti-marketing-density"],"patterns":["product-detail-pages","landing-page-anatomy","checkout-and-cart","navigation-systems"],"updated":"2026-07-26","links":{"site":"https://www.muji.com"},"one_liner":"Mujirushi Ryohin (\"no-brand quality goods\") carries its founding anti-brand thesis onto the web by giving itself exactly one chromatic color — a deep maroon reserved almost entirely for the logo plate and price tags — and shooting every product shadowless and centered in empty white space, so restraint itself, not a mascot or a wordmark flourish, is the entire recognizable system.","words":1125,"file":"apps/muji.md","thumb":"jpg"},{"slug":"noah-nyc","title":"Noah","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["permanent-lookbook-archive","essay-first-campaign-copy","anti-urgency-language","quiet-commerce-shell","coastal-prep-motif","lifestyle-merch-rail"],"patterns":["landing-page-anatomy","product-detail-pages","checkout-and-cart","drops-and-restocks"],"updated":"2026-07-26","links":{"site":"https://www.noahny.com"},"one_liner":"A preppy-tech menswear label that pairs every seasonal collection with a first-person, literary blog essay — quoting song lyrics, describing a specific childhood memory — then routes actual purchasing through a completely plain, undecorated Shopify cart, keeping the brand's real voice entirely out of the transactional layer.","words":843,"file":"apps/noah-nyc.md","thumb":"jpg"},{"slug":"nothing-tech","title":"Nothing","kind":"app","category":"genz-brands","tier":"S","platforms":["web","ios","android"],"tags":["transparent-hardware","dot-matrix-type","glyph-interface","community-first","red-accent","industrial-design-system","drop-mechanics"],"patterns":["drops-and-restocks","landing-page-anatomy","motion-language-systems","dark-mode-and-theming","premium-web-microinteractions","product-detail-pages"],"updated":"2026-07-22","links":{"site":"https://nothing.tech","mobbin":"https://mobbin.com/apps/nothing"},"one_liner":"A phone/earbuds maker that sells the same three moves — see-through hardware, dot-matrix type, and a light strip that talks — across web, packaging, OS, and app with zero drift, built for a community that treats unboxing as content. Verified 2026-07: the Phone (3) is Nothing's first device marketed as a true flagship, launched DTC-first with pre-orders outstripping supply, and an active Nothing x Teenage Engineering partnership is folding TE's transparent/toylike design lineage into the line.","words":890,"file":"apps/nothing-tech.md","thumb":"jpg"},{"slug":"nutter-butter-site","title":"Nutter Butter — Are You OK?","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["unhinged-marketing","arg-scavenger-hunt","glitch-aesthetic","chaos-as-retention","gen-z-native","screen-recording-bait","cursor-chaos"],"patterns":["landing-page-anatomy","scrollytelling-product-reveals","sound-on-web","short-form-video-hooks","loaders-and-site-intros"],"updated":"2026-07-22","links":{"site":"https://nutterbutter.com","mobbin":"https://mobbin.com/apps/nutter-butter"},"one_liner":"A century-old cookie's marketing site rebuilt as a glitchy ARG fever-dream — chaos as a retention mechanic, not a redesign mistake, and the clearest gen-z case study for \"the site is the content.\"","words":864,"file":"apps/nutter-butter-site.md","thumb":"svg"},{"slug":"olipop","title":"Olipop","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["functional-soda","mid-century-can-craft","prebiotic-cpg","retro-illustration","per-flavor-packaging","premium-not-casino"],"patterns":["product-detail-pages","landing-page-anatomy","checkout-and-cart","reviews-and-social-proof"],"updated":"2026-07-26","links":{"site":"https://drinkolipop.com"},"one_liner":"Co-founded by David Lester (a packaging designer by background) and Ben Goodwin, Olipop sells a genuinely functional product — prebiotic fiber soda with 2–5g sugar — through mid-century Americana can art per flavor, proving a health-forward CPG product doesn't need a clinical white-and-green supplement aesthetic to earn trust.","words":970,"file":"apps/olipop.md","thumb":"jpg"},{"slug":"on-running","title":"On","kind":"app","category":"genz-brands","tier":"A","platforms":["web","ios"],"tags":["swiss-grid","cloudtec-transparency","spec-forward-pdp","kinetic-photography","single-accent-red"],"patterns":["product-detail-pages","landing-page-anatomy","pickers-steppers-controls"],"updated":"2026-07-26","links":{"site":"https://www.on.com"},"one_liner":"Swiss performance footwear brand whose core visual trick is literal transparency — cutaway diagrams and 3D rotate views of the hollow CloudTec cushioning pods sit on the PDP next to a full running-nerd spec sheet (weight, drop, stack height), so the technology itself is the hero image instead of lifestyle photography.","words":795,"file":"apps/on-running.md","thumb":"jpg"},{"slug":"opal-camera","title":"Opal","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["dtc-hardware","scroll-storytelling","macro-video","waitlist-drops","product-photography","premium-web"],"patterns":["product-detail-pages","drops-and-restocks","scrollytelling-product-reveals","premium-web-microinteractions","landing-page-anatomy","camera-and-capture-ui"],"updated":"2026-07-22","links":{"site":"https://opalcamera.com","mobbin":"https://mobbin.com/apps/opal-camera"},"one_liner":"Direct-to-consumer camera hardware brand (Tadpole, C1) that sells a webcam the way Apple sells a flagship phone — through macro product film, obsessive spec density, and manufactured scarcity around a single hero SKU.","words":749,"file":"apps/opal-camera.md","thumb":"jpg"},{"slug":"our-legacy","title":"Our Legacy","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["single-weight-typography","archival-research-as-content","provenance-labeling","milestone-as-formal-concept","named-mood-as-spec","workshop-sub-line-split"],"patterns":["landing-page-anatomy","product-detail-pages","docs-and-changelogs"],"updated":"2026-07-26","links":{"site":"https://www.ourlegacy.com"},"one_liner":"A Stockholm label whose site typography is deliberately flattened to a single family in a single weight, forcing raw, often melancholic photography to do all of the visual differentiation, while collection copy reads like a research citation — naming the exact archival garment studied — rather than vague \"inspired by\" marketing language.","words":875,"file":"apps/our-legacy.md","thumb":"jpg"},{"slug":"palace","title":"Palace Skateboards","kind":"app","category":"genz-brands","tier":"B","platforms":["web"],"tags":["absurdist-copy","deadpan-voice","streetwear","drop-culture","zero-radius","spec-sheet-type","minimal-chrome"],"patterns":["microcopy-and-ux-writing","drops-and-restocks","product-detail-pages","navigation-systems","checkout-and-cart"],"updated":"2026-07-22","links":{"site":"https://palaceskateboards.com","mobbin":"https://mobbin.com/apps/palace-skateboards"},"one_liner":"A near-vanilla e-commerce grid that reads as a cult brand purely because the product copy is unhinged — the clearest existing proof that one loud element on a quiet base beats redesigning every surface.","words":887,"file":"apps/palace.md","thumb":"jpg"},{"slug":"pglang","title":"pgLang (Kendrick)","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["minimalism","anti-marketing","manifesto-typography","mystery-drops","mixed-media","monochrome"],"patterns":["landing-page-anatomy","drops-and-restocks","microcopy-and-ux-writing","loaders-and-site-intros","scrollytelling-product-reveals"],"updated":"2026-07-22","links":{"site":"https://pglang.com","mobbin":"https://mobbin.com/apps/pglang"},"one_liner":"A multi-lingual creative company (Kendrick Lamar + Dave Free) whose flagship site has, for years, been little more than a single page of manifesto prose — proof that withholding information, not surfacing it, is the premium signal for this audience.","words":818,"file":"apps/pglang.md","thumb":"jpg"},{"slug":"playdate","title":"Playdate (Panic)","kind":"app","category":"genz-brands","tier":"S","platforms":["web"],"tags":["yellow-brand","1-bit-dithering","crank-input","episodic-drops","pixel-ui","toy-premium","unboxing-ritual"],"patterns":["onboarding-flows","drops-and-restocks","checkout-and-cart","motion-language-systems","microcopy-and-ux-writing","premium-web-microinteractions"],"updated":"2026-07-22","links":{"site":"https://play.date","mobbin":"https://mobbin.com/apps/playdate"},"one_liner":"A palm-size handheld game console with a hand-crank, sold in weekly episodic drops instead of an app store — Panic's proof that a hard technical constraint (a 1-bit black-and-white screen) can become the entire brand system.","words":897,"file":"apps/playdate.md","thumb":"jpg"},{"slug":"rhode-skin","title":"Rhode","kind":"app","category":"genz-brands","tier":"A","platforms":["web","ios"],"tags":["dewy-minimalism","gradient-backgrounds","glossy-3d-renders","restock-mechanic","founder-macro-video","merch-as-marketing"],"patterns":["product-detail-pages","drops-and-restocks","pickers-steppers-controls","landing-page-anatomy"],"updated":"2026-07-26","links":{"site":"https://rhodeskin.com"},"one_liner":"Hailey Bieber's skincare line renders every product to look wet and glowing (soft gradients, glossy 3D bottle renders, water-droplet textures) and then proved the aesthetic's pull by launching a literal phone case with a built-in lip-gloss holder — a piece of merch, not skincare — that sold out on a waitlist mechanic and became the brand's biggest marketing event.","words":807,"file":"apps/rhode-skin.md","thumb":"jpg"},{"slug":"salomon","title":"Salomon","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["trail-running-heritage","technical-pdp","sportstyle-crossover","spec-sheet-as-proof","mountain-photography","xt-6-hype"],"patterns":["product-detail-pages","landing-page-anatomy","checkout-and-cart","reviews-and-social-proof"],"updated":"2026-07-26","links":{"site":"https://www.salomon.com"},"one_liner":"A French Alpine sports brand (skis and trail gear since 1947) whose deeply technical, mountain-tested product pages — Contagrip outsole ratings, GORE-TEX callouts, terrain diagrams — got adopted wholesale by streetwear culture around the XT-6 sneaker, and the brand's smartest move was refusing to soften the technical PDP even after the hype arrived.","words":995,"file":"apps/salomon.md","thumb":"jpg"},{"slug":"supreme","title":"Supreme","kind":"app","category":"genz-brands","tier":"A","platforms":["web","ios"],"tags":["scarcity-driven","drop-culture","deliberate-plainness","streetwear","bot-resistant-checkout","editorial-lookbook","weekly-cadence"],"patterns":["drops-and-restocks","checkout-and-cart","product-detail-pages","anti-patterns-dark-patterns","landing-page-anatomy"],"updated":"2026-07-22","links":{"site":"https://www.supremenewyork.com","mobbin":"https://mobbin.com/apps/supreme"},"one_liner":"A streetwear label that proved a brand can look unfinished on purpose — the site's flatness IS the flex, and the real product is the weekly ritual of scarcity, not the interface.","words":882,"file":"apps/supreme.md","thumb":"jpg"},{"slug":"the-row","title":"The Row","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["quiet-luxury","no-logo","neutral-palette","dense-grid-restraint","price-integrity","clinical-photography"],"patterns":["product-detail-pages","landing-page-anatomy","checkout-and-cart"],"updated":"2026-07-26","links":{"site":"https://www.therow.com"},"one_liner":"The Olsen-founded house that proved restraint itself could be the flex — no logo mark, no color, no motion, no sale — but unlike its quiet-luxury peers it runs a surprisingly dense product grid, because the brand's confidence comes from the clothes needing no staging at all.","words":849,"file":"apps/the-row.md","thumb":"jpg"},{"slug":"toteme","title":"Totême","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["scandi-minimalism","monochrome-palette","signature-scarf","overcast-light-photography","wordmark-only-branding"],"patterns":["product-detail-pages","landing-page-anatomy","checkout-and-cart"],"updated":"2026-07-26","links":{"site":"https://toteme.com"},"one_liner":"Stockholm label that builds its entire visual identity out of near-monochrome basics, flat overcast daylight, and one recurring accessory (the Signature Scarf) worn across nearly every campaign image — turning a styling habit into a brand mark without ever drawing one.","words":742,"file":"apps/toteme.md","thumb":"jpg"},{"slug":"travis-scott-cactus-jack","title":"Cactus Jack / Travis Scott","kind":"app","category":"genz-brands","tier":"A","platforms":["web"],"tags":["drop-mechanics","earth-tone-palette","cross-brand-skins","scarcity-commerce","event-spectacle","grunge-texture"],"patterns":["drops-and-restocks","checkout-and-cart","landing-page-anatomy","scrollytelling-product-reveals","monetization-upsell-moments","motion-language-systems"],"updated":"2026-07-22","links":{"site":"https://cactusjack.com","mobbin":"https://mobbin.com/apps/cactus-jack"},"one_liner":"A merch-and-event brand system that gets its power from artificial scarcity and a single portable mark, not from any reusable component library — the design lesson is the mechanism (countdown → raffle → sellout → cross-brand skin), not the surface.","words":838,"file":"apps/travis-scott-cactus-jack.md","thumb":"jpg"},{"slug":"blinkist","title":"Blinkist","kind":"app","category":"growth-masters","tier":"A","platforms":["ios","android"],"tags":["paywall-benchmark","trial-timeline","onboarding-quiz","editorial-warmth","habit-loop","audio-first","category-color-coding"],"patterns":["paywalls-and-pricing-sheets","onboarding-flows","media-players","push-notification-strategy","progress-and-data-viz","streaks-and-gamification"],"updated":"2026-07-22","links":{"site":"https://www.blinkist.com","mobbin":"https://mobbin.com/apps/blinkist"},"one_liner":"Nonfiction book/podcast summarizer (\"Blinks,\" ~15-minute text-or-audio digests) whose trial-to-paid paywall — the vertical timeline showing exactly when you'll be reminded and exactly when you'll be charged — became the pattern growth teams reference by name, not just copy quietly.","words":787,"file":"apps/blinkist.md","thumb":"jpg"},{"slug":"cal-ai","title":"Cal AI","kind":"app","category":"growth-masters","tier":"A","platforms":["ios","android"],"tags":["onboarding-funnel","camera-first","paywall-heavy","quiz-onboarding","teen-founder-growth","macro-tracking"],"patterns":["onboarding-flows","paywalls-and-pricing-sheets","camera-and-capture-ui","streaks-and-gamification","progress-and-data-viz","reviews-and-social-proof"],"updated":"2026-07-22","links":{"site":"https://calai.app","mobbin":"https://mobbin.com/apps/cal-ai"},"one_liner":"Point your camera at food, get a calorie/macro estimate back — the product is a single AI trick, but the onboarding-to-paywall script wrapped around it is the more-copied artifact than the scan itself.","words":768,"file":"apps/cal-ai.md","thumb":"jpg"},{"slug":"duolingo","title":"Duolingo","kind":"app","category":"growth-masters","tier":"S","platforms":["ios","android","web"],"tags":["gamification","streaks","mascot-marketing","guilt-notifications","lesson-bites","freemium"],"patterns":["streaks-and-gamification","paywalls-and-pricing-sheets","push-notification-strategy","onboarding-flows","progress-and-data-viz","anti-patterns-dark-patterns"],"updated":"2026-07-22","links":{"site":"https://www.duolingo.com","mobbin":"https://mobbin.com/apps/duolingo"},"one_liner":"A language app that discovered its real product is the streak, not the lesson — the clearest public case study in turning a mascot, a currency, and a loss-aversion counter into a habit machine.","words":959,"file":"apps/duolingo.md","thumb":"jpg"},{"slug":"fabulous","title":"Fabulous","kind":"app","category":"growth-masters","tier":"A","platforms":["ios","android"],"tags":["onboarding-maximalism","commitment-devices","pastel-gradients","ritual-framing","subscription-funnel","conversion-theater"],"patterns":["onboarding-flows","paywalls-and-pricing-sheets","permission-priming","microcopy-and-ux-writing","monetization-upsell-moments","streaks-and-gamification"],"updated":"2026-08-02","links":{"site":"https://www.thefabulous.co","mobbin":"https://mobbin.com/search/apps?query=fabulous"},"one_liner":"Habit/routine-building app that turned onboarding itself into the sales pitch — a long, guided ritual of quiz answers and a typed pledge, completed before the subscription paywall ever appears.","words":860,"file":"apps/fabulous.md","thumb":"jpg"},{"slug":"rocket-money","title":"Rocket Money","kind":"app","category":"growth-masters","tier":"A","platforms":["ios","android"],"tags":["subscription-audit","cancellation-flow","savings-framing","fintech","paywall-slider","dollar-hero-numbers"],"patterns":["paywalls-and-pricing-sheets","dashboards-and-consoles","progress-and-data-viz","monetization-upsell-moments","onboarding-flows","anti-patterns-dark-patterns"],"updated":"2026-07-22","links":{"site":"https://www.rocketmoney.com","mobbin":"https://mobbin.com/apps/rocket-money"},"one_liner":"Bank-linked subscription tracker/bill negotiator whose whole product is built around one recurring beat — surface a dollar amount, frame it as found money, then sell a concierge action against it.","words":789,"file":"apps/rocket-money.md","thumb":"jpg"},{"slug":"analogue","title":"Analogue","kind":"app","category":"hardware-and-collectibles","tier":"A","platforms":["web"],"tags":["black-void-photography","spec-sheet-copy","fpga-hardware","premium-hardware","scarcity-drops","scrollytelling","museum-grade"],"patterns":["drops-and-restocks","product-detail-pages","landing-page-anatomy","scrollytelling-product-reveals","premium-web-microinteractions","microcopy-and-ux-writing"],"updated":"2026-08-02","links":{"site":"https://www.analogue.co"},"one_liner":"FPGA retro-console maker whose entire site functions as a proof-of-craft machine — black-void photography and spec-sheet-as-poetry copy make a ≈$219–250 cartridge-reading box read like a lab instrument, not a hobbyist emulator box.","words":897,"file":"apps/analogue.md","thumb":"jpg"},{"slug":"apple-fitness","title":"Apple Fitness / Health","kind":"app","category":"health-fitness","tier":"S","platforms":["ios"],"tags":["data-viz","gamification","dark-and-light-split","rings","streaks","wearable-companion"],"patterns":["progress-and-data-viz","streaks-and-gamification","dashboards-and-consoles","sharing-and-export-flows","permission-priming","live-activities-widgets"],"updated":"2026-07-22","links":{"site":"https://www.apple.com/apple-fitness-plus/","mobbin":"https://mobbin.com/apps/apple-fitness"},"one_liner":"Two apps splitting one job — Fitness gamifies today's effort with three closing rings, Health archives everything as trend charts — together the industry's benchmark for compressing noisy time-series data into an instantly-readable state.","words":927,"file":"apps/apple-fitness.md","thumb":"jpg"},{"slug":"bevel","title":"Bevel","kind":"app","category":"health-fitness","tier":"A","platforms":["ios"],"tags":["healthkit-synthesis","card-system","warm-palette","data-viz","no-hardware","indie-craft"],"patterns":["progress-and-data-viz","dashboards-and-consoles","permission-priming","onboarding-flows","settings-screens"],"updated":"2026-07-22","links":{"site":"https://bevelapp.co","mobbin":"https://mobbin.com/apps/bevel"},"one_liner":"A recovery/readiness dashboard that reads Apple Health (sleep, heart rate, workouts, steps) already on your phone and synthesizes it into a single daily score — no wearable, no manual logging, working the moment permission is granted.","words":864,"file":"apps/bevel.md","thumb":"jpg"},{"slug":"calm","title":"Calm","kind":"app","category":"health-fitness","tier":"A","platforms":["ios","android"],"tags":["ambient-nature-imagery","sleep-stories","contextual-color","breathing-animation","premium-wellness","low-stimulus-motion","subscription-pacing"],"patterns":["onboarding-flows","paywalls-and-pricing-sheets","permission-priming","media-players","motion-language-systems","streaks-and-gamification"],"updated":"2026-07-22","links":{"site":"https://calm.com","mobbin":"https://mobbin.com/apps/calm"},"one_liner":"Meditation/sleep app built entirely around full-bleed nature photography and celebrity-narrated Sleep Stories — the anti-Headspace: hushed and photographic where Headspace is playful and illustrated.","words":866,"file":"apps/calm.md","thumb":"jpg"},{"slug":"eight-sleep","title":"Eight Sleep","kind":"app","category":"health-fitness","tier":"A","platforms":["web","ios","android"],"tags":["sleep-hardware","temperature-as-control","autopilot-ai","hardware-plus-subscription","biometric-dashboard","science-endorsed"],"patterns":["product-detail-pages","dashboards-and-consoles","progress-and-data-viz","paywalls-and-pricing-sheets","onboarding-flows"],"updated":"2026-07-26","links":{"site":"https://www.eightsleep.com"},"one_liner":"A hardware-plus-subscription sleep system (the Pod) where what you're actually paying for collapses into one literal dial — 55° to 110°F, adjusted automatically by an \"Autopilot\" algorithm — so both the physical product and its app UI can be organized around a single, viscerally understandable control instead of an abstract wellness score.","words":1068,"file":"apps/eight-sleep.md","thumb":"jpg"},{"slug":"finch","title":"Finch","kind":"app","category":"health-fitness","tier":"A","platforms":["ios","android"],"tags":["pastel-palette","pet-companion","gentle-gamification","non-shaming-copy","illustrated-icons","habit-loop","low-density"],"patterns":["streaks-and-gamification","onboarding-flows","activation-checklists","push-notification-strategy","progress-and-data-viz"],"updated":"2026-07-22","links":{"site":"https://finchcare.com","mobbin":"https://mobbin.com/apps/finch"},"one_liner":"A tamagotchi where the food is real self-care actions — every completed task feeds a bird companion, and the bird's visible growth is the only \"streak graph\" the app needs.","words":796,"file":"apps/finch.md","thumb":"jpg"},{"slug":"gentler-streak","title":"Gentler Streak","kind":"app","category":"health-fitness","tier":"S","platforms":["ios"],"tags":["illustration-led","forgiveness-first","streaks","pastel-palette","hand-drawn","wellness"],"patterns":["streaks-and-gamification","progress-and-data-viz","onboarding-flows","permission-priming","motion-language-systems","microcopy-and-ux-writing"],"updated":"2026-07-22","links":{"site":"https://gentlerstreak.com","mobbin":"https://mobbin.com/apps/gentler-streak"},"one_liner":"An Apple Design Award-winning activity tracker (Gentler Stories LLC, Slovenia — Social Impact category, 2024) that swapped Apple Fitness's ring-closing guilt for an illustrated, forgiveness-first streak — a deliberate rest day can preserve the streak instead of breaking it.","words":794,"file":"apps/gentler-streak.md","thumb":"jpg"},{"slug":"headspace","title":"Headspace","kind":"app","category":"health-fitness","tier":"S","platforms":["ios","android"],"tags":["illustration-system","warm-onboarding","session-player","breathing-motion","mascot-brand","low-density"],"patterns":["onboarding-flows","media-players","motion-language-systems","progress-and-data-viz","paywalls-and-pricing-sheets","permission-priming"],"updated":"2026-07-22","links":{"site":"https://www.headspace.com","mobbin":"https://mobbin.com/apps/headspace"},"one_liner":"A meditation app that decided its cast of round, dot-eyed characters (Sun, and the wider \"Everyman Studio\" family) IS the product differentiator — everything else (typography, layout, motion) is built to stay quiet so the illustration can carry the emotional weight.","words":996,"file":"apps/headspace.md","thumb":"jpg"},{"slug":"levels-health","title":"Levels","kind":"app","category":"health-fitness","tier":"A","platforms":["web","ios","android"],"tags":["cgm-storytelling","metabolic-health","biohacking-calm","quiz-onboarding","tiered-plans","clinical-trust"],"patterns":["onboarding-flows","progress-and-data-viz","dashboards-and-consoles","paywalls-and-pricing-sheets","forms-and-input"],"updated":"2026-07-26","links":{"site":"https://www.levels.com"},"one_liner":"Levels pioneered bringing continuous glucose monitoring (CGM) to non-diabetic \"biohackers,\" and its entire interface exists to answer one question calmly and specifically: what did that meal just do to your body — sequencing a personalized quiz before any hardware purchase so the product feels tailored, not sold.","words":1049,"file":"apps/levels-health.md","thumb":"jpg"},{"slug":"macrofactor","title":"MacroFactor","kind":"app","category":"health-fitness","tier":"A","platforms":["ios","android"],"tags":["algorithm-transparency","fast-logging","trend-line-dataviz","anti-gamification","power-user-shortcuts","macro-tracking"],"patterns":["progress-and-data-viz","forms-and-input","onboarding-flows","paywalls-and-pricing-sheets","pickers-steppers-controls","streaks-and-gamification"],"updated":"2026-07-22","links":{"site":"https://macrofactorapp.com","mobbin":"https://mobbin.com/apps/macrofactor"},"one_liner":"A macro/calorie tracker built by data scientists that treats the logging keyboard and the weight-trend graph as the whole product, and deliberately strips out streaks, badges, and social feed because those mechanics are contraindicated for a food-tracking audience.","words":885,"file":"apps/macrofactor.md","thumb":"jpg"},{"slug":"oura","title":"Oura","kind":"app","category":"health-fitness","tier":"S","platforms":["ios","android"],"tags":["soft-medical","gradient-scores","sleep-viz","calm-data","readiness","low-saturation"],"patterns":["progress-and-data-viz","dashboards-and-consoles","onboarding-flows","streaks-and-gamification","push-notification-strategy","settings-screens"],"updated":"2026-07-22","links":{"site":"https://ouraring.com","mobbin":"https://mobbin.com/apps/oura"},"one_liner":"A ring app that turned three body scores into a daily ritual — the reference for making biometric data feel reassuring instead of clinical or alarming.","words":819,"file":"apps/oura.md","thumb":"jpg"},{"slug":"strava","title":"Strava","kind":"app","category":"health-fitness","tier":"A","platforms":["ios","android"],"tags":["social-fitness","map-art","gamification","community","kudos-economy","data-viz"],"patterns":["feeds-and-ranking","streaks-and-gamification","progress-and-data-viz","maps-and-location","profile-screens","sharing-and-export-flows"],"updated":"2026-07-22","links":{"site":"https://www.strava.com","mobbin":"https://mobbin.com/apps/strava"},"one_liner":"Turns a solitary run or ride into a public performance — the feed, the kudos tap, and the segment leaderboard convert exercise data into a status economy.","words":893,"file":"apps/strava.md","thumb":"jpg"},{"slug":"waking-up","title":"Waking Up","kind":"app","category":"health-fitness","tier":"A","platforms":["ios","android"],"tags":["near-monochrome","serif-typography","anti-gamification","meditation","restraint","audio-first"],"patterns":["onboarding-flows","progress-and-data-viz","settings-screens","dark-mode-and-theming","microcopy-and-ux-writing","paywalls-and-pricing-sheets"],"updated":"2026-07-22","links":{"site":"https://wakingup.com","mobbin":"https://mobbin.com/apps/waking-up"},"one_liner":"Sam Harris's meditation app; a book-like, near-monochrome interface that treats restraint itself as the retention mechanism, in open opposition to the streak-and-badge playbook the rest of the category runs.","words":741,"file":"apps/waking-up.md","thumb":"jpg"},{"slug":"whoop","title":"Whoop","kind":"app","category":"health-fitness","tier":"S","platforms":["ios","android"],"tags":["dark-first","data-dense","biometric-dials","subscription-hardware","coach-voice","screenless"],"patterns":["dashboards-and-consoles","progress-and-data-viz","onboarding-flows","paywalls-and-pricing-sheets","streaks-and-gamification","push-notification-strategy"],"updated":"2026-07-22","links":{"site":"https://whoop.com","mobbin":"https://mobbin.com/apps/whoop"},"one_liner":"A strap with no display, so the app has to carry the entire relationship — three color-coded scores (Recovery, Strain, Sleep) rendered as dials, delivered with a coach's voice instead of a dashboard's.","words":914,"file":"apps/whoop.md","thumb":"jpg"},{"slug":"apple-music","title":"Apple Music","kind":"app","category":"media-entertainment","tier":"A","platforms":["ios","android","web"],"tags":["light-first","editorial","lyrics-spectacle","liquid-glass","curated","audio-quality-badges"],"patterns":["media-players","paywalls-and-pricing-sheets","onboarding-flows","motion-language-systems","dark-mode-and-theming","feeds-and-ranking"],"updated":"2026-07-22","links":{"site":"https://music.apple.com","mobbin":"https://mobbin.com/apps/apple-music"},"one_liner":"The streaming app that refuses Spotify's dark-first, algorithm-first playbook — white chrome, human-written curation, and a lyrics screen built to be screen-recorded, at the cost of feeling less \"at home\" in low-light late-night listening.","words":822,"file":"apps/apple-music.md","thumb":"jpg"},{"slug":"bandcamp","title":"Bandcamp","kind":"app","category":"media-entertainment","tier":"A","platforms":["web"],"tags":["artist-owned-page-design","bandcamp-cyan","pay-what-you-want","direct-to-fan-commerce","zero-radius-utility-ui","bandcamp-fridays"],"patterns":["product-detail-pages","media-players","checkout-and-cart","landing-page-anatomy","dark-mode-and-theming"],"updated":"2026-07-26","links":{"site":"https://bandcamp.com"},"one_liner":"Every artist and label page is a fully re-skinnable storefront the artist themselves colors, backgrounds, and prices — Bandcamp's entire design system is built to disappear behind whoever's music it's hosting, using a muted \"Bandcamp Cyan\" (#629AA9), system-honest Helvetica, and zero-radius cards to signal utility infrastructure rather than a curated, algorithmic listening app.","words":1144,"file":"apps/bandcamp.md","thumb":"jpg"},{"slug":"criterion","title":"Criterion Collection","kind":"app","category":"media-entertainment","tier":"S","platforms":["web","all"],"tags":["spine-numbering","film-collection-as-object","essay-culture","cover-art-commissioning","physical-media-craft","curated-not-algorithmic"],"patterns":["product-detail-pages","landing-page-anatomy","media-players","search-ux","checkout-and-cart"],"updated":"2026-07-26","links":{"site":"https://www.criterion.com"},"one_liner":"A film distributor and streaming channel that assigns every release a permanent, sequential spine number and a commissioned original cover artwork — turning an ordinary media catalog into a numbered, completable object collectors chase for decades, with zero star ratings or algorithmic recommendations anywhere in sight.","words":903,"file":"apps/criterion.md","thumb":"jpg"},{"slug":"letterboxd","title":"Letterboxd","kind":"app","category":"media-entertainment","tier":"S","platforms":["ios","android","web"],"tags":["collector-social","diary-logging","star-ratings","poster-grid","review-culture","pro-tier"],"patterns":["reviews-and-social-proof","profile-screens","feeds-and-ranking","search-ux","pricing-pages-web","sharing-and-export-flows"],"updated":"2026-08-02","links":{"site":"https://letterboxd.com","mobbin":"https://mobbin.com/apps/letterboxd"},"one_liner":"A film diary that turned \"I watched this\" into a public artifact — ratings, reviews, and lists compound into a taste-graph, and the poster grid does the selling before any copy does.","words":1108,"file":"apps/letterboxd.md","thumb":"jpg"},{"slug":"longplay","title":"Longplay","kind":"app","category":"media-entertainment","tier":"A","platforms":["ios"],"tags":["album-art","anti-playlist","widgets","indie-craft","music-player","curation-gate"],"patterns":["media-players","live-activities-widgets","onboarding-flows","monetization-upsell-moments","motion-language-systems"],"updated":"2026-07-22","links":{"site":"https://longplay.rocks","mobbin":"https://mobbin.com/apps/longplay"},"one_liner":"A front-end for Apple Music (and later Spotify) that replaces the queue/playlist UI with a literal wall of album covers, betting that curated browsing beats an algorithmic feed.","words":765,"file":"apps/longplay.md","thumb":"jpg"},{"slug":"monocle","title":"Monocle","kind":"app","category":"media-entertainment","tier":"A","platforms":["web"],"tags":["plantin-serif-editorial","signal-yellow-accent","print-grid-on-web","radio-shop-print-trinity","quality-of-life-franchise","columnist-as-masthead"],"patterns":["landing-page-anatomy","feeds-and-ranking","media-players","product-detail-pages","checkout-and-cart","docs-and-changelogs"],"updated":"2026-07-26","links":{"site":"https://monocle.com"},"one_liner":"A \"global briefing\" brand that never lets its digital and commercial arms (Monocle Radio, the shop, city guides, live events) drift into separate visual languages from the print magazine — the whole site runs on the same Plantin-serif, signal-yellow-accented, dense-column system a reader would recognize from the physical issue, so radio players and product tiles sit inside the identical grid as a foreign-affairs feature.","words":1203,"file":"apps/monocle.md","thumb":"jpg"},{"slug":"mubi","title":"MUBI","kind":"app","category":"media-entertainment","tier":"S","platforms":["all"],"tags":["dark-canvas","poster-led","editorial-voice","curation-scarcity","taste-brand","motion-restraint"],"patterns":["feeds-and-ranking","media-players","paywalls-and-pricing-sheets","onboarding-flows","monetization-upsell-moments","drops-and-restocks"],"updated":"2026-07-22","links":{"site":"https://mubi.com","mobbin":"https://mobbin.com/apps/mubi"},"one_liner":"A film service that competes with Netflix's infinite grid by showing fewer things, better — poster-first browse, critic-voice copy, and a rotating, deliberately finite library (~30 hand-picked titles at a time) that makes curation itself the differentiator.","words":734,"file":"apps/mubi.md","thumb":"jpg"},{"slug":"netflix","title":"Netflix","kind":"app","category":"media-entertainment","tier":"A","platforms":["all"],"tags":["autoplay","dark-surface","row-taxonomy","thumbnail-personalization","choice-architecture","offline-downloads"],"patterns":["feeds-and-ranking","media-players","onboarding-flows","paywalls-and-pricing-sheets","profile-screens","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://netflix.com","mobbin":"https://mobbin.com/apps/netflix"},"one_liner":"A near-black shelf of horizontally-scrolling rows where every pixel (thumbnail, row title, autoplay trailer) exists to cut the seconds between opening the app and pressing play.","words":1059,"file":"apps/netflix.md","thumb":"jpg"},{"slug":"overcast","title":"Overcast","kind":"app","category":"media-entertainment","tier":"A","platforms":["ios"],"tags":["podcast-player","indie-dev","orange-accent","invisible-features","waveform","patronage-pricing"],"patterns":["media-players","onboarding-flows","monetization-upsell-moments","sharing-and-export-flows","settings-screens"],"updated":"2026-07-22","links":{"site":"https://overcast.fm","mobbin":"https://mobbin.com/apps/overcast"},"one_liner":"Marco Arment's one-man-built podcast app where the flex isn't visual polish, it's silence-removal and social-clip sharing turned into invisible, always-on product features.","words":808,"file":"apps/overcast.md","thumb":"jpg"},{"slug":"plex","title":"Plex / Jellyfin","kind":"app","category":"media-entertainment","tier":"A","platforms":["all"],"tags":["dark-first","poster-wall","metadata-driven","self-hosted","backdrop-hero","cross-device-resume"],"patterns":["media-players","feeds-and-ranking","search-ux","dark-mode-and-theming","navigation-systems","settings-screens"],"updated":"2026-07-22","links":{"site":"https://www.plex.tv","mobbin":"https://mobbin.com/apps/plex"},"one_liner":"Netflix-grade browse-and-resume chrome bolted onto a library you actually own — the reference for turning a folder of files into something that feels like a streaming service.","words":861,"file":"apps/plex.md","thumb":"jpg"},{"slug":"pocket-casts","title":"Pocket Casts","kind":"app","category":"media-entertainment","tier":"A","platforms":["ios","android","web"],"tags":["podcast-player","queue-management","cross-platform","red-brand","filters","playback-controls"],"patterns":["media-players","settings-screens","feeds-and-ranking","navigation-systems","tables-and-dense-data","monetization-upsell-moments"],"updated":"2026-07-22","links":{"site":"https://pocketcasts.com","mobbin":"https://mobbin.com/apps/pocket-casts"},"one_liner":"A podcast player that treats the queue and smart filters as the product, not the catalog — the reference for turning a firehose of episodic content into a small, ordered, personally-curated list.","words":865,"file":"apps/pocket-casts.md","thumb":"jpg"},{"slug":"spotify","title":"Spotify","kind":"app","category":"media-entertainment","tier":"S","platforms":["all"],"tags":["dark-first","media-player","shelf-layout","color-extraction","gesture-driven","brand-green","data-viz-virality"],"patterns":["media-players","feeds-and-ranking","paywalls-and-pricing-sheets","onboarding-flows","sharing-and-export-flows","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://spotify.com","mobbin":"https://mobbin.com/apps/spotify"},"one_liner":"A near-black, shelf-organized library app whose now-playing surface and Wrapped campaign became the two most-copied mechanisms in consumer media UI.","words":916,"file":"apps/spotify.md","thumb":"jpg"},{"slug":"twitch","title":"Twitch","kind":"app","category":"media-entertainment","tier":"A","platforms":["web","desktop","mobile"],"tags":["live-chat","sub-economy","bits","community-commerce","dark-mode","parasocial"],"patterns":["chat-and-messaging-ui","live-commerce-and-auctions","streaks-and-gamification","monetization-upsell-moments","dm-commerce-and-community-selling"],"updated":"2026-07-22","links":{"site":"https://twitch.tv","mobbin":"https://mobbin.com/apps/twitch"},"one_liner":"Live-streaming platform where the chat sidebar, not the video player, is the actual product — every monetization surface (subs, bits, channel points) is a grammar layered on top of real-time group chat.","words":951,"file":"apps/twitch.md","thumb":"jpg"},{"slug":"vinyl-me-please","title":"Vinyl Me Please","kind":"app","category":"media-entertainment","tier":"B","platforms":["web"],"tags":["text-to-join-membership","pressing-metadata-as-marketing","colorway-naming","curation-as-club","mastering-credit-transparency","live-selling-feed"],"patterns":["landing-page-anatomy","product-detail-pages","checkout-and-cart","onboarding-flows"],"updated":"2026-07-26","links":{"site":"https://www.vinylmeplease.com"},"one_liner":"VMP replaces the standard email/password membership funnel with a literal SMS relationship — \"TEXT 'VMP' TO (314) 300-9979 TO JOIN/SWAP/ADD\" is the primary CTA across the entire homepage — while every release is marketed through hyper-specific pressing metadata (mastering engineer, lacquer cut, colorway name, hand-numbering) instead of cover art and a genre tag, turning manufacturing detail itself into the sales copy.","words":1078,"file":"apps/vinyl-me-please.md","thumb":"jpg"},{"slug":"youtube","title":"YouTube","kind":"app","category":"media-entertainment","tier":"A","platforms":["web","ios","android","tv"],"tags":["video-player","chapters","dense-metadata","red-accent","shorts-graft","creator-tools"],"patterns":["media-players","feeds-and-ranking","monetization-upsell-moments","dashboards-and-consoles","progress-and-data-viz","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://youtube.com","mobbin":"https://mobbin.com/apps/youtube"},"one_liner":"Two products in one shell — a dense, power-user video player/creator suite, and a TikTok-shaped vertical feed (Shorts) stapled on top — and the seam between them is the most instructive thing about the app.","words":874,"file":"apps/youtube.md","thumb":"jpg"},{"slug":"100-days-of-poetry","title":"100 Days of Poetry","kind":"app","category":"personal-sites","tier":"B","platforms":["web"],"tags":["webgl-art","generative","monochrome","love-project","daily-discipline","canvas-cursor"],"patterns":["scrollytelling-product-reveals","premium-web-microinteractions","loaders-and-site-intros","motion-language-systems"],"updated":"2026-08-02","links":{"site":"https://100daysofpoetry.gallery/","mobbin":"https://mobbin.com/apps/100-days-of-poetry"},"one_liner":"One generative visual poem a day for 100 days, by designer Notty (poems written by Keita Yamada) — the love-project proof that a dated constraint, not a client brief, is what produces the most exhibitable personal work.","words":666,"file":"apps/100-days-of-poetry.md","thumb":"jpg"},{"slug":"a-single-div","title":"A Single Div","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["css-art","constraint-driven","love-project","box-shadow","gradients","portfolio","no-js"],"patterns":["motion-language-systems","loaders-and-site-intros","premium-web-microinteractions","scrollytelling-product-reveals"],"updated":"2026-08-02","links":{"site":"https://a.singlediv.com","mobbin":"https://mobbin.com/apps/a-single-div"},"one_liner":"Lynn Fisher's running collection of full illustrations built from exactly one <div> per piece — no extra markup, no SVG, no JS-drawn canvas — proving that box-shadow, gradients, and :before/:after alone can carry a picture.","words":862,"file":"apps/a-single-div.md","thumb":"jpg"},{"slug":"aaron-iker","title":"Aaron Iker","kind":"app","category":"personal-sites","tier":"B","platforms":["web"],"tags":["svg-morphing","icon-animation","open-source-components","dev-portfolio","dark-first","micro-interactions"],"patterns":["motion-language-systems","premium-web-microinteractions","tooltips-and-feature-discovery","docs-and-changelogs","loaders-and-site-intros"],"updated":"2026-08-02","links":{"site":"https://ai.dribbble.com/","mobbin":"https://mobbin.com/apps/aaron-iker"},"one_liner":"A frontend developer's personal site organized around one mechanic — icons that morph continuously between states via animated SVG path interpolation — released as installable open-source primitives instead of staying portfolio decoration.","words":771,"file":"apps/aaron-iker.md","thumb":"jpg"},{"slug":"adam-argyle-nerdy-dev","title":"Adam Argyle — nerdy.dev","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["css-bleeding-edge","view-transitions","open-props","progressive-enhancement","dark-first","indie-blog"],"patterns":["motion-language-systems","dark-mode-and-theming","docs-and-changelogs","feeds-and-ranking","premium-web-microinteractions","navigation-systems"],"updated":"2026-08-02","links":{"site":"https://nerdy.dev","mobbin":"https://mobbin.com/apps/nerdy-dev"},"one_liner":"A one-person blog/feed (CSS Working Group member, creator of Open Props and VisBug) that ships next-generation CSS as production chrome months before it's safe anywhere else — the reference for how far ahead of the platform a love-project is allowed to run.","words":808,"file":"apps/adam-argyle-nerdy-dev.md","thumb":"jpg"},{"slug":"amelia-wattenberger","title":"Amelia Wattenberger","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["bespoke-svg","explorable-explanations","hand-drawn-mechanics","data-storytelling","d3-diagrams","scrollytelling"],"patterns":["scrollytelling-product-reveals","progress-and-data-viz","landing-page-anatomy","motion-language-systems","premium-web-microinteractions"],"updated":"2026-08-02","links":{"site":"https://wattenberger.com","mobbin":"https://mobbin.com/apps/amelia-wattenberger"},"one_liner":"A data-viz engineer's personal site where every idea gets its own hand-built SVG/D3 diagram instead of a reused chart component — the reference case for when the visual grammar IS the argument, not a decoration on top of it.","words":900,"file":"apps/amelia-wattenberger.md","thumb":"jpg"},{"slug":"anthony-fu","title":"Anthony Fu","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["personal-site","generative-art","dark-mode","vue-ecosystem","love-project","bilingual","minimal-chrome"],"patterns":["progress-and-data-viz","landing-page-anatomy","dark-mode-and-theming","motion-language-systems","docs-and-changelogs"],"updated":"2026-08-02","links":{"site":"https://antfu.me","mobbin":"https://mobbin.com/apps/anthony-fu"},"one_liner":"A single-scroll Vue/Vite portfolio for one of open source's most prolific maintainers (Vitest, Slidev, VueUse, UnoCSS, Vite/Nuxt/Vue core) that treats his own GitHub activity as raw material for on-page generative art instead of a stat to report.","words":886,"file":"apps/anthony-fu.md","thumb":"jpg"},{"slug":"aristide-benoist","title":"Aristide Benoist","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["webgl-transitions","shader-distortion","per-project-theming","custom-loader","dark-first","motion-developer","love-project"],"patterns":["loaders-and-site-intros","premium-web-microinteractions","scrollytelling-product-reveals","navigation-systems","motion-language-systems","landing-page-anatomy"],"updated":"2026-08-02","links":{"site":"https://aristidebenoist.com","mobbin":"https://mobbin.com/apps/aristide-benoist"},"one_liner":"Independent developer's self-portfolio (verified 2026-07: title tag reads \"Aristide Benoist — Independent developer,\" meta description \"specializes in motion and interaction\") that spends its whole design budget on the move between case studies, not the case studies themselves.","words":898,"file":"apps/aristide-benoist.md","thumb":"jpg"},{"slug":"cassie-evans","title":"Cassie Evans","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["svg-animation","gsap-scrolltrigger","motion-path","hand-drawn-illustration","personal-site","webgl-canvas","retired-portfolio"],"patterns":["scrollytelling-product-reveals","motion-language-systems","loaders-and-site-intros","landing-page-anatomy","premium-web-microinteractions"],"updated":"2026-08-02","links":{"site":"https://www.cassie.codes","mobbin":"https://mobbin.com/apps/cassie-evans"},"one_liner":"GSAP creative developer whose portfolio/blog set the bar for hand-drawn SVG characters rigged onto scroll-linked motion paths; verified 2026-07, the live site itself has been replaced with a sparse black farewell page — the work is retired, the technique isn't.","words":828,"file":"apps/cassie-evans.md","thumb":"jpg"},{"slug":"cody-bennett","title":"Cody Bennett","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["webgl","three-js","postprocessing","motion-design","dark-mode","personal-portfolio","shader-craft"],"patterns":["premium-web-microinteractions","motion-language-systems","dark-mode-and-theming","loaders-and-site-intros","scrollytelling-product-reveals"],"updated":"2026-08-02","links":{"site":"https://codyb.co","mobbin":"https://mobbin.com/apps/cody-bennett"},"one_liner":"codyb.co (verified 2026-07, still live, Next.js + WebGL) renders 3D device models and a portrait bust through a real-time postprocessing composite — built on the postprocessing library and three.js core work Bennett personally maintains, so the site functions as a working demo reel for his own open-source contributions rather than a template showcase.","words":848,"file":"apps/cody-bennett.md","thumb":"jpg"},{"slug":"darius-kazemi","title":"Tiny Subversions","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["personal-site","generative-art","bots","minimal-html","anti-design","indie-web","portfolio-archive"],"patterns":["landing-page-anatomy","docs-and-changelogs","microcopy-and-ux-writing","navigation-systems"],"updated":"2026-08-02","links":{"site":"https://tinysubversions.com","mobbin":"https://mobbin.com/apps/tiny-subversions"},"one_liner":"Personal site of Darius Kazemi, internet artist and bot/generator-maker — a deliberately un-art-directed HTML shell whose only job is to get out of the way of the procedural work it links to. Verified 2026-07 via live fetch: the site still ships almost no custom visual design, on purpose.","words":746,"file":"apps/darius-kazemi.md","thumb":"jpg"},{"slug":"dave-whyte-bees-and-bombs","title":"Bees & Bombs","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["generative-motion","perfect-loops","creative-coding","p5js","single-page-site","minimal-chrome","mathematical-animation","canvas-as-hero"],"patterns":["motion-language-systems","landing-page-anatomy","premium-web-microinteractions","short-form-video-hooks","loaders-and-site-intros"],"updated":"2026-08-02","links":{"site":"https://beesandbombs.com","mobbin":"https://mobbin.com/apps/bees-and-bombs"},"one_liner":"Dave Whyte's homepage isn't a portfolio grid of his famous looping GIFs — it's a live p5.js sketch running as the entire page, the same perfect-loop math that built years of Twitter/Instagram loops, now serving as his own business card.","words":811,"file":"apps/dave-whyte-bees-and-bombs.md","thumb":"jpg"},{"slug":"david-desandro","title":"David DeSandro","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["self-demoing-portfolio","draggable-layout","dogfooding","indie-web-craft","love-project","minimal-chrome","open-source-libraries"],"patterns":["landing-page-anatomy","premium-web-microinteractions","motion-language-systems","tooltips-and-feature-discovery","docs-and-changelogs"],"updated":"2026-08-02","links":{"site":"https://desandro.com","mobbin":"https://mobbin.com/apps/david-desandro"},"one_liner":"A single scrolling résumé where every project section — Masonry, Isotope, Flickity, Packery — is a live, running instance of the actual open-source library it's introducing, including one tile you can grab and drag with the cursor.","words":856,"file":"apps/david-desandro.md","thumb":"jpg"},{"slug":"david-hellmann","title":"David Hellmann","kind":"app","category":"personal-sites","tier":"B","platforms":["web"],"tags":["personal-site","draggable-widgets","physics-motion","love-project","multi-typeface","craft-cms","sveltekit","photography-driven"],"patterns":["landing-page-anatomy","premium-web-microinteractions","motion-language-systems","tooltips-and-feature-discovery"],"updated":"2026-08-02","links":{"site":"https://davidhellmann.com","mobbin":"https://mobbin.com/apps/david-hellmann"},"one_liner":"A self-taught German designer/developer's portfolio that turns his own daily minutiae — what he's using, reading, listening to — into draggable, physics-based objects scattered across the homepage instead of an \"About\" list.","words":815,"file":"apps/david-hellmann.md","thumb":"jpg"},{"slug":"derek-sivers","title":"Derek Sivers","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["plaintext-web","anti-design","serif-reading","no-js","short-permalinks","single-page-index"],"patterns":["landing-page-anatomy","docs-and-changelogs","microcopy-and-ux-writing","navigation-systems"],"updated":"2026-08-02","links":{"site":"https://sive.rs","mobbin":"https://mobbin.com/apps/derek-sivers"},"one_liner":"A server-rendered, no-JS personal site that spends its entire design budget on one decision — near-zero styling — and wins because the writing and information architecture are dense enough to carry it alone.","words":814,"file":"apps/derek-sivers.md","thumb":"jpg"},{"slug":"emil-kowalski","title":"Emil Kowalski","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["design-engineer","oss-primitives","drag-dismiss","toast-stacking","dogfooding","minimal-typography","motion-writing"],"patterns":["bottom-sheets-and-modals","premium-web-microinteractions","motion-language-systems","dark-mode-and-theming","docs-and-changelogs"],"updated":"2026-08-02","links":{"site":"https://emilkowal.ski","mobbin":"https://mobbin.com/apps/emil-kowalski"},"one_liner":"personal site/blog of the design engineer behind Vaul (drawer) and Sonner (toast) — the site's own confirmations and sheets ARE the published packages, not mockups of them. Verified 2026-07: live at emilkowal.ski, <title>Emil Kowalski</title>, meta description \"Design engineer working at Linear,\" Next.js app-router build (RSC chunks, no separate SPA shell).","words":832,"file":"apps/emil-kowalski.md","thumb":"jpg"},{"slug":"george-francis","title":"George Francis","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["generative-art","canvas-sketches","indie-web","monospace-minimal","fluid-type","love-project"],"patterns":["landing-page-anatomy","loaders-and-site-intros","motion-language-systems","docs-and-changelogs","premium-web-microinteractions"],"updated":"2026-08-02","links":{"site":"https://georgefrancis.dev","mobbin":"https://mobbin.com/apps/george-francis"},"one_liner":"A developer/generative-artist's site that refuses to be a portfolio shell — the homepage is a bare terminal prompt over three link lists, and the actual visual interest lives in seeded canvas sketches that redraw differently every time you load them.","words":870,"file":"apps/george-francis.md","thumb":"jpg"},{"slug":"hakim-el-hattab","title":"Hakim El Hattab","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["personal-site","lab-notebook","hover-reveal-tiles","custom-serif-display","minimal-chrome","consistent-easing","archive-grid","touch-fallback"],"patterns":["landing-page-anatomy","premium-web-microinteractions","motion-language-systems","tooltips-and-feature-discovery","loaders-and-site-intros"],"updated":"2026-08-02","links":{"site":"https://hakim.se","mobbin":"https://mobbin.com/apps/hakim-el-hattab"},"one_liner":"reveal.js/Ladda/Slides creator's personal site — no hero, no case studies, just a plain-text bio and a tile grid of every toy and product he's shipped since 2010, sorted by nothing but instinct.","words":986,"file":"apps/hakim-el-hattab.md","thumb":"jpg"},{"slug":"jay-ransijn","title":"Jay Ransijn","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["3d-portfolio","webgl","playful-interaction","physics-toy","personal-brand","single-screen"],"patterns":["landing-page-anatomy","premium-web-microinteractions","loaders-and-site-intros","motion-language-systems","scrollytelling-product-reveals"],"updated":"2026-08-02","links":{"site":"https://jayransijn.com","mobbin":"https://mobbin.com/apps/jay-ransijn"},"one_liner":"A personal portfolio (verified 2026-07, live at jayransijn.com) that replaces the scroll-down case-study format with a literal 3D world you walk or drive through, where past employers are logos you can knock over and a shiba named Denji plays fetch — the credential list turned into a physics playground.","words":834,"file":"apps/jay-ransijn.md","thumb":"jpg"},{"slug":"jhey-tompkins","title":"Jhey Tompkins","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["css-only-motion","generative-svg","live-status-widget","text-scramble","personal-brand","craft-demos"],"patterns":["scrollytelling-product-reveals","motion-language-systems","premium-web-microinteractions","loaders-and-site-intros","landing-page-anatomy"],"updated":"2026-08-02","links":{"site":"https://jhey.dev","mobbin":"https://mobbin.com/apps/jhey"},"one_liner":"Personal site of a CSS/UI virtuoso (ex-Chrome DevRel, ex-Vercel, now Brand Design Studio @ Shopify per the current copy) that bakes a few real techniques — a self-drawing signature, a decode-then-scroll live status line, one deliberate load reveal — directly into the page chrome, while the deeper 3D/scroll-driven experiments he's known for still live one click away on CodePen.","words":931,"file":"apps/jhey-tompkins.md","thumb":"jpg"},{"slug":"jim-nielsen","title":"Jim Nielsen","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["personal-site","no-js-interactivity","css-native-disclosure","indie-web","rss-first","list-component-system","accessibility-first","redesign-as-content"],"patterns":["docs-and-changelogs","landing-page-anatomy","dark-mode-and-theming","navigation-systems","accessibility-baselines","motion-language-systems"],"updated":"2026-08-02","links":{"site":"https://www.jim-nielsen.com","mobbin":"https://mobbin.com/apps/jim-nielsen"},"one_liner":"A web designer's homepage that aggregates three separate content streams (blog, link-blog, side-project gallery) through a single reusable row component, with every bit of interactivity — accordions, show-more — done in native HTML/CSS instead of JavaScript. Verified live 2026-07/08: current build confirmed by direct fetch.","words":778,"file":"apps/jim-nielsen.md","thumb":"jpg"},{"slug":"jordan-breton","title":"Jordan Breton","kind":"app","category":"personal-sites","tier":"B","platforms":["web"],"tags":["threejs-webgl","fixed-vantage-camera","glassmorphism-ui","day-night-toggle","sound-toggle","love-project","portfolio-scrollytelling"],"patterns":["scrollytelling-product-reveals","loaders-and-site-intros","premium-web-microinteractions","navigation-systems","sound-on-web","dark-mode-and-theming"],"updated":"2026-08-02","links":{"site":"https://jordan-breton.com","mobbin":"https://mobbin.com/apps/jordan-breton"},"one_liner":"A freelance developer's love-project portfolio staged as a floating island of waterfalls and butterflies, navigated by hopping between fixed camera stations instead of free-flying — verified 2026-07 live, FWA Site of the Day (Oct 2, 2025).","words":726,"file":"apps/jordan-breton.md","thumb":"jpg"},{"slug":"josh-comeau","title":"Josh Comeau","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["interactive-demos","mdx-blog","dark-mode-toggle","playful-copy","sound-design","personal-brand"],"patterns":["premium-web-microinteractions","dark-mode-and-theming","scrollytelling-product-reveals","sound-on-web","pricing-pages-web","microcopy-and-ux-writing"],"updated":"2026-08-02","links":{"site":"https://www.joshwcomeau.com","mobbin":"https://mobbin.com/apps/josh-comeau"},"one_liner":"A front-end teaching blog where every hard concept (springs, CSS Grid, gradients) ships with a live, draggable mini-app embedded mid-paragraph — you tune the variable and watch the concept move in real time, so understanding and delight land in the same gesture. Verified live 2026-07: site is a light/dark MDX-driven blog + two paid courses (CSS for JS Developers, The Joy of React), title \"Josh W. Comeau,\" description \"Friendly articles and tutorials for front-end web developers. ❤️\"","words":886,"file":"apps/josh-comeau.md","thumb":"jpg"},{"slug":"lynn-fisher-lynnandtonic","title":"Lynn Fisher — lynnandtonic.com","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["personal-site","css-art","annual-redesign","indie-web","dark-mode","archive-as-artifact"],"patterns":["dark-mode-and-theming","landing-page-anatomy","loaders-and-site-intros","premium-web-microinteractions","scrollytelling-product-reveals"],"updated":"2026-08-02","links":{"site":"https://lynnandtonic.com","mobbin":"https://mobbin.com/apps/lynn-fisher-lynnandtonic"},"one_liner":"A designer/CSS-artist's home page that fully rebuilds itself every year and never deletes the old ones — \"v. XIX\" (verified 2026-07, confirmed live in this same session) is both a homepage and the 19th entry in its own museum.","words":890,"file":"apps/lynn-fisher-lynnandtonic.md","thumb":"jpg"},{"slug":"mamboleoo","title":"Mamboleoo","kind":"app","category":"personal-sites","tier":"B","platforms":["web"],"tags":["generative-art","canvas-webgl","personal-portfolio","curated-gallery","love-project","dark-theme"],"patterns":["premium-web-microinteractions","motion-language-systems","landing-page-anatomy","navigation-systems"],"updated":"2026-08-02","links":{"site":"https://mamboleoo.be/","mobbin":"https://mobbin.com/apps/mamboleoo"},"one_liner":"A front-end developer/artist's personal site — the reference for what a \"love project\" corpus looks like when the generative work is treated as a body of work to browse, not a homepage stunt.","words":648,"file":"apps/mamboleoo.md","thumb":"jpg"},{"slug":"marcin-wichary-aresluna","title":"aresluna.org","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["editorial","custom-type","scrollytelling","warm-light-dark","bespoke-widgets","love-project"],"patterns":["scrollytelling-product-reveals","docs-and-changelogs","dark-mode-and-theming","motion-language-systems","tooltips-and-feature-discovery"],"updated":"2026-08-02","links":{"site":"https://aresluna.org","mobbin":"https://mobbin.com/apps/aresluna"},"one_liner":"Marcin Wichary's personal site/essay archive (design/typography/tech-history writer, ex-Google Doodles, author of \"Shift Happens\") where every essay ships its own bespoke interactive figure built to explain one specific historical artifact — verified 2026-07/2026-08 by fetching the live site.","words":819,"file":"apps/marcin-wichary-aresluna.md","thumb":"jpg"},{"slug":"matt-deslauriers","title":"Matt DesLauriers","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["generative-art","webgl-shaders","creative-coding","plotter-art","portfolio-as-gallery","canvas-sketch"],"patterns":["scrollytelling-product-reveals","premium-web-microinteractions","loaders-and-site-intros","motion-language-systems"],"updated":"2026-08-02","links":{"site":"https://mattdesl.com","mobbin":"https://mobbin.com/apps/matt-deslauriers"},"one_liner":"Creative-coder (mattdesl) whose portfolio doesn't screenshot his WebGL/plotter work — it runs it, live, in the browser, because the medium's whole point is that it moves and responds.","words":910,"file":"apps/matt-deslauriers.md","thumb":"jpg"},{"slug":"matt-keeter","title":"Matt Keeter","kind":"app","category":"personal-sites","tier":"B","platforms":["web"],"tags":["static-site","research-notes","monospace","cad-kernel","hand-rolled","love-project"],"patterns":["docs-and-changelogs","landing-page-anatomy","scrollytelling-product-reveals"],"updated":"2026-08-02","links":{"site":"https://mattkeeter.com","mobbin":"https://mobbin.com/apps/matt-keeter"},"one_liner":"A CAD/graphics researcher's personal site that skips the portfolio-template entirely — plain static HTML organized as project write-ups, each one a mini paper with an embedded interactive demo of the actual kernel being described.","words":762,"file":"apps/matt-keeter.md","thumb":"jpg"},{"slug":"maxime-heckel","title":"Maxime Heckel","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["glsl-shaders","live-code-figures","technical-blog","react-three-fiber","mdx","love-project"],"patterns":["scrollytelling-product-reveals","docs-and-changelogs","premium-web-microinteractions","motion-language-systems","dark-mode-and-theming"],"updated":"2026-08-02","links":{"site":"https://blog.maximeheckel.com","mobbin":"https://mobbin.com/apps/maxime-heckel-blog"},"one_liner":"A frontend/graphics blog (verified 2026-07: live at blog.maximeheckel.com, \"The Blog of Maxime Heckel,\" Next.js/MDX) where every shader or animation concept gets a live, tunable demo embedded inline instead of a screenshot — the reader debugs the idea, not just reads about it.","words":817,"file":"apps/maxime-heckel.md","thumb":"jpg"},{"slug":"nan-yu","title":"nan.fyi (Not a Number)","kind":"app","category":"personal-sites","tier":"B","platforms":["web"],"tags":["scrollytelling","dev-education","interactive-diagrams","serif-display","hand-drawn-annotation","indie-blog"],"patterns":["scrollytelling-product-reveals","docs-and-changelogs","motion-language-systems","progress-and-data-viz","landing-page-anatomy"],"updated":"2026-08-02","links":{"site":"https://nan.fyi","mobbin":"https://mobbin.com/apps/nan-fyi"},"one_liner":"Nanda Syahrasyad's personal engineering blog, verified 2026-07: every post pairs a short explanation with a hand-built canvas/SVG widget the reader steps through, rather than illustrating the prose with static screenshots.","words":842,"file":"apps/nan-yu.md","thumb":"jpg"},{"slug":"neal-fun","title":"neal.fun","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["personal-project","one-idea-per-page","playful-microinteractions","generated-share-cards","whimsy","no-monetization"],"patterns":["sharing-and-export-flows","landing-page-anatomy","premium-web-microinteractions","motion-language-systems","anti-patterns-dark-patterns","loaders-and-site-intros"],"updated":"2026-08-02","links":{"site":"https://neal.fun","mobbin":"https://mobbin.com/apps/neal-fun"},"one_liner":"Neal Agarwal's personal site is a grid of 40+ standalone interactive experiments (Infinite Craft, The Password Game, Absurd Trolley Problems) where the homepage does almost no selling — the thumbnail alone has to carry the idea.","words":916,"file":"apps/neal-fun.md","thumb":"jpg"},{"slug":"nicky-case","title":"Nicky Case","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["explorable-explanations","agent-simulation","playful-typography","hand-drawn","love-project","single-serving-html"],"patterns":["scrollytelling-product-reveals","progress-and-data-viz","tooltips-and-feature-discovery","microcopy-and-ux-writing","landing-page-anatomy"],"updated":"2026-08-02","links":{"site":"https://ncase.me","mobbin":"https://mobbin.com/apps/nicky-case"},"one_liner":"Essays where the diagram is a live agent-based sim with sliders exposed, so the reader disproves or proves the thesis themselves instead of trusting the author's word for it.","words":981,"file":"apps/nicky-case.md","thumb":"jpg"},{"slug":"not-boring-software","title":"!Boring Software","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["playful-3d","skins-and-cosmetics","membership-commerce","proof-in-page","indie-love-project","webflow-craft"],"patterns":["landing-page-anatomy","checkout-and-cart","monetization-upsell-moments","microcopy-and-ux-writing","premium-web-microinteractions"],"updated":"2026-08-02","links":{"site":"https://notbor.ing","mobbin":"https://mobbin.com/apps/not-boring-software"},"one_liner":"Andy Allen's (Paper/FiftyThree) indie studio for six tiny utility apps — Weather, Habits, Timer, Calculator, Vibes, Camera — sold as \"games you get stuff done with,\" where the marketing page enacts the same tap-to-life motion the app itself promises.","words":876,"file":"apps/not-boring-software.md","thumb":"jpg"},{"slug":"paco-coursey","title":"Paco Coursey","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["cursor-reactive","physics-motion","minimal-grid","dev-portfolio","spring-animation","monochrome","love-project"],"patterns":["motion-language-systems","premium-web-microinteractions","landing-page-anatomy","loaders-and-site-intros","scrollytelling-product-reveals"],"updated":"2026-08-02","links":{"site":"https://paco.me","mobbin":"https://mobbin.com/apps/paco-coursey"},"one_liner":"A developer's personal site where a strict, near-silent type grid exists to make a single cursor-reactive physics moment feel like an event instead of decoration.","words":735,"file":"apps/paco-coursey.md","thumb":"jpg"},{"slug":"pacome-pertant","title":"Pacôme Pertant","kind":"app","category":"personal-sites","tier":"B","platforms":["web"],"tags":["sound-locked-motion","webgl-canvas","spring-easing","portfolio-site","motion-design","love-project"],"patterns":["sound-on-web","motion-language-systems","premium-web-microinteractions","loaders-and-site-intros","navigation-systems","scrollytelling-product-reveals"],"updated":"2026-08-02","links":{"site":"https://pacomepertant.com"},"one_liner":"A Paris-based motion-and-sound designer's own reel, staged as a full-viewport WebGL canvas that will not start its audio-visual layer until the visitor explicitly opts in — motion authored to a soundtrack, not just eased.","words":937,"file":"apps/pacome-pertant.md","thumb":"jpg"},{"slug":"paul-neave","title":"Neave Interactive","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["novelty-toys","canvas-physics","single-purpose-tools","hand-rolled-motion","long-running-portfolio","dark-theme"],"patterns":["motion-language-systems","loaders-and-site-intros","landing-page-anatomy","premium-web-microinteractions","camera-and-capture-ui"],"updated":"2026-08-02","links":{"site":"https://neave.com","mobbin":"https://mobbin.com/apps/neave-interactive"},"one_liner":"One person's 20+ year collection of self-contained novelty web apps (Zoom Earth, Webcam Toy, Bouncy Balls, Hexxagon...) — proof that shipping a fun mechanic beats shipping a portfolio page.","words":838,"file":"apps/paul-neave.md","thumb":"jpg"},{"slug":"paul-robert-lloyd","title":"Paul Robert Lloyd","kind":"app","category":"personal-sites","tier":"B","platforms":["web"],"tags":["indieweb","oklch-color","per-post-accent","editorial-typography","longevity","own-your-tools"],"patterns":["feeds-and-ranking","dark-mode-and-theming","docs-and-changelogs","motion-language-systems","accessibility-baselines"],"updated":"2026-08-02","links":{"site":"https://paulrobertlloyd.com","mobbin":"https://mobbin.com/apps/paul-robert-lloyd"},"one_liner":"A designer's own site, continuously rebuilt and re-themed since the mid-2000s, that treats \"owning your web presence\" (IndieAuth, Micropub, Webmention, an RSS/JSON/Atom trio) as the actual design deliverable, not a footnote.","words":738,"file":"apps/paul-robert-lloyd.md","thumb":"jpg"},{"slug":"rauno-freiberg","title":"Rauno Freiberg","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["cursor-aware-motion","spring-physics","radix-color-system","horizontal-canvas-nav","minimap-scrubber","love-project"],"patterns":["motion-language-systems","navigation-systems","loaders-and-site-intros","premium-web-microinteractions","landing-page-anatomy","dark-mode-and-theming"],"updated":"2026-08-02","links":{"site":"https://rauno.me","mobbin":"https://mobbin.com/apps/rauno-freiberg"},"one_liner":"Personal site of the Vercel interaction designer and Radix Colors co-author — the reference for what an obsessive, restraint-first love-project looks like when the audience is other designers, not customers.","words":864,"file":"apps/rauno-freiberg.md","thumb":"jpg"},{"slug":"robby-leonardi","title":"Robby Leonardi — Interactive Resume","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["scrollytelling","platformer-ui","parallax-motion","love-project","portfolio-site","single-page-narrative"],"patterns":["scrollytelling-product-reveals","landing-page-anatomy","loaders-and-site-intros","motion-language-systems","premium-web-microinteractions","sound-on-web"],"updated":"2026-08-02","links":{"site":"https://www.rleonardi.com","mobbin":"https://mobbin.com/apps/robby-leonardi"},"one_liner":"A single-page resume rebuilt as a Mario-style side-scrolling platformer — the scrollbar IS the level, and each resume section (About, Skills, Experience, Education, Awards, Contact) is a stage the character runs through.","words":832,"file":"apps/robby-leonardi.md","thumb":"jpg"},{"slug":"robin-rendle","title":"Robin Rendle","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["type-first","file-explorer-chrome","monospace-ui","view-transitions","editorial-voice","markdown-as-home"],"patterns":["docs-and-changelogs","navigation-systems","motion-language-systems","dark-mode-and-theming","microcopy-and-ux-writing"],"updated":"2026-08-02","links":{"site":"https://robinrendle.com","mobbin":"https://mobbin.com/apps/robin-rendle"},"one_liner":"A designer/writer's site rebuilt as an IDE — folder-tree sidebar, README.md as the landing page, a live git-commit footer — where the chrome itself is the personality and the prose does the rest. (Verified 2026-07 via live fetch.)","words":848,"file":"apps/robin-rendle.md","thumb":"jpg"},{"slug":"rsms-me","title":"rsms.me","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["typography-led","monospace-accent","variable-font","monochrome","indie-web","self-authored-type"],"patterns":["landing-page-anatomy","docs-and-changelogs","dark-mode-and-theming","navigation-systems","microcopy-and-ux-writing"],"updated":"2026-08-02","links":{"site":"https://rsms.me","mobbin":"https://mobbin.com/apps/rsms-me"},"one_liner":"Rasmus Andersson's personal site (verified 2026-07 — live, current build), the reference case for typography-as-identity: he designed Inter, the typeface, and the site proves that when you own the type, everything else can disappear.","words":899,"file":"apps/rsms-me.md","thumb":"jpg"},{"slug":"ryo-lu","title":"Ryo Lu","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["faux-desktop-os","retro-mac","window-manager","bitmap-type","love-project","single-metaphor"],"patterns":["navigation-systems","motion-language-systems","command-palettes-and-keyboard-ux","ai-chat-and-copilot-ux","loaders-and-site-intros","chat-and-messaging-ui"],"updated":"2026-08-02","links":{"site":"https://ryo.lu","mobbin":"https://mobbin.com/apps/ryo-lu"},"one_liner":"ryo.lu (fetched live, verified 2026-08) doesn't have a homepage with sections — it boots into a full System 6/7-style desktop, with draggable windows, a menu bar, and working little apps, and the \"about me\" content lives inside that OS rather than beside it.","words":837,"file":"apps/ryo-lu.md","thumb":"jpg"},{"slug":"samsy","title":"Samsy — Gen-02","kind":"app","category":"personal-sites","tier":"B","platforms":["web"],"tags":["webgpu","three-js","real-time-3d","cyberpunk","love-project","dark-first","portfolio"],"patterns":["loaders-and-site-intros","scrollytelling-product-reveals","sound-on-web","premium-web-microinteractions"],"updated":"2026-08-02","links":{"site":"https://samsy.ninja","mobbin":"https://mobbin.com/apps/samsy"},"one_liner":"A single-page graphics-engineer portfolio (self-titled \"Award Winning Creative Graphics Engineer,\" verified 2026-07) whose entire pitch is one explorable WebGPU scene rather than a page of case studies.","words":644,"file":"apps/samsy.md","thumb":"jpg"},{"slug":"sarah-drasner","title":"Sarah Drasner","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["dark-theme","svg-animation","scrollytelling","hand-illustrated","career-narrative","glitch-text","indigo-accent"],"patterns":["scrollytelling-product-reveals","motion-language-systems","loaders-and-site-intros","landing-page-anatomy","premium-web-microinteractions","dark-mode-and-theming"],"updated":"2026-08-02","links":{"site":"https://sarah.dev","mobbin":"https://mobbin.com/apps/sarah-drasner"},"one_liner":"A personal site that treats animation as autobiography — a hand-drawn SVG scene sequenced to narrate a career, not a template with motion sprinkled on top.","words":797,"file":"apps/sarah-drasner.md","thumb":"jpg"},{"slug":"sarah-fossheim","title":"Sarah Fossheim","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["css-art","accessibility-first","dataviz","personal-site","editorial","love-project"],"patterns":["accessibility-baselines","progress-and-data-viz","landing-page-anatomy","docs-and-changelogs","tooltips-and-feature-discovery"],"updated":"2026-08-02","links":{"site":"https://fossheim.io","mobbin":"https://mobbin.com/apps/sarah-fossheim"},"one_liner":"An accessibility consultant's personal site that ships pure-CSS illustrated drawings next to WCAG audits and dataviz-accessibility essays — playful craft and rigorous craft, built by the same hands, on the same page.","words":810,"file":"apps/sarah-fossheim.md","thumb":"jpg"},{"slug":"sindre-sorhus","title":"Sindre Sorhus","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["catalog-homepage","prolific-maker","gradient-accents","dark-mode-nebula","glassmorphism","dense-grid"],"patterns":["landing-page-anatomy","dashboards-and-consoles","search-ux","tooltips-and-feature-discovery","monetization-upsell-moments"],"updated":"2026-08-02","links":{"site":"https://sindresorhus.com","mobbin":"https://mobbin.com/apps/sindre-sorhus"},"one_liner":"A maker with 60+ shipped apps and thousands of packages doesn't write a portfolio narrative — he ships an always-current index, and the index itself becomes the brand voice.","words":984,"file":"apps/sindre-sorhus.md","thumb":"jpg"},{"slug":"steve-ruiz","title":"Steve Ruiz","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["minimal-blog","dev-blog","dark-mode-toggle","css-in-js","typography-scale","tldraw-creator"],"patterns":["dark-mode-and-theming","motion-language-systems","docs-and-changelogs","landing-page-anatomy"],"updated":"2026-08-02","links":{"site":"https://steveruiz.me","mobbin":"https://mobbin.com/apps/steve-ruiz"},"one_liner":"Personal site of the tldraw creator, currently a deliberately bare single-column post index — restraint, not the canvas UI he's famous for, is the design statement here.","words":828,"file":"apps/steve-ruiz.md","thumb":"jpg"},{"slug":"studio-moniker","title":"Studio Moniker","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["portfolio-archive","generative-art","participatory-design","raw-html-aesthetic","video-first-thumbnails","dutch-design-studio"],"patterns":["landing-page-anatomy","motion-language-systems","premium-web-microinteractions","scrollytelling-product-reveals","loaders-and-site-intros"],"updated":"2026-08-02","links":{"site":"https://studiomoniker.com","mobbin":"https://mobbin.com/apps/studio-moniker"},"one_liner":"A 2012–2023 Amsterdam studio (per the live site's own credit: Luna Maurer & Roel Wouters) whose homepage isn't a hero shot or a manifesto — it's a bare, autoplaying grid of the participatory/generative work itself, because for Moniker the case study WAS the design language.","words":876,"file":"apps/studio-moniker.md","thumb":"jpg"},{"slug":"thibault-introvigne","title":"Thibault Introvigne — Space Gamefolio","kind":"app","category":"personal-sites","tier":"B","platforms":["web"],"tags":["three-js","gamefolio","low-poly","gated-content","love-project","dwell-time"],"patterns":["landing-page-anatomy","scrollytelling-product-reveals","loaders-and-site-intros","sound-on-web","tooltips-and-feature-discovery"],"updated":"2026-08-02","links":{"site":"https://www.thibault-introvigne.com/","mobbin":"https://mobbin.com/apps/thibault-introvigne"},"one_liner":"A third-person spaceman pilots a low-poly planet collecting ten orbiting nodes, each unlocking a slice of resume — a portfolio that turns \"look at my work\" into a controller-input loop.","words":806,"file":"apps/thibault-introvigne.md","thumb":"jpg"},{"slug":"tim-holman","title":"Tim Holman","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["personal-site","easter-eggs","browser-pranks","motion-signature","love-project","neon-glow"],"patterns":["loaders-and-site-intros","motion-language-systems","premium-web-microinteractions","scrollytelling-product-reveals","navigation-systems"],"updated":"2026-08-02","links":{"site":"https://tholman.com","mobbin":"https://mobbin.com/apps/tim-holman"},"one_liner":"A front-end engineer's homepage where the boot-up sequence of the wordmark itself is the demo reel — one page, one mechanic, dozens of linked toys, zero navigation chrome to hide behind.","words":997,"file":"apps/tim-holman.md","thumb":"jpg"},{"slug":"tom-macwright","title":"Tom MacWright","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["personal-site","static-site-generator","monospace-accents","light-dark-css","geospatial-viz","minimal-typography","indie-web"],"patterns":["maps-and-location","progress-and-data-viz","dark-mode-and-theming","docs-and-changelogs","tables-and-dense-data"],"updated":"2026-08-02","links":{"site":"https://macwright.com","mobbin":"https://mobbin.com/apps/tom-macwright"},"one_liner":"A static, monospace-accented personal site (writing, photos, projects, drawings, micro-posts) that treats every artifact — a blog post, a GPS trace, a book log — as first-class output, with interactive maps and data visualizations embedded straight into the prose instead of screenshotted.","words":835,"file":"apps/tom-macwright.md","thumb":"jpg"},{"slug":"tomasz-szmajda-itom","title":"ITOM — Tomasz Szmajda","kind":"app","category":"personal-sites","tier":"B","platforms":["web"],"tags":["paper-tear-intro","hand-drawn-3d","shader-paint-reveal","gsap-scrolltrigger","react-three-fiber","award-portfolio","creative-dev"],"patterns":["loaders-and-site-intros","scrollytelling-product-reveals","premium-web-microinteractions","motion-language-systems","landing-page-anatomy"],"updated":"2026-08-02","links":{"site":"https://itomdev.com","mobbin":"https://mobbin.com/apps/itom-portfolio"},"one_liner":"A creative developer's personal site where a torn sheet of paper drops you into an infinite hand-drawn museum corridor whose pencil-sketched frames paint themselves in with a custom shader as you approach — the single mechanic that carried it to FWA/CSSDA/Awwwards recognition (verified 2026-07, live fetch).","words":694,"file":"apps/tomasz-szmajda-itom.md","thumb":"jpg"},{"slug":"una-kravets","title":"Una Kravets","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["css-dogfooding","view-transitions","mix-blend-textures","dark-mode-tokens","editorial-personal-brand","fluid-type","zero-js-microinteractions"],"patterns":["dark-mode-and-theming","motion-language-systems","tooltips-and-feature-discovery","landing-page-anatomy","premium-web-microinteractions"],"updated":"2026-08-02","links":{"site":"https://una.im/","mobbin":"https://mobbin.com/apps/una-kravets"},"one_liner":"A Chrome DevRel/CSS-standards engineer's home page where the newest CSS primitives (View Transitions, :has(), mix-blend textures) aren't described in a blog post — they run live in the chrome of the site itself. Verified 2026-07 via direct fetch of una.im HTML/CSS.","words":814,"file":"apps/una-kravets.md","thumb":"jpg"},{"slug":"yuan-chuan","title":"Yuan Chuan","kind":"app","category":"personal-sites","tier":"A","platforms":["web"],"tags":["personal-site","generative-css-art","css-doodle","dev-blog","serif-editorial","minimal-chrome","opacity-ladder"],"patterns":["landing-page-anatomy","motion-language-systems","premium-web-microinteractions","docs-and-changelogs"],"updated":"2026-08-02","links":{"site":"https://yuanchuan.dev","mobbin":"https://mobbin.com/apps/yuanchuan"},"one_liner":"A deliberately unstyled personal page (serif type, dotted-underline links, near-zero UI) that exists only to point at the real work: single-element CSS art, the css-doodle library, and a blog of tightly-scoped effect studies (verified 2026-07 at yuanchuan.dev).","words":843,"file":"apps/yuan-chuan.md","thumb":"jpg"},{"slug":"zach-lieberman","title":"Zach Lieberman","kind":"app","category":"personal-sites","tier":"S","platforms":["web"],"tags":["personal-site","love-project","daily-practice","markdown-generated","archive-not-portfolio","dispatcher-page"],"patterns":["landing-page-anatomy","microcopy-and-ux-writing"],"updated":"2026-08-02","links":{"site":"http://zach.li","mobbin":"https://mobbin.com/apps/zach-lieberman"},"one_liner":"A creative coder's homepage that openly admits it's an unfinished placeholder, and routes every real artifact (daily sketches, essays, projects) off-domain — proof that duration and honesty can out-credential a polished template.","words":949,"file":"apps/zach-lieberman.md","thumb":"jpg"},{"slug":"zach-saucier","title":"Zach Saucier","kind":"app","category":"personal-sites","tier":"B","platforms":["web"],"tags":["canvas-animation","hand-rolled-motion","developer-portfolio","easter-egg","gradient-hero","css-clip-path"],"patterns":["landing-page-anatomy","premium-web-microinteractions","motion-language-systems","loaders-and-site-intros","sound-on-web"],"updated":"2026-08-02","links":{"site":"https://zachsaucier.com","mobbin":"https://mobbin.com/apps/zach-saucier"},"one_liner":"A front-end animator's personal site where the hero itself is a hand-rolled canvas physics toy, not a screenshot of one — the whole page is the demo reel.","words":674,"file":"apps/zach-saucier.md","thumb":"jpg"},{"slug":"1password","title":"1Password","kind":"app","category":"productivity-tools","tier":"A","platforms":["web","ios","android","desktop","browser-extension"],"tags":["vault-metaphor","trust-ui","autofill","biometric-unlock","security-as-calm","icon-matching"],"patterns":["auth-and-signin","settings-screens","search-ux","forms-and-input","onboarding-flows","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://1password.com","mobbin":"https://mobbin.com/apps/1password"},"one_liner":"Turns a threat-model problem (password/secret custody) into a filing-cabinet metaphor — vaults, items, categories — so the emotional register stays \"organized,\" never \"at risk.\"","words":907,"file":"apps/1password.md","thumb":"jpg"},{"slug":"amie","title":"Amie","kind":"app","category":"productivity-tools","tier":"A","platforms":["mac","ios","web"],"tags":["joyful-productivity","emoji-forward","spring-motion","calendar-todo-fusion","pastel-color","personality-led"],"patterns":["calendars-and-scheduling","onboarding-flows","motion-language-systems","microcopy-and-ux-writing","tooltips-and-feature-discovery","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://amie.so","mobbin":"https://mobbin.com/apps/amie"},"one_liner":"A calendar/todo hybrid that treats scheduling as a tactile, personality-led act — timebox a task by dragging it onto the day, and the whole interface springs and pops back at you.","words":836,"file":"apps/amie.md","thumb":"jpg"},{"slug":"apple-shortcuts","title":"Shortcuts","kind":"app","category":"productivity-tools","tier":"A","platforms":["ios","mac"],"tags":["visual-programming","block-based","gallery-driven","parameter-pills","automation","system-integration"],"patterns":["onboarding-flows","permission-priming","tooltips-and-feature-discovery","settings-screens","forms-and-input","pickers-steppers-controls"],"updated":"2026-07-22","links":{"site":"https://apps.apple.com/us/app/shortcuts/id915249334","mobbin":"https://mobbin.com/apps/shortcuts"},"one_liner":"Apple's visual-automation builder that makes if/then/loop programming legible to non-programmers by rendering every parameter as an inline, tappable sentence-fragment instead of a code field.","words":975,"file":"apps/apple-shortcuts.md","thumb":"jpg"},{"slug":"arc-browser","title":"Arc","kind":"app","category":"productivity-tools","tier":"S","platforms":["mac","windows","ios"],"tags":["sidebar-nav","spaces","playful-chrome","gradient-theming","keyboard-driven","novelty-tax","browser-ui"],"patterns":["navigation-systems","command-palettes-and-keyboard-ux","onboarding-flows","tooltips-and-feature-discovery","motion-language-systems","dashboards-and-consoles"],"updated":"2026-07-22","links":{"site":"https://arc.net","mobbin":"https://mobbin.com/apps/arc"},"one_liner":"A browser that replaced the top tab bar and address bar with a single vertical sidebar (tabs, search, and per-context \"Spaces\" all in one column) — critically loved, structurally unable to cross into mass habit because it asks users to unlearn 25 years of browser muscle memory.","words":869,"file":"apps/arc-browser.md","thumb":"jpg"},{"slug":"bear-notes","title":"Bear","kind":"app","category":"productivity-tools","tier":"A","platforms":["ios","mac"],"tags":["markdown","typography","red-accent","tag-system","writing-focus","minimal-chrome"],"patterns":["settings-screens","paywalls-and-pricing-sheets","search-ux","dark-mode-and-theming","onboarding-flows"],"updated":"2026-07-22","links":{"site":"https://bear.app","mobbin":"https://mobbin.com/apps/bear"},"one_liner":"A markdown notes app with almost no chrome — one accent color, one editor font choice, and a tag system built from #hashtag syntax instead of folders, proving restraint can be the entire design language.","words":800,"file":"apps/bear-notes.md","thumb":"jpg"},{"slug":"craft-docs","title":"Craft","kind":"app","category":"productivity-tools","tier":"A","platforms":["ios","mac","web"],"tags":["card-based","warm-neutrals","editorial-typography","per-doc-theming","low-density","daily-notes"],"patterns":["onboarding-flows","docs-and-changelogs","dark-mode-and-theming","sharing-and-export-flows","calendars-and-scheduling"],"updated":"2026-07-22","links":{"site":"https://www.craft.do","mobbin":"https://mobbin.com/apps/craft"},"one_liner":"A block-based notes/docs app that competes with Notion not on power-user features but on visual craft — cards, backgrounds, and typography treated as the product, not decoration on top of it.","words":778,"file":"apps/craft-docs.md","thumb":"jpg"},{"slug":"fantastical","title":"Fantastical","kind":"app","category":"productivity-tools","tier":"A","platforms":["ios","mac"],"tags":["natural-language-input","mac-assed-mac-app","widget-suite","day-ticker","calendar","subtle-color"],"patterns":["calendars-and-scheduling","forms-and-input","live-activities-widgets","dashboards-and-consoles","settings-screens","microcopy-and-ux-writing"],"updated":"2026-07-22","links":{"site":"https://flexibits.com/fantastical","mobbin":"https://mobbin.com/apps/fantastical"},"one_liner":"A calendar whose entire pitch is one text field — type a sentence, get a correctly-parsed event — wrapped in Mac/iOS-native chrome so faithful it reads as an Apple product with better taste.","words":928,"file":"apps/fantastical.md","thumb":"jpg"},{"slug":"flighty","title":"Flighty","kind":"app","category":"productivity-tools","tier":"S","platforms":["ios"],"tags":["live-activities","data-dense","forecasting","premium-utility","dark-first","real-time"],"patterns":["live-activities-widgets","push-notification-strategy","progress-and-data-viz","dashboards-and-consoles","paywalls-and-pricing-sheets","tables-and-dense-data"],"updated":"2026-07-22","links":{"site":"https://flightyapp.com","mobbin":"https://mobbin.com/apps/flighty"},"one_liner":"Flight tracker that won Apple's Design Award for treating a Live Activity as the primary product surface, not an add-on — the lock screen becomes the app.","words":874,"file":"apps/flighty.md","thumb":"jpg"},{"slug":"notion","title":"Notion","kind":"app","category":"productivity-tools","tier":"S","platforms":["web","ios","android","desktop"],"tags":["block-editor","grayscale-chrome","database-views","templates","slash-commands","low-density-default"],"patterns":["tables-and-dense-data","kanban-and-boards","dashboards-and-consoles","command-palettes-and-keyboard-ux","settings-screens","onboarding-flows"],"updated":"2026-07-22","links":{"site":"https://notion.so","mobbin":"https://mobbin.com/apps/notion"},"one_liner":"A blank canvas made navigable by one universal insertion command and one reusable data schema rendered through many views — chrome recedes to grayscale so content color always wins.","words":859,"file":"apps/notion.md","thumb":"jpg"},{"slug":"notion-calendar","title":"Notion Calendar (Cron)","kind":"app","category":"productivity-tools","tier":"S","platforms":["mac","ios","web"],"tags":["calendar","command-bar","timezone-rails","availability-sharing","notion-color-system","menu-bar-app","dense-scheduling"],"patterns":["calendars-and-scheduling","command-palettes-and-keyboard-ux","dashboards-and-consoles","sharing-and-export-flows","settings-screens","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://calendar.notion.so","mobbin":"https://mobbin.com/apps/notion-calendar"},"one_liner":"Cron's fast native calendar, absorbed into Notion in 2023 and rebranded — proof that a scheduling tool can carry Notion's off-white calm into a genuinely dense, keyboard-first interface without feeling like a spreadsheet.","words":885,"file":"apps/notion-calendar.md","thumb":"jpg"},{"slug":"obsidian","title":"Obsidian","kind":"app","category":"productivity-tools","tier":"A","platforms":["desktop","ios","android"],"tags":["local-first","markdown-editor","plugin-ecosystem","graph-view","community-theming","power-user","offline-first"],"patterns":["dark-mode-and-theming","command-palettes-and-keyboard-ux","settings-screens","docs-and-changelogs","progress-and-data-viz","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://obsidian.md","mobbin":"https://mobbin.com/apps/obsidian"},"one_liner":"A markdown vault with no server and no account, built on a \"core app + everything else is a plugin\" architecture — its interface is only as calm as the user's plugin list, and that's the entire point.","words":869,"file":"apps/obsidian.md","thumb":"jpg"},{"slug":"raycast","title":"Raycast","kind":"app","category":"productivity-tools","tier":"S","platforms":["mac","ios","web"],"tags":["launcher","keyboard-driven","extension-ecosystem","ai-commands","command-palette","macos-native"],"patterns":["command-palettes-and-keyboard-ux","ai-chat-and-copilot-ux","search-ux","settings-screens","tooltips-and-feature-discovery","monetization-upsell-moments"],"updated":"2026-07-22","links":{"site":"https://raycast.com","mobbin":"https://mobbin.com/apps/raycast"},"one_liner":"A Spotlight replacement that turned \"type an action, get a result\" into an OS-level UI grammar — root list, nested action panel, inline AI, and an extension store — now the reference every keyboard-first quick-action surface gets measured against.","words":932,"file":"apps/raycast.md","thumb":"jpg"},{"slug":"structured","title":"Structured","kind":"app","category":"productivity-tools","tier":"A","platforms":["ios","android"],"tags":["timeline-ui","pastel-gradients","timeboxing","rounded-typography","widgets","drag-to-resize","spring-motion"],"patterns":["calendars-and-scheduling","progress-and-data-viz","streaks-and-gamification","live-activities-widgets","onboarding-flows","paywalls-and-pricing-sheets"],"updated":"2026-07-22","links":{"site":"https://structured.app","mobbin":"https://mobbin.com/apps/structured"},"one_liner":"Turns \"make a to-do list\" into \"draw your day\" — a vertical 24-hour timeline where task blocks have literal height, which is the single mechanism that made timeboxing legible to a non-planner audience.","words":903,"file":"apps/structured.md","thumb":"jpg"},{"slug":"superhuman","title":"Superhuman","kind":"app","category":"productivity-tools","tier":"S","platforms":["mac","windows","ios","android","web"],"tags":["keyboard-first","speed-as-luxury","dark-mode","dense","concierge-onboarding","monospace-accents"],"patterns":["command-palettes-and-keyboard-ux","onboarding-flows","dashboards-and-consoles","dark-mode-and-theming","tooltips-and-feature-discovery","progress-and-data-viz"],"updated":"2026-08-02","links":{"site":"https://superhuman.com","mobbin":"https://mobbin.com/apps/superhuman"},"one_liner":"An inbox priced at a premium (historically ~$30/mo before the 2025 Grammarly acquisition retier) to make you feel elite for hitting keys instead of clicking — the definitive case study in productivity-as-status rather than productivity-as-utility.","words":895,"file":"apps/superhuman.md","thumb":"jpg"},{"slug":"superlist","title":"Superlist","kind":"app","category":"productivity-tools","tier":"A","platforms":["ios","mac","web"],"tags":["motion-rich","block-editor","collaborative","playful-physics","checklist","spring-animation"],"patterns":["onboarding-flows","activation-checklists","kanban-and-boards","motion-language-systems","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://superlist.com","mobbin":"https://mobbin.com/apps/superlist"},"one_liner":"A to-do/collaboration app from Christian Reber's post-Wunderlist studio that treats \"checking a box\" as the emotional core of the product, then builds a Notion-style block editor and live multiplayer around it.","words":831,"file":"apps/superlist.md","thumb":"jpg"},{"slug":"things-3","title":"Things 3","kind":"app","category":"productivity-tools","tier":"S","platforms":["ios","mac"],"tags":["white-space","single-accent-color","motion-restraint","todo","magic-plus","tutorial-as-content"],"patterns":["onboarding-flows","activation-checklists","forms-and-input","motion-language-systems","navigation-systems","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://culturedcode.com/things","mobbin":"https://mobbin.com/apps/things-3"},"one_liner":"A to-do app that teaches its entire feature set through the to-do list itself, and treats blank space as the primary design material.","words":902,"file":"apps/things-3.md","thumb":"jpg"},{"slug":"tiimo","title":"Tiimo","kind":"app","category":"productivity-tools","tier":"A","platforms":["ios","android"],"tags":["neurodivergent-first","visual-timeline","icon-first","gentle-notifications","accessibility","low-density","body-doubling"],"patterns":["onboarding-flows","calendars-and-scheduling","push-notification-strategy","accessibility-baselines","live-activities-widgets","motion-language-systems"],"updated":"2026-07-22","links":{"site":"https://www.tiimoapp.com","mobbin":"https://mobbin.com/apps/tiimo"},"one_liner":"ADHD/autism-built visual day planner that replaces the digital clock with proportional colored shapes — the reference for making time legible to a brain that doesn't parse numbers as urgency. Named 2025 iPhone App of the Year (App Store Awards, 2025-12-04, verified 2026-07) after shipping an AI planning assistant.","words":880,"file":"apps/tiimo.md","thumb":"jpg"},{"slug":"todoist","title":"Todoist","kind":"app","category":"productivity-tools","tier":"A","platforms":["all"],"tags":["natural-language-input","cross-platform-parity","gamification","red-brand","task-lists","karma"],"patterns":["onboarding-flows","streaks-and-gamification","calendars-and-scheduling","forms-and-input","progress-and-data-viz","dashboards-and-consoles"],"updated":"2026-07-22","links":{"site":"https://todoist.com","mobbin":"https://mobbin.com/apps/todoist"},"one_liner":"A task manager whose entire design discipline is sameness — the same red accent, the same priority-flag language, and the same natural-language date parser on iOS, Android, web, Windows, macOS, Linux, and a browser extension, so muscle memory transfers across every surface a user touches.","words":882,"file":"apps/todoist.md","thumb":"jpg"},{"slug":"bereal","title":"BeReal","kind":"app","category":"social-messaging","tier":"A","platforms":["ios","android"],"tags":["dual-camera","notification-ritual","post-to-unlock","monochrome-yellow-accent","ephemeral-feed","camera-native-ugc"],"patterns":["camera-and-capture-ui","push-notification-strategy","streaks-and-gamification","feeds-and-ranking","maps-and-location","onboarding-flows"],"updated":"2026-07-22","links":{"site":"https://bereal.com","mobbin":"https://mobbin.com/apps/bereal"},"one_liner":"A daily-photo social app built entirely to protect and dramatize a single mechanic — one push, one two-minute window, one unstaged dual-camera shot — proving constraint itself can be the product.","words":893,"file":"apps/bereal.md","thumb":"jpg"},{"slug":"discord","title":"Discord","kind":"app","category":"social-messaging","tier":"S","platforms":["ios","android","web","desktop"],"tags":["dark-first","community-ia","role-permissions","mobile-nav-redesign","blurple","voice-first","gamer-coded"],"patterns":["chat-and-messaging-ui","dm-commerce-and-community-selling","monetization-upsell-moments","onboarding-flows","navigation-systems","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://discord.com","mobbin":"https://mobbin.com/apps/discord"},"one_liner":"A server/channel hierarchy with granular role permissions and community-funded commerce, built on a gamer-dark UI (stacked near-black grays plus a single blurple accent) that doesn't travel to premium or consumer-neutral surfaces.","words":885,"file":"apps/discord.md","thumb":"jpg"},{"slug":"instagram","title":"Instagram","kind":"app","category":"social-messaging","tier":"S","platforms":["ios","android"],"tags":["stories-format","reels","ephemeral-ui","full-bleed-media","gesture-nav","shoppable-posts"],"patterns":["stories-format","feeds-and-ranking","camera-and-capture-ui","dm-commerce-and-community-selling","product-detail-pages"],"updated":"2026-08-02","links":{"site":"https://instagram.com","mobbin":"https://mobbin.com/apps/instagram"},"one_liner":"The app that made full-bleed media, the Stories ring, and swipe-vertical video the baseline every social and commerce surface now inherits whether it means to or not.","words":985,"file":"apps/instagram.md","thumb":"jpg"},{"slug":"locket","title":"Locket","kind":"app","category":"social-messaging","tier":"A","platforms":["ios","android"],"tags":["widget-first","minimal-surface","push-notification","living-avatar","single-loop","home-screen-widget"],"patterns":["onboarding-flows","permission-priming","push-notification-strategy","live-activities-widgets","paywalls-and-pricing-sheets"],"updated":"2026-07-22","links":{"site":"https://locket.cam","mobbin":"https://mobbin.com/apps/locket"},"one_liner":"A photo-sharing app whose real product surface is the iOS/Android home-screen widget — the in-app screens exist only to load a camera roll of one and get out of the way.","words":884,"file":"apps/locket.md","thumb":"jpg"},{"slug":"luma-events","title":"Luma","kind":"app","category":"social-messaging","tier":"A","platforms":["ios","web"],"tags":["editorial","warm-neutral","calm-density","event-pages","host-dashboard","restrained-motion","calendar-first"],"patterns":["calendars-and-scheduling","dashboards-and-consoles","checkout-and-cart","sharing-and-export-flows","landing-page-anatomy","reviews-and-social-proof"],"updated":"2026-07-22","links":{"site":"https://lu.ma","mobbin":"https://mobbin.com/apps/luma"},"one_liner":"An events platform that treats the event page like a poster, not a party invite — one neutral chassis, one accent color per event, and a calendar-subscribe mechanic that quietly makes it infrastructure instead of a toy.","words":772,"file":"apps/luma-events.md","thumb":"jpg"},{"slug":"partiful","title":"Partiful","kind":"app","category":"social-messaging","tier":"S","platforms":["ios","web"],"tags":["maximalist","sticker-collage","gen-z-voice","event-invites","playful-type","rsvp"],"patterns":["onboarding-flows","chat-and-messaging-ui","sharing-and-export-flows","microcopy-and-ux-writing","push-notification-strategy","referral-and-invite"],"updated":"2026-07-22","links":{"site":"https://partiful.com","mobbin":"https://mobbin.com/apps/partiful"},"one_liner":"Event invites reimagined as a decorable collage surface — a blank canvas of stickers, GIFs, and hand-set type that turns \"you're invited\" into the first moment of the party itself, not a calendar chore.","words":825,"file":"apps/partiful.md","thumb":"jpg"},{"slug":"pinterest","title":"Pinterest","kind":"app","category":"social-messaging","tier":"S","platforms":["ios","android","web"],"tags":["masonry-grid","visual-search","collecting","discovery-feed","boards","ecommerce-adjacent"],"patterns":["feeds-and-ranking","search-ux","onboarding-flows","sharing-and-export-flows","product-detail-pages","monetization-upsell-moments"],"updated":"2026-07-22","links":{"site":"https://pinterest.com","mobbin":"https://mobbin.com/apps/pinterest"},"one_liner":"A discovery engine built around saving, not posting — the app that made the staggered masonry grid and the \"board\" the default grammar for visual bookmarking everywhere.","words":817,"file":"apps/pinterest.md","thumb":"jpg"},{"slug":"reddit","title":"Reddit","kind":"app","category":"social-messaging","tier":"B","platforms":["ios","android","web"],"tags":["night-mode-toggle","threaded-comments","community-credibility","upvote-mechanics","old-vs-new-tension","card-feed"],"patterns":["feeds-and-ranking","reviews-and-social-proof","dark-mode-and-theming","navigation-systems","search-ux","sharing-and-export-flows"],"updated":"2026-08-02","links":{"site":"https://reddit.com","mobbin":"https://mobbin.com/apps/reddit"},"one_liner":"A card-feed shell wrapped around a text-forum core — proof a UI can chase a decade of \"modernization\" while its most loyal users flee to the old skin it never turned off.","words":958,"file":"apps/reddit.md","thumb":"jpg"},{"slug":"retro-app","title":"Retro","kind":"app","category":"social-messaging","tier":"S","platforms":["ios"],"tags":["film-inspired","close-friends","weekly-ritual","tactile","small-team-craft","widgets"],"patterns":["camera-and-capture-ui","feeds-and-ranking","push-notification-strategy","live-activities-widgets","profile-screens","onboarding-flows"],"updated":"2026-07-22","links":{"site":"https://retro.app","mobbin":"https://mobbin.com/apps/retro"},"one_liner":"A photo-sharing app that throttles itself on purpose — one roll of film's worth of candid shots a week, developed together, seen only by the small circle you picked — proof that a scarcity mechanic can be the whole product.","words":812,"file":"apps/retro-app.md","thumb":"jpg"},{"slug":"snapchat","title":"Snapchat","kind":"app","category":"social-messaging","tier":"A","platforms":["ios","android"],"tags":["camera-first","ephemeral-content","ar-lenses","gesture-nav","icon-only-status","bitmoji","streaks"],"patterns":["camera-and-capture-ui","stories-format","chat-and-messaging-ui","streaks-and-gamification","permission-priming","navigation-systems"],"updated":"2026-07-22","links":{"site":"https://www.snapchat.com","mobbin":"https://mobbin.com/apps/snapchat"},"one_liner":"The only mainstream app where the camera IS the app shell — everything else (chat, stories, map) lives one swipe away from a permanently-open shutter, and message state is communicated entirely through shape and color, never text.","words":795,"file":"apps/snapchat.md","thumb":"jpg"},{"slug":"substack","title":"Substack","kind":"app","category":"social-messaging","tier":"A","platforms":["ios","web"],"tags":["reader-typography","paywall","creator-economy","newsletter","notes-feed","serif-first"],"patterns":["paywalls-and-pricing-sheets","feeds-and-ranking","checkout-and-cart","dashboards-and-consoles","monetization-upsell-moments","chat-and-messaging-ui"],"updated":"2026-07-22","links":{"site":"https://substack.com","mobbin":"https://mobbin.com/apps/substack"},"one_liner":"A publishing platform that spends its entire design budget on making long text pleasant to read, then treats the subscribe prompt as a natural pause in that reading rather than a wall.","words":945,"file":"apps/substack.md","thumb":"jpg"},{"slug":"telegram","title":"Telegram","kind":"app","category":"social-messaging","tier":"S","platforms":["ios","android","web"],"tags":["bot-ui","inline-keyboards","mini-apps","chat-bubbles","custom-themes","channels-as-storefront","payments"],"patterns":["chat-and-messaging-ui","checkout-and-cart","dm-commerce-and-community-selling","dark-mode-and-theming","bottom-sheets-and-modals","push-notification-strategy"],"updated":"2026-07-22","links":{"site":"https://telegram.org","mobbin":"https://mobbin.com/apps/telegram"},"one_liner":"A messenger that grew a second skeleton underneath the chat UI — bots, inline keyboards, Mini Apps and native payments — turning a conversation thread into a storefront without ever leaving it.","words":901,"file":"apps/telegram.md","thumb":"jpg"},{"slug":"threads","title":"Threads","kind":"app","category":"social-messaging","tier":"A","platforms":["ios","android"],"tags":["text-first","calm-feed","instant-network","ig-graft","minimal-chrome","cold-start-onboarding"],"patterns":["onboarding-flows","permission-priming","feeds-and-ranking","profile-screens","dm-commerce-and-community-selling","sharing-and-export-flows"],"updated":"2026-07-22","links":{"site":"https://www.threads.com","mobbin":"https://mobbin.com/apps/threads"},"one_liner":"Meta's Twitter-alternative that skipped the empty-room problem entirely by importing your Instagram identity and follow graph on first launch, then wrapped a deliberately quiet, low-color feed around it.","words":866,"file":"apps/threads.md","thumb":"jpg"},{"slug":"tiktok","title":"TikTok","kind":"app","category":"social-messaging","tier":"S","platforms":["ios","android"],"tags":["full-bleed-video","overlay-ui","sound-first","vertical-feed","creation-pipeline","retention-mechanics"],"patterns":["feeds-and-ranking","camera-and-capture-ui","video-editors-and-timelines","onboarding-flows","sharing-and-export-flows","live-commerce-and-auctions"],"updated":"2026-07-22","links":{"site":"https://www.tiktok.com","mobbin":"https://mobbin.com/apps/tiktok"},"one_liner":"A full-screen, sound-anchored video feed with almost no chrome — the reference for making UI disappear so autoplay content and a floating action rail can carry the entire product.","words":915,"file":"apps/tiktok.md","thumb":"jpg"},{"slug":"whatsapp","title":"WhatsApp","kind":"app","category":"social-messaging","tier":"A","platforms":["ios","android","web"],"tags":["e2e-encryption","chat-bubbles","status-stories","voice-messages","business-catalog","restraint-at-scale","cross-platform"],"patterns":["chat-and-messaging-ui","stories-format","dm-commerce-and-community-selling","product-detail-pages","onboarding-flows","push-notification-strategy"],"updated":"2026-07-22","links":{"site":"https://www.whatsapp.com","mobbin":"https://mobbin.com/apps/whatsapp"},"one_liner":"The chat app that shipped almost no visual opinion beyond one color and one bubble shape, then kept it stable for over a decade — the counter-example to trend-chasing, and the reference for how commerce and broadcast can bolt onto a messaging core without disturbing it.","words":922,"file":"apps/whatsapp.md","thumb":"jpg"},{"slug":"x-twitter","title":"X (Twitter)","kind":"app","category":"social-messaging","tier":"A","platforms":["ios","android","web"],"tags":["dense-timeline","realtime-feed","dark-mode","algorithmic-feed","rebrand-decay","monetization-creep"],"patterns":["feeds-and-ranking","dm-commerce-and-community-selling","monetization-upsell-moments","navigation-systems","push-notification-strategy","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://x.com","mobbin":"https://mobbin.com/apps/x"},"one_liner":"The reference for high-density, infinite-scroll social feeds — and, since the 2023 rebrand, a live case study in what happens when monetization pressure gets layered onto a UI that wasn't built to carry it.","words":921,"file":"apps/x-twitter.md","thumb":"jpg"},{"slug":"airbnb","title":"Airbnb","kind":"app","category":"travel-local-food","tier":"S","platforms":["ios","android","web"],"tags":["icon-driven","trust-architecture","photo-first","category-nav","marketplace","rounded"],"patterns":["search-ux","product-detail-pages","reviews-and-social-proof","checkout-and-cart","maps-and-location","navigation-systems"],"updated":"2026-07-22","links":{"site":"https://www.airbnb.com","mobbin":"https://mobbin.com/apps/airbnb"},"one_liner":"A marketplace where strangers pay strangers to sleep in their homes, made to feel low-risk through photography, review density, and a category system that replaced text search with a scroll of illustrated icons.","words":982,"file":"apps/airbnb.md","thumb":"jpg"},{"slug":"alltrails","title":"AllTrails","kind":"app","category":"travel-local-food","tier":"A","platforms":["ios","android","web"],"tags":["maps-first","photo-led-trust","difficulty-color-coding","offline-first","community-reviews","outdoor","freemium-paywall"],"patterns":["maps-and-location","reviews-and-social-proof","search-ux","error-offline-recovery","paywalls-and-pricing-sheets"],"updated":"2026-07-22","links":{"site":"https://www.alltrails.com","mobbin":"https://mobbin.com/apps/alltrails"},"one_liner":"Trail discovery app that solved the hardest hybrid in mobile design — a full-bleed map and a scrollable social feed sharing one screen — by making photos and difficulty color-coding do the trust work copy can't.","words":891,"file":"apps/alltrails.md","thumb":"jpg"},{"slug":"apple-maps","title":"Apple Maps","kind":"app","category":"travel-local-food","tier":"S","platforms":["ios"],"tags":["cartography","place-cards","flyover","bottom-sheets","dark-mode","transit","real-world-detail"],"patterns":["maps-and-location","bottom-sheets-and-modals","product-detail-pages","search-ux","navigation-systems","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://www.apple.com/maps","mobbin":"https://mobbin.com/apps/apple-maps"},"one_liner":"After the 2012 launch disaster, Apple rebuilt the map from its own survey data and shipped a hand-tuned rendering style; by 2025 it's the app most people point to when they say a map \"feels designed\" rather than plotted.","words":940,"file":"apps/apple-maps.md","thumb":"jpg"},{"slug":"beli","title":"Beli","kind":"app","category":"travel-local-food","tier":"A","platforms":["ios"],"tags":["ranked-lists","forced-choice-ranking","gen-z","social-dining","taste-match","food-discovery"],"patterns":["feeds-and-ranking","reviews-and-social-proof","maps-and-location","referral-and-invite","onboarding-flows","profile-screens"],"updated":"2026-07-22","links":{"site":"https://www.beliapp.co","mobbin":"https://mobbin.com/apps/beli"},"one_liner":"A restaurant tracker that refuses to let you rate anything with stars — every place you've been gets placed into a personal ranked list via head-to-head comparisons, and the resulting score is the whole product.","words":848,"file":"apps/beli.md","thumb":"jpg"},{"slug":"doordash","title":"DoorDash","kind":"app","category":"travel-local-food","tier":"A","platforms":["ios","android","web"],"tags":["food-delivery","order-tracking","live-maps","marketplace-app","subscription-upsell","menu-merchandising","fee-stacking"],"patterns":["order-tracking","checkout-and-cart","maps-and-location","paywalls-and-pricing-sheets","monetization-upsell-moments","anti-patterns-dark-patterns"],"updated":"2026-07-22","links":{"site":"https://www.doordash.com","mobbin":"https://mobbin.com/apps/doordash"},"one_liner":"A delivery marketplace whose real product is the anxiety-management screen — the order tracker — wrapped around a merchandising engine (menus, upsells, DashPass) tuned to lift average order value.","words":899,"file":"apps/doordash.md","thumb":"jpg"},{"slug":"google-maps","title":"Google Maps","kind":"app","category":"travel-local-food","tier":"A","platforms":["all"],"tags":["maps-first","information-dense","bottom-sheet","material-design","live-data","cross-platform"],"patterns":["maps-and-location","bottom-sheets-and-modals","search-ux","reviews-and-social-proof","sharing-and-export-flows","navigation-systems"],"updated":"2026-07-22","links":{"site":"https://maps.google.com","mobbin":"https://mobbin.com/apps/google-maps"},"one_liner":"A live spatial database with millions of overlapping data points (traffic, transit, reviews, photos, business hours, live occupancy) that never feels denser than \"a map with a card at the bottom.\"","words":1060,"file":"apps/google-maps.md","thumb":"jpg"},{"slug":"hopper","title":"Hopper","kind":"app","category":"travel-local-food","tier":"A","platforms":["ios","android"],"tags":["price-prediction","mascot-branding","fintech-upsell","calendar-heatmap","confidence-ui","reward-currency"],"patterns":["monetization-upsell-moments","checkout-and-cart","permission-priming","calendars-and-scheduling","progress-and-data-viz","push-notification-strategy"],"updated":"2026-07-22","links":{"site":"https://www.hopper.com","mobbin":"https://mobbin.com/apps/hopper"},"one_liner":"A travel-booking app that never shows a bare price — every fare ships with a verdict, a confidence score, and a bunny mascot to soften what is otherwise an insurance-and-derivatives product for airfare.","words":906,"file":"apps/hopper.md","thumb":"jpg"},{"slug":"resy","title":"Resy","kind":"app","category":"travel-local-food","tier":"A","platforms":["ios","web"],"tags":["editorial-curation","waitlist-ux","warm-neutral-palette","scarcity-design","food-media","notify-pattern","photography-first"],"patterns":["search-ux","product-detail-pages","drops-and-restocks","push-notification-strategy","calendars-and-scheduling","reviews-and-social-proof"],"updated":"2026-07-22","links":{"site":"https://resy.com","mobbin":"https://mobbin.com/apps/resy"},"one_liner":"A reservation platform that skips the Yelp star-rating war entirely and sells restaurants through editorial photography and human-written taste — then turns \"fully booked\" into a queue you're glad to join.","words":890,"file":"apps/resy.md","thumb":"jpg"},{"slug":"soho-house","title":"Soho House","kind":"app","category":"travel-local-food","tier":"A","platforms":["mobile","web"],"tags":["digital-membership-card","per-event-visibility","house-as-primary-context","in-app-tab-settlement","time-horizon-grouping","concierge-persona-ai"],"patterns":["profile-screens","calendars-and-scheduling","order-tracking","permission-priming","maps-and-location"],"updated":"2026-07-26","links":{"site":"https://www.sohohouse.com"},"one_liner":"A private membership-club app used by over 90% of Soho House's global membership, built around a digital card that functions as a literal door key across 40+ locations, and organized less like a typical hospitality app and more like a keycard that happens to also book dinner.","words":946,"file":"apps/soho-house.md","thumb":"jpg"},{"slug":"uber","title":"Uber","kind":"app","category":"travel-local-food","tier":"S","platforms":["ios","android"],"tags":["map-first","bottom-sheet-ux","state-machine-flows","price-transparency","membership-upsell","live-tracking"],"patterns":["maps-and-location","order-tracking","bottom-sheets-and-modals","paywalls-and-pricing-sheets","monetization-upsell-moments","checkout-and-cart"],"updated":"2026-07-22","links":{"site":"https://uber.com","mobbin":"https://mobbin.com/apps/uber"},"one_liner":"On-demand mobility and delivery super-app that turned real-time matching into a design pattern — a persistent map, upfront pricing, and a draggable bottom sheet that narrates every stage without ever changing screens.","words":882,"file":"apps/uber.md","thumb":"jpg"},{"slug":"apple-weather","title":"Apple Weather","kind":"app","category":"utilities-system","tier":"A","platforms":["ios"],"tags":["data-viz","module-cards","dynamic-backgrounds","materials","severe-alerts","progressive-disclosure"],"patterns":["progress-and-data-viz","dashboards-and-consoles","live-activities-widgets","push-notification-strategy","navigation-systems","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://apple.com/ios/weather","mobbin":"https://mobbin.com/apps/apple-weather"},"one_liner":"A single-screen utility that turns the current condition into the literal canvas (animated gradient + particles), then layers a scrollable grid of glass module-cards on top — the cleanest example on iOS of data visualization living inside a translucent-material system.","words":967,"file":"apps/apple-weather.md","thumb":"jpg"},{"slug":"carrot-weather","title":"CARROT Weather","kind":"app","category":"utilities-system","tier":"A","platforms":["ios"],"tags":["personality-voice","dark-first","widgets","data-density","custom-iconography","subscription-tiers","live-backgrounds"],"patterns":["onboarding-flows","permission-priming","live-activities-widgets","monetization-upsell-moments","microcopy-and-ux-writing","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://www.carrotweather.app","mobbin":"https://mobbin.com/apps/carrot-weather"},"one_liner":"A weather app competing against free OS-level weather by refusing to be neutral — a sarcastic AI personality, a real-time animated sky, and widget customization deep enough to be a hobby, all stacked on the same forecast data everyone else has.","words":808,"file":"apps/carrot-weather.md","thumb":"jpg"},{"slug":"framework-laptop","title":"Framework","kind":"app","category":"utilities-system","tier":"A","platforms":["web"],"tags":["modular-hardware","repairability","expansion-cards","exploded-view-diagrams","configurator-commerce","right-to-repair"],"patterns":["product-detail-pages","landing-page-anatomy","pricing-pages-web","checkout-and-cart","docs-and-changelogs","tables-and-dense-data"],"updated":"2026-07-26","links":{"site":"https://frame.work"},"one_liner":"A consumer-electronics company built around a single mechanism — swappable, cartridge-sized \"Expansion Cards\" that snap into the chassis — that turns repairability, normally a legal footnote, into the entire hero image and the entire recurring-revenue model.","words":857,"file":"apps/framework-laptop.md","thumb":"jpg"},{"slug":"ios-system","title":"iOS 26 System Apps","kind":"app","category":"utilities-system","tier":"S","platforms":["ios"],"tags":["liquid-glass","concentric-design","system-chrome","translucency","native-controls","motion-restraint"],"patterns":["settings-screens","camera-and-capture-ui","navigation-systems","dark-mode-and-theming","bottom-sheets-and-modals"],"updated":"2026-07-22","links":{"site":"https://www.apple.com/ios/ios-26/","mobbin":"https://mobbin.com/apps/ios-settings"},"one_liner":"Apple's Liquid Glass redesign (shipped fall 2025 as iOS 26, the version-number jump to match calendar year) replaced flat translucency with a material that visibly bends and re-samples the content behind it — the DNA here is the refraction engine and the corner-radius math, not \"frosted panels.\"","words":830,"file":"apps/ios-system.md","thumb":"jpg"},{"slug":"moonlitt","title":"Moonlitt","kind":"app","category":"utilities-system","tier":"A","platforms":["ios"],"tags":["liquid-glass","moon-phase-tracker","ada-2026-winner","dark-first","ambient-utility","post-cutoff"],"patterns":["motion-language-systems","dark-mode-and-theming","live-activities-widgets","progress-and-data-viz","onboarding-flows","permission-priming"],"updated":"2026-07-22","links":{"site":"https://moonlitt.app","mobbin":"https://mobbin.com/apps/moonlitt"},"one_liner":"A single-purpose moon-phase tracker that won the 2026 Apple Design Award for Interaction, cited by Apple's own judging language as one of two apps demonstrating reference-grade Liquid Glass integration — a live calibration target, not a screenshot to imitate from memory.","words":759,"file":"apps/moonlitt.md","thumb":"jpg"},{"slug":"pixel-android","title":"Pixel / Android 16","kind":"app","category":"utilities-system","tier":"A","platforms":["android"],"tags":["material-3-expressive","dynamic-color","quick-settings","spring-motion","variable-icons","adaptive-layouts"],"patterns":["settings-screens","permission-priming","dark-mode-and-theming","motion-language-systems","live-activities-widgets","navigation-systems"],"updated":"2026-07-22","links":{"site":"https://android.com","mobbin":"https://mobbin.com/apps/android"},"one_liner":"The only major OS where the UI's color palette is generated per-device from the user's wallpaper at runtime, and where \"expressive\" now means physics-driven shape and motion tokens rather than a static style guide.","words":1018,"file":"apps/pixel-android.md","thumb":"jpg"},{"slug":"remarkable","title":"reMarkable","kind":"app","category":"utilities-system","tier":"S","platforms":["tablet","web","desktop","mobile"],"tags":["e-ink","paper-simulation","monochrome-restraint","distraction-free","template-library","stylus-input","material-honesty"],"patterns":["landing-page-anatomy","product-detail-pages","onboarding-flows","sharing-and-export-flows","empty-states","microcopy-and-ux-writing"],"updated":"2026-07-26","links":{"site":"https://remarkable.com"},"one_liner":"A Norwegian e-ink tablet company that turned a slow-refresh, colorless screen — the exact spec that would sink a normal consumer device — into a \"distraction-free thinking\" product, by building the entire UI as a literal paper metaphor instead of a phone metaphor.","words":868,"file":"apps/remarkable.md","thumb":"jpg"},{"slug":"tide-guide","title":"Tide Guide","kind":"app","category":"utilities-system","tier":"A","platforms":["ios"],"tags":["data-viz","liquid-glass","aquatic-theming","custom-animation","single-purpose","award-winning"],"patterns":["progress-and-data-viz","dashboards-and-consoles","tables-and-dense-data","motion-language-systems","dark-mode-and-theming"],"updated":"2026-07-22","links":{"site":"https://tideguideapp.com","mobbin":"https://mobbin.com/apps/tide-guide"},"one_liner":"A tide-chart utility for coastal/water users that won Apple's 2026 Design Award for Visuals & Graphics by treating its own core data — the tide curve — as the app's entire visual identity, wrapped in Liquid Glass.","words":665,"file":"apps/tide-guide.md","thumb":"jpg"},{"slug":"abeto-messenger","title":"Messenger (abeto)","kind":"app","category":"web-experiences","tier":"C","platforms":["web"],"tags":["webgl","svelte","code-split-loading","stroke-loader","studio-abeto","sparse-knowledge-card"],"patterns":["loaders-and-site-intros","premium-web-microinteractions","motion-language-systems"],"updated":"2026-08-02","links":{"site":"https://messenger.abeto.co"},"one_liner":"A single-page Svelte + WebGL piece from studio abeto whose entire pitch is one line of copy — \"It's a small planet, but someone's gotta make the deliveries\" (verified via page meta) — not an award-winning flagship: abeto's verified 2025 Awwwards Site of the Year + Developer Site of the Year sweep belongs to a different project, Igloo Inc.","words":949,"file":"apps/abeto-messenger.md","thumb":"jpg"},{"slug":"active-theory","title":"Active Theory","kind":"app","category":"web-experiences","tier":"S","platforms":["web"],"tags":["webgl","scroll-driven-camera","multiplayer-web","loading-choreography","device-tier-lod","custom-cursor","agency-grade"],"patterns":["loaders-and-site-intros","premium-web-microinteractions","scrollytelling-product-reveals","motion-language-systems","sound-on-web","landing-page-anatomy"],"updated":"2026-07-22","links":{"site":"https://activetheory.net","mobbin":"https://mobbin.com/apps/active-theory"},"one_liner":"Creative-technology studio (Coachella, Google, game/film promo sites) that treats the browser as a real-time engine — full-bleed WebGL scenes, scroll-mapped cameras, and a proprietary multiplayer platform (Dreamwave), all disciplined enough to still hit 60fps on mid-tier hardware.","words":836,"file":"apps/active-theory.md","thumb":"jpg"},{"slug":"bruno-simon-portfolio","title":"Bruno Simon Portfolio","kind":"app","category":"web-experiences","tier":"S","platforms":["web"],"tags":["three-js","webgl","physics-based-motion","low-poly-art-style","sound-on-web","playful-portfolio","zero-chrome-ui","loader-as-experience"],"patterns":["loaders-and-site-intros","premium-web-microinteractions","sound-on-web","motion-language-systems","landing-page-anatomy"],"updated":"2026-07-22","links":{"site":"https://bruno-simon.com","mobbin":"https://mobbin.com/apps/bruno-simon-portfolio"},"one_liner":"A drivable 3D RC car IS the portfolio's navigation — the site that proved a gimmick can become a decade-plus benchmark when physics feel, sound, and restraint carry it instead of spectacle alone.","words":885,"file":"apps/bruno-simon-portfolio.md","body":"# Bruno Simon portfolio — the website-as-toy benchmark\n\n**One-liner:** A drivable 3D RC car IS the portfolio's navigation — the site that proved a gimmick can become a decade-plus benchmark when physics feel, sound, and restraint carry it instead of spectacle alone.\n\n## Design DNA\n- Low-poly, flat-shaded 3D art direction: geometric primitives with baked/vertex shading, no PBR realism — keeps the WebGL scene light enough to run smoothly on modest laptops and reads as toy-like rather than trying to be photoreal.\n- Saturated, candy palette per zone: each floating \"island\" (About, Projects, gallery, contact) carries its own dominant hue against a soft gradient sky, so color signals location, not a brand system.\n- Physics-driven camera and vehicle: raycast-wheel suspension gives visible body roll/bounce on landing and cornering; the chase camera trails at a fixed offset with slight lag/tilt — the \"feel\" of the physics engine IS the UI language, no menus needed to sense you've \"arrived.\"\n- Zero-chrome navigation: driving through a portal/coin trigger is what opens the only UI surface (a project card or text panel); there's no persistent nav bar and no scroll — spatial proximity is the router.\n- Sound as confirmation, not decoration: horn honk on click, engine pitch tied to speed, collision thuds — every physical interaction gets an audio cue in place of a toast or haptic, doing the job normally handled by UI copy.\n- Humor via physics, not copy: knockable objects ragdoll or topple when hit, tires spin uselessly if flipped, a dedicated \"get unstuck\" control exists because getting stuck is an anticipated outcome of the mechanic — personality lives in what the physics engine is allowed to do to you, not in illustration or microcopy.\n- Loading sequence is diegetic: a progress bar precedes the car dropping onto the terrain with a suspension bounce on load-complete, so the loader is staged as the first physics beat of the experience rather than a generic spinner.\n- Touch controls: a translucent virtual joystick plus a honk button overlay on mobile — the only persistent chrome on the entire site, sized and positioned for thumb reach so it never competes with the world.\n- Re-recognized by Awwwards as Site of the Month, January 2026 (verified 2026-07) — the build has been iterated over the years but keeps the same core mechanic, evidence the concept ages well because the feel is the product, not the trend it launched inside.\n\n## Signature components\n- RC car controller: four-wheel raycast vehicle physics (suspension travel, grip/slip, mass) driven by WASD/arrows or a touch joystick, with a damped third-person chase camera — the reusable idea is \"vehicle physics as cursor.\"\n- Portal/trigger volumes: invisible collision zones tied to world geometry that fire a UI panel (project title, description, outbound link) when the car enters — navigation by proximity instead of by click target.\n- Diegetic loader: progress bar into a car spawn-and-settle drop, doubling as both load-state communication and the first \"this responds like a toy\" moment.\n- Mobile joystick + horn HUD: the sole persistent overlay, translucent and thumb-zone positioned, extending the input scheme without redesigning the world underneath it.\n\n## Flows worth studying\n- First load: progress bar to car drop-and-bounce to free-roam handoff with no tutorial text — the control mapping is legible from the joystick icon or keys alone, taught by physics response (nudge the stick, watch the car nudge back) rather than instructional copy.\n- Discovery loop: drive to approach an island, portal triggers a card, read or click through to the real project link, drive away and the card dismisses — a \"wander until you find it\" model, deliberately slower than a nav menu, trading efficiency for memorability.\n- Failure/recovery: flipping the car or getting stuck is a designed dead end with a visible fix control, not a bug state — the site treats \"you broke the toy\" as part of the toy rather than an error to hide.\n\n## Steal / Avoid\n**Steal:** physics feedback (bounce, roll, settle) as the primary delight signal instead of easing curves on flat elements; sound-as-confirmation for physical actions in place of a toast; a diegetic loader staged as the experience's first beat rather than a placeholder; letting personality live in what the engine is allowed to do to objects (knockdowns, ragdolls) instead of in copy or illustration.\n**Avoid:** copying the literal car-and-islands mechanic onto anything with a conversion goal — spatial/proximity navigation is intentionally slower than a menu and only earns that tradeoff on a portfolio whose job is memorability, not throughput; the WebGL/physics payload (Three.js plus a physics engine plus assets) is heavy for anything needing fast first paint or working reliably on low-end devices; zero-chrome navigation fails for any surface with a checkout, form, or task the user needs to complete quickly — a hemp shop or emulation-platform app needs findable menus, not exploration.\n\n## Use when\nReference for landing/marketing pages or hero moments on izzy's builds where the goal is a memorable, shareable first impression and the audience will forgive slower wayfinding for delight (a launch page, a build-log/portfolio surface, a loader or intro sequence on a marketing site). Do not reach for this on storefronts, dashboards, or any flow with a purchase, login, or task to complete — those need the opposite: fast, chrome-visible, task-first navigation.","thumb":"jpg"},{"slug":"coastal-world","title":"Coastal World","kind":"app","category":"web-experiences","tier":"A","platforms":["web"],"tags":["webgl-driving-world","game-as-website","mission-based-nav","onboarding-as-tutorial","fog-as-performance-trick","diegetic-hud","stylized-lowpoly"],"patterns":["onboarding-flows","loaders-and-site-intros","navigation-systems","premium-web-microinteractions","sound-on-web","scrollytelling-product-reveals"],"updated":"2026-07-22","links":{"site":"https://www.merci-michel.com","mobbin":"https://mobbin.com/apps/coastal-world"},"one_liner":"A full 3D island you drive around instead of scroll through, built by Merci Michel — the reference case for when \"sell the company\" and \"make a game\" become the same brief.","words":838,"file":"apps/coastal-world.md","thumb":"jpg"},{"slug":"darkroom-engineering","title":"darkroom.engineering","kind":"app","category":"web-experiences","tier":"A","platforms":["web"],"tags":["webgl-shaders","smooth-scroll","monospace-ui","engineered-minimalism","agency-portfolio","hairline-grid","motion-restraint"],"patterns":["premium-web-microinteractions","scrollytelling-product-reveals","landing-page-anatomy","loaders-and-site-intros","motion-language-systems"],"updated":"2026-07-22","links":{"site":"https://darkroom.engineering","mobbin":"https://mobbin.com/apps/darkroom-engineering"},"one_liner":"The studio (ex-Studio Freight) that built Lenis, the smooth-scroll library most of the web now runs on — their own site and client work are the reference for \"the craft is the content\": monospace telemetry, hairline grids, and scroll physics that prove the engineering rather than hide it.","words":843,"file":"apps/darkroom-engineering.md","thumb":"jpg"},{"slug":"igloo-inc","title":"Igloo Inc","kind":"app","category":"web-experiences","tier":"S","platforms":["web"],"tags":["webgl-scrollytelling","glass-and-ice-shaders","3d-camera-dolly","awwwards-soty","crypto-holding-co","premium-web-craft"],"patterns":["scrollytelling-product-reveals","premium-web-microinteractions","loaders-and-site-intros","landing-page-anatomy","motion-language-systems"],"updated":"2026-07-22","links":{"site":"https://iglooinc.com","mobbin":"https://mobbin.com/apps/igloo-inc"},"one_liner":"A crypto holding company's corporate site rebuilt as one continuous WebGL scene — scroll doesn't page through sections, it drives a camera through a modeled glacier/ice environment — and it out-crafted every ad agency to take Awwwards Site of the Year 2024.","words":905,"file":"apps/igloo-inc.md","thumb":"jpg"},{"slug":"locomotive-agency","title":"Locomotive","kind":"app","category":"web-experiences","tier":"A","platforms":["web"],"tags":["smooth-scroll","webgl-agency","editorial-motion","custom-cursor","case-study-pacing","premium-restraint","page-transitions"],"patterns":["scrollytelling-product-reveals","motion-language-systems","landing-page-anatomy","loaders-and-site-intros","premium-web-microinteractions"],"updated":"2026-07-22","links":{"site":"https://locomotive.ca","mobbin":"https://mobbin.com/apps/locomotive"},"one_liner":"Montreal digital studio whose locomotive-scroll library (and the Lenis-lineage tooling that followed from the same Montreal WebGL-dev circle) became the default vocabulary for premium scroll on the web; their own site is the reference for pacing a case study like a magazine spread, not a demo reel.","words":902,"file":"apps/locomotive-agency.md","thumb":"jpg"},{"slug":"lusion","title":"Lusion","kind":"app","category":"web-experiences","tier":"S","platforms":["web"],"tags":["webgl","three-js","physics-toys","scrollytelling","custom-cursor","post-processing","loader-as-brand","awwwards"],"patterns":["loaders-and-site-intros","premium-web-microinteractions","scrollytelling-product-reveals","landing-page-anatomy","motion-language-systems","navigation-systems"],"updated":"2026-07-22","links":{"site":"https://lusion.co","mobbin":"https://mobbin.com/apps/lusion"},"one_liner":"A UK creative studio whose own site is its portfolio piece — real-time 3D \"physics toys\" you can grab and throw, wrapped in enough restraint that it reads premium, not gimmicky. v3 won Awwwards Site of the Year 2023, and the studio is still winning at the top tier — 'Spaace' took Awwwards Site of the Month April 2026 (verified 2026-07).","words":817,"file":"apps/lusion.md","thumb":"jpg"},{"slug":"martin-laxenaire","title":"Martin Laxenaire portfolio","kind":"app","category":"web-experiences","tier":"A","platforms":["web"],"tags":["webgpu-native","custom-engine","no-threejs","shader-driven","dom-synced-3d","creative-dev","scrollytelling"],"patterns":["scrollytelling-product-reveals","loaders-and-site-intros","premium-web-microinteractions","motion-language-systems","landing-page-anatomy"],"updated":"2026-07-22","links":{"site":"https://martin-laxenaire.fr","mobbin":"https://mobbin.com/apps/martin-laxenaire-portfolio"},"one_liner":"A creative developer's self-portfolio that doubled as a technique demo, now (2026) rebuilt as a WebGPU-native game running on his own from-scratch engine — cited by webgpu.com and Codrops as the leading edge of the \"skip Three.js entirely\" wave.","words":683,"file":"apps/martin-laxenaire.md","thumb":"jpg"},{"slug":"obys-agency","title":"Obys","kind":"app","category":"web-experiences","tier":"S","platforms":["web"],"tags":["kinetic-typography","scroll-driven-motion","split-text","custom-cursor","grid-break","page-transitions","art-direction","awwwards-style"],"patterns":["landing-page-anatomy","loaders-and-site-intros","premium-web-microinteractions","scrollytelling-product-reveals","motion-language-systems","navigation-systems"],"updated":"2026-07-22","links":{"site":"https://obys.agency","mobbin":"https://mobbin.com/apps/obys-agency"},"one_liner":"Kyiv-based digital studio whose own site and case-study work (incl. their \"Design Engineering\" positioning) treat typography as the primary interface element — layout, hierarchy, and delight are all done by moving letters, not by illustration or photography.","words":969,"file":"apps/obys-agency.md","thumb":"jpg"},{"slug":"unseen-studio","title":"Unseen Studio","kind":"app","category":"web-experiences","tier":"A","platforms":["web"],"tags":["webgl","shader-type","film-grain","scroll-driven","custom-cursor","agency-site","dark-first"],"patterns":["landing-page-anatomy","scrollytelling-product-reveals","loaders-and-site-intros","premium-web-microinteractions","motion-language-systems"],"updated":"2026-07-22","links":{"site":"https://unseen.co","mobbin":"https://mobbin.com/apps/unseen-studio"},"one_liner":"Creative-development studio (Awwwards/FWA-tier case-study sites, client builds) whose defining move is rendering headline type as a GPU-deformable material instead of DOM text — the clearest production reference for \"liquid type\" done as a real shader pipeline, not a Codrops demo.","words":857,"file":"apps/unseen-studio.md","thumb":"jpg"},{"slug":"a24-shop","title":"A24","kind":"app","category":"web-marketing","tier":"A","platforms":["web"],"tags":["editorial-commerce","film-brand","drops-and-scarcity","minimal-black-white","cult-collector","typography-as-seal"],"patterns":["drops-and-restocks","product-detail-pages","landing-page-anatomy","checkout-and-cart"],"updated":"2026-07-22","links":{"site":"https://a24films.com/shop","mobbin":"https://mobbin.com/apps/a24"},"one_liner":"A studio's collector shop that refuses normal e-commerce chrome — no icons, no color system, no urgency banners — and lets the film IP and the photography carry the entire sell.","words":914,"file":"apps/a24-shop.md","thumb":"jpg"},{"slug":"anthropic-site","title":"Anthropic.com","kind":"app","category":"web-marketing","tier":"A","platforms":["web"],"tags":["editorial","serif-headlines","paper-texture","warm-neutral","research-lab","restrained-motion"],"patterns":["landing-page-anatomy","docs-and-changelogs","pricing-pages-web"],"updated":"2026-07-22","links":{"site":"https://anthropic.com","mobbin":"https://mobbin.com/apps/anthropic"},"one_liner":"A corporate/lab site that borrows academic-journal grammar (numbered sections, citation-style footers, sober serif headlines) instead of SaaS-launch grammar, and uses a warm off-white \"paper\" surface to read as considered rather than templated.","words":849,"file":"apps/anthropic-site.md","thumb":"jpg"},{"slug":"are-na","title":"are.na","kind":"app","category":"web-marketing","tier":"A","platforms":["web","ios"],"tags":["anti-algorithm","plain-typography","archive-grid","no-vanity-metrics","connection-model","taste-community"],"patterns":["feeds-and-ranking","search-ux","tables-and-dense-data","dashboards-and-consoles","monetization-upsell-moments","anti-patterns-dark-patterns"],"updated":"2026-07-22","links":{"site":"https://www.are.na","mobbin":"https://mobbin.com/apps/are-na"},"one_liner":"A no-likes, no-ranked-feed tool for collecting images/text/links as \"blocks\" that connect into many \"channels\" at once — the taste-community's reference for restraint as the design philosophy itself, not a missing feature.","words":927,"file":"apps/are-na.md","thumb":"jpg"},{"slug":"berkeley-graphics","title":"Berkeley Graphics","kind":"app","category":"web-marketing","tier":"A","platforms":["web"],"tags":["engineering-aesthetic","monospace-type","spec-sheet-ui","dogfooding","technical-density","configurator-pricing","foundry"],"patterns":["pricing-pages-web","landing-page-anatomy","tables-and-dense-data","docs-and-changelogs","product-detail-pages"],"updated":"2026-07-22","links":{"site":"https://usgraphics.com","mobbin":"https://mobbin.com/apps/berkeley-graphics"},"one_liner":"U.S. Graphics Co.'s home for the Berkeley Mono typeface, built like a hardware spec sheet instead of a SaaS landing page — the reference for selling a technical product to technical buyers with numbers instead of adjectives.","words":732,"file":"apps/berkeley-graphics.md","thumb":"jpg"},{"slug":"daylight-computer","title":"Daylight Computer","kind":"app","category":"web-marketing","tier":"A","platforms":["web"],"tags":["e-ink","paper-aesthetic","health-tech-contrarian","warm-minimalism","hardware-marketing","editorial-typography"],"patterns":["landing-page-anatomy","pricing-pages-web","checkout-and-cart","microcopy-and-ux-writing","reviews-and-social-proof"],"updated":"2026-07-22","links":{"site":"https://daylightcomputer.com","mobbin":"https://mobbin.com/apps/daylight-computer"},"one_liner":"Marketing site for an e-ink \"Live Paper\" tablet that sells a belief (screens are bad for you) before it sells a spec sheet, using print-magazine typography and literal outdoor proof photography instead of the black-void hero-render playbook every other hardware site runs.","words":847,"file":"apps/daylight-computer.md","thumb":"jpg"},{"slug":"family-co","title":"Family","kind":"app","category":"web-marketing","tier":"S","platforms":["web"],"tags":["warm-minimalism","3d-scroll-storytelling","crypto-wallet","pastel-palette","motion-choreography","brand-differentiation"],"patterns":["landing-page-anatomy","motion-language-systems","onboarding-flows","microcopy-and-ux-writing"],"updated":"2026-07-22","links":{"site":"https://family.co","mobbin":"https://mobbin.com/apps/family"},"one_liner":"A crypto wallet that refused the black-terminal/neon-gradient default of its category and instead built the whole marketing site around scroll-choreographed 3D objects and copy that reads like a person talking, not a protocol.","words":843,"file":"apps/family-co.md","thumb":"jpg"},{"slug":"framer-site","title":"Framer (framer.com)","kind":"app","category":"web-marketing","tier":"A","platforms":["web"],"tags":["scroll-driven-motion","bento-grids","template-marketplace","dogfooding","colorful-accents","no-code-builder"],"patterns":["landing-page-anatomy","pricing-pages-web","motion-language-systems","tooltips-and-feature-discovery","navigation-systems"],"updated":"2026-07-22","links":{"site":"https://framer.com","mobbin":"https://mobbin.com/apps/framer"},"one_liner":"A website builder whose own homepage is the demo — interactive, draggable, scroll-scrubbed proof instead of screenshots, wrapped around a template marketplace built to be browsed like a gallery, not a pricing sheet.","words":836,"file":"apps/framer-site.md","thumb":"jpg"},{"slug":"glossier","title":"Glossier","kind":"app","category":"web-marketing","tier":"A","platforms":["web","ios"],"tags":["dtc-beauty","millennial-pink","community-sourced","shade-finder","ugc","editorial-pdp"],"patterns":["product-detail-pages","reviews-and-social-proof","landing-page-anatomy","pickers-steppers-controls","checkout-and-cart"],"updated":"2026-07-22","links":{"site":"https://www.glossier.com","mobbin":"https://mobbin.com/apps/glossier"},"one_liner":"The brand that turned a beauty blog's comment section into a storefront — millennial pink as brand anchor, real customers as the imagery, and the shade finder as the checkout gate.","words":842,"file":"apps/glossier.md","thumb":"jpg"},{"slug":"lando-norris-site","title":"lando.com (Lando Norris)","kind":"app","category":"web-marketing","tier":"A","platforms":["web"],"tags":["gsap","kinetic-type","scroll-choreography","f1","portfolio-site","awwwards","post-cutoff"],"patterns":["landing-page-anatomy","motion-language-systems","navigation-systems","media-players"],"updated":"2026-07-22","links":{"site":"https://lando.com","mobbin":"https://mobbin.com/apps/lando-norris"},"one_liner":"Lando Norris's official driver site — verified 2026-07(Awwwards, announced early 2026) as Site of the Year — is the current award-bar for what a single-person personality/portfolio site can do with scroll-triggered motion; largely postdates training knowledge, so this card is a study brief, not a component inventory.","words":562,"file":"apps/lando-norris-site.md","thumb":"jpg"},{"slug":"linear-site","title":"Linear (site)","kind":"app","category":"web-marketing","tier":"S","platforms":["web"],"tags":["aurora-gradients","scroll-choreography","dark-first","changelog-marketing","saas-benchmark","restrained-motion"],"patterns":["landing-page-anatomy","pricing-pages-web","docs-and-changelogs","motion-language-systems","dark-mode-and-theming","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://linear.app","mobbin":"https://mobbin.com/apps/linear"},"one_liner":"The marketing site that taught the entire SaaS industry to sell \"fast and calm\" through gradient light instead of stock photography — and became the most-copied web-marketing template of the decade.","words":804,"file":"apps/linear-site.md","thumb":"jpg"},{"slug":"mschf","title":"MSCHF","kind":"app","category":"web-marketing","tier":"S","platforms":["web"],"tags":["drop-culture","anti-brand","manifesto-copy","brutalist-grid","scarcity-mechanics","monospace-meta"],"patterns":["drops-and-restocks","landing-page-anatomy","checkout-and-cart","microcopy-and-ux-writing","anti-patterns-dark-patterns","pricing-pages-web"],"updated":"2026-07-22","links":{"site":"https://mschf.com","mobbin":"https://mobbin.com/apps/mschf"},"one_liner":"A site that sells almost nothing (visually) — near-pure black-on-white chrome that gets out of the way so each numbered \"Drop\" can carry its own color, copy, and hype cycle like a magazine issue.","words":867,"file":"apps/mschf.md","thumb":"jpg"},{"slug":"openai-gpt-6-astra","title":"OpenAI — GPT-6 Astra launch page","kind":"app","category":"web-marketing","tier":"S","platforms":["web"],"tags":["the-bar","launch-page","black-canvas","webgl-hero","fluid-type","reading-column","evidence-blocks","pull-quotes","one-motion"],"patterns":["landing-page-anatomy","scrollytelling-product-reveals","progress-and-data-viz","docs-and-changelogs"],"updated":"2026-09-16","links":{"site":"https://openai.com/index/gpt-6-astra/"},"one_liner":"A model launch written as a reading document on pure black — one WebGL galaxy carries the product's name and persists behind the whole page as its atmosphere, while a single 668px column of prose is interrupted only by measured evidence: benchmark charts inside tab-pills, quotes attributed to a named person, and inline demo video with a caption that states the number. This is the bar every SaturnAI front door is composed toward — the grammar, never the galaxy.","words":1190,"file":"apps/openai-gpt-6-astra.md","thumb":"jpg"},{"slug":"poolsuite","title":"poolsuite.net (Poolsuite University)","kind":"app","category":"web-marketing","tier":"S","platforms":["web"],"tags":["retro-os-chrome","skeuomorphic","desktop-metaphor","radio-player","vibe-as-product","cursor-fx"],"patterns":["landing-page-anatomy","media-players","motion-language-systems","microcopy-and-ux-writing","navigation-systems"],"updated":"2026-07-22","links":{"site":"https://poolsuite.net","mobbin":"https://mobbin.com/apps/poolsuite"},"one_liner":"A lifestyle-radio brand (formerly Poolside.fm) that ditched the scrolling-marketing-page format entirely and shipped a fake desktop OS instead — the site's UI is the pitch, not a wrapper around one.","words":936,"file":"apps/poolsuite.md","thumb":"jpg"},{"slug":"stripe-press","title":"Stripe Press","kind":"app","category":"web-marketing","tier":"S","platforms":["web"],"tags":["editorial-typography","serif-systems","3d-product-renders","paper-palette","long-form-reading","motion-restraint","brand-storytelling"],"patterns":["product-detail-pages","landing-page-anatomy","motion-language-systems","docs-and-changelogs","sharing-and-export-flows"],"updated":"2026-08-02","links":{"site":"https://press.stripe.com"},"one_liner":"Stripe's publishing imprint site sells books by reading like one — 3D-styled physical covers, print-grade serif typography, and a warm paper palette that borrows its authority from books, not software chrome.","words":969,"file":"apps/stripe-press.md","thumb":"jpg"},{"slug":"stripe-site","title":"Stripe (stripe.com)","kind":"app","category":"web-marketing","tier":"S","platforms":["web"],"tags":["gradient-mesh","docs-as-marketing","developer-trust","animated-diagrams","enterprise-saas","code-tabs","brand-purple"],"patterns":["landing-page-anatomy","pricing-pages-web","docs-and-changelogs","motion-language-systems","navigation-systems","checkout-and-cart"],"updated":"2026-08-02","links":{"site":"https://stripe.com"},"one_liner":"The marketing site that turned a payments API into a design movement — the mesh-gradient hero every SaaS site copied, and the template for proving a product with live code instead of adjectives.","words":952,"file":"apps/stripe-site.md","thumb":"jpg"},{"slug":"superhuman-site","title":"Superhuman","kind":"app","category":"web-marketing","tier":"A","platforms":["web"],"tags":["premium-positioning","speed-claims","keyboard-driven","exclusivity","dark-hero","quantified-metrics","waitlist"],"patterns":["landing-page-anatomy","onboarding-flows","pricing-pages-web","command-palettes-and-keyboard-ux","monetization-upsell-moments","tooltips-and-feature-discovery"],"updated":"2026-07-22","links":{"site":"https://superhuman.com","mobbin":"https://mobbin.com/apps/superhuman"},"one_liner":"An email client's marketing site that never says \"fast\" without a measurement attached to it, wrapped in a black-and-cream editorial look that reads as an elite instrument rather than another SaaS product.","words":819,"file":"apps/superhuman-site.md","thumb":"jpg"},{"slug":"teenage-engineering","title":"teenage.engineering","kind":"app","category":"web-marketing","tier":"S","platforms":["web"],"tags":["hardware-brutalism","schematic-layouts","mono-type","product-photography","catalog-grid","minimal-marketing-voice","orange-accent"],"patterns":["product-detail-pages","landing-page-anatomy","pricing-pages-web","checkout-and-cart","docs-and-changelogs"],"updated":"2026-07-22","links":{"site":"https://teenage.engineering","mobbin":"https://mobbin.com/apps/teenage-engineering"},"one_liner":"Swedish synth/hardware maker whose website reads like a patent filing crossed with a military spec sheet — product photography and technical diagrams do the selling, not copy.","words":711,"file":"apps/teenage-engineering.md","thumb":"jpg"},{"slug":"vercel-site","title":"Vercel","kind":"app","category":"web-marketing","tier":"S","platforms":["web"],"tags":["geist-typography","monochrome","dev-brand","ship-speed-copy","conf-microsites","minimalism","black-and-white"],"patterns":["landing-page-anatomy","pricing-pages-web","docs-and-changelogs","navigation-systems","microcopy-and-ux-writing","motion-language-systems"],"updated":"2026-07-22","links":{"site":"https://vercel.com","mobbin":"https://mobbin.com/apps/vercel"},"one_liner":"A cloud-infra company that sells trust through typography and negative space instead of screenshots of servers — the site is the proof that the product is fast.","words":888,"file":"apps/vercel-site.md","thumb":"jpg"},{"slug":"brand-glossier","title":"Glossier (brand)","kind":"brand","category":"beauty","tier":"A","platforms":["web","retail","social"],"tags":["community-sourced-product","reader-to-product-pipeline","ugc-campaign-imagery","millennial-pink-packaging","skin-first-philosophy","showroom-retail"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.glossier.com"},"one_liner":"Source product ideas directly from a beauty blog's reader comments (the Into The Gloss lineage) and ship them in millennial-pink, bubble-pouch packaging photographed on real customers instead of models — the brand's R&D pipeline runs through its own community, not a product lab in isolation.","words":660,"file":"brands/brand-glossier.md","thumb":"jpg"},{"slug":"brand-liquid-death","title":"Liquid Death (brand)","kind":"brand","category":"beverage","tier":"S","platforms":["web","social","packaging"],"tags":["irreverence","commodity-premium","merch-as-media","voice-discipline","licensing","death-metal-aesthetic"],"patterns":[],"updated":"2026-07-25","links":{"site":"https://liquiddeath.com"},"one_liner":"Turn boring water into a blue-chip beverage brand by pairing metal-show voice with liquor-cabinet production values — the joke sells the can, craft keeps it premium.","words":446,"file":"brands/brand-liquid-death.md","body":"# Liquid Death (brand) — commodity dressed as forbidden object\n\n**One-liner:** Turn boring water into a blue-chip beverage brand by pairing metal-show voice with liquor-cabinet production values — the joke sells the can, craft keeps it premium.\n\n## Positioning\n- **Category refusal:** not \"healthy water,\" not \"wellness,\" not \"sports hydration.\" Positioned as a beverage brand that happens to sell water — adjacent to craft beer / energy / hard seltzer shelf energy without the alcohol.\n- **Owned tradeoff:** loud personality on marketing surfaces, quiet competence on transactional ones. The brand is the bit; checkout is not.\n- **Enemy:** plastic, boring CPG packaging, earnest eco copy that lectures. \"Death to Plastic\" works because aluminum recyclability is a real claim under the gag.\n- **Why clones fail:** skulls + edgy slogans without photography discipline and without a true functional claim read as costume. Liquid Death's moat is production bar + voice discipline + merch cadence, not the iconography alone.\n\n## Voice\n- **Headlines scream, body whispers:** condensed metal-poster display for punchlines; plain workhorse sans for ingredients, legal, checkout. Contrast is the brand.\n- **Joke formats that repeat:** corporate-marketing parody (fake titles, mock testimonials, infomercial pastiche); puns anchored to a real attribute (\"Murder Your Thirst,\" flavor names).\n- **Forbidden:** shock for shock's sake; edgelord without a load-bearing fact; letting the gag bleed into payment/compliance copy.\n- **Partnership voice:** collabs (e.g. irreverent eyewear/lifestyle licenses) blend both brands' registers on a microsite rather than diluting into generic \"collab drop\" copy.\n\n## Signal stack\n- **Can as system root:** matte black tallboy, crest, angular wordmark — site, merch, ads all descend from packaging, not the reverse.\n- **Photography as brand:** liquor-grade lighting and condensation; craft is what makes \"unhinged\" read expensive.\n- **Merch-as-media:** apparel and limited drops treated as first-class products; sellouts left visible as social proof.\n- **Licensing writers' room:** chaos IP cross-pollinates with other irreverent brands instead of forever escalating solo shock.\n- **Scarcity displayed:** sold-out stays listed; waitlist is content, not embarrassment.\n\n## Steal / Avoid\n**Steal:** anchor every punchline to one verifiable claim; spend on craft/photography before more jokes; keep transactional UI voice-quiet; treat merch and core SKU with the same visual bar; show scarcity instead of hiding it.\n**Avoid:** copying skulls/goth motifs onto unrelated categories; applying this register to health/finance/medical trust surfaces; maximizing shock per post without a recurring authored format.\n\n## Use when\nConsumer brands that can own irreverence with a true claim underneath (CPG, merch-forward DTC, lifestyle beverages, limited drops). Directly useful for voice systems on IZZY AWAKE–adjacent commerce when the lesson is \"funny + true + clean checkout.\" Wrong for operator dashboards, medical/fintech trust-first products, or any first-run form where clarity must beat personality.","thumb":"jpg"},{"slug":"brand-playful-system","title":"Playful System (grammar)","kind":"brand","category":"brand-systems","tier":"S","platforms":["web","product","print"],"tags":["governed-whimsy","style-guide-constraint","banned-word-list","scoped-humor","illustration-limits"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://mailchimp.com"},"one_liner":"A reusable positioning system where a strict, explicit formal constraint — a fixed palette, a limited set of mascot poses, a one-joke-per-surface rule — is what keeps playfulness legible as a system rather than sliding into visual noise.","words":842,"file":"brands/brand-playful-system.md","thumb":"jpg"},{"slug":"brand-anti-hero-consumer","title":"Anti-Hero Consumer (grammar)","kind":"brand","category":"consumer","tier":"S","platforms":["web","packaging","social"],"tags":["deadpan-voice","anti-aspiration","self-aware-marketing","category-fatigue","claim-anchored-humor"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.oatly.com"},"one_liner":"A reusable CPG/DTC positioning system where the brand refuses to promise transformation — mocking the category's own sales language instead of dressing up in shock theater — so admitting the product is ordinary becomes the very thing that earns trust.","words":763,"file":"brands/brand-anti-hero-consumer.md","thumb":"jpg"},{"slug":"brand-nothing","title":"Nothing (brand)","kind":"brand","category":"consumer-tech","tier":"S","platforms":["web","product","social"],"tags":["transparent-design","community","glyph","anti-apple","launch-culture","genz-tech"],"patterns":[],"updated":"2026-07-25","links":{"site":"https://nothing.tech"},"one_liner":"Consumer tech brand that made \"see the guts\" and Glyph language into recognizable identity, then used community and launch theater to punch above a startup's weight against phone giants.","words":352,"file":"brands/brand-nothing.md","thumb":"jpg"},{"slug":"brand-joyride","title":"JOYRIDE (brand)","kind":"brand","category":"cpg-confectionery","tier":"A","platforms":["web","retail","social"],"tags":["creator-co-ownership","retail-as-proof","better-for-you-candy","colorful-not-casino","real-founder-audience"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.joyridesweets.com"},"one_liner":"A better-for-you candy brand where a creator's existing audience functions as the initial distribution and trust channel to get onto real retail shelves (Target and beyond), and the candy itself stays genuinely playful and colorful rather than performing \"healthy\" restraint.","words":782,"file":"brands/brand-joyride.md","thumb":"jpg"},{"slug":"brand-sourboys","title":"SourBoys (brand)","kind":"brand","category":"cpg-confectionery","tier":"A","platforms":["web","social","retail"],"tags":["creator-authenticity","small-town-craft","sourness-as-product-language","dye-free-pitch","community-voice"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://sour.gg"},"one_liner":"Creator-founded sour candy brand where a granular \"sourness level\" system, the founders' ongoing on-camera presence, and a real small-town Texas shop are the proof it's not just a licensed face on a candy bag — the product feels handmade and community-built first, retail-scaled second.","words":849,"file":"brands/brand-sourboys.md","thumb":"jpg"},{"slug":"brand-gumroad","title":"Gumroad (brand)","kind":"brand","category":"creator-economy","tier":"A","platforms":["web","product"],"tags":["creator-tools","simplicity","indie","yellow","self-serve","maker"],"patterns":[],"updated":"2026-07-25","links":{"site":"https://gumroad.com"},"one_liner":"Creator commerce brand that made \"put a price on your work\" feel indie and obvious — yellow energy, low ceremony, product pages that get out of the way of the creator's own brand.","words":369,"file":"brands/brand-gumroad.md","thumb":"jpg"},{"slug":"brand-brat","title":"Brat / Charli XCX (brand)","kind":"brand","category":"culture","tier":"A","platforms":["social","web","packaging"],"tags":["lime-green","meme-format","cultural-os","typography","season","fandom"],"patterns":[],"updated":"2026-07-25","links":{"site":"https://charlixcx.com"},"one_liner":"Album-as-operating-system: acid lime, blunt lowercase typography, and meme-ready templates that let fans and brands cosplay the aesthetic — culture spreads because the kit is copyable.","words":369,"file":"brands/brand-brat.md","thumb":"jpg"},{"slug":"brand-mschf","title":"MSCHF (brand)","kind":"brand","category":"culture","tier":"S","platforms":["web","social","retail-drop"],"tags":["provocation-as-distribution","art-versus-commerce","legal-drama-as-act-two","absurdist-product-thesis","drop-as-artwork","controversy-flywheel"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://mschf.com"},"one_liner":"Ship a genuinely absurd, physically real object (a giant cartoon rain boot, sneakers with a drop of human blood in the sole) framed as \"an individually numbered work of art,\" sell out in minutes, then let the inevitable trademark lawsuit or backlash become the second act of the marketing — the legal drama is free press MSCHF never has to buy.","words":759,"file":"brands/brand-mschf.md","thumb":"jpg"},{"slug":"brand-duolingo","title":"Duolingo (brand)","kind":"brand","category":"edtech","tier":"S","platforms":["app","web","social"],"tags":["mascot-as-celebrity","unhinged-marketing","streak-mechanic","guilt-notification-humor","retention-driven-chaos","meme-native-brand"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.duolingo.com"},"one_liner":"Let the green owl mascot run an unhinged, meme-native social media career (death threats about missed lessons, viral stunts, a manufactured \"villain era\") that has nothing to do with language pedagogy — the chaos is upstream marketing sitting on top of a real retention mechanic (the streak) that does the actual behavioral work.","words":712,"file":"brands/brand-duolingo.md","thumb":"jpg"},{"slug":"brand-a24","title":"A24 (brand)","kind":"brand","category":"entertainment","tier":"S","platforms":["web","app","retail","social"],"tags":["taste-as-identity","membership-subscription","film-specific-merch","minimal-poster-language","meme-native-marketing","indie-curation"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://a24films.com","shop":"https://shop.a24films.com"},"one_liner":"Turn \"I have good taste in film\" into a wearable, subscribable identity — film-specific merch (a Hereditary gingerbread treehouse kit, a Midsommar flower crown) plus a paid membership (AAA24) convert film fandom into recurring revenue and everyday clothing.","words":619,"file":"brands/brand-a24.md","thumb":"jpg"},{"slug":"brand-off-white","title":"Off-White (brand)","kind":"brand","category":"fashion","tier":"A","platforms":["web","retail","packaging"],"tags":["readymade-quotation-marks","industrial-signage","grey-area-thesis","diagonal-stripes","high-low-collision","streetwear-luxury-bridge"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.off---white.com/en-us/"},"one_liner":"Print the plain English name of an object in quotation marks directly onto that object (\"SHOELACES,\" \"AIR,\" \"KEEP OFF\") — a Duchamp-readymade gag repeated so consistently it became a licensable industrial-signage language spanning sneakers, furniture, and museum walls.","words":697,"file":"brands/brand-off-white.md","thumb":"jpg"},{"slug":"brand-quiet-luxury","title":"Quiet Luxury (grammar)","kind":"brand","category":"fashion","tier":"S","platforms":["web","product","retail"],"tags":["restraint-as-status","no-logo","material-integrity","price-integrity","achromatic-palette","editorial-calm"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.therow.com"},"one_liner":"A reusable positioning system (drawn from The Row, Loro Piana, and Totême's shared grammar, not any single company) where withholding logo, color, motion, and urgency signals becomes the entire trust mechanism — the brand proves it doesn't need to convince you, which is precisely what convinces you.","words":806,"file":"brands/brand-quiet-luxury.md","thumb":"jpg"},{"slug":"brand-rick-owens","title":"Rick Owens (brand)","kind":"brand","category":"fashion","tier":"A","platforms":["web","retail","runway"],"tags":["total-world-building","gothic-brutalism","muted-monastic-palette","runway-as-performance","furniture-crossover","subculture-as-luxury"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://rickowens.eu"},"one_liner":"Refuse to let \"fashion brand\" be the ceiling — apply the same monastic grey/black/bone palette and draped, asymmetric silhouette logic to clothing, sneakers, furniture, and store architecture so the runway show is one room in a total world, not a seasonal ad.","words":675,"file":"brands/brand-rick-owens.md","thumb":"jpg"},{"slug":"brand-cash-app","title":"Cash App (brand)","kind":"brand","category":"fintech","tier":"A","platforms":["app","web","social"],"tags":["cashtag-as-handle","community-invented-ritual","cultural-sponsorship","green-identity","street-fintech","underbanked-first"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://cash.app"},"one_liner":"Give money movement a personal handle (the $cashtag) instead of a bank-routing form, then adopt a giveaway ritual (#CashAppFriday) that users invented themselves — the brand's biggest campaigns are things it noticed happening, not things it wrote.","words":703,"file":"brands/brand-cash-app.md","thumb":"jpg"},{"slug":"brand-stripe","title":"Stripe (brand)","kind":"brand","category":"fintech","tier":"S","platforms":["web","docs","product"],"tags":["developer-trust","clarity","infrastructure-prestige","gradient","documentation-as-brand"],"patterns":[],"updated":"2026-07-25","links":{"site":"https://stripe.com"},"one_liner":"Payments brand built on developer trust: clarity, documentation, and visual calm that signal \"this is the adult in the room\" — prestige without bank stuffiness.","words":358,"file":"brands/brand-stripe.md","thumb":"jpg"},{"slug":"brand-utility-first","title":"Utility First (grammar)","kind":"brand","category":"fintech","tier":"S","platforms":["web","product"],"tags":["trust-via-clarity","live-calculator","exact-numbers","stated-limitations","docs-as-marketing"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://wise.com"},"one_liner":"A reusable positioning system where the brand's entire trust claim is a live, exact, checkable number — a fee, a rate, a limit — placed where lifestyle imagery would normally go, so precision itself replaces persuasion as the sales pitch.","words":819,"file":"brands/brand-utility-first.md","thumb":"jpg"},{"slug":"brand-craft-provenance","title":"Craft Provenance (grammar)","kind":"brand","category":"food","tier":"S","platforms":["web","packaging","retail"],"tags":["single-origin","naming-mechanism","verifiable-sourcing","process-as-copy","batch-honesty"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.graza.co"},"one_liner":"A reusable positioning system where the entire brand is the traceable origin story of one material or process, named in exact, checkable detail — the provenance itself is the product claim, not supporting color around it.","words":782,"file":"brands/brand-craft-provenance.md","thumb":"jpg"},{"slug":"brand-stake","title":"Stake.com (brand)","kind":"brand","category":"gambling","tier":"A","platforms":["web","app","streaming"],"tags":["high-contrast-identity","streamer-distribution","crypto-native-trust-theater","neon-visual-system","ethically-bounded-case-study"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://stake.com"},"one_liner":"Online crypto casino that built brand recognition through a distinctive neon-on-dark visual system and near-total reliance on streamer/creator sponsorship for distribution, rather than a traditional casino look built from felt-green and gold — a case study in creator-driven distribution mechanics, not a growth playbook to copy wholesale.","words":882,"file":"brands/brand-stake.md","thumb":"jpg"},{"slug":"brand-industrial-honesty","title":"Industrial Honesty (grammar)","kind":"brand","category":"hardware","tier":"S","platforms":["web","product","packaging"],"tags":["repairability","material-truth","anti-gloss","schematic-aesthetic","spec-sheet-marketing","right-to-repair"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://frame.work"},"one_liner":"A reusable positioning system (the shared grammar across Framework, teenage engineering, and reMarkable, not any one company) where showing the literal internals — the screw, the exploded diagram, the repair guide — replaces lifestyle photography as the primary sell, and material/mechanical truth becomes the actual luxury signal.","words":832,"file":"brands/brand-industrial-honesty.md","thumb":"jpg"},{"slug":"brand-teenage-engineering","title":"Teenage Engineering (brand)","kind":"brand","category":"hardware","tier":"S","platforms":["web","product","packaging"],"tags":["industrial-design","playful-precision","scarcity","object-as-brand","nordic-minimal","enthusiast"],"patterns":[],"updated":"2026-07-25","links":{"site":"https://teenage.engineering"},"one_liner":"Brand as industrial-design cult: products look like toys engineered by adults, scarcity and documentation deepen desire, and the website behaves like a museum catalog more than a storefront.","words":420,"file":"brands/brand-teenage-engineering.md","thumb":"jpg"},{"slug":"brand-balenciaga","title":"Balenciaga (brand, Demna-era)","kind":"brand","category":"luxury-fashion","tier":"S","platforms":["web","campaign","retail"],"tags":["controlled-controversy","scale-as-signal","campaign-as-cultural-event","absurdity-as-craft","price-integrity"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.balenciaga.com"},"one_liner":"Luxury house that weaponizes deliberate absurdity — exaggerated silhouettes, \"ugly\" objects treated as icons, and campaigns built to detonate in culture — using the same technical construction rigor as classical couture, so the shock reads as authored provocation instead of a stunt.","words":745,"file":"brands/brand-balenciaga.md","thumb":"jpg"},{"slug":"brand-chrome-hearts","title":"Chrome Hearts (brand)","kind":"brand","category":"luxury-fashion","tier":"S","platforms":["web","retail","product"],"tags":["motif-system","scarcity-as-heritage","gothic-craft","price-as-exclusion","subculture-aristocracy"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.chromehearts.com"},"one_liner":"Luxury built on a closed vocabulary of recurring symbols (cross, fleur-de-lis, dagger, Gothic script) stamped in sterling silver and leather across jewelry, eyewear, furniture, and clothing — so the object, not the marketing calendar, does the work of proving you belong.","words":770,"file":"brands/brand-chrome-hearts.md","thumb":"jpg"},{"slug":"brand-editorial-authority","title":"Editorial Authority (grammar)","kind":"brand","category":"media","tier":"S","platforms":["web","print","retail"],"tags":["masthead-trust","curatorial-verdict","byline-accountability","issue-numbering","editorial-commerce-split"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://monocle.com"},"one_liner":"A reusable positioning system where the brand borrows journalism's trust architecture — mastheads, numbered issues, bylines, curatorial verdicts — instead of advertising claims, so the audience trusts the brand the way it trusts a publication, not the way it trusts an advertiser.","words":799,"file":"brands/brand-editorial-authority.md","thumb":"jpg"},{"slug":"brand-founder-voice","title":"Founder Voice (grammar)","kind":"brand","category":"media","tier":"S","platforms":["web","social","product"],"tags":["founder-led","personal-register","distribution-as-voice","authenticity-signal","low-production-trust"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.mintmobile.com"},"one_liner":"A reusable positioning system where the founder's own unfiltered register — not a brand style guide — becomes the primary distribution channel, and every surface is written to sound like that one person talking, never like a company talking through a person.","words":812,"file":"brands/brand-founder-voice.md","thumb":"jpg"},{"slug":"brand-membership-club","title":"Membership Club (grammar)","kind":"brand","category":"membership","tier":"S","platforms":["web","retail","product"],"tags":["exclusivity-mechanism","application-gate","unbranded-status","curated-access","community-vouching"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.sohohouse.com"},"one_liner":"A reusable positioning system where status is signaled by what and who is excluded — an application, a waitlist, a members-only object — rather than by a visible logo, so belonging itself, not a mark, is the thing being worn.","words":779,"file":"brands/brand-membership-club.md","thumb":"jpg"},{"slug":"brand-uber","title":"Uber (brand)","kind":"brand","category":"mobility","tier":"A","platforms":["web","app","campaign"],"tags":["eta-as-trust","infrastructure-positioning","dual-sided-calm","default-behavior","city-as-product"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.uber.com"},"one_liner":"Mobility brand that positions itself as default civic infrastructure rather than a lifestyle choice — the reliability of a predicted arrival time, not personality, is the thing being sold, and the whole voice/visual system is built to feel calm enough to disappear into a city's routine.","words":815,"file":"brands/brand-uber.md","thumb":"jpg"},{"slug":"brand-gallery-retail","title":"Gallery Retail (grammar)","kind":"brand","category":"retail","tier":"S","platforms":["retail","social","web"],"tags":["installation-cadence","spectacle-commerce-split","photography-first-design","zero-media-distribution","guest-curation"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.gentlemonster.com"},"one_liner":"A reusable positioning system where the store is staged as a rotating art installation on a fixed cadence — generating its own media independent of any product drop — while a separate, disciplined commercial layer handles the actual sale so spectacle never has to do the job of checkout.","words":839,"file":"brands/brand-gallery-retail.md","thumb":"jpg"},{"slug":"brand-corteiz","title":"Corteiz (brand)","kind":"brand","category":"streetwear","tier":"A","platforms":["social","web","retail-guerrilla"],"tags":["founder-voice","tagline-mythology","guerrilla-stunt-pr","coded-belonging","anti-corporate-positioning","direct-to-fan-distribution"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://corteiz.com"},"one_liner":"Run the brand through the founder's own voice and phone camera — Clint419 announces drops, locations, and stunts directly to followers with no PR layer — so \"Rules The World\" reads as a literal, community-executed mission rather than a marketing tagline.","words":698,"file":"brands/brand-corteiz.md","thumb":"jpg"},{"slug":"brand-palace","title":"Palace Skateboards (brand)","kind":"brand","category":"streetwear","tier":"A","platforms":["web","retail","video"],"tags":["logo-as-flexible-system","self-deprecating-humor","skate-credibility","video-first-promo","high-low-collab-range","british-dry-wit"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://palaceskateboards.com"},"one_liner":"Anchor everything to a real skate team and a single flexible mark (the Tri-Ferg triangle) delivered with British self-deprecating dry humor — the brand can collaborate with Ralph Lauren or Adidas one season and still read as a skate label the next, because the joke is always on itself, never on the audience.","words":716,"file":"brands/brand-palace.md","thumb":"jpg"},{"slug":"brand-supreme","title":"Supreme (brand)","kind":"brand","category":"streetwear","tier":"S","platforms":["web","retail","social"],"tags":["scarcity-as-operating-model","drop-calendar","box-logo","collab-as-commentary","resale-economy","brand-silence"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.supreme.com"},"one_liner":"Turn a fixed weekly drop time and a hard-capped box logo into a standing cultural appointment — the brand never explains, discounts, or restocks, so the resale market does its advertising for free.","words":613,"file":"brands/brand-supreme.md","thumb":"jpg"},{"slug":"copy-waitlist-and-invite","title":"Waitlist and invite copy","kind":"copy","category":"acquisition","tier":"A","platforms":["web","mobile"],"tags":["waitlist","invite","referral","scarcity","exclusivity"],"patterns":["referral-and-invite","onboarding-flows"],"updated":"2026-07-26","links":{},"one_liner":"Exclusivity copy only survives contact with a real audience when it states the one true reason for the wait — capacity, onboarding quality, or intentional selection — because the instant that reason turns out to be theater, the entire relationship with the list curdles.","words":652,"file":"copy/copy-waitlist-and-invite.md","thumb":"svg"},{"slug":"copy-founder-notes","title":"Founder notes and changelog voice","kind":"copy","category":"brand","tier":"A","platforms":["web","email"],"tags":["founder-voice","changelog","storytelling","specificity","trust"],"patterns":["docs-and-changelogs","changelog-and-release-notes-inapp"],"updated":"2026-07-26","links":{},"one_liner":"A founder letter or changelog earns trust by naming the actual thing that changed — a real garment studied, a real bug fixed, a real reason a decision was made — in first person, because the moment the copy could belong to any founder at any company with a find-and-replace, the voice has stopped doing its job.","words":686,"file":"copy/copy-founder-notes.md","thumb":"svg"},{"slug":"copy-irreverent-with-claims","title":"Irreverent copy with real claims","kind":"copy","category":"brand","tier":"S","platforms":["web","social","packaging"],"tags":["voice","humor","claims","dtc","marketing","trust"],"patterns":["microcopy-and-ux-writing","landing-page-anatomy"],"updated":"2026-07-25","links":{},"one_liner":"Loud personality only works when every punchline sits on a true, checkable claim — and when transactional surfaces go mute so the bit never taxes trust.","words":369,"file":"copy/copy-irreverent-with-claims.md","thumb":"svg"},{"slug":"copy-luxury-quiet","title":"Quiet luxury copy register","kind":"copy","category":"brand","tier":"A","platforms":["web"],"tags":["quiet-luxury","restraint","voice","material-copy","anti-homogenized"],"patterns":["product-detail-pages","landing-page-anatomy"],"updated":"2026-07-26","links":{},"one_liner":"Real quiet-luxury copy replaces persuasion with fact — fabric composition, construction, sourcing, a research citation — set at the same visual and sentence-level weight as the price; the moment the copy reaches for \"considered,\" \"elevated,\" or \"crafted\" instead of a checkable fact, it has slid into [[homogenized-premium]] mush.","words":624,"file":"copy/copy-luxury-quiet.md","thumb":"svg"},{"slug":"copy-checkout-calm","title":"Checkout calm copy","kind":"copy","category":"commerce","tier":"S","platforms":["web","mobile"],"tags":["checkout","trust","microcopy","payments","fees","errors"],"patterns":["checkout-and-cart"],"updated":"2026-07-25","links":{},"one_liner":"When someone is about to pay, copy gets shorter, clearer, and emotionally flat — personality from the brand site does not follow them into the card form.","words":394,"file":"copy/copy-checkout-calm.md","body":"# Checkout calm copy — quiet words at the money moment\n\n**One-liner:** When someone is about to pay, copy gets shorter, clearer, and emotionally flat — personality from the brand site does not follow them into the card form.\n\n## Voice register\n- **Transactional, adult, specific.** Verbs name the outcome: \"Pay $48,\" \"Place order,\" \"Save card for next time.\"\n- **No jokes, no hype, no fake urgency** on the primary pay control. Urgency belongs on merch drops and marketing — not on \"Confirm payment.\"\n- **Fees and totals in plain language** before the irreversible action. Surprise fees are a copy failure, not a pricing strategy.\n- **Errors diagnose and recover** (\"Card declined — try another card or contact your bank\") instead of blaming the user or going cute.\n\n## Line patterns\n- Primary CTA: verb + object (+ amount when known). Avoid \"Submit\" / \"Continue\" when \"Pay\" is truer.\n- Secondary: \"Back to cart,\" \"Apply code,\" \"Pay a different way\" — equal clarity, lower visual weight in UI, same clarity in words.\n- Trust lines: short facts (\"Encrypted,\" \"You can refund within 30 days\") — not essays.\n- Empty promo field: \"Discount code\" not \"Got a magic code? ✨\"\n- Processing: \"Paying…\" / \"Confirming…\" — state the system, don't entertain.\n- Success: \"Order confirmed\" + what happens next (email, tracking), not confetti copy.\n\n## Do / Don't\n**Do:** match legal reality; show total before pay; name the network/asset if crypto; keep refund/support one tap from failure.\n**Don't:** countdown timers on pay; \"Last chance!!\"; personality slang; burying the total; \"Oopsie\" declines; dark-pattern \"Yes, upgrade me\" defaults written as if helpful.\n\n## Steal / Avoid\n**Steal:** Stripe-like clarity — short labels, honest totals, instructional errors. Keep marketing voice on the PDP and mute it in checkout.\n**Avoid:** Liquid-Death-style jokes on the pay button; fake scarcity; apologizing endlessly; inventing fee names that obscure cost.\n\n## Use when\nAny cart, donate, subscribe, or crypto pay flow. Pair with [[brand-stripe]] for trust tone and [[crypto-checkout-trust]] when wallets are involved. Wrong for manifesto pages and drop teaser copy — those can be loud.\n\nOperators miss this constantly: they port homepage voice into the pay button, then wonder why conversion feels \"off.\" Calm copy is not boring — it is load-bearing trust. If marketing insists on a joke in checkout, put it in the receipt email after money clears, never before.","thumb":"svg"},{"slug":"copy-drop-rules","title":"Drop and waitlist rules copy","kind":"copy","category":"commerce","tier":"A","platforms":["web","social"],"tags":["drops","waitlist","rules","scarcity","fairness","launches"],"patterns":["drops-and-restocks"],"updated":"2026-07-25","links":{},"one_liner":"Scarcity only builds trust when the rules are legible before the event — who can enter, when winners notify, what losers get next, and whether the wait is real.","words":386,"file":"copy/copy-drop-rules.md","thumb":"svg"},{"slug":"copy-pricing-and-plans","title":"Pricing and plans copy","kind":"copy","category":"commerce","tier":"A","platforms":["web"],"tags":["pricing","plans","tiers","comparison","saas","honesty"],"patterns":["pricing-pages-web","paywalls-and-pricing-sheets","monetization-upsell-moments"],"updated":"2026-07-26","links":{},"one_liner":"Every plan gets a one-line \"for whom,\" every claim gets a number attached instead of an adjective, and the comparison table never engineers a decoy through selective feature renaming — clarity is the entire persuasion mechanism on a pricing page.","words":644,"file":"copy/copy-pricing-and-plans.md","thumb":"svg"},{"slug":"copy-ugc-prompting","title":"UGC prompting copy","kind":"copy","category":"growth","tier":"A","platforms":["web","mobile","email"],"tags":["ugc","reviews","photos","prompts","social-proof","sharing"],"patterns":["reviews-and-social-proof","referral-and-invite"],"updated":"2026-07-26","links":{},"one_liner":"The prompts that actually produce usable reviews, photos, and shares name the exact thing to show or say and fire at the moment the product was just used, not five minutes after purchase — a vague \"Tell us what you think!\" produces nothing a future buyer can act on.","words":715,"file":"copy/copy-ugc-prompting.md","thumb":"svg"},{"slug":"copy-error-and-empty","title":"Error and empty states","kind":"copy","category":"product","tier":"S","platforms":["web","mobile","desktop"],"tags":["errors","empty-states","recovery","onboarding","microcopy"],"patterns":["onboarding-flows"],"updated":"2026-07-25","links":{},"one_liner":"Empty and error screens are product moments: say what happened, what to do next, and what will change — never a shrug illustration with \"Nothing here yet.\"","words":369,"file":"copy/copy-error-and-empty.md","thumb":"svg"},{"slug":"copy-onboarding-first-run","title":"Onboarding first-run copy","kind":"copy","category":"product","tier":"A","platforms":["web","mobile","desktop"],"tags":["onboarding","first-run","teaching","tooltips","activation"],"patterns":["onboarding-flows","tooltips-and-feature-discovery","permission-priming"],"updated":"2026-07-26","links":{},"one_liner":"The best first-run copy gets a user to their own first real result fast, then teaches the rest of the product exactly at the moment each feature becomes relevant — never a five-slide tour that recites features nobody asked about yet.","words":681,"file":"copy/copy-onboarding-first-run.md","thumb":"svg"},{"slug":"copy-support-and-recovery","title":"Support and recovery copy","kind":"copy","category":"product","tier":"A","platforms":["web","mobile"],"tags":["support","refunds","help-center","trust","recovery","billing"],"patterns":["subscription-management-and-cancel-flow"],"updated":"2026-07-26","links":{},"one_liner":"Help-center, refund, dunning, and \"something went wrong\" copy is where a brand's whole trust balance gets tested at once — the fix is stating the real mechanism and the real next step in plain numbers, never a friendly paraphrase that hides the actual error from the person (or the support agent) who needs it.","words":693,"file":"copy/copy-support-and-recovery.md","thumb":"svg"},{"slug":"copy-technical-honest","title":"Technical honest copy","kind":"copy","category":"product","tier":"A","platforms":["web","cli","hardware"],"tags":["engineering","api","hardware","spec-sheet","precision","no-marketing-fog"],"patterns":["docs-and-changelogs"],"updated":"2026-07-26","links":{},"one_liner":"Engineer-facing, API, and hardware copy sells through the diagram and the datasheet, not the adjective — teenage engineering names a headline after a model code, Framework photographs the screwdriver, and a CLI's --help output IS its entire first impression; withholding persuasion language is the actual craft.","words":687,"file":"copy/copy-technical-honest.md","thumb":"svg"},{"slug":"creator-affiliate-engine","title":"Creator affiliate engine","kind":"growth","category":"acquisition","tier":"A","platforms":["web","mobile","social"],"tags":["affiliate","creator-economy","attribution","influencer","commission","ltk"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.shopltk.com"},"one_liner":"Give creators a unique, trackable code or link tied to their own name with a real-time dashboard, pair it with brand-fit guardrails instead of a script, and the incentive to keep mentioning the product compounds with the creator's own audience trust instead of decaying like a one-off sponsored post.","words":726,"file":"growth/creator-affiliate-engine.md","thumb":"jpg"},{"slug":"free-tool-top-of-funnel","title":"Free tool top of funnel","kind":"growth","category":"acquisition","tier":"A","platforms":["web"],"tags":["free-tool","seo","product-led-growth","calculator","plg","self-serve"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.canva.com"},"one_liner":"Ship a genuinely useful free tool that completely solves one narrow real problem, and let the moment a user hits its natural ceiling — more volume, more collaborators, more history — be the only place the paid product appears, so the tool itself does the convincing instead of a popup.","words":766,"file":"growth/free-tool-top-of-funnel.md","thumb":"jpg"},{"slug":"waitlist-referral","title":"Waitlist + referral","kind":"growth","category":"acquisition","tier":"S","platforms":["web","mobile"],"tags":["waitlist","referral","viral-loop","invite","early-access","superhuman"],"patterns":[],"updated":"2026-07-25","links":{"site":"https://www.superhuman.com"},"one_liner":"Gate access, then let every waitlisted person skip the line by inviting others — turning patience into a growth mechanic when the product is actually scarce or intentionally paced.","words":428,"file":"growth/waitlist-referral.md","thumb":"jpg"},{"slug":"drop-mechanics","title":"Drop mechanics","kind":"growth","category":"commerce","tier":"S","platforms":["web","mobile","social"],"tags":["scarcity","drops","waitlist","draw","snkrs","hype","inventory"],"patterns":[],"updated":"2026-07-25","links":{"site":"https://www.nike.com/launch"},"one_liner":"Controlled release + visible demand turns inventory into media: the event is the acquisition channel, and sellout is proof that compounds desire for the next drop.","words":439,"file":"growth/drop-mechanics.md","body":"# Drop mechanics — scarcity as a growth engine\n\n**One-liner:** Controlled release + visible demand turns inventory into media: the event is the acquisition channel, and sellout is proof that compounds desire for the next drop.\n\n## The loop\n- **Trigger:** announced drop time / draw window / early-access tier (email, app push, social countdown).\n- **Action:** enter draw, queue, or FCFS checkout for a limited SKU.\n- **Reward:** win/purchase confirmation, unboxing content, social status of \"got it.\"\n- **Next cycle:** sold-out residue + waitlist + rumor calendar feed the following drop; losers remain in the funnel.\n- **What compounds:** audience size, perceived desirability, UGC, and email/app install base — not just units sold.\n- **Levers:** allocation size, access rules (members vs public), bot resistance, and how loudly sellout is displayed afterward.\n\n## Mechanics in the wild\n- **Nike SNKRS / Launch:** draws and launches as appointment commerce; app is the arena; loss is part of the habit loop.\n- **Supreme / streetwear FCFS:** queue culture and block culture; speed and presence matter; restocks are events.\n- **Liquid Death merch drops:** sellouts left visible; scarcity as content without always needing a draw system.\n- **Teenage Engineering limited runs:** quieter scarcity — cult catalog energy rather than hype-app theater.\n- Edge differences: **draw** randomizes fairness optics; **FCFS** rewards speed/tech; **waitlist** softens loss into deferred hope.\n\n## Anatomy checklist\n- Teaser / calendar entry with exact rules (who can enter, when winners notify).\n- Identity + anti-bot layer appropriate to demand (account quality, device checks) without tanking UX for humans.\n- States for: registered, pending, won, lost, purchased, sold out — each with clear next action.\n- Post-drop: public sold-out PDPs, waitlist capture, \"notify on restock,\" content kit for winners.\n- Instrumentation: enter rate, win rate, checkout completion, bot fail rate, share rate, return-to-next-drop.\n- MVP: timed release + email waitlist + honest sold-out state. Scaled: app, draws, member tiers, localized inventory.\n\n## Failure modes\n- Fake scarcity on infinite inventory → trust collapse.\n- Bot dominance → community rage; growth becomes toxic.\n- Rules opacity → accusations of favoritism.\n- Drop fatigue → audience trains to ignore countdowns.\n- Checkout breaks at peak → acquired demand dies at the money moment.\n- Brand mismatch: medical/fintech \"drops\" feel manipulative.\n\n## Steal / Avoid\n**Steal:** make rules legible; display sellout as proof; give losers a next action; treat the drop calendar as content; match mechanic (draw vs FCFS) to fairness needs; keep post-purchase shareable.\n**Avoid:** artificial timers on evergreen stock; copying SNKRS chrome without demand; punishing real fans with captcha hell while bots win; using drops as a substitute for product-market fit.","thumb":"jpg"},{"slug":"telegram-commerce","title":"Telegram commerce","kind":"growth","category":"community","tier":"A","platforms":["telegram","web"],"tags":["telegram","community","bots","crypto-commerce","alerts","dm-sales"],"patterns":[],"updated":"2026-07-25","links":{"site":"https://telegram.org"},"one_liner":"Use Telegram groups/channels/bots as the distribution and relationship layer — alerts, trust, and checkout handoffs — especially where crypto, drops, and community-native buyers already live.","words":453,"file":"growth/telegram-commerce.md","thumb":"jpg"},{"slug":"content-as-product-loop","title":"Content-as-product loop","kind":"growth","category":"content","tier":"S","platforms":["web","email","mobile"],"tags":["editorial","newsletter","subscription","media","owned-audience","podcast"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://stratechery.com"},"one_liner":"When the writing, podcast, or newsletter isn't a funnel bolted onto an unrelated product but is itself the thing being evaluated and paid for, every piece has to earn attention on its own merit, and the audience it builds becomes an asset monetized directly through subscriptions and indirectly through sponsorship and adjacent products.","words":804,"file":"growth/content-as-product-loop.md","thumb":"jpg"},{"slug":"seo-content-cluster","title":"SEO content cluster","kind":"growth","category":"content","tier":"A","platforms":["web"],"tags":["seo","content","topical-authority","cluster","search","programmatic"],"patterns":[],"updated":"2026-07-25","links":{"site":"https://developers.google.com/search/docs"},"one_liner":"Pick a money topic, build a hub + spoke cluster of genuinely useful pages, and let internal links + freshness turn search demand into a durable acquisition channel — not a pile of keyword essays.","words":423,"file":"growth/seo-content-cluster.md","thumb":"jpg"},{"slug":"ugc-seed-loop","title":"UGC seed loop","kind":"growth","category":"content","tier":"A","platforms":["web","mobile","social"],"tags":["ugc","content","remix","packaging","meme","community-content"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.glossier.com"},"one_liner":"Build one specific, easy-to-copy format into the product itself, then treat regramming and featuring the best copies as a core marketing job — the format teaches the next customer what a \"good post\" looks like, and content supply shifts from the brand's budget to the community's habit.","words":790,"file":"growth/ugc-seed-loop.md","thumb":"jpg"},{"slug":"crypto-checkout-trust","title":"Crypto checkout trust","kind":"growth","category":"crypto","tier":"A","platforms":["web"],"tags":["crypto","checkout","trust","payments","wallet","conversion"],"patterns":[],"updated":"2026-07-25","links":{"site":"https://commerce.coinbase.com"},"one_liner":"Crypto payment flows win when they feel as boring and verifiable as card checkout — clear amounts, clear addresses/networks, clear status — because trust friction kills conversion harder than gas fees do.","words":436,"file":"growth/crypto-checkout-trust.md","thumb":"jpg"},{"slug":"launch-event-theater","title":"Launch event theater","kind":"growth","category":"events","tier":"A","platforms":["web","mobile","in-person"],"tags":["live-event","launch","ritual","livestream","appointment-viewing","keynote"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.apple.com/apple-events/"},"one_liner":"Turn a launch into a recurring, appointment-shaped ritual with its own recognizable format and fandom, so the anticipation, live communal watching, and aftermath discourse become a bigger and more durable growth engine than whatever product the event was nominally announcing.","words":830,"file":"growth/launch-event-theater.md","thumb":"jpg"},{"slug":"marketplace-liquidity-flywheel","title":"Marketplace liquidity flywheel","kind":"growth","category":"marketplace","tier":"S","platforms":["web","mobile"],"tags":["marketplace","cold-start","liquidity","two-sided","supply-demand","wedge"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://stockx.com"},"one_liner":"A marketplace has no value until both sides show up, so the operator manually subsidizes the scarcer side first inside one narrow wedge, and only opens up self-serve growth once early transactions actually clear fast enough to feel safe to strangers.","words":825,"file":"growth/marketplace-liquidity-flywheel.md","thumb":"jpg"},{"slug":"community-owned-surface","title":"Community-owned surface","kind":"growth","category":"retention","tier":"S","platforms":["web","mobile"],"tags":["community","retention","moat","network-effects","in-product-social","leaderboard"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.strava.com"},"one_liner":"When the social surface (leaderboard, feed, gallery, votes-into-production) lives inside the core product loop rather than in a separate rented channel, contribution becomes nearly the same action as normal use — so the network graph and reputation users build there become a switching cost, not just an engagement metric.","words":741,"file":"growth/community-owned-surface.md","thumb":"jpg"},{"slug":"habit-streak-retention","title":"Habit streak retention","kind":"growth","category":"retention","tier":"A","platforms":["mobile","web"],"tags":["streak","habit-loop","retention","gamification","notifications","forgiveness"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.duolingo.com"},"one_liner":"A well-designed streak makes consistency itself feel rewarding and offers real forgiveness for a missed day, while a toxic streak turns a lapse into a threat against something the user actually cares about losing — the difference decides whether the loop builds a habit or builds resentment.","words":748,"file":"growth/habit-streak-retention.md","thumb":"jpg"},{"slug":"post-purchase-dopamine","title":"Post-purchase dopamine","kind":"growth","category":"retention","tier":"A","platforms":["web","email","mobile"],"tags":["retention","receipt","unboxing","shop-app","order-tracking","ufg"],"patterns":[],"updated":"2026-07-25","links":{"site":"https://shop.app"},"one_liner":"Treat confirmation → tracking → delivery → unboxing as a designed product experience so buyers create content, reorder, and trust the brand enough to buy again without re-acquisition cost.","words":425,"file":"growth/post-purchase-dopamine.md","thumb":"jpg"},{"slug":"ai-slop","title":"AI slop — the anti-reference","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["anti-reference","default-convergence","gradient-purple","bento-grid","inter-font","auto-generated"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://www.creativebloq.com","mobbin":"https://mobbin.com/glossary/ai-generated-ui"},"one_liner":"emerged 2023–2025 as generative tools (v0, Lovable, Framer AI, Midjourney logo prompts, ChatGPT-drafted landing copy) converged on the same defaults because they were trained on the same defaults — a feedback loop of AI output becoming AI training data. Named and codified 2025–2026: Sailop's ~100-page \"State of the AI-Generated Web\" report catalogued the tells at scale, 925studios published an avoidance guide, and Creative Boom ran the epitaph line — \"the four-pointed star for AI logos, and gradients for everything\" (verified 2026-07). It is now a named, shamed genre — launches get roasted…","words":932,"file":"movements/ai-slop.md","body":"# AI slop — the anti-reference — the visual dialect of \"an LLM made this in one prompt and nobody art-directed it after\"\n\n**Lineage:** emerged 2023–2025 as generative tools (v0, Lovable, Framer AI, Midjourney logo prompts, ChatGPT-drafted landing copy) converged on the same defaults because they were trained on the same defaults — a feedback loop of AI output becoming AI training data. Named and codified 2025–2026: Sailop's ~100-page \"State of the AI-Generated Web\" report catalogued the tells at scale, 925studios published an avoidance guide, and Creative Boom ran the epitaph line — \"the four-pointed star for AI logos, and gradients for everything\" (verified 2026-07). It is now a *named, shamed* genre — launches get roasted specifically for reading as AI slop, independent of whether AI actually built them. This card exists so izzy's builds are never mistaken for one-shot output.\n\n## Definers\n- **Palette:** blue→purple gradient (≈#4F46E5 → ≈#A855F7 or ≈#3B82F6 → ≈#8B5CF6) as the default \"brand\" move, applied to hero backgrounds, buttons, and text-fill alike, with no other reason for purple to exist in the product.\n- **Type:** Inter (or an Inter-indistinguishable geometric grotesk) at the default weight ladder, no optical sizing, no display-cut pairing — because it's the default in every scaffold (shadcn/ui, Tailwind UI, v0), never a chosen decision.\n- **Iconography:** the four-pointed \"sparkle\" star (◆ variant, not a 5/6-point star) as the universal glyph for \"AI-powered,\" stamped next to every feature regardless of relevance.\n- **Layout:** bento-grid-by-default — a wall of uniform ≈16–24px-radius rounded rectangles, each holding one feature, laid out because it's an easy CSS-grid template, not because the content has that shape.\n- **Cards/shadows:** identical soft drop shadow (≈0 4px 20px rgba(0,0,0,.08)) and identical corner radius on every surface, so hero, pricing, and testimonial cards are visually indistinguishable containers.\n- **Texture:** a barely-visible noise/grain overlay or blurred gradient-blob background, added as a \"premium\" signal with no relationship to brand or content.\n- **Copy voice:** em-dash-heavy sentences, rule-of-three lists (\"Fast. Secure. Simple.\"), and headline formula \"The [adjective] way to [verb]\" — content generated to fill the layout rather than the layout built to carry specific content.\n- **Motion:** fade-up-on-scroll applied uniformly to every section at the same duration/easing, signaling \"I have a scroll-animation library installed,\" not intent.\n\n## Execution recipe\nThe tells above are produced by identifiable technical shortcuts — auditing for these mechanisms catches slop before it ships:\n- Gradient: `background: linear-gradient(135deg, #4F46E5, #A855F7)` dropped onto a `<section>` or `background-clip: text` on a headline — the single most common \"make it look AI\" instruction executed literally.\n- Bento grid: `display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px` with every child sharing one `.card` class (`border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.08)`) — zero per-card art direction.\n- Sparkle icon: a single Lucide/Heroicons `sparkles` or `sparkle` SVG re-used as the \"AI feature\" badge across the whole page instead of a custom mark.\n- Noise overlay: a base64 SVG `feTurbulence` filter or a repeating PNG at `opacity: .03–.05` layered over the hero — copy-pasted from a Tailwind/shadcn snippet, never tuned to the brand.\n- Scroll motion: Framer Motion / AOS.js `fadeInUp` with the library's default `duration: 0.5, ease: \"easeOut\"` on every `<section>`, unedited from the docs example.\n- Copy: LLM-drafted marketing copy pasted in unedited — checkable by density of em dashes, \"unlock/elevate/seamless,\" and headline templates that would fit any product with a find-and-replace.\n\n## Reference products & sites\nNo specific product is \"the\" reference — that's the point: this is the *default template* look shared across v0/Lovable/Framer-AI output, generic SaaS landing pages, and low-effort NFT/crypto-adjacent sites circa 2024–2026. The named counter-examples in the trade coverage (Sailop, 925studios, Creative Boom, verified 2026-07) are landing pages that got called out precisely for this convergence — treat any current top-of-ProductHunt SaaS page as a live specimen before shipping.\n\n## Use when / reads dated when\n- **Never as the target look.** Use this card only as a pre-ship checklist — run it against BBA Peptides, Kessler's Collectables, Broken Bags, the Izzy Reels editor UI, IZZY PLAY's console, operator dashboards, and any landing/marketing page before calling them done.\n- Reads dated **immediately** once a viewer recognizes the template — the genre's whole liability is that it signals \"no art direction happened\" the instant it's named, which is now (mid-2026, per the trade coverage above).\n- Highest-risk surfaces: fast-turnaround landing pages, admin/operator dashboards built off shadcn defaults, and any AI-copy-drafted product description — exactly the surfaces speed pressure tempts a shortcut.\n\n## Failure modes\n- Treating the gradient or sparkle icon as \"branding\" instead of removing them — the fix is deletion, not a different gradient.\n- Swapping Inter for another neo-grotesk (Geist, Söhne) without changing weight/spacing decisions — still reads as slop if the *system* (uniform radius, uniform shadow, uniform grid) is untouched.\n- Keeping the bento grid but reskinning colors — the tell is the layout logic (equal-weight cards regardless of content importance), not the palette.\n- Running AI-drafted copy through a \"make it sound more human\" pass that only swaps synonyms — em-dash density and rule-of-three structure survive a synonym pass; the fix is rewriting from the actual product fact, per [[feedback_no_invented_copy]].\n- Believing avoidance = using a *different* trendy default (glassmorphism, neubrutalism) with zero brand-specific reasoning — swapping one convergence for another isn't an escape, it's slop with a different silhouette.\n\n**The escape move:** every visual decision must trace to a fact about *this* product (its actual palette from [[reference_izzy_visual_compass]] or the project's own brief, its actual content hierarchy, its actual voice) — if a component would look identical on a different product with a find-and-replace, it's slop.","thumb":"jpg"},{"slug":"anti-design-anti-grid","title":"Anti-design / anti-grid","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["anti-design","neo-brutalism","broken-grid","raw-texture","maximalism","chaos-design"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://brutalist-websites.com","mobbin":"https://mobbin.com/glossary/anti-design"},"one_liner":"roots in David Carson's Ray Gun typography and punk zine collage (Jamie Reid) rejecting the Swiss grid; resurfaced as \"ugly web\" MySpace-era maximalism; formalized as the brutalist-web-design revival (2014-2018, catalogued at brutalist-websites.com — raw HTML defaults, hard edges, no framework polish); Gumroad's 2021 rebrand made neo-brutalism a commercial template (hard borders, offset shadows). By 2025-2026 the trigger flips: every AI-generated SaaS landing page converges on the same rounded-corner bento grid, soft-shadow card, Inter-font look — and \"anti-design\" emerges as the explicit…","words":1041,"file":"movements/anti-design-anti-grid.md","thumb":"jpg"},{"slug":"archival-museum-catalog","title":"Archival museum catalog","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["accession-number","provenance-caption","plate-layout","vitrine-spacing","catalog-typography","object-as-artifact"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://collection.cooperhewitt.org","mobbin":"https://mobbin.com/glossary/museum-catalog"},"one_liner":"the museum wall label and the auction-house lot sheet — two closely related documentation formats developed to describe a physical object with enough precision that it could be identified, tracked, and authenticated independent of the object itself. Cooper Hewitt's online Collection (collection.cooperhewitt.org) and the Rijksmuseum's Rijksstudio (rijksmuseum.nl/en/rijksstudio) digitized this convention directly — accession numbers, medium/date lines, dimensions, and provenance notes presented with the same restraint as the physical wall label. Auction houses (Sotheby's lot pages,…","words":1103,"file":"movements/archival-museum-catalog.md","thumb":"jpg"},{"slug":"aurora-mesh-gradients","title":"Aurora / mesh gradients","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["gradient-mesh","ambient-color","hero-background","grain-overlay","webgl-shader","saas-cliche","fluid-color"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://stripe.com","mobbin":"https://mobbin.com/glossary/gradient-background"},"one_liner":"Instagram's 2016 rebrand (orange→pink→purple→blue app-icon gradient) proved a gradient could BE an identity, not decoration. Stripe generalized it into a design system with its ~2018 diagonal purple-to-blue hero gradient, then in its 2023 site redesign shipped a real-time WebGL shader mesh (documented on the Stripe engineering blog) that blends noise-perturbed color fields instead of a flat CSS gradient — the version everyone now means by \"mesh gradient.\" Webflow/Framer starter templates mass-produced it 2021–2023 until it became shorthand for \"generic SaaS,\" which is why the current (2026)…","words":871,"file":"movements/aurora-mesh-gradients.md","thumb":"jpg"},{"slug":"bento-grids","title":"Bento grids","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["feature-grid","apple-keynote","modular-layout","css-grid","dashboard-ui","saas-default","asymmetric-grid"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://www.apple.com/apple-events/","mobbin":"https://mobbin.com/glossary/bento-grid"},"one_liner":"named for Japanese compartmentalized lunch boxes; the web pattern crystallized from Apple's product pages and keynote feature-summary slides (iPhone/iPad/Mac launch decks, roughly 2020-2023 as macOS Big Sur's widget stack + the App Store's featured-app tiles pushed asymmetric card grids into mainstream marketing sites). By 2023-2024 it was the default SaaS landing-page \"features\" section (Notion, Linear, Stripe, Vercel, Framer all shipped a version). Verified 2026-07: now explicitly the corporate-default look — Apple/Google/Microsoft/Spotify all ship it — which is exactly why it reads as…","words":1058,"file":"movements/bento-grids.md","thumb":"jpg"},{"slug":"blueprint-technical-drawing","title":"Blueprint technical drawing","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["exploded-view","hairline-stroke","dimension-lines","callout-leaders","patent-drawing","cad-aesthetic"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://frame.work","mobbin":"https://mobbin.com/glossary/exploded-diagram"},"one_liner":"engineering and patent-drawing convention — USPTO design-patent illustration standards (uniform hairline strokes, no shading, numbered reference lines pointing to labeled parts) and the cyanotype \"blueprint\" itself (white-on-blue architectural prints, 19th century, the source of the name and its blue-ground/white-line color logic). Automotive repair manuals — Haynes Manuals, in print since 1960 and still the reference for exploded engine diagrams with numbered parts lists — carried the same grammar into consumer-facing instruction. Framework's laptop marketing (2021–present) is the clearest…","words":1128,"file":"movements/blueprint-technical-drawing.md","thumb":"jpg"},{"slug":"brat-lofi-luxury","title":"Lo-fi as luxury (brat school)","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["brutalist-minimalism","single-accent-color","deliberate-lofi","gatekeeping","limited-drop","anti-polish"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://corteiz.co","mobbin":"https://mobbin.com/apps/corteiz"},"one_liner":"Corteiz (Clint419, UK, ~2017 on) proved gatekept scrappiness — bootleg-adjacent camo, a repeated alligator \"RTW\" mark, invite/password/GPS-coordinate drops — could out-desire actual luxury without a single polished asset. Yeezy under Kanye/Balenciaga-era West (Yeezy.com, Yeezy Season shows, ~2015-2020) proved blankness itself reads premium: bare concrete backdrops, a site with almost no UI, no product copy. Charli XCX's BRAT (Atlantic, 2024, art direction Fred Barnes/Special Offer Inc) fused both into a single-hex, single-font, deliberately blurred JPEG-compressed cover that became the…","words":1041,"file":"movements/brat-lofi-luxury.md","thumb":"jpg"},{"slug":"chaos-brand-unhinged","title":"Unhinged brand (chaos with money)","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["absurdist-voice","meme-marketing","brand-voice","social-first","manufactured-discourse","commerce-chrome"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://liquiddeath.com","mobbin":"https://mobbin.com/apps/liquid-death"},"one_liner":"Old Spice's \"The Man Your Man Could Smell Like\" (2010, Wieden+Kennedy) proved absurdist voice could move a legacy category; Wendy's Twitter roast era (~2017) proved a brand could run inside a platform's own vernacular instead of broadcasting at it; Liquid Death (founded 2019, Mike Cessario) built a whole beverage company on heavy-metal-parody voice wrapped around a commodity (canned water); MSCHF (est. 2019) industrialized stunt-as-product-drop; Duolingo's owl went full horror-bit on TikTok (~2021) and proved an EdTech mascot could stay unhinged and still convert; Nutter Butter's 2025…","words":964,"file":"movements/chaos-brand-unhinged.md","thumb":"jpg"},{"slug":"claymorphism-soft-3d","title":"Claymorphism & soft 3D","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["claymorphism","soft-3d","pastel","inflated-icons","neumorphism-evolution","matte-render","friendly-ui","onboarding"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://hype4.academy/articles/design/claymorphism-in-user-interfaces","mobbin":"https://mobbin.com/glossary/claymorphism"},"one_liner":"direct descendant of neumorphism (Alexander Plyuto's 2019 \"Skeuomorph mobile banking\" Dribbble shot, monochrome carved-gray UI). Neumorphism died fast on accessibility (near-zero contrast between element and background). Claymorphism is the 2021 fix-and-rebrand: swap the desaturated gray for saturated pastels, thicken the border-radius, push the shadow pair further apart for real depth instead of a whisper of one. Michal Malewicz / Hype4 Academy's 2021 essay is the piece most credited with naming and codifying it. It rode the same wave as Big Sur's 2020 macOS/iOS app-icon redesign (glossy…","words":992,"file":"movements/claymorphism-soft-3d.md","thumb":"jpg"},{"slug":"data-brutalism","title":"Data brutalism","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["dense-ui","monospace-numerics","trading-terminal","dark-mode","tabular-data","operator-console","semantic-color"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://www.hyperliquid.xyz","mobbin":"https://mobbin.com/apps/kraken-pro"},"one_liner":"roots in the Bloomberg Terminal (launched 1982; still ships a dense multi-pane, function-key-driven layout to ~325k paid seats), crossed with the 2010s \"brutalist web design\" backlash against flat/Bootstrap sameness (raw HTML, visible grid, no decoration). Crystallized into its current form on crypto-native trading UIs — Kraken Pro (formerly Cryptowatch), Hyperliquid, dYdX, TradingView's watchlist/DOM panes — through the early 2020s, where density became a deliberate signal of professional-grade access set against consumer fintech's whitespace-heavy onboarding (Robinhood, Cash App). The…","words":830,"file":"movements/data-brutalism.md","body":"# Data brutalism — density itself is the status symbol\n\n**Lineage:** roots in the Bloomberg Terminal (launched 1982; still ships a dense multi-pane, function-key-driven layout to ~325k paid seats), crossed with the 2010s \"brutalist web design\" backlash against flat/Bootstrap sameness (raw HTML, visible grid, no decoration). Crystallized into its current form on crypto-native trading UIs — Kraken Pro (formerly Cryptowatch), Hyperliquid, dYdX, TradingView's watchlist/DOM panes — through the early 2020s, where density became a deliberate signal of professional-grade access set against consumer fintech's whitespace-heavy onboarding (Robinhood, Cash App). The pitch: if a screen looks like it needs training to read, the product must be for people serious enough to have that training.\n\n## Definers\n- **Near-black, not pure black, background** ≈#0a0a0d–#0d0e12, often with a faint blue or green tint rather than true `#000` — pure black reads as OLED-saver, tinted near-black reads as \"instrument panel.\"\n- **Monospace or tabular numerics everywhere data lives** — IBM Plex Mono / JetBrains Mono / SF Mono / Berkeley Mono at ≈11–13px, `font-variant-numeric: tabular-nums` on any proportional fallback so digits don't jitter column alignment as values tick.\n- **Semantic color is rationed to exactly two hues plus neutral** — green ≈#26a69a/#00c853 for up/bid, red ≈#ef5350/#ff3b3b for down/ask, everything else stays grayscale white-on-dark. Any third accent hue dilutes the signal.\n- **Hairline dividers, not cards** — 1px borders at low contrast (gray-on-gray, ≈8-12% opacity difference from the fill) segment panels; no drop shadows, no elevation, no border-radius (or ≤2px) — flatness is the brutalist tell.\n- **Row height compressed to ≈18–24px**, near-zero cell padding, so dozens to hundreds of rows sit on screen without scrolling — the opposite of consumer list-view breathing room.\n- **Multi-pane tiling** — the viewport is divided into many simultaneous live feeds (orderbook, trade tape, chart, positions, chat) rather than one focused view a user navigates between tabs to reach.\n- **Micro-flash on value change** — a background-color pulse (≈150–300ms fade) on the exact cell that updated, tinted green or red by direction, is the only permitted animation; it signals liveness, not delight.\n\n## Execution recipe\n- Font stack: monospace for every numeric cell; keep labels/nav in a normal UI sans so the mono read stays reserved for data (mixing mono into prose is the #1 tell of someone imitating the surface without the substance).\n- CSS grid or `<table>` with `border-collapse: collapse`, 1px `border-color` tokens at low alpha, fixed row-height via `line-height` not `padding`.\n- Color tokens: `--up`, `--down`, `--neutral` only; every other UI element (chrome, borders, secondary text) stays on a grayscale ramp.\n- Flash-on-update: a CSS `@keyframes` background pulse triggered by a class toggle on websocket tick, removed after animation-end — never a persistent color, or the semantic read breaks.\n- Dockable/resizable panes (golden-layout, react-mosaic, or CSS grid-template-areas with drag handles) so density is user-configurable, not fixed — real terminals let operators build their own layout.\n- Virtualized scrolling (windowing) once row counts exceed a few hundred — density without virtualization is just a memory leak with a UI attached.\n- Sticky, low-height headers (≈24–28px) that never wrap; column labels abbreviated to 3-5 characters (BID, ASK, 24H%) the way real terminals do.\n\n## Reference products & sites\n[[kraken-pro]] (order book + trade tape density, green/red bid-ask), [[hyperliquid]] (funding-rate tickers, positions table, dark tinted background), [[tradingview]] (watchlist + DOM panes, tabular numerics), [[stripe-dashboard]] and [[vercel-dashboard]] as the *soft* adjacent case — data-dense but whitespace-padded, useful as the contrast reference for how much this movement strips away. Bloomberg Terminal itself is the ur-text but has no public web surface to link.\n\n## Use when / reads dated when\nReach for this on **operator dashboards and internal consoles** (inventory/stock-ops admin views, shop-ops-style control panels), **crypto/market-watch surfaces**, and any **data-table view inside an app** where the audience is the operator, not the customer — an emulation platform's ROM library grid in list-view, an admin's order queue, a trading or portfolio screen. It fits when the user's stated goal is scanning many rows fast, and density genuinely encodes more real information per pixel. It does **not** fit storefront/marketing pages, checkout flows, or onboarding — whitespace signals trust there, not expertise. It reads dated the moment density is applied decoratively: a dashboard with fifteen empty-feeling dense rows that could've been five clear ones. Once every SaaS admin panel copies the terminal look, it stops signaling \"professional-grade\" and starts signaling \"we photocopied Bloomberg.\"\n\n## Failure modes\nApplying monospace to labels and prose instead of reserving it for numeric cells (breaks legibility, gains nothing). Using more than two semantic hues, which drowns the actual bid/ask or pass/fail signal. Cramming rows for visual effect when the underlying dataset doesn't have that much real information — decorative complexity, not density. Skipping virtualization so a \"dense\" table with 2,000 unwindowed DOM rows chokes the browser. And the deepest tell: real terminals are dense because operators need every field simultaneously to make split-second decisions — if the build has no such decision to support, the density is cosplay, not function.","thumb":"jpg"},{"slug":"dopamine-maximalism","title":"Dopamine maximalism / Y2K","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["chrome-text","stickers","gradient-mesh","y2k-revival","gen-z-nostalgia","glossy-ui","maximalism"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://partiful.com","mobbin":"https://mobbin.com/apps/partiful"},"one_liner":"revival of late-90s/early-2000s \"Frutiger Aero\" web skeuomorphism (glossy XP/Vista buttons, chrome CD-ROM UI, Bliss-wallpaper optimism) plus 2000s teen-mall visual culture (Claire's, Bratz, MSN Messenger emoticons, Lisa Frank). Resurfaced ~2021-2023 through Gen-Z TikTok nostalgia and Y2K fashion (Heaven by Marc Jacobs), then codified as a product register by invite/event apps (Partiful, launched 2021) and irony-forward brands (MSCHF). By 2024-2025 it split into two lineages that look identical in a screenshot but behave differently in use — the taste lineage (curated, one event at a time)…","words":994,"file":"movements/dopamine-maximalism.md","thumb":"jpg"},{"slug":"editorial-serif-web","title":"Editorial serif web","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["serif-display","drop-cap","rag-control","magazine-layout","prestige-type","longform"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://stripe.press","mobbin":"https://mobbin.com/apps/anthropic"},"one_liner":"roots in print magazine/book typography (Swiss and American editorial design of the 1960s–80s: The New Yorker, Vanity Fair, university-press book design). Ported to the web as brands wanted to signal intellectual seriousness rather than tech-startup speed — Anthropic's site (2023 on, current mark uses a warm serif for headings against a cream ground) and Stripe Press (2020 on, book-jacket web pages for its own imprint) are the clearest current lineage-holders; MUBI's editorial pages and film cards lean the same register for cinema; Berkeley Graphics and A24's shop pages sit adjacent. It…","words":964,"file":"movements/editorial-serif-web.md","thumb":"jpg"},{"slug":"eink-dot-matrix","title":"E-ink & dot-matrix","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["paper-mimic","dithering","monospace","calm-tech","low-refresh","thermal-print"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://remarkable.com","mobbin":"https://mobbin.com/apps/remarkable"},"one_liner":"E Ink Corp span out of MIT Media Lab in 1997; Amazon's Kindle (2007) put the reflective grayscale panel in front of a mass audience. reMarkable (Norway, 2017; Paper Pro added color E Ink Kaleido in 2024) reframed it as a writing surface, not just a reading one. The dot-matrix half is older and separate: Epson/IBM impact printers (1970s-80s) and Teenage Engineering's segment/dot-matrix LCDs (OP-1, 2011 onward) kept the pixel-grid, no-antialiasing look alive in music-gear and toy hardware long after screens got smooth. Daylight Computer's DC1 (2024) fused both lineages into a product thesis: a…","words":939,"file":"movements/eink-dot-matrix.md","thumb":"jpg"},{"slug":"frutiger-aero-revival","title":"Frutiger Aero revival","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["frutiger-aero","y2k-revival","glassmorphism","web2-nostalgia","gen-z-nostalgia","glossy-ui","aqua-ui"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://frutigeraeroarchive.org"},"one_liner":"the aesthetic of ~2004–2013 consumer tech — Windows XP's \"Bliss\" wallpaper + Luna theme, Windows Vista/7 Aero Glass, Mac OS X Aqua's candy buttons (2000-2007), iTunes/iPod chrome, Xbox 360 \"Blades\" dashboard, Web 2.0 glossy badges (Digg, del.icio.us). Named retroactively (~2018, by online aesthetic-cataloguing communities) after Adrian Frutiger's humanist typeface + Microsoft's \"Aero\" glass shell — the name didn't exist at the time, the look did. Reads as tech-industry optimism before smartphones flattened everything: nature photography, water, and bubble-gloss UI standing in for \"the future…","words":894,"file":"movements/frutiger-aero-revival.md","thumb":"jpg"},{"slug":"generative-ui","title":"Generative / agentic UI","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["streaming-render","ai-provenance","diff-accept-reject","chat-canvas-split","component-registry","agent-authored"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://sdk.vercel.ai/docs/ai-sdk-rsc/generative-ui","mobbin":"https://mobbin.com/apps/chatgpt"},"one_liner":"emerged 2023–2024 from two threads meeting: chat-first AI products (ChatGPT) needing richer output than markdown, and dev-tool \"agent mode\" features (GitHub Copilot Workspace, Cursor Composer) needing to show code edits as reviewable diffs rather than silent overwrites. Vercel's AI SDK shipped streamUI/React Server Components streaming in 2023–24 as the first named framework for it. Crystallized as a distinct visual language through 2024–25 in v0.dev, ChatGPT Canvas, and Claude's Artifacts panel; verified 2026-07: Figma Weave (node-based AI orchestration, shown at Config 2026) extends the…","words":1109,"file":"movements/generative-ui.md","thumb":"jpg"},{"slug":"glassmorphism-2","title":"Glassmorphism 2.0","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["backdrop-filter","frosted-glass","liquid-glass","edge-light","specular-highlight","performance-budget","contrast-safety"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://developer.apple.com/design/human-interface-guidelines/materials","mobbin":"https://mobbin.com/glossary/glassmorphism"},"one_liner":"first wave (~2020-2021) came out of Windows Vista Aero's frosted chrome, revived by designer Michal Malewicz's \"Glassmorphism\" writeups and macOS Big Sur's Control Center panels, then flattened into a Dribbble cliché of low-opacity white cards over gradient blobs. The \"2.0\" relaunch traces to Apple's Liquid Glass system-wide redesign (WWDC 2025, shipped iOS 26 / macOS Tahoe): a real-time renderer that refracts, bends, and specular-highlights content behind glass as it moves, replacing static blur with a physically-motivated material. Glassmorphism 2.0 is the web/product-design translation of…","words":884,"file":"movements/glassmorphism-2.md","thumb":"jpg"},{"slug":"handmade-analog-craft","title":"Handmade analog craft","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["letterpress-deboss","kiln-variation","dye-lot-inconsistency","maker-mark","hand-numbered-edition","material-photography"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.heathceramics.com","mobbin":"https://mobbin.com/glossary/letterpress"},"one_liner":"working craft traditions that never digitized their production — letterpress printing (Hatch Show Print, Nashville, printing show posters on wood type since 1879 and still a working shop, not a museum piece), studio ceramics (Heath Ceramics, California, founded 1948, whose glaze and kiln variation is marketed as a feature rather than hidden as a defect), and textile mending traditions like sashiko and boro, carried into contemporary fashion by Bode (founded 2016), which builds entire collections around antique and hand-mended textiles with visible stitching left intentionally exposed. The…","words":1261,"file":"movements/handmade-analog-craft.md","thumb":"jpg"},{"slug":"hardware-industrial","title":"Hardware-industrial","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["schematic","monospace-type","part-numbers","function-first","teenage-engineering","technical-drawing","dashboard-ui"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://teenage.engineering","mobbin":"https://mobbin.com/apps/teenage-engineering"},"one_liner":"roots in Dieter Rams-era Braun functionalism (1960s, \"as little design as possible\") and NASA/military technical-drawing standards, filtered through Swiss International Typographic Style grid discipline. Codified into its current recognizable form by Teenage Engineering starting with the OP-1 synth (2011) and Pocket Operators (2015) — product-as-instrument-panel, part numbers and pictograms printed directly on the housing, the UI treated like a wiring diagram. Verified 2026-07: it has not been renamed or folded into the current anti-design/brutalist wave — it remains its own lineage, and if…","words":906,"file":"movements/hardware-industrial.md","thumb":"jpg"},{"slug":"homogenized-premium","title":"Homogenized premium — the anti-reference","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["anti-reference","premium-sameness","quiet-luxury-clone","logo-test-fail","cream-paper","neo-grotesk-serif","bento-lite"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.designrush.com/agency/website-design-development/trends/ai-startup-homepage-design","article":"https://bigpiecreative.com/why-boring-is-the-new-bold-the-quiet-luxury-shift-in-web-design/"},"one_liner":"the direct sister movement to [[ai-slop]] — the overcorrection that followed once purple-gradient AI slop got named and shamed (2025–2026). Builders and AI scaffolds didn't learn to art-direct; they learned a new safe default: swap the gradient for cream, swap Inter-at-default-weight for a \"considered\" serif/grotesk pair, swap the sparkle icon for a hairline rule. Trade coverage clocked the shift in real time — DesignRush's mid-2026 survey of AI-sector homepages found Anthropic, Cohere, xAI, and Mistral converging on \"soft creams, warm grays, and muted off-whites\" as the default signal of…","words":1254,"file":"movements/homogenized-premium.md","body":"# Homogenized premium — the anti-reference — the visual dialect of \"we hired a designer, and so did everyone else\"\n\n**Lineage:** the direct sister movement to [[ai-slop]] — the overcorrection that followed once purple-gradient AI slop got named and shamed (2025–2026). Builders and AI scaffolds didn't learn to art-direct; they learned a new safe default: swap the gradient for cream, swap Inter-at-default-weight for a \"considered\" serif/grotesk pair, swap the sparkle icon for a hairline rule. Trade coverage clocked the shift in real time — DesignRush's mid-2026 survey of AI-sector homepages found Anthropic, Cohere, xAI, and Mistral converging on \"soft creams, warm grays, and muted off-whites\" as the default signal of enterprise trust (verified 2026-07); Big Pie Creative named it outright as the \"Quiet-Luxury shift in web design,\" noting that \"hyper-intentional restraint\" had itself become a template. The mechanism underneath is statistical: a generator returns the most probable \"premium\" composite, so a prompt for \"quiet luxury, considered, elevated\" now returns the same page everywhere it's asked. The result is a genre that reads as premium to a client on first glance and identical to every other funded launch on second glance. This card exists so izzy's builds never pass \"looks expensive\" while still failing the only test that matters: could a stranger tell whose site this is with the logo covered.\n\n## Definers\n- **Palette:** cream/oat/bone grounds (≈#F7F4EE–#FAF8F3) against charcoal or soft-black ink, with one muted sage/stone/clay accent used on a sliver of the surface — the \"premium\" palette of the moment, applied with zero brand-specific reasoning for why *this* neutral, *this* accent.\n- **Type:** neo-grotesk (Inter, Geist, Söhne) or a \"tasteful\" transitional/humanist serif display (Canela, GT Sectra, Reckless-adjacent) paired with a grotesk body — the exact pairing formula [[quiet-luxury-dtc]] catalogs as earned craft, now run by AI scaffolds and rushed agencies alike with no per-brand tuning of weight, tracking, or x-height.\n- **Layout:** oversized whitespace as a default setting, not a decision — margins padded out because \"premium = space\" is the rule of thumb, independent of what the actual content needs room to say.\n- **Feature rows:** bento-lite — 2–3 column card grids, softer radius and lower elevation than AI-slop's bento (a 1px hairline instead of a drop-shadow flex), but the same underlying logic underneath: equal-weight boxes regardless of which feature actually matters.\n- **Imagery:** soft, desaturated, faintly blurred product or lifestyle photography — \"considered\" lighting that reads as a filter preset (warm highlights, lifted blacks) rather than an actual shoot with direction behind it.\n- **Rules & dividers:** hairline borders (≈1px, low-opacity) standing in for structure everywhere elevation might otherwise be needed — borrowed from the quiet-luxury grammar without the material or provenance content that grammar is supposed to justify.\n- **Copy voice:** \"considered,\" \"elevated,\" \"crafted,\" \"thoughtfully made,\" \"intentional\" — a vocabulary cluster that signals class rather than stating any fact about the actual product.\n- **Motion:** fade-up-on-scroll, ≈400–600ms ease-out, applied uniformly across every section — the same restraint AI-slop's fade-up mutated into, just slower and with the bounce removed.\n- **Logo lockup:** a minimal wordmark with no accompanying mark, icon, or object system — indistinguishable at a glance from any other brand that decided \"restraint\" meant skipping a visual anchor entirely.\n\n## Execution recipe\nThe tells above trace to the same handful of copy-pasted decisions — auditing for these mechanisms catches homogenized premium before a client mistakes it for done:\n- Palette tokens dropped in wholesale: `--paper:#F7F4EE; --ink:#1C1B19; --accent:#8A9A82;` (sage) or `--accent:#B8AFA3` (stone) — pulled from a \"premium palette\" reference board with no derivation from the brand's own material, history, or product.\n- Type stack copy-pasted, not chosen: `font-family:'Canela','GT Sectra',Georgia,serif` for display, `'Suisse Intl','Inter',sans-serif` for body — [[quiet-luxury-dtc]]'s exact pairing recipe, applied with none of its weight/tracking tuning.\n- Section padding set to a flat `120–160px` top/bottom regardless of content density — a \"premium\" default inherited from a template, not a hierarchy decision.\n- Bento-lite grid: `display:grid; grid-template-columns:repeat(3,1fr); gap:24px;` with `border:1px solid rgba(0,0,0,.08)` on every card instead of AI-slop's drop shadow — identical equal-weight-card logic, just a quieter shadow.\n- Photography treatment: a single desaturation-plus-warm-highlight preset (\"Cream,\" \"Editorial,\" or similar Lightroom pack) applied uniformly to stock or lightly-directed photography, standing in for an actual art-directed shoot.\n- Copy: an LLM prompt for \"premium brand copy\" run once and shipped unedited — reliably returns \"considered,\" \"elevated,\" \"crafted,\" checkable the same way AI-slop copy is checkable: by vocabulary density, not by any product fact underneath it.\n- Motion: Framer Motion / AOS.js `fadeInUp` at the library default `duration:0.5, ease:\"easeOut\"` — the same unedited default AI-slop ships, just running on a calmer palette so it reads intentional instead of templated.\n\n## Reference products & sites\nNo single site is \"the\" reference — same trap as [[ai-slop]]. The genre lives across most 2026 funded-startup and AI-sector marketing pages (the Anthropic/Cohere/xAI/Mistral class DesignRush surveyed, verified 2026-07), Framer and Webflow \"editorial\" or \"studio\" template packs, and any agency site optimizing to never offend a client. Contrast it against the real thing it's imitating: [[aesop]] and the [[quiet-luxury-dtc]] movement earn their restraint with actual material and provenance content on the page; homogenized premium copies the surface grammar without the substance the grammar is supposed to carry.\n\n## Use when / reads dated when\n- **Never as the target look — this card is a pre-ship checklist only.** Run it against every \"premium\" landing page, brand site, or investor-facing marketing surface before calling it done: if it passes \"looks expensive\" but fails the logo-removal test (cover the wordmark — does anything else on the page still say whose site this is?), fail the build and send it back for a mechanism, not a palette swap.\n- Reads dated the moment a design-literate viewer — an investor, a competitor's designer, a design-critic post — does that exact logo-removal swap, which is now a routine reviewer move in 2026, not a rare one.\n- Highest-risk surfaces: funded-startup landing pages, agency portfolio sites under deadline pressure, any AI-drafted \"About\" or \"Values\" page, and SaturnDesign's own client work when speed tempts the safe default — exactly where \"looks premium, offends nobody\" is the path of least resistance.\n\n## Failure modes\n- Treating cream-and-sage as \"the brand palette\" instead of recognizing it as this decade's default — the fix is deriving palette from the product or material, not swapping in a different neutral.\n- Swapping the serif for a different \"tasteful\" serif (Canela → Reckless → GT Sectra) without touching the underlying system (grid, spacing, motion) — still homogenized premium if the *structure* is untouched, the identical trap [[ai-slop]] names for gradient swaps.\n- Believing whitespace alone signals premium — per [[quiet-luxury-dtc]]'s own failure modes, whitespace with no typographic hierarchy or material content underneath reads as empty, not as considered.\n- Running the logo-removal test only against the homepage hero — the tell usually shows up first in the feature-row bento-lite cards and the footer, the surfaces nobody bothers to art-direct.\n- Assuming avoidance means bolting one \"weird\" element (an odd cursor, one bold color pop) onto an otherwise homogenized-premium page — a single garnish doesn't change the underlying system, the same \"different trendy default\" trap [[ai-slop]] warns against.\n\n**The escape move:** identical to ai-slop's — every visual decision must trace to a fact about *this* product (its actual materials, its actual founder story, its actual customer, its actual price point), never to \"what premium brands currently look like.\" If a homepage would look equally at home on a competitor's product with a find-and-replace, it fails the logo test, and it fails this card.","thumb":"jpg"},{"slug":"immersive-3d-web","title":"Immersive 3D web","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["webgl","webgpu","three-js","shader","scroll-camera","award-site","real-time-3d"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://www.lusion.co"},"one_liner":"grew out of the WebGL-experiment scene (~2014-2016, three.js maturing, Codrops tutorials) into a defined award-circuit genre once studios like [[igloo-inc]] and [[bruno-simon-portfolio]] proved a browser tab could hold a real-time 3D scene at production polish. [[lusion]] and [[active-theory]] turned it into a studio product line through the late 2010s/early 2020s (Awwwards Site-of-the-Year regulars). By 2026 the genre has shifted engines mid-flight: WebGPU is now the shipping target and widely — not universally — supported (~82-85% global browser coverage per caniuse, Mar 2026; Safari's…","words":1032,"file":"movements/immersive-3d-web.md","thumb":"jpg"},{"slug":"kinetic-typography-web","title":"Kinetic typography (web)","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["splittext","variable-fonts","scroll-trigger","marquee","shader-type","stagger-animation","gsap","awwwards"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://obys.agency","mobbin":"https://mobbin.com/glossary/kinetic-typography"},"one_liner":"roots in mid-century motion-graphics title sequences (Saul Bass) and 90s/2000s Flash-era web type experiments, but the current web dialect was set by the WebGL/GSAP agency wave of ~2016–2022 — Obys Agency, Active Theory, Lusion, Unseen Studio, Zajno — competing for Awwwards Site of the Day with hero headlines that split, mask, and warp on load and scroll. GSAP's SplitText plugin (paid Club GreenSock tool until it went free in GSAP 3.13, 2025) and ScrollTrigger are the load-bearing infrastructure; variable fonts (broad browser support since ~2019) added a second axis of motion beyond…","words":949,"file":"movements/kinetic-typography-web.md","thumb":"jpg"},{"slug":"linear-dark-saas","title":"Linear-dark SaaS","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["dark-mode","hairlines","aurora-gradient","dev-tool","operator-ui","gradient-slop","command-palette"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://linear.app","mobbin":"https://mobbin.com/apps/linear"},"one_liner":"Codified by Linear (launched 2019, Karri Saarinen's team, ex-Airbnb/Coinbase design) across its 2021-2023 redesigns — near-black canvas, hairline dividers instead of shadows, a single indigo-violet glow, cmd-K everywhere. Propagated through 2022-2024 by Vercel, Raycast, Framer and the wider YC/dev-tool cohort until it became the default template for anything selling to developers or operators. By 2025-2026 it had fully genericized: the palette and the gradient-blob hero shipped on marketing sites that had nothing to do with density or keyboard UX, which is what triggered the 2026 backlash.","words":799,"file":"movements/linear-dark-saas.md","thumb":"jpg"},{"slug":"liquid-glass","title":"Liquid Glass (iOS 26 era)","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["glassmorphism","refraction","specular-highlight","adaptive-tint","skeuomorphism-revival","translucency"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://developer.apple.com/design/human-interface-guidelines/materials","mobbin":"https://mobbin.com/apps/apple-ios"},"one_liner":"Announced WWDC June 2025, shipped iOS/iPadOS/macOS 26 (Sept 2025). Apple's HIG frames it as the successor to the iOS 7 flat-design era and the frosted \"vibrancy\" material used since iOS 7/8 — a jump from blur-based translucency to a simulated physical material with refraction, specular highlights, and dynamic light response. Distinct from 2020s \"glassmorphism\" (Figma-community CSS trend: flat blur + white border + drop shadow) — Liquid Glass simulates an actual lens: content behind it visibly bends/distorts near element edges, and highlights move as the device is tilted or the view scrolls,…","words":1142,"file":"movements/liquid-glass.md","thumb":"jpg"},{"slug":"material-3-expressive","title":"Material 3 Expressive","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["material-design","spring-motion","shape-morphing","android-native","tonal-color","bold-typography"],"patterns":[],"updated":"2026-08-02","links":{"site":"https://m3.material.io/blog/M3-expressive","android17":"https://developer.android.com/about/versions/17","mobbin":"https://mobbin.com/apps/pixel-android"},"one_liner":"Google's design team published the M3 Expressive research paper/announcement on the Google Design blog May 1, 2025, then presented it at I/O (May 20–21, 2025) — an evolution of Material Design 3 / Material You (both announced together at I/O 2021; Material You is the consumer-facing name, M3 the developer-doc designation; M3's own predecessor is Material Design 2, not the reverse). Framed explicitly as a correction: years of muted tonal-surface minimalism had made Android feel interchangeable with any other flat OS, and Google's own usability research (cited in the announcement) claimed…","words":1207,"file":"movements/material-3-expressive.md","thumb":"jpg"},{"slug":"maximalist-print-editorial","title":"Maximalist print editorial","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["magazine-layout","type-image-collision","oversized-display","duotone-photo","bleed-crop","editorial-art-direction"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.bloomberg.com/businessweek","mobbin":"https://mobbin.com/glossary/magazine-layout"},"one_liner":"business-and-culture glossy magazine design, most visibly the Bloomberg Businessweek relaunch under creative director Richard Turley (2010–2013) — illustrated, deliberately provocative covers where a giant headline overlapped the cover image rather than sitting politely beside it, a register the magazine has kept through subsequent redesigns. The same collision grammar runs through Wired's feature spreads (oversized condensed display type cropped by the page edge, full-bleed photography with a color-blocked kicker running across it) and New York Magazine's digital arm — Vulture and The Cut —…","words":1104,"file":"movements/maximalist-print-editorial.md","thumb":"jpg"},{"slug":"neubrutalism","title":"Neubrutalism","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["hard-shadow","raw-borders","color-block","sticker-ui","gumroad-era","anti-gradient","maximalist"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://gumroad.com","mobbin":"https://mobbin.com/glossary/neubrutalism"},"one_liner":"descends from brutalist web design (the anti-template reaction catalogued on brutalistwebsites.com from ~2014, curated by Pascal Deville — exposed HTML defaults, no framework gloss) crossed with Memphis Group/Swiss-poster color theory. The term \"neubrutalism\" was popularized by designers Sunny Ali & Sarah Beth Morgan's 2020-2021 Figma-community writing, then went mainstream via Gumroad's 2021 storefront/dashboard redesign, which is still the reference build most agents mean when they say \"neubrutalist.\" Peaked 2021-2023 as the default \"indie/creator tool\" look; by 2026 the hard-shadow idiom…","words":866,"file":"movements/neubrutalism.md","thumb":"jpg"},{"slug":"photo-brutalism-flash","title":"Photo brutalism flash","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["on-camera-flash","documentary-photography","indie-sleaze","snapshot-grid","flash-vignette","nightlife-brand"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.thecobrasnake.com","mobbin":"https://mobbin.com/glossary/flash-photography"},"one_liner":"direct-flash nightlife documentary photography, most visibly codified by Mark Hunter's The Cobrasnake (founded 2004) — a blog that photographed LA/NYC party culture on-camera-flash, unretouched, and posted it the next morning, defining what's since been named \"indie sleaze.\" Hunter's archive (republished 2024–2025 as the monograph \"Y2Ks Archive\") remains the reference text for the look. Heaven by Marc Jacobs, Marc Jacobs' Gen-Z-facing sub-label launched 2020, adopted the same raw-flash documentary register for its own campaigns and has directly commissioned Hunter, making it the clearest…","words":1194,"file":"movements/photo-brutalism-flash.md","thumb":"jpg"},{"slug":"quiet-luxury-dtc","title":"Quiet luxury DTC","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["muted-palette","serif-grotesk-pairing","generous-whitespace","trust-signaling","editorial-restraint"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://www.aesop.com","mobbin":"https://mobbin.com/apps/aesop"},"one_liner":"Grew out of Aesop's retail and packaging language (founded 1987, design-forward globally since the 2000s) crossing into digital DTC alongside the 2010s \"clean beauty\" wave (Glossier's pink-minimalist first act, roughly 2014-2019). By the early-to-mid 2020s the grammar matured past Glossier's playful millennial-pink into something closer to old-money editorial: muted earth/stone palettes, serif headlines, product-as-object photography — pulling from Bottega Veneta's post-2018 rebrand under Daniel Lee (stripped wordmark, no visible logo on leather goods) and from outdoor-heritage brands like…","words":905,"file":"movements/quiet-luxury-dtc.md","thumb":"jpg"},{"slug":"retro-os-skeuomorphic-revival","title":"Retro-OS & skeuomorphic revival","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["skeuomorphism","retro-os","poolsuite","teenage-engineering","nostalgia","chrome","textures"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://poolsuite.net","mobbin":"https://mobbin.com/apps/poolsuite"},"one_liner":"Two branches converged. Branch one, OS chrome: Mac OS 9's platinum look (1999) and brushed-metal Aqua (Mac OS X, 2001) with candy-gel buttons and pinstripes, then Windows XP's Luna theme (2001) with its saturated blue taskbar and beveled \"Start\" pill — both era-defining because computers still sold windows as physical panes. Branch two, hardware-referential skeuomorphism: iOS's leather/felt/wood textures under Scott Forstall (2007–2013), killed by flat iOS 7 (2013). The revival begins as internet nostalgia (Windows 95/XP meme aesthetics, Frutiger Aero mood-boards mid-2010s) then gets a real…","words":1121,"file":"movements/retro-os-skeuomorphic-revival.md","thumb":"jpg"},{"slug":"risograph-duotone","title":"Risograph duotone","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["spot-color-print","ink-misregistration","limited-palette","paper-tooth","duotone-layering","riso-print"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://hatopress.net","mobbin":"https://mobbin.com/glossary/risograph"},"one_liner":"the Risograph itself — a stencil-duplicator machine manufactured by Riso Kagaku Corporation (Japan, since 1946; the GR/MZ product lines are the ones the art-and-zine world adopted) that prints one ink color per pass through a drum, cheaply, on uncoated paper, and was never engineered for perfect multi-color registration. Independent publishers and studios — Hato Press (London, founded 2009) and Ditto Press (London) among the most visible — built an entire printmaking and small-press-publishing culture on the machine's limitations starting in the mid-2000s, and the resulting look (flat spot…","words":1228,"file":"movements/risograph-duotone.md","thumb":"jpg"},{"slug":"spatial-ui-flat","title":"Spatial UI on flat screens","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["spatial-ui","glassmorphism","parallax","depth-layering","visionos","frosted-glass","hover-choreography"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://developer.apple.com/design/human-interface-guidelines/materials","mobbin":"https://mobbin.com/glossary/spatial-ui"},"one_liner":"the direct parent is visionOS (Apple, unveiled WWDC23 June 2023, shipped with Vision Pro Feb 2024) — a UI language built for a device with real depth: glass panels that float in physical space, gaze-then-tap selection, ambient light and shadow that tell you how far a panel sits from your eye. Its own lineage runs through Mac OS X Aqua (2000, lickable glass buttons), Windows Aero/Vista (2006, blur), and Apple's own UIVisualEffectView vibrancy/blur materials (iOS 7, 2013) — the same company oscillating between flat and depth for 25 years. The 2026 turn is that these visionOS-specific…","words":974,"file":"movements/spatial-ui-flat.md","thumb":"jpg"},{"slug":"swiss-international-revival","title":"Swiss / International revival","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["grid-system","helvetica-lineage","editorial","index-page","hairline-rules","sans-serif"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://en.wikipedia.org/wiki/International_Typographic_Style","mobbin":"https://mobbin.com/glossary/swiss-style"},"one_liner":"Zurich/Basel, mid-1950s–60s. Josef Müller-Brockmann, Armin Hofmann, Emil Ruder, Max Bill; codified in the journal Neue Grafik (1958–65) and Müller-Brockmann's Grid Systems in Graphic Design (1981). Grew out of the earlier Basel/Zurich schools' rejection of decorative typography for objective, grid-derived layout. Went global as \"International Typographic Style\" once Helvetica (1957, Max Miedinger/Eduard Hoffmann) and Univers (1957, Adrian Frutiger) shipped it worldwide. Current web revival (~2015–now) runs through Stripe's docs-era design language, Linear, and the broader \"premium SaaS\" look…","words":903,"file":"movements/swiss-international-revival.md","thumb":"jpg"},{"slug":"terminal-mono-ui","title":"Terminal / mono UI","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["monospace","terminal","cli","scanlines","phosphor-glow","developer-tools","retro-computing","ansi"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://usgraphics.com","mobbin":"https://mobbin.com/apps/warp"},"one_liner":"traces to DEC's VT100/VT220 terminals (1978–83, green/amber phosphor CRTs) and the Bell Labs Unix culture that ran on them — a look born from hardware limits (fixed character grid, single-color phosphor, no anti-aliasing), not taste. Went dormant through the GUI decades, then resurfaced twice: Teenage Engineering (Stockholm, OP-1 2011 onward) reintroduced monospace/dot-matrix type and technical-diagram graphics into consumer hardware; the 2022–2025 dev-tools wave (Warp, Raycast, Linear's code surfaces, Charm/Bubble Tea TUIs, Vercel's Geist Mono) reintroduced it into software as a signal of…","words":933,"file":"movements/terminal-mono-ui.md","thumb":"jpg"},{"slug":"utilitarian-warehouse-industrial","title":"Utilitarian warehouse industrial","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["safety-color","stencil-type","hazard-stripe","logistics-livery","workwear-branding","operational-signage"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.carhartt-wip.com","mobbin":"https://mobbin.com/glossary/industrial-signage"},"one_liner":"OSHA and ANSI safety-signage standards (safety orange, safety yellow, and black as codified hazard/caution colors) crossed with logistics-fleet livery — DHL's yellow-and-red parcel branding, Caterpillar's safety-yellow equipment color, decades of stenciled shipping-crate markings (\"THIS SIDE UP,\" fragile-glass pictograms, consignee stamps). Workwear brands carried the same operational vocabulary into apparel: Carhartt's canvas-and-stencil utility branding, later reissued as fashion through Carhartt WIP's streetwear crossover (2000s–present), which made hazard-stripe trim, stamped size/lot…","words":1083,"file":"movements/utilitarian-warehouse-industrial.md","thumb":"jpg"},{"slug":"xerox-zine-collage","title":"Xerox zine collage","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["halftone","photocopy-grain","torn-paper","riso","mono-accent","diy-punk"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://en.wikipedia.org/wiki/Zine","mobbin":"https://mobbin.com/apps/are-na"},"one_liner":"UK/US punk and riot-grrrl zine culture, late 1970s–1990s: cut-and-paste layouts photocopied on office Xerox machines, then distributed hand-to-hand or mail-order. The look is a byproduct of the production method, not a chosen style — Letraset headlines, magazine cut-outs, typewriter body text, all glued to a board and run through a copier that degraded every generation. Riso-printing culture (Print Gocco, Risograph) inherited and refined the same DNA in the 2000s–2010s art-book scene. Digitally, [[are-na]] and small independent culture blogs kept the collage-board sensibility alive; the…","words":1174,"file":"movements/xerox-zine-collage.md","thumb":"jpg"},{"slug":"y2k-chrome-cyber","title":"Y2K chrome cyber","kind":"movement","category":"movements","tier":"S","platforms":["web","ios","android"],"tags":["liquid-metal","aqua-gel-ui","lens-flare","holographic-gradient","chrome-text","millennium-futurism"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.ssense.com","mobbin":"https://mobbin.com/glossary/y2k-chrome"},"one_liner":"the chrome-and-candy-plastic look of the internet and consumer electronics circa 1998–2003 — Apple's original iMac G3 and iBook translucent candy-colored plastics, and specifically Mac OS X's \"Aqua\" interface (2000), which coined the gel-button, glossy-highlight, pinstripe-window grammar this movement's UI chrome borrows directly. Cross-bred with cyber-rave club culture (Cyberdog-style holographic vinyl, chrome body jewelry, \"the future is now\" millennium optimism before it curdled into 2000s irony). Revived starting ~2020 on TikTok's 20-year nostalgia cycle and adopted through 2026 by…","words":1105,"file":"movements/y2k-chrome-cyber.md","thumb":"jpg"},{"slug":"offer-crypto-day-one","title":"Crypto day one","kind":"offer","category":"crypto","tier":"A","platforms":["web"],"tags":["crypto","checkout","pricing","trust","payments"],"patterns":["checkout-and-cart"],"updated":"2026-07-25","links":{},"one_liner":"Offer crypto as a first-class payment path with boring clarity — amounts, networks, expiry, receipts — so crypto-native buyers convert and everyone else still trusts the store.","words":370,"file":"offers/offer-crypto-day-one.md","thumb":"svg"},{"slug":"offer-bundle-and-kit","title":"Bundle and kit offers","kind":"offer","category":"pricing","tier":"A","platforms":["web"],"tags":["bundle","kit","aov","cross-sell","dtc"],"patterns":["product-detail-pages","monetization-upsell-moments"],"updated":"2026-07-26","links":{},"one_liner":"A bundle earns its higher price by combining things a real customer would actually use together, photographed and merchandised with the same care as any single SKU — the moment a bundle exists mainly to move slow inventory, it stops being a kit and starts being a junk-drawer discount.","words":680,"file":"offers/offer-bundle-and-kit.md","thumb":"svg"},{"slug":"offer-enterprise-contact","title":"Enterprise contact sales","kind":"offer","category":"pricing","tier":"A","platforms":["web"],"tags":["enterprise","contact-sales","self-serve","conversion-leak","b2b"],"patterns":["pricing-pages-web","monetization-upsell-moments"],"updated":"2026-07-26","links":{},"one_liner":"\"Contact sales\" is honest exactly when the buyer genuinely needs something self-serve can't offer — custom seats, compliance review, dedicated support, negotiated volume — and it's a conversion leak the moment a buyer who would happily self-serve at a real, statable price is instead forced into a sales call because publishing the number felt uncomfortable.","words":725,"file":"offers/offer-enterprise-contact.md","thumb":"svg"},{"slug":"offer-founding-member","title":"Founding member pricing","kind":"offer","category":"pricing","tier":"A","platforms":["web"],"tags":["founding-member","early-supporter","lifetime-pricing","support-debt"],"patterns":["paywalls-and-pricing-sheets","referral-and-invite"],"updated":"2026-07-26","links":{},"one_liner":"A founding-member tier has to be priced and scoped as if the product will still exist and still owe that member something in five years, because the entire appeal of \"founding\" is a locked-in status — the failure mode isn't giving too good a deal today, it's creating a permanent support and pricing obligation nobody budgeted for at scale.","words":709,"file":"offers/offer-founding-member.md","thumb":"svg"},{"slug":"offer-free-forever-plus","title":"Free forever plus paid expansion","kind":"offer","category":"pricing","tier":"A","platforms":["web","mobile"],"tags":["freemium","free-forever","expansion","no-hostage","saas"],"patterns":["monetization-upsell-moments","paywalls-and-pricing-sheets"],"updated":"2026-07-26","links":{},"one_liner":"A genuine free-forever core stays fully usable indefinitely with no forced expiration, while the paid tier sells real expansion (scale, collaboration, advanced capability) on top of it — the model breaks the instant \"free forever\" quietly becomes \"free until we change our minds\" or the free tier is degraded specifically to force an upgrade.","words":735,"file":"offers/offer-free-forever-plus.md","thumb":"svg"},{"slug":"offer-freemium-gate","title":"Freemium gate","kind":"offer","category":"pricing","tier":"A","platforms":["web","mobile"],"tags":["freemium","paywall","upgrade","limits","trial"],"patterns":["monetization-upsell-moments"],"updated":"2026-07-25","links":{},"one_liner":"Free should prove value fast; the paywall should feel like unlocking more of something you already understand — not a brick wall before the aha moment.","words":352,"file":"offers/offer-freemium-gate.md","thumb":"svg"},{"slug":"offer-good-better-best","title":"Good, better, best","kind":"offer","category":"pricing","tier":"A","platforms":["web"],"tags":["pricing","three-tier","decoy","honest-recommendation","saas"],"patterns":["pricing-pages-web","paywalls-and-pricing-sheets"],"updated":"2026-07-26","links":{},"one_liner":"Three tiers work when the middle one is genuinely where most real customers should land and the page says so plainly — the same structure becomes fraud the moment the \"decoy\" tier exists purely to make the recommended one look cheap by comparison, with no customer for whom it's actually the right choice.","words":682,"file":"offers/offer-good-better-best.md","thumb":"svg"},{"slug":"offer-membership-annual","title":"Annual membership pricing","kind":"offer","category":"pricing","tier":"A","platforms":["web"],"tags":["membership","annual","renewal","club","box","channel"],"patterns":["subscription-management-and-cancel-flow","paywalls-and-pricing-sheets"],"updated":"2026-07-26","links":{},"one_liner":"Annual club, box, or channel pricing earns its discount by being genuinely easier to leave than to join was hard — a visible renewal date, an honest reminder before the charge, and a pause option — because the whole model depends on trust surviving twelve months of a member not thinking about the brand at all.","words":663,"file":"offers/offer-membership-annual.md","thumb":"svg"},{"slug":"offer-one-time-vs-sub","title":"One-time vs subscription","kind":"offer","category":"pricing","tier":"A","platforms":["web"],"tags":["pricing","one-time","subscription","gumroad","indie","digital-goods"],"patterns":["monetization-upsell-moments"],"updated":"2026-07-25","links":{},"one_liner":"Charge once when the artifact is finite; subscribe when value renews (updates, access, hosting, community). Mixing them without a clear story confuses buyers and your future self.","words":378,"file":"offers/offer-one-time-vs-sub.md","thumb":"svg"},{"slug":"offer-paywall-moment","title":"In-product paywall moment","kind":"offer","category":"pricing","tier":"A","platforms":["web","mobile"],"tags":["paywall","upgrade","modal","monetization","timing"],"patterns":["monetization-upsell-moments"],"updated":"2026-07-25","links":{},"one_liner":"The best upgrade prompt appears at the moment of blocked intent — export, invite, deploy, remove watermark — with one plan that unlocks that action, not a tour of the whole pricing taxonomy.","words":365,"file":"offers/offer-paywall-moment.md","thumb":"svg"},{"slug":"offer-tier-clarity","title":"Tier clarity","kind":"offer","category":"pricing","tier":"S","platforms":["web"],"tags":["pricing","tiers","saas","packaging","comparison"],"patterns":["monetization-upsell-moments"],"updated":"2026-07-25","links":{},"one_liner":"Good offers make the difference between plans obvious in under ten seconds — who each tier is for, what unlocks, and what the default recommended path is — without a spreadsheet of decoy confusion.","words":374,"file":"offers/offer-tier-clarity.md","body":"# Tier clarity — packaging people can choose in one glance\n\n**One-liner:** Good offers make the difference between plans obvious in under ten seconds — who each tier is for, what unlocks, and what the default recommended path is — without a spreadsheet of decoy confusion.\n\n## The structure\n- **Axes of value** (not feature spam): seats, usage, access, support, brand removal, API, etc. Pick 2–4 axes max.\n- **Recommended tier** marked honestly (most teams / best value) — not every tier highlighted.\n- **Primary CTA per column** with the same verb where possible (\"Start,\" \"Upgrade\") so comparison stays visual.\n- **Annual/monthly** toggle with math that does not lie about savings.\n- Downgrade/cancel path exists in the product, not only in a buried email.\n\n## Mechanics in the wild\n- **Classic SaaS three-column:** Free / Pro / Business with one recommended middle.\n- **Usage-based:** estimate calculator beside tiers so sticker shock happens before checkout.\n- **Seat-based:** price per member with clear guest vs billable rules.\n- **Good-better-best** consumer: decoy middle only if the value story is real — otherwise people feel tricked.\n- Edge: **contact sales** for enterprise is fine if self-serve still covers the common case.\n\n## Anatomy checklist\n- Plan name + one-line \"for whom\"\n- Price, interval, what's included (bullets ranked by decision weight)\n- Limits stated as numbers people understand\n- FAQ for taxes, trials, refunds, what happens on downgrade\n- Instrumentation: tier click → checkout start → paid; which column converts; where people bounce to FAQ\n- MVP: two tiers + honest free. Scaled: calculator, annual toggle, enterprise column.\n\n## Failure modes\n- 12 indistinguishable checkmarks.\n- \"Unlimited\" that isn't.\n- Recommended badge on every plan.\n- Hiding the only plan that fits behind sales calls unnecessarily.\n- Trial that auto-converts without plain reminder copy ([[copy-checkout-calm]] applies).\n\n## Steal / Avoid\n**Steal:** one recommended path; axes over laundry lists; numbers over adjectives; align pricing page voice with checkout calm.\n**Avoid:** dark-pattern comparison charts; fake \"Most popular\" without data; feature renaming to make tiers look different when they aren't.\n\nWhen in doubt, cut a tier. Two clear plans beat four muddy ones. Your future support macros will thank you, and so will the assistant trying not to invent fake differentiators.","thumb":"svg"},{"slug":"offer-usage-based","title":"Usage-based pricing","kind":"offer","category":"pricing","tier":"A","platforms":["web"],"tags":["usage-based","metered","calculator","bill-shock","api-pricing"],"patterns":["monetization-upsell-moments","pricing-pages-web"],"updated":"2026-07-26","links":{},"one_liner":"Metered pricing only earns trust when the buyer can estimate their own bill before committing — a live calculator, a visible running meter, and a stated overage rule — because the entire risk of usage-based pricing is a surprise number arriving after the fact, and that surprise is a design failure, not a billing inevitability.","words":677,"file":"offers/offer-usage-based.md","thumb":"svg"},{"slug":"accessibility-baselines","title":"Accessibility baselines","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["accessibility","contrast","wcag","screen-reader","focus-order","dynamic-type","tap-targets"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/accessibility"},"one_liner":"guarantee the interface is operable by someone with low vision, a motor impairment, color-blindness, or a screen reader running — before any visual polish pass. These are floors, not stretch goals: below them the product is legally exposed (ADA Title III suits target e-commerce disproportionately) and functionally broken for ~16% of any real audience (WHO estimate of significant disability prevalence).","words":913,"file":"patterns/accessibility-baselines.md","thumb":"svg"},{"slug":"account-deletion-and-data-export","title":"Account deletion & data export","kind":"pattern","category":"ux-patterns","tier":"A","platforms":["web","ios","android"],"tags":["gdpr","data-export","account-deletion","data-portability","grace-period"],"patterns":["settings-screens","anti-patterns-dark-patterns"],"updated":"2026-07-26","links":{"site":"https://takeout.google.com","mobbin":"https://mobbin.com/glossary/delete-account"},"one_liner":"let a user get a complete, usable copy of their own data (the GDPR Article 20 / CCPA portability right) and, separately, permanently delete their account and its data — two distinct rights that must never be conflated, on a timeline the user can actually see and trust.","words":972,"file":"patterns/account-deletion-and-data-export.md","thumb":"jpg"},{"slug":"activation-checklists","title":"Activation checklists","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["onboarding","progress","gamification","retention","microcopy"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/onboarding-checklist"},"one_liner":"convert a blank/default account into a working one by breaking \"set this up\" into named, checkable steps, and make the remaining distance to done small enough to feel finishable. It's a Zeigarnik-effect engine — an open loop the eye keeps returning to — paired with an endowed-progress head start that makes 0% feel closer to done than it is.","words":1017,"file":"patterns/activation-checklists.md","thumb":"svg"},{"slug":"ai-chat-and-copilot-ux","title":"AI chat & copilot UX","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["streaming-text","citations","tool-use-disclosure","regenerate-branch","canvas-artifacts","chat-ux","copilot"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://claude.ai","mobbin":"https://mobbin.com/apps/claude"},"one_liner":"a conversational surface where a model answers, cites, thinks, and sometimes produces a durable artifact. It must show progress before the answer exists (nothing feels worse than a frozen composer), disclose how the answer was formed enough to earn trust without burying the user in logs, and let the user correct course (regenerate, edit, branch) without losing the thread.","words":905,"file":"patterns/ai-chat-and-copilot-ux.md","thumb":"jpg"},{"slug":"anti-patterns-dark-patterns","title":"Dark patterns (what not to do)","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["dark-patterns","deceptive-design","ftc-enforcement","drip-pricing","confirmshaming","roach-motel","fake-urgency","trust-first"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://www.deceptive.design/","mobbin":"https://mobbin.com/glossary/dark-patterns"},"one_liner":"this isn't a screen, it's a liability checklist. Any surface with money, a subscription, a countdown, or a decline path (storefront checkout, subscription upsell, cancel flow, cookie/consent modal) must be auditable against these named failure modes before ship — because in 2025-26 they are actively litigated, not just \"bad UX.\"","words":962,"file":"patterns/anti-patterns-dark-patterns.md","thumb":"jpg"},{"slug":"auth-and-signin","title":"Auth & sign-in","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["passkeys","magic-link","otp","social-auth","phone-first","friction-budget","onboarding"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://passkeys.dev","mobbin":"https://mobbin.com/glossary/sign-up-log-in"},"one_liner":"establish identity (once) and re-establish it (fast, repeatedly) with the least friction the risk level allows. The single biggest lever is choosing the right friction budget for the audience before picking a mechanism — a peptide storefront and an operator dashboard should never share a sign-in screen.","words":918,"file":"patterns/auth-and-signin.md","thumb":"jpg"},{"slug":"bottom-sheets-and-modals","title":"Bottom sheets & modals","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["bottom-sheet","detents","drag-to-dismiss","ios-sheets","stacking-limits","gesture-physics","modal-vs-push"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://developer.apple.com/design/human-interface-guidelines/sheets","mobbin":"https://mobbin.com/glossary/bottom-sheet"},"one_liner":"present a secondary task or choice without losing the context underneath (or, for modals, deliberately cutting context to force focus). The core decision every instance makes: how much of the screen to take, how easy to leave, and whether the thing behind it is still alive.","words":1034,"file":"patterns/bottom-sheets-and-modals.md","thumb":"jpg"},{"slug":"calendars-and-scheduling","title":"Calendars & scheduling","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["scheduling","calendar-view","availability","timezone","quick-add","booking","time-blocking"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://fantastical.app","mobbin":"https://mobbin.com/apps/fantastical"},"one_liner":"render time as a navigable surface (day/week/month), let a user create or claim a slot in as few taps as possible, and communicate availability across people/timezones without ambiguity. Any surface with appointments, drops, posting schedules, or recurring jobs inherits this pattern even without a literal grid — a countdown timer or a \"next restock\" chip is calendars-and-scheduling wearing a smaller costume.","words":1087,"file":"patterns/calendars-and-scheduling.md","thumb":"jpg"},{"slug":"camera-and-capture-ui","title":"Camera & capture UI","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["camera","shutter","permissions","capture","manual-controls","mode-switching","mobile"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/camera"},"one_liner":"get the sensor on screen, get a usable frame captured in under a second of intent, and disclose exactly as much manual control as the user's confidence level warrants — while the OS-level camera/mic permission prompt (a hard gate) gets asked for at the right moment, not the first one.","words":1087,"file":"patterns/camera-and-capture-ui.md","thumb":"svg"},{"slug":"changelog-and-release-notes-inapp","title":"In-app changelog & release notes","kind":"pattern","category":"ux-patterns","tier":"A","platforms":["web","ios","android"],"tags":["changelog","release-notes","whats-new","feature-discovery","versioning"],"patterns":["docs-and-changelogs","onboarding-flows"],"updated":"2026-07-26","links":{"site":"https://linear.app/changelog","mobbin":"https://mobbin.com/glossary/whats-new"},"one_liner":"tell a returning user what changed since their last visit, INSIDE the product, at a moment that doesn't block their actual task. Distinct from [[docs-and-changelogs]], which covers the public/marketing changelog page — this pattern is specifically the in-app surfacing mechanism (dot badges, modals, feature-gated reveals) and how it interacts with users returning on an old version.","words":1055,"file":"patterns/changelog-and-release-notes-inapp.md","thumb":"jpg"},{"slug":"chat-and-messaging-ui","title":"Chat & messaging UI","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["messaging","bubbles","read-receipts","typing-indicator","threads","telegram-commerce"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/apps/whatsapp"},"one_liner":"render a linear or grouped exchange between two or more parties so the reader can tell instantly who said what, when, whether it landed, and how to reply — without re-reading timestamps. On izzy's surfaces this is: a Telegram-channel storefront's order flow, a support widget bolted onto a peptide/collectibles/hemp storefront, an operator console's internal team thread, or an in-app comment/DM layer on a consumer product.","words":933,"file":"patterns/chat-and-messaging-ui.md","thumb":"svg"},{"slug":"checkout-and-cart","title":"Checkout & cart","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["ecommerce","conversion","payments","guest-checkout","crypto-payments"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/checkout"},"one_liner":"carry a selected item (or set of items) from \"I want this\" to a confirmed payment with the minimum friction that still lets the buyer trust the transaction. Highest-stakes screen in commerce — most abandonment happens here, not on the product page, so every added step is a leak point, not a formality.","words":958,"file":"patterns/checkout-and-cart.md","thumb":"svg"},{"slug":"collaborative-presence-multiplayer","title":"Collaborative presence & multiplayer","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["web","ios","android"],"tags":["multiplayer","live-cursors","presence","crdt","real-time-collaboration"],"patterns":["comments-and-annotations"],"updated":"2026-07-26","links":{"site":"https://www.figma.com","mobbin":"https://mobbin.com/glossary/collaboration"},"one_liner":"show who else is in a shared document or canvas right now, where they are, and what they're touching, so simultaneous editing feels coordinated instead of like two people fighting over the same object — and resolve the moments when two people genuinely do edit the same thing at once.","words":889,"file":"patterns/collaborative-presence-multiplayer.md","thumb":"jpg"},{"slug":"command-palettes-and-keyboard-ux","title":"Command palettes & keyboard UX","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["command-palette","keyboard-shortcuts","power-users","fuzzy-search","navigation","developer-tools"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://raycast.com","mobbin":"https://mobbin.com/glossary/command-palette"},"one_liner":"a keybind-summoned overlay that lets a repeat user do anything the app can do — navigate, mutate state, search — without leaving the keyboard or waiting on page/menu chrome. It exists for the returning user, not the first-time one; its entire value is time saved per action multiplied by frequency of use.","words":1053,"file":"patterns/command-palettes-and-keyboard-ux.md","thumb":"jpg"},{"slug":"comments-and-annotations","title":"Comments & annotations","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["web","ios","android"],"tags":["comments","annotations","threaded-comments","mentions","resolve-state","presence"],"patterns":["collaborative-presence-multiplayer"],"updated":"2026-07-26","links":{"site":"https://www.figma.com","mobbin":"https://mobbin.com/glossary/comments"},"one_liner":"attach a threaded conversation to a specific point in a document, design, video frame, or code diff — pinned to an object or location rather than floating in general chat — and let that conversation resolve, so a live, shared surface doesn't accumulate permanent clutter across dozens of review rounds.","words":908,"file":"patterns/comments-and-annotations.md","thumb":"jpg"},{"slug":"dark-mode-and-theming","title":"Dark mode & theming","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["dark-mode","theming","semantic-tokens","oled","elevation","system-preference"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/dark-mode"},"one_liner":"give every surface (background, card, sheet, modal, nav bar) a color that reads at the right depth in low light, without inverting brand colors into mud, breaking photo/logo contrast, or shipping a flash-of-wrong-theme on load. It's infrastructure (a token system), not a filter.","words":998,"file":"patterns/dark-mode-and-theming.md","thumb":"svg"},{"slug":"dashboards-and-consoles","title":"Dashboards & consoles","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["kpi-hierarchy","live-data","card-vs-table","alert-surfacing","density-modes","operator-tools"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/dashboard"},"one_liner":"compress a system's state (orders, positions, jobs, health) into a screen that answers two questions in under 2 seconds — is anything on fire and what's the one number that matters right now — then lets the operator drill from summary to row-level truth without losing place. Use when: a storefront needs an order/inventory ops view, a Telegram-commerce bot needs an admin panel, an emulation-platform app needs a library/status console, or any build needs a \"state of the system\" home screen.","words":1063,"file":"patterns/dashboards-and-consoles.md","thumb":"svg"},{"slug":"dm-commerce-and-community-selling","title":"DM & community commerce","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["dm-commerce","telegram-channels","payment-links","trust-signals","menu-drops","marketplace-offers","community-selling"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/apps/telegram"},"one_liner":"sell a real product or service where the \"storefront\" is a channel/profile and the \"checkout\" is a private message thread — because the seller has no merchant account, wants no paper trail, or is selling into a community that already trusts the channel more than any external site. The screen has to do three jobs a normal PDP does automatically: show what's for sale, prove the seller is real, and hand off to payment without a cart.","words":869,"file":"patterns/dm-commerce-and-community-selling.md","thumb":"svg"},{"slug":"docs-and-changelogs","title":"Docs & changelogs","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["documentation","developer-experience","changelog","versioning","search","code-blocks"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://stripe.com/docs","mobbin":"https://mobbin.com/apps/stripe"},"one_liner":"give a user (developer, operator, or power-user) a way to find \"how do I do X\" fast, and give everyone a dated, honest record of what changed. On izzy's surfaces this is rarely a public API reference — it's the operator-console help pane, a Telegram bot's /help command tree, an admin changelog nobody reads until something breaks, or a marketing-page \"what's new\" strip that doubles as re-engagement bait. Same job, smaller stage.","words":916,"file":"patterns/docs-and-changelogs.md","thumb":"jpg"},{"slug":"drops-and-restocks","title":"Drops & restocks","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["drops","waitlist","scarcity","countdown","notify-me","restock","hype","raffle"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/apps/nike-snkrs"},"one_liner":"a product doesn't just go on sale, it arrives at a known moment. The screen's contract shifts depending on phase: pre-drop it recruits an audience (notify me / join the raffle), at-drop it adjudicates access fairly or ruthlessly, post-sellout it converts the miss into a captured lead instead of a bounce. Get the phase transitions wrong and you either leak the drop early (kills hype) or dead-end the loser (kills the relationship).","words":912,"file":"patterns/drops-and-restocks.md","thumb":"svg"},{"slug":"empty-states","title":"Empty states","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["first-run","retention","microcopy"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/empty-state"},"one_liner":"the moment a container has no content yet (first-run, cleared inbox, no results, error-adjacent). It must reframe absence as either possibility (do this next) or achievement (you're done), and it's usually the FIRST screen a new user actually reads.","words":485,"file":"patterns/empty-states.md","thumb":"svg"},{"slug":"error-offline-recovery","title":"Error, offline & recovery","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["offline-first","retry","sync-conflict","network-error","resilience","optimistic-ui","degraded-mode"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/error-state"},"one_liner":"handle the gap between \"connected and fresh\" and \"fully down\" without ever leaving the user stuck. Covers lost connectivity, failed requests, stale cached data, and two devices editing the same thing — the job is to classify which one it is, say so honestly, and always leave a way forward.","words":915,"file":"patterns/error-offline-recovery.md","thumb":"svg"},{"slug":"feeds-and-ranking","title":"Feeds & ranking UI","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["infinite-scroll","ranking","pull-to-refresh","ads","chronological"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://www.instagram.com","mobbin":"https://mobbin.com/apps/instagram"},"one_liner":"surface an ordered stream of items (posts, listings, activity, channel messages) that's too large to show at once, decide WHOSE order wins (a model's or the clock's), and keep it alive as new items arrive without disorienting whoever's mid-scroll. Applies wherever a build needs an activity/notification feed on an operator console, a recently-viewed or recommended-products rail on a storefront, or a channel message stream in a Telegram-commerce surface — not just social apps.","words":1021,"file":"patterns/feeds-and-ranking.md","thumb":"jpg"},{"slug":"file-upload-and-import","title":"File upload & import","kind":"pattern","category":"ux-patterns","tier":"A","platforms":["web","ios","android"],"tags":["file-upload","drag-and-drop","csv-import","bulk-import","partial-failure","resumable-upload"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.notion.so","mobbin":"https://mobbin.com/glossary/file-upload"},"one_liner":"accept a file, or a batch of files, from a device or another service, show real progress while it transfers, catch bad rows or formats before they corrupt the destination, and handle partial failure without forcing an all-or-nothing retry on data that was mostly fine.","words":859,"file":"patterns/file-upload-and-import.md","thumb":"jpg"},{"slug":"filters-and-faceted-search","title":"Filters & faceted search","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["faceted-search","filters","catalog-browsing","applied-state","e-commerce","chips"],"patterns":["search-ux"],"updated":"2026-07-26","links":{"site":"https://www.stockx.com","mobbin":"https://mobbin.com/glossary/filter"},"one_liner":"narrow a large result set (products, listings, files, tickets) down to what a user actually wants using structured facets — brand, size, price, status — and keep the applied state visible at all times, so a user always knows WHY they see what they see and how to undo any single choice without clearing everything.","words":924,"file":"patterns/filters-and-faceted-search.md","thumb":"jpg"},{"slug":"forms-and-input","title":"Forms & input","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["checkout","validation","onboarding","autofill","error-recovery","mobile-input"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/form"},"one_liner":"collect structured data (checkout, signup, profile, filters, listing creation) with the minimum friction between \"I want to do this\" and \"done.\" Every extra tap, every premature error, every field the OS could've filled is a chance to lose the user. Forms are where conversion is won or lost more than any other screen class.","words":1193,"file":"patterns/forms-and-input.md","thumb":"svg"},{"slug":"haptics-and-sound","title":"Haptics & sound design","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["haptics","sound-design","feedback","microinteractions","brand-sound","accessibility"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://developer.apple.com/design/human-interface-guidelines/playing-haptics","mobbin":"https://mobbin.com/glossary/haptics"},"one_liner":"confirm that an action registered, communicate its semantic weight (routine vs. success vs. error), and — used sparingly — become a recognizable brand asset, without ever feeling like noise the user has to tolerate.","words":982,"file":"patterns/haptics-and-sound.md","thumb":"jpg"},{"slug":"kanban-and-boards","title":"Kanban & boards","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["drag-and-drop","workflow","project-management","wip-limits","cards","swimlanes"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/kanban-board"},"one_liner":"turn a list of discrete items (tasks, orders, applicants, content pieces, tickets) into columns representing a workflow state, so position on screen = status in the process. The board's entire value is that moving a card left-to-right is both the UI action and the database write — no separate \"mark as done\" step exists once the pattern is built correctly.","words":1110,"file":"patterns/kanban-and-boards.md","thumb":"svg"},{"slug":"keyboard-shortcuts-and-power-user-surface","title":"Keyboard shortcuts & the power-user surface","kind":"pattern","category":"ux-patterns","tier":"A","platforms":["web","mac","windows"],"tags":["keyboard-shortcuts","power-users","discoverability","keymaps","chords"],"patterns":["command-palettes-and-keyboard-ux"],"updated":"2026-07-26","links":{"site":"https://raycast.com","mobbin":"https://mobbin.com/glossary/keyboard-shortcuts"},"one_liner":"let a returning user act by keystroke alone, with no palette, no menu, no mouse, while staying discoverable enough that a new user can find every shortcut without a manual. Distinct from [[command-palettes-and-keyboard-ux]], which is the searchable-overlay pattern — this is the direct, instant, no-UI keybind layer underneath it.","words":1018,"file":"patterns/keyboard-shortcuts-and-power-user-surface.md","thumb":"jpg"},{"slug":"landing-page-anatomy","title":"Landing page anatomy","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["landing-page","hero","social-proof","conversion","cta","marketing-site","above-the-fold"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://mobbin.com/apps","mobbin":"https://mobbin.com/glossary/landing-page"},"one_liner":"unlike a product UI, a landing page gets one visitor, one scroll, one decision, before attention decays. It has to state the claim, prove it, and hand off a single next action — fold order and information sequencing carry more weight here than any individual visual.","words":950,"file":"patterns/landing-page-anatomy.md","thumb":"jpg"},{"slug":"live-activities-widgets","title":"Live Activities & widgets","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["lock-screen","dynamic-island","widgetkit","glanceable","live-updates","android-widgets","ambient"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/live-activity"},"one_liner":"push the single most current fact about an ongoing or recurring thing (a trip, a delivery, a score, today's weather, a habit streak) onto a screen the user is already looking at — lock screen, Dynamic Island, home screen — so the app never has to be opened just to check something. Two different jobs live under one pattern name: session-bound live state (Live Activities, Android Live Updates — start, update, end) and persistent ambient state (home/lock-screen widgets — always there, refreshed on a timeline).","words":1193,"file":"patterns/live-activities-widgets.md","thumb":"svg"},{"slug":"live-commerce-and-auctions","title":"Live commerce & auctions","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["live-shopping","auctions","countdown-urgency","bid-overlay","collectibles","seller-stream","giveaway-mechanics","sold-celebration"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://www.whatnot.com","mobbin":"https://mobbin.com/apps/whatnot"},"one_liner":"compress the gap between \"I see it\" and \"I own it\" using a live clock, a live crowd, or both. The screen has to do three things at once: show the item, show the pressure mechanic (bid/timer/stock), and let the buyer act without losing their place in the stream. Gets used any time a build needs urgency-driven checkout rather than browse-and-cart — drops, live-hosted sales, giveaways, timed releases.","words":1149,"file":"patterns/live-commerce-and-auctions.md","thumb":"jpg"},{"slug":"loaders-and-site-intros","title":"Loaders & site intros","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["preloader","first-paint","enter-gate","audio-unlock","perceived-performance","webgl"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://lusion.co","mobbin":"https://mobbin.com/glossary/loading-state"},"one_liner":"bridge the gap between \"nothing rendered yet\" and \"the experience is ready,\" and on award-tier sites, do double duty as the first brand statement. It must either (a) get out of the way in under ~300ms, or (b) if it holds the user longer, prove the wait is buying something real — texture streams, an audio context unlock, a WebGL scene compiling. A loader with no mechanism behind it is just theft of time dressed as theater.","words":1050,"file":"patterns/loaders-and-site-intros.md","thumb":"jpg"},{"slug":"loading-skeletons-optimistic-ui","title":"Loading, skeletons & optimistic UI","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["loading-states","skeleton-screens","optimistic-ui","perceived-performance","shimmer","rollback","microinteractions"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/skeleton-loading"},"one_liner":"every screen that shows server- or disk-backed content has a gap between \"user asked\" and \"data arrived.\" This pattern is the discipline of filling that gap so the app reads as responsive even when the network isn't — via a placeholder that mirrors the real layout (skeleton), an indicator for unknown-shape waits (spinner), or by lying to the UI first and reconciling after (optimistic write).","words":1157,"file":"patterns/loading-skeletons-optimistic-ui.md","thumb":"svg"},{"slug":"localization-and-rtl","title":"Localization & RTL","kind":"pattern","category":"ux-patterns","tier":"A","platforms":["web","ios","android"],"tags":["localization","rtl","i18n","pluralization","cldr","string-expansion"],"patterns":["forms-and-input","microcopy-and-ux-writing"],"updated":"2026-07-26","links":{"site":"https://www.airbnb.com","mobbin":"https://mobbin.com/glossary/localization"},"one_liner":"make an interface function correctly for a language the design wasn't built in — mirrored reading direction for Arabic and Hebrew, variable string length, plural rules that aren't just \"singular plus s,\" and locale-correct dates, currency, and numerals — without shipping a second, drifted codebase per language.","words":1012,"file":"patterns/localization-and-rtl.md","thumb":"jpg"},{"slug":"maps-and-location","title":"Maps & location UX","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["bottom-sheet","pin-clustering","route-choreography","live-share","geolocation","wayfinding"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/apps/uber"},"one_liner":"render a map as the primary surface (not decoration) and let a person locate, choose, or track something in space — a pickup point, a store, a delivery, a friend — without the controls ever blocking the geography they're reading. On izzy's surfaces this shows up as: local-pickup/meetup coordination for a Telegram or hemp-shop order, shipping/delivery status on an order-tracking view, a service-area or store-locator block on a marketing page, and any operator dashboard that plots geo-tagged activity (orders, users, inventory nodes).","words":1315,"file":"patterns/maps-and-location.md","thumb":"svg"},{"slug":"media-players","title":"Media players","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["scrubber","mini-player","queue","playback-speed","chapters","gesture-transitions"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/media-player"},"one_liner":"surface audio/video playback state (position, buffering, what's next) and give precise scrubbing/skipping control, while staying out of the way when the user is doing something else (browsing, reading, shopping). Almost always exists in two states — a persistent mini-player and an expanded full player — that must feel like the same object, not two screens.","words":959,"file":"patterns/media-players.md","thumb":"svg"},{"slug":"microcopy-and-ux-writing","title":"Microcopy & UX writing","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["voice","microcopy","button-labels","error-messages","tone-of-voice","product-writing"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://www.nngroup.com/articles/microcopy/","mobbin":"https://mobbin.com/glossary/microcopy"},"one_liner":"every button, error, empty state, toast, and confirmation is a line of dialogue the product speaks to a specific person at a specific moment of friction or reward. Treated as an afterthought (whatever string the engineer typed), voice fractures screen to screen and quietly taxes trust. Treated as design material — with the same rigor as a color token — it becomes the cheapest lever a build has for perceived quality, because it costs zero extra pixels and ships in the same commit as the UI.","words":947,"file":"patterns/microcopy-and-ux-writing.md","thumb":"jpg"},{"slug":"monetization-upsell-moments","title":"Upsell & monetization moments","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["paywall","upsell","feature-gate","usage-meter","monetization","trial","blur-preview"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/paywall"},"one_liner":"convert a free/lower-tier user at the exact moment they've hit a real ceiling — a usage limit, a locked feature, a result they can partially see but not use — and frame the ask as \"keep doing the thing you're already doing,\" not \"stop and buy something.\"","words":841,"file":"patterns/monetization-upsell-moments.md","thumb":"svg"},{"slug":"motion-language-systems","title":"Motion language systems","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["motion-design","spring-physics","easing-curves","choreography","reduced-motion","haptics"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/motion-design"},"one_liner":"a coherent, named set of durations/easings/springs applied consistently across enter, exit, emphasis, and transition — so motion reads as intentional system, not per-screen guesswork. It's the layer that makes a hundred-screen app feel authored by one hand.","words":957,"file":"patterns/motion-language-systems.md","thumb":"svg"},{"slug":"navigation-systems","title":"Navigation systems","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["tab-bar","information-architecture","gesture-nav","sidebar","hamburger-menu","ia"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/navigation"},"one_liner":"make the whole product's shape legible in one glance and get the user to any top-level destination in one tap, while staying out of the way of the content those destinations contain. Navigation is infrastructure, not decoration — every extra tab or menu level is a permanent tax on every future feature decision.","words":1048,"file":"patterns/navigation-systems.md","thumb":"svg"},{"slug":"notifications-inbox-and-activity","title":"Notifications inbox & activity","kind":"pattern","category":"ux-patterns","tier":"A","platforms":["web","ios","android"],"tags":["notification-center","activity-feed","unread-state","grouping","in-app-inbox"],"patterns":["push-notification-strategy"],"updated":"2026-07-26","links":{"site":"https://linear.app","mobbin":"https://mobbin.com/glossary/notification-center"},"one_liner":"give a returning user one persistent, in-app surface — not a push notification, which is ephemeral and off-screen the moment it's dismissed — listing every event relevant to them, with a read/unread state, so catching up is a scan of one list rather than a hunt through the whole product.","words":830,"file":"patterns/notifications-inbox-and-activity.md","thumb":"jpg"},{"slug":"onboarding-flows","title":"Onboarding flows","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["first-run","activation","permissions","account-creation","time-to-value"],"patterns":[],"updated":"2026-08-02","links":{"mobbin":"https://mobbin.com/glossary/onboarding"},"one_liner":"convert an unmotivated arrival into an activated user before the first drop-off point. Every onboarding flow answers four questions in some order: what is this, what do I get, what do you need from me, who am I here — the ORDER of those four is the entire design decision.","words":1188,"file":"patterns/onboarding-flows.md","thumb":"svg"},{"slug":"order-tracking","title":"Order tracking & post-purchase","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["order-status","delivery","notifications","timeline","ecommerce","retention"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://www.shopify.com/shop","mobbin":"https://mobbin.com/apps/shop"},"one_liner":"the moment checkout ends, buyer anxiety shifts from \"will this work\" to \"where is my thing.\" This flow answers that continuously, without being asked, and closes the loop with proof of delivery. It applies wherever a purchase is followed by a wait — storefronts, marketplace/collectibles listings, drop-ship or chat-based commerce (a Telegram order bot needs the same state machine as a native app), even an in-app purchase or render job that has stages worth surfacing.","words":927,"file":"patterns/order-tracking.md","thumb":"jpg"},{"slug":"paywalls-and-pricing-sheets","title":"Paywalls & pricing sheets","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["monetization","subscription","trial","conversion","pricing","revenuecat"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://www.revenuecat.com/paywalls","mobbin":"https://mobbin.com/glossary/paywall"},"one_liner":"present the value exchange (price for access) at the moment intent is highest, remove every reason to bounce (unclear price, no restore, no exit), and satisfy App Store/Play Store auto-renewal disclosure rules at the same time. It is the screen that matters most in a subscription app's whole flow.","words":988,"file":"patterns/paywalls-and-pricing-sheets.md","thumb":"jpg"},{"slug":"permission-priming","title":"Permission priming","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["permission-priming","ios-att","push-notifications","soft-ask","contextual-timing","onboarding-trust"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/permission-priming"},"one_liner":"insert a custom, app-controlled explainer before the native OS permission dialog (notifications, ATT/tracking, location, camera/mic, contacts) so the user says yes to a system prompt they were pre-sold on, instead of yes/no to a cold, contextless OS sheet. This matters mechanically because on iOS a denied system prompt can't be re-triggered — the app can only deep-link to Settings — so the soft-ask is often the ONLY real shot at that permission.","words":1066,"file":"patterns/permission-priming.md","thumb":"svg"},{"slug":"photo-editors","title":"Photo editors","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["image-editing","sliders","non-destructive","presets","before-after","gestures"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://lightroom.adobe.com","mobbin":"https://mobbin.com/apps/lightroom"},"one_liner":"let a user push tonal, color, and geometric adjustments onto an existing photo and see the result in real time, without ever losing the ability to get back to zero. On izzy's surfaces this is the pattern behind: an admin tool for touching up product photos (peptide store COAs, collectibles slabs, storefront hero shots) before upload, a thumbnail/cover-frame editor inside a video editor's export step, and any operator console screen where a user crops/adjusts an uploaded image before it goes live.","words":1076,"file":"patterns/photo-editors.md","thumb":"jpg"},{"slug":"pickers-steppers-controls","title":"Pickers, steppers & controls","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["input-controls","segmented-control","stepper","slider","date-picker","chips","micro-interaction"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://developer.apple.com/design/human-interface-guidelines/pickers","mobbin":"https://mobbin.com/glossary/segmented-control"},"one_liner":"replace an open text field with a constrained input — a range (slider), a discrete count (stepper), a mutually-exclusive set (segmented control), a calendar date, or a multi-select set (chips) — so the input can never be invalid and the current state is always visible without a tap.","words":894,"file":"patterns/pickers-steppers-controls.md","thumb":"jpg"},{"slug":"premium-web-microinteractions","title":"Premium web microinteractions","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["motion-design","cursor","scroll","gsap","view-transitions","agency-sites"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://gsap.com","mobbin":"https://mobbin.com/glossary/microinteraction"},"one_liner":"the layer under the content — cursor behavior, hover response, scroll-triggered reveal, and page-transition continuity — that tells a visitor a site was built by a motion-literate team rather than assembled from a template, before they've read a single word.","words":911,"file":"patterns/premium-web-microinteractions.md","thumb":"jpg"},{"slug":"pricing-pages-web","title":"Pricing pages (web)","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["pricing","tiers","monetization","saas","conversion","enterprise-sales","annual-toggle"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/pricing-page"},"one_liner":"present a small number of plans, let the visitor map their own usage onto one of them fast, and remove the last objection before checkout. It has to do three things at once: anchor value (this is worth more than the price), reduce choice to ~3 options, and route power users to a human (sales) instead of a broken self-serve flow.","words":941,"file":"patterns/pricing-pages-web.md","thumb":"svg"},{"slug":"product-detail-pages","title":"Product detail pages","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["ecommerce","buy-box","variant-picker","gallery","social-proof","sticky-cta"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/apps/amazon"},"one_liner":"collapse everything a buyer needs (what it is, what it costs, does it fit/work, can I trust it, how do I get it) into one scroll that ends in a single unambiguous next action. Every element above the fold is either proof or a path to the buy button — nothing else earns the space.","words":1030,"file":"patterns/product-detail-pages.md","thumb":"svg"},{"slug":"profile-screens","title":"Profile & identity screens","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["identity","avatar","social-proof","edit-flow","privacy","reputation","share-sheet"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/profile"},"one_liner":"a single surface that proves identity (who), establishes standing (how much to trust/follow/buy from them), and routes to the two things every visitor wants: edit-self (owner) or act-on-them (visitor — follow, message, buy, view work). It's the highest-reused template in any app with more than one user-type, so its hierarchy decisions ripple into every list row, card, and mention chip elsewhere.","words":951,"file":"patterns/profile-screens.md","thumb":"svg"},{"slug":"progress-and-data-viz","title":"In-product data viz","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["rings","dials","sparklines","wrapped","charts","touch-gestures"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/data-visualization"},"one_liner":"compress a metric (health, money, usage, price, progress) into a shape the eye reads faster than the digits — a ring that's almost closed, a line that's clearly up, a slide that says \"your year in one stat.\" It has to work as ambient status (glance while walking) AND survive a deliberate tap-in for detail. On izzy's surfaces this is a collectibles-store price-history sparkline, an operator dashboard's KPI tile, a peptide-store admin's order-volume trend, or an emulation-platform's \"hours played this year\" recap.","words":1061,"file":"patterns/progress-and-data-viz.md","thumb":"svg"},{"slug":"push-notification-strategy","title":"Notification strategy & anatomy","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["push-notifications","re-engagement","quiet-hours","grouping","rich-media","deep-linking","retention"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/push-notification"},"one_liner":"deliver a time-relevant fact (status changed, someone acted, a window is closing) outside the app, at the moment it's worth the interruption cost — and never so often that the user revokes the permission entirely. A notification system's real output isn't the individual push, it's the long-run opt-in rate.","words":862,"file":"patterns/push-notification-strategy.md","thumb":"svg"},{"slug":"referral-and-invite","title":"Referral & invite","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["referral","invite","viral-loop","share-sheet","growth-loop","incentives","contact-import"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://growth.design","mobbin":"https://mobbin.com/glossary/referral"},"one_liner":"convert an existing user's social capital into new signups by giving them a shareable artifact (link, code, QR) and a reason to send it, then reward both sides when the loop closes. It's the only pattern where the \"content\" being distributed is a relationship, not a screen.","words":1015,"file":"patterns/referral-and-invite.md","thumb":"jpg"},{"slug":"reviews-and-social-proof","title":"Reviews & social proof","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["trust","ratings","ugc","marketplace","verification","conversion"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/reviews"},"one_liner":"convert a first-time visitor with no relationship to the seller/brand into a buyer, by showing evidence that other real people transacted and were satisfied. On a storefront it sits between the price and the CTA; on a marketplace it's attached to the seller, not just the item. For a new or grey-market brand with no review history, this pattern must be substituted with adjacent trust signals — the job (prove you won't disappear with the money) stays identical even when star counts don't exist yet.","words":1051,"file":"patterns/reviews-and-social-proof.md","thumb":"svg"},{"slug":"scrollytelling-product-reveals","title":"Scrollytelling & product reveals","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["scroll-hijacking","canvas-scrubbing","gsap-scrolltrigger","sticky-sections","webgl-camera","product-reveal","hero-sequence"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://www.apple.com/iphone/","mobbin":"https://mobbin.com/glossary/scrollytelling"},"one_liner":"deliberately hijack the vertical scroll axis so it drives a sequence — image frames, camera movement, or staged copy/visual pairs — instead of just moving the page. Used to teach a product's feature set, dramatize a material or mechanism, or build anticipation before a buy button. Replaces a static hero + feature grid with one continuous \"scene.\"","words":991,"file":"patterns/scrollytelling-product-reveals.md","thumb":"jpg"},{"slug":"search-ux","title":"Search","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["instant-search","faceted-filters","zero-results","ai-answers","autocomplete","command-palette","recent-searches"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/apps/amazon"},"one_liner":"take a fuzzy, misspelled, or half-typed query and return the smallest possible path to the right object — a product, a message, a command, a piece of media, a chat answer. On commerce surfaces (peptide store, collectibles store, hemp shop) it's the highest-intent screen in the app: a search user converts at multiples of a browse user. On operator dashboards it's the fastest path to a record. On a command-palette-style tool it replaces navigation entirely.","words":945,"file":"patterns/search-ux.md","thumb":"svg"},{"slug":"settings-screens","title":"Settings screens","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["information-architecture","account-management","search","danger-zone","microcopy"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/apps/ios-system"},"one_liner":"give a user a predictable, scannable path to any preference, account action, legal doc, or account-ending action — without that list becoming the app's junk drawer. It's low-frequency-visit but high-consequence: the one screen where \"danger\" (delete account, sign out, cancel subscription) legitimately lives next to trivia (dark mode).","words":1481,"file":"patterns/settings-screens.md","thumb":"svg"},{"slug":"sharing-and-export-flows","title":"Sharing & export flows","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["export","share-sheet","watermark","progress-theater","attribution","wrapped-cards"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/share-sheet"},"one_liner":"convert an in-app creation (a video, a trade, a workout, a purchase) into something that survives outside the app — a file, a card, a post — while the app decides how much of its own identity rides along (watermark, deep link, attribution). Every export screen is secretly a growth-lever design decision, not just a technical one.","words":996,"file":"patterns/sharing-and-export-flows.md","thumb":"svg"},{"slug":"short-form-video-hooks","title":"Short-form video hooks","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["hook","retention","caption-overlay","pattern-interrupt","cut-rhythm","loop","ugc"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://www.tiktok.com","mobbin":"https://mobbin.com/apps/tiktok"},"one_liner":"win the swipe-decision window before the viewer's thumb moves, then sustain attention through the first cut so the platform reads a completion/rewatch signal. This is content design, not UI design — but it governs the same surfaces UI patterns do: a hero clip on a landing page, a product demo on a storefront PDP, a UGC ad for a peptide/collectibles/hemp store, a template preset inside a Flutter video editor, a showcase trailer for an app, a clip dropped into a Telegram channel.","words":865,"file":"patterns/short-form-video-hooks.md","thumb":"jpg"},{"slug":"sound-on-web","title":"Sound on the web","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["audio","immersive","webgl","gesture-gated","foley","autoplay"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://developer.chrome.com/blog/autoplay/","mobbin":"https://mobbin.com/glossary/sound-on-web"},"one_liner":"gate an audio layer (ambient score, UI foley, audio-reactive visuals) behind explicit consent, survive the browser's autoplay block gracefully, and make sound feel like a premium unlock rather than an ad-interstitial jump-scare.","words":895,"file":"patterns/sound-on-web.md","thumb":"jpg"},{"slug":"stories-format","title":"Stories format","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["tap-through","progress-segments","ephemeral","reply-rail","creation-tools","full-screen"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://instagram.com","mobbin":"https://mobbin.com/apps/instagram"},"one_liner":"compress a person's or channel's recent activity into a single full-screen rail the viewer burns through fast — tap to advance, hold to pause, reply inline. It trades the feed's scroll-and-skip economy for a completion pull: once started, a story wants to be finished.","words":1070,"file":"patterns/stories-format.md","thumb":"jpg"},{"slug":"streaks-and-gamification","title":"Streaks & gamification","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["streaks","gamification","xp","leagues","habit-formation","badges","forgiveness"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://blog.duolingo.com","mobbin":"https://mobbin.com/apps/duolingo"},"one_liner":"convert one-off usage into a recurring loop by making \"did it again today\" visible, counted, and slightly costly to lose. The pattern spans a hard axis: guilt-driven consistency engines (Duolingo) at one pole, shame-free \"your body isn't a checklist\" designs (Gentler Streak, MacroFactor) at the other. Which pole is right depends entirely on whether the underlying behavior is discretionary fun (language app, game) or health/body data (fitness, food, sleep) — apply the wrong pole and you either bore users or actively harm them.","words":1171,"file":"patterns/streaks-and-gamification.md","thumb":"jpg"},{"slug":"subscription-management-and-cancel-flow","title":"Subscription management & cancel flow","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["web","ios","android"],"tags":["subscription","cancel-flow","dunning","pause","churn","billing"],"patterns":["anti-patterns-dark-patterns","paywalls-and-pricing-sheets"],"updated":"2026-07-26","links":{"site":"https://www.netflix.com","mobbin":"https://mobbin.com/glossary/cancel-subscription"},"one_liner":"let an existing subscriber change plan, pause, or leave with roughly the same number of taps it took to subscribe — the honest counterpart to [[anti-patterns-dark-patterns]]'s roach-motel taxonomy, built around real retention levers (pause, downgrade, dunning recovery) instead of retention theater.","words":935,"file":"patterns/subscription-management-and-cancel-flow.md","thumb":"jpg"},{"slug":"tables-and-dense-data","title":"Tables & dense data","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["data-density","inline-edit","bulk-actions","sticky-header","responsive-tables","admin-ui","spreadsheet-ux"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/table"},"one_liner":"show many rows of comparable records (transactions, SKUs, issues, ROMs, orders) so a person can scan, sort, select, and act on several at once. This is where power users live for hours — it must reward repetition, not just first-glance legibility. A storefront's product catalog, a console's log view, and a Telegram bot's inventory admin are all this pattern wearing different skins.","words":1108,"file":"patterns/tables-and-dense-data.md","thumb":"svg"},{"slug":"tooltips-and-feature-discovery","title":"Tooltips & feature discovery","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["onboarding","coach-marks","progressive-disclosure","anchor-positioning","retention"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/tooltip"},"one_liner":"surface a feature, shortcut, or new-release change the user hasn't discovered on their own, at the moment it's most relevant, without turning the app into a lecture. Every instance is a bet: is this worth an interruption, or should it wait for the user to get near it?","words":972,"file":"patterns/tooltips-and-feature-discovery.md","thumb":"svg"},{"slug":"trust-badges-and-verification","title":"Trust badges & verification","kind":"pattern","category":"ux-patterns","tier":"A","platforms":["web","ios","android"],"tags":["trust-badges","verification","kyc","authenticity","anti-spoofing"],"patterns":["reviews-and-social-proof","auth-and-signin"],"updated":"2026-07-26","links":{"site":"https://www.coinbase.com","mobbin":"https://mobbin.com/glossary/verified-badge"},"one_liner":"signal, at a glance, that an identity, listing, or transaction has been checked against some real process — KYC, physical authentication, platform review — distinct from [[reviews-and-social-proof]], which is peer opinion. This is an institutional claim, so it carries the extra burden of surviving spoofing and staying legible about exactly what it verifies.","words":1064,"file":"patterns/trust-badges-and-verification.md","thumb":"jpg"},{"slug":"undo-confirmation-destructive","title":"Undo, confirmation & destructive UX","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["undo","confirmation","destructive-action","trash","type-to-confirm","soft-delete","regret-minimization"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/glossary/confirmation"},"one_liner":"stop or soften an action the user can't easily reverse — delete, send, cancel, remove, pay, withdraw. It has to scale friction to actual stakes: too little and users lose data; too much and they habituate to clicking through warnings, which defeats the warning entirely.","words":1105,"file":"patterns/undo-confirmation-destructive.md","thumb":"svg"},{"slug":"video-editors-and-timelines","title":"Video editors & timelines","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["timeline","trim-handles","mobile-editing","export-flow","multi-track","gestures"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/apps/capcut"},"one_liner":"let a finger do what a mouse-and-keyboard NLE does with pixel precision — trim, reorder, layer, and preview a multi-clip sequence on a screen too small for any of that to be easy by default. The whole pattern is a set of compromises that make frame-accurate work possible on a 6-inch touch target.","words":1175,"file":"patterns/video-editors-and-timelines.md","thumb":"svg"},{"slug":"voice-ui","title":"Voice UI","kind":"pattern","category":"ux-patterns","tier":"S","platforms":["ios","android","web"],"tags":["voice-mode","orb","waveform","barge-in","hands-free","transcript"],"patterns":[],"updated":"2026-07-22","links":{"mobbin":"https://mobbin.com/apps/chatgpt"},"one_liner":"give a spoken conversation a visual home when there's a screen available, and a minimal audio/haptic substitute when there isn't. It must communicate four states unambiguously — idle, listening, processing, speaking — and let the user interrupt at any point without hunting for a button. Since the 2024-2025 rollout of always-on conversational voice modes (ChatGPT Advanced Voice, Gemini Live), this stopped being a novelty screen and became a primary interaction mode some users default to.","words":1143,"file":"patterns/voice-ui.md","thumb":"svg"},{"slug":"wizards-and-multi-step-flows","title":"Wizards & multi-step flows","kind":"pattern","category":"ux-patterns","tier":"A","platforms":["web","ios","android"],"tags":["multi-step-forms","save-and-resume","progress-indicators","kyc","long-forms","back-safety"],"patterns":["forms-and-input"],"updated":"2026-07-26","links":{"site":"https://mercury.com","mobbin":"https://mobbin.com/glossary/multi-step-form"},"one_liner":"carry a user through a flow too long for one screen — tax filing, a business-account opening, a loan or insurance application, a regulated KYC onboarding — across multiple sessions, browser closes, and device switches, without losing their place, their data, or their trust in the process.","words":896,"file":"patterns/wizards-and-multi-step-flows.md","thumb":"jpg"},{"slug":"android-16-baseline","title":"Android 16/17 · M3 Expressive baseline","kind":"platform","category":"platforms","tier":"S","platforms":["all"],"tags":["material-3-expressive","dynamic-color","predictive-back","edge-to-edge","android-native","motion-system"],"patterns":[],"updated":"2026-07-22","links":{"site":"https://m3.material.io","mobbin":"https://mobbin.com/apps/android"},"one_liner":"Material 3 Expressive (M3E) is the live baseline — introduced Pixel-first on Android 16 QPR1 (Sept 2025), rolled out across Google's own apps through Dec 2025. Verified 2026-07: Android 17 (previewed Android Show 2026-05-12, I/O 2026-05-19/20, stable target Q2 2026) makes M3E the default on every Android 17 device, not Pixel-exclusive, and adds a spring-based motion system plus redesigned system menus/blur/translucency. No Material 4 was announced at I/O 2026 — the stated direction is \"Make Material your own\": brands build custom design languages on top of the M3 token foundation rather than…","words":900,"file":"platforms/android-16-baseline.md","thumb":"jpg"},{"slug":"cross-platform-feel","title":"Cross-platform (Flutter/RN) native-feel","kind":"platform","category":"platforms","tier":"S","platforms":["all"],"tags":["flutter","react-native","impeller","hermes","gesture-physics","haptics","predictive-back"],"patterns":[],"updated":"2026-09-14","links":{"site":"https://flutter.dev"},"one_liner":"the historical \"this is obviously a cross-platform app\" tell — janky scroll, laggy gesture response, wrong-feeling back navigation — is closing fast at the engine level (Impeller, Hermes+Fabric), but the design-layer gap (platform-correct pickers, haptics, back gesture, materials) is still almost entirely the builder's responsibility. Engines fixed the frame-rate problem; they did not fix the \"used the same widget tree on both platforms\" problem.","words":1025,"file":"platforms/cross-platform-feel.md","thumb":"jpg"},{"slug":"desktop-app-conventions","title":"Desktop app conventions","kind":"platform","category":"platforms","tier":"S","platforms":["all"],"tags":["macos","windows","electron","window-chrome","menu-bar","keyboard-shortcuts","native-materials"],"patterns":[],"updated":"2026-09-14","links":{"site":"https://developer.apple.com/design/human-interface-guidelines/macos-windows","mobbin":"https://mobbin.com/apps"},"one_liner":"macOS and Windows read as \"current\" through different mechanisms — Mac via a specific material (Apple's 2025 Liquid Glass refraction layer replacing 2020-era frosted vibrancy) and OS-level chrome (global top-of-screen menu bar, traffic lights), Windows via Fluent/WinUI3's Mica surface tied to desktop wallpaper plus rounded 8px corners on Win11. Electron/web-wrapper desktop apps are detectable almost instantly by builders who know the tells below — the #1 giveaway is chrome that's neither fully native nor deliberately custom, just close-but-off.","words":1010,"file":"platforms/desktop-app-conventions.md","thumb":"jpg"},{"slug":"email-html-baseline","title":"HTML email baseline","kind":"platform","category":"platforms","tier":"S","platforms":["email"],"tags":["html-email","outlook","dark-mode","tables","preheader","plaintext","mso","deliverability"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://www.caniemail.com","reference":"https://reallygoodemails.com"},"one_liner":"HTML email is the most hostile \"browser\" environment still in wide production use — it renders across a fragmented set of engines (Outlook desktop's Word-based renderer, Apple Mail's WebKit, Gmail's stripped-CSS webmail sanitizer, and dozens of mobile mail apps) that don't share a rendering baseline the way modern browsers now do. Modern CSS (flexbox, grid, custom properties) is unreliable enough across this matrix that table-based layout with inline styles is still the load-bearing default, not a legacy workaround — the platform's constraints haven't converged the way web/iOS/Android have,…","words":973,"file":"platforms/email-html-baseline.md","thumb":"jpg"},{"slug":"embedded-widget-baseline","title":"Embedded widget / third-party SDK baseline","kind":"platform","category":"platforms","tier":"S","platforms":["web","embedded"],"tags":["iframe","shadow-dom","css-isolation","csp","postmessage","theming","size-negotiation"],"patterns":[],"updated":"2026-09-14","links":{"site":"https://developer.mozilla.org/en-US/docs/Web/API/Web_components","docs":"https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage"},"one_liner":"an embedded widget (a chat bubble, checkout drawer, review carousel, booking form, or any third-party script that renders UI inside someone else's page) is designed for an environment it does not control and cannot trust — the host page's CSS can leak in or the widget's CSS can leak out, the host's Content Security Policy may block the widget's own requests, and the widget has no reliable idea how much space it's been given until it asks. The durable convention across mature embed SDKs (chat widgets, payment iframes, embeddable video/analytics dashboards) is defense-in-depth isolation plus…","words":1166,"file":"platforms/embedded-widget-baseline.md","thumb":"jpg"},{"slug":"ios-26-baseline","title":"iOS 26 → 27 baseline","kind":"platform","category":"platforms","tier":"S","platforms":["ios"],"tags":["liquid-glass","hig","sf-pro","sheets","tab-bar","live-activities","icon-composer"],"patterns":[],"updated":"2026-09-14","links":{"site":"https://developer.apple.com/design/human-interface-guidelines","mobbin":"https://mobbin.com/apps/ios"},"one_liner":"iOS 26 (fall 2025, versioning jumped from 18 to the year-based \"26\" across the whole OS family) replaced the frosted-blur material used since iOS 7 with Liquid Glass — a translucent, refractive material that bends and reflects the content behind it — applied to tab bars, nav bars, sheets, controls, and widgets. iOS 27 (announced at WWDC26, keynote Monday June 8 2026 — the conference ran June 8–12; shipped 2026-09-14, verified 2026-09) refines Liquid Glass rather than replacing it: it's a legibility/contrast pass, not a new material language.","words":850,"file":"platforms/ios-26-baseline.md","thumb":"jpg"},{"slug":"ipados-tablet-baseline","title":"iPadOS tablet baseline","kind":"platform","category":"platforms","tier":"S","platforms":["ipados"],"tags":["ipados","pointer","split-view","stage-manager","apple-pencil","external-display","menu-bar"],"patterns":[],"updated":"2026-09-14","links":{"site":"https://developer.apple.com/design/human-interface-guidelines","mobbin":"https://mobbin.com/apps/ios"},"one_liner":"iPadOS shares iOS's chrome (Liquid Glass surfaces, SF Pro/SF Symbols, sheet-based modals) but is a distinct interaction platform, not a stretched phone screen. The two biggest tells that a build was designed phone-first and merely scaled up: no pointer/hover states, and no plan for the app running in anything other than full-screen single-window. iPadOS 26 added a Mac-style menu bar at the top of the screen — revealed by swipe-down or by moving the pointer to the top edge, with each app supplying its own, not a system-level persistent bar — and replaced Split View / Slide Over with freeform…","words":1052,"file":"platforms/ipados-tablet-baseline.md","thumb":"jpg"},{"slug":"pwa-and-offline-baseline","title":"PWA / installable-offline web baseline","kind":"platform","category":"platforms","tier":"S","platforms":["web","pwa"],"tags":["service-worker","offline","manifest","install-prompt","web-push","storage-quota","workbox"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps","docs":"https://developer.chrome.com/docs/workbox"},"one_liner":"a Progressive Web App is judged on what happens the instant the network isn't perfect, not on how it looks with a fast connection — a service worker intercepting requests, a real offline state, and a manifest that makes the app installable are the baseline, and \"PWA\" that's really just a normal site with a manifest.json and no functional offline behavior is the most common failure mode. Install-prompt and push-notification behavior also diverge meaningfully by platform (Chromium's beforeinstallprompt event vs. iOS Safari's manual Share-menu \"Add to Home Screen\" with no programmatic prompt),…","words":1119,"file":"platforms/pwa-and-offline-baseline.md","thumb":"jpg"},{"slug":"terminal-cli-baseline","title":"Terminal / CLI baseline","kind":"platform","category":"platforms","tier":"S","platforms":["cli"],"tags":["cli","tui","exit-codes","no-color","piping","help-output","ansi","flags"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://clig.dev","docs":"https://man7.org/linux/man-pages/"},"one_liner":"the CLI has no visual layout system to lean on — there's no color, spacing, or type scale unless the tool explicitly emits it via ANSI escape codes, and the tool has to behave correctly whether a human is watching an interactive terminal or a script is piping its output into another program with no human present at all. The durable convention across mature CLIs (git, docker, cargo, kubectl, gh) is that --help output IS the UI — a new user's entire first impression is the help text and the error messages, not a GUI onboarding flow — and that the tool must degrade its \"pretty\" output correctly…","words":1052,"file":"platforms/terminal-cli-baseline.md","thumb":"jpg"},{"slug":"tvos-livingroom-baseline","title":"tvOS living-room baseline","kind":"platform","category":"platforms","tier":"S","platforms":["tvos"],"tags":["tvos","focus-engine","ten-foot-ui","remote","poster-art","top-shelf","d-pad"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://developer.apple.com/design/human-interface-guidelines","mobbin":"https://mobbin.com/apps"},"one_liner":"tvOS is a \"10-foot\" platform — the viewing distance (a couch, not a hand) drives every design decision differently from phone/tablet/desktop. There is no cursor and no touch on the screen itself: navigation happens entirely through the focus engine, a system-managed highlight that moves between focusable elements based on D-pad/swipe input from the remote, with the currently-focused element scaling up and parallax-tilting toward the viewer. An app built by resizing a phone or web layout for a bigger screen — small type, dense grids, no focus feedback — is unusable from a couch and reads as…","words":932,"file":"platforms/tvos-livingroom-baseline.md","thumb":"jpg"},{"slug":"watchos-wearable-baseline","title":"watchOS wearable baseline","kind":"platform","category":"platforms","tier":"S","platforms":["watchos"],"tags":["watchos","complications","smart-stack","digital-crown","glanceability","haptics","notifications"],"patterns":[],"updated":"2026-07-26","links":{"site":"https://developer.apple.com/design/human-interface-guidelines","mobbin":"https://mobbin.com/apps"},"one_liner":"watchOS interaction has consolidated around three surfaces a well-behaved app must design for, not just one: the watch face complication, the Smart Stack (a swipeable, ML-ranked stack of glanceable widgets surfaced by raising the wrist or turning the Digital Crown from the face), and the full app itself, which most users open rarely compared to how often they see the complication or stack card. An app whose entire design effort goes into the full-screen app view and treats the complication as an afterthought icon has misjudged where the actual usage happens — for most watch apps, the…","words":947,"file":"platforms/watchos-wearable-baseline.md","thumb":"jpg"},{"slug":"web-2026-baseline","title":"Web 2026 baseline","kind":"platform","category":"platforms","tier":"S","platforms":["web"],"tags":["css","view-transitions","container-queries","webgpu","anchor-positioning","motion","baseline","interop"],"patterns":[],"updated":"2026-09-14","links":{"site":"https://web.dev/baseline","mobbin":"https://mobbin.com/apps/web"},"one_liner":"The platform closed most of the gap that used to require JS libraries — layout (container queries), conditional styling (:has()), and positioned UI (popover + anchor positioning) are native and near-Baseline, and WebGPU reached roughly 86% global coverage (83.99% full support plus ~1.6–2.95% partial) once Safari 26 shipped it — still short of Baseline (verified 2026-09). A build that still leans on Floating UI for every tooltip or ships only viewport-breakpoint layout now reads as dated, not merely unpolished — the native primitives are the default, and JS libraries are for the residual…","words":1042,"file":"platforms/web-2026-baseline.md","thumb":"jpg"},{"slug":"recipe-waitlist-launch","title":"Waitlist launch system","kind":"recipe","category":"acquisition","tier":"A","platforms":["web"],"tags":["recipe","waitlist","referral","launch","landing"],"patterns":["landing-page-anatomy","onboarding-flows"],"updated":"2026-07-25","links":{},"one_liner":"Gate honestly, reward referrals clearly, warm the list, then admit in batches matched to onboarding capacity — so waitlist size becomes activation, not vanity.","words":421,"file":"recipes/recipe-waitlist-launch.md","thumb":"svg"},{"slug":"recipe-waitlist-to-paid","title":"Waitlist to paid","kind":"recipe","category":"acquisition","tier":"A","platforms":["web"],"tags":["recipe","waitlist","conversion","activation","honest-scarcity"],"patterns":["onboarding-flows","landing-page-anatomy","monetization-upsell-moments"],"updated":"2026-07-26","links":{},"one_liner":"Treat admission off the waitlist as the start of a real activation funnel — batch-sized to onboarding capacity, priced honestly on day one, with no theater at the exact moment the audience is watching closest — instead of stopping the job at \"waitlist grew.\"","words":907,"file":"recipes/recipe-waitlist-to-paid.md","thumb":"svg"},{"slug":"recipe-creator-storefront","title":"Creator storefront","kind":"recipe","category":"commerce","tier":"A","platforms":["web"],"tags":["recipe","creator-economy","merch","drops","membership","indie-commerce"],"patterns":["product-detail-pages","landing-page-anatomy","dm-commerce-and-community-selling"],"updated":"2026-07-26","links":{},"one_liner":"Build a personal-brand storefront around one recurring drop cadence and one owned relationship channel (email, SMS, or DM) so the creator's own name does the selling, instead of shipping a Linktree with a Shopify badge bolted underneath.","words":923,"file":"recipes/recipe-creator-storefront.md","thumb":"svg"},{"slug":"recipe-irreverent-dtc","title":"Irreverent DTC drop","kind":"recipe","category":"commerce","tier":"S","platforms":["web"],"tags":["recipe","dtc","drops","voice","merch","checkout"],"patterns":["checkout-and-cart","drops-and-restocks","landing-page-anatomy"],"updated":"2026-07-25","links":{},"one_liner":"Combine Liquid Death voice discipline with drop mechanics and quiet Stripe-grade checkout so the bit sells the product without taxing the card moment.","words":462,"file":"recipes/recipe-irreverent-dtc.md","thumb":"svg"},{"slug":"recipe-marketplace-wedge","title":"Marketplace wedge","kind":"recipe","category":"commerce","tier":"A","platforms":["web","mobile"],"tags":["recipe","marketplace","two-sided","liquidity","trust"],"patterns":["dm-commerce-and-community-selling","live-commerce-and-auctions","reviews-and-social-proof"],"updated":"2026-07-26","links":{},"one_liner":"Launch a two-sided marketplace by deliberately over-serving one named side first — a specific supply niche or a specific demand niche — and borrow that side's trust mechanism wholesale, instead of building a generic buyer/seller shell and hoping liquidity shows up on both sides at once.","words":942,"file":"recipes/recipe-marketplace-wedge.md","thumb":"svg"},{"slug":"recipe-membership-ritual","title":"Membership ritual","kind":"recipe","category":"commerce","tier":"A","platforms":["web","mobile"],"tags":["recipe","membership","club","ritual","retention","subscription"],"patterns":["subscription-management-and-cancel-flow","onboarding-flows"],"updated":"2026-07-26","links":{},"one_liner":"Design a membership product around one or two genuine, repeating ritual moments — a physical card presented at a door, a numbered object that arrives on a schedule, a text-to-join relationship — so members feel the club, not just the billing cycle, and give cancellation the same honest, low-friction respect as signup.","words":897,"file":"recipes/recipe-membership-ritual.md","thumb":"svg"},{"slug":"recipe-quiet-commerce","title":"Quiet commerce","kind":"recipe","category":"commerce","tier":"A","platforms":["web"],"tags":["recipe","quiet-luxury","restraint","dtc","checkout","logo-test"],"patterns":["product-detail-pages","checkout-and-cart","landing-page-anatomy"],"updated":"2026-07-26","links":{},"one_liner":"Let photography and material/provenance data carry the entire sell at price-level visual weight, keep checkout completely silent, then run the homogenized-premium logo test before shipping — because \"quiet\" without a mechanism is just an empty storefront with good lighting.","words":952,"file":"recipes/recipe-quiet-commerce.md","thumb":"svg"},{"slug":"recipe-astra-launch","title":"The Astra launch","kind":"recipe","category":"marketing","tier":"S","platforms":["web"],"tags":["recipe","the-bar","launch-page","evidence-blocks","fluid-type","signature-canvas"],"patterns":["landing-page-anatomy","scrollytelling-product-reveals","progress-and-data-viz"],"updated":"2026-09-16","links":{"reference":"https://openai.com/index/gpt-6-astra/"},"one_liner":"Build a launch page or a front door the way [[openai-gpt-6-astra]] is built — one canvas that carries the product's own object and name, one fluid type system in one reading column, and evidence blocks with a comparator and a cost in place of adjective sections — then run the logo test against the reference itself.","words":982,"file":"recipes/recipe-astra-launch.md"},{"slug":"recipe-unmistakable-site","title":"The unmistakable site","kind":"recipe","category":"marketing","tier":"S","platforms":["web"],"tags":["recipe","brand-system","signature-mechanism","logo-test","anti-sameness"],"patterns":["landing-page-anatomy","premium-web-microinteractions","scrollytelling-product-reveals"],"updated":"2026-07-26","links":{},"one_liner":"Force a named, stealable mechanism before any layout gets drawn, then run the logo-removal test as a hard release gate — a site that could be mistaken for someone else's has already failed, no matter how expensive it looks.","words":1019,"file":"recipes/recipe-unmistakable-site.md","body":"# The unmistakable site — one invented mechanism, everything else gets out of the way\n\n**One-liner:** Force a named, stealable mechanism before any layout gets drawn, then run the logo-removal test as a hard release gate — a site that could be mistaken for someone else's has already failed, no matter how expensive it looks.\n\n## The brief\nBuild a marketing or brand site — product launch, portfolio, DTC storefront, agency site — whose entire job is to be recognized with the wordmark covered. This is not a polish problem. Stripe-clean, Linear-quiet, or cream-and-serif \"premium\" execution is achievable by any competent shop in a week and proves nothing on its own. The actual brief: invent ONE mechanism — an interaction, an object, a naming system, an IA joke — that a stranger could point at and describe in one sentence, then let that mechanism carry recognition while everything else on the site stays disciplined and gets out of its way.\n\nThis recipe assumes the brand has at least one true, specific fact to hang the mechanism on — a real object, a real process, a real constraint, a real point of view. If the actual brief is \"make us look premium\" with nothing underneath, fix the positioning before touching layout: [[brand-liquid-death]] and [[brand-quiet-luxury]] both show what a signal stack needs to survive on, and both fail instantly without it.\n\n## Card stack\n- [[ai-slop]] — pre-ship checklist, run first: fails the build if gradient, bento-grid, sparkle-icon, or default-Inter tells are present.\n- [[homogenized-premium]] — pre-ship checklist, run second: fails the build if cream, \"tasteful\" serif, or oversized-whitespace \"premium\" tells are present with no mechanism underneath.\n- [[bruno-simon-portfolio]] — steal the *category* of move (physics or interaction standing in for navigation), never the literal RC car.\n- [[mschf]] — steal sequential numbering plus manifesto-style copy as a scarcity-and-publishing mechanism.\n- [[graza]] — steal \"the object's own industrial design does the branding\" — a shape, a color, or a naming split that replaces a logo system outright.\n- [[criterion]] — steal a permanent collector-numbering or hand-curated framing for any catalog that is genuinely finite and completable.\n- Contrast only, do not default here: [[brand-quiet-luxury]] and [[brand-liquid-death]] — both are fully realized systems, not styles to skim. Cloning either without the underlying craft or claim produces homogenized-premium cosplay or costume irreverence, not an unmistakable site.\n\nRead the two pre-ship checklists before touching a single mechanism card — knowing exactly what to fail against sharpens what gets built toward.\n\n## Named direction\n**Formula:** one invented mechanism (specific, nameable, unique to this brand) × one movement (chosen on purpose, never the scaffold default) × one money-surface rule (exactly how the mechanism behaves, or disappears, at the point of payment). Write this as a single sentence before any layout exists. If a section can't survive the sentence, cut it.\n\n**Worked example:** \"Spine-numbered build log (own mechanism, structurally borrowed from [[criterion]]'s permanent catalog number) × [[xerox-zine-collage]] movement for the marketing shell × checkout goes silent — no numbers, no jokes, Stripe-calm chrome only.\" Swap in the project's real mechanism and real movement pick; never ship this exact sentence — it's a template for the exercise, not a brand.\n\n## Build checklist\n- **Logo-removal test (hard gate — cannot ship without passing):** cover the wordmark on every key screen. If a stranger could mistake the page for a competitor, a template, or \"nice site #400,\" it fails. Go back to the mechanism, not to a palette swap.\n- Name the mechanism in one sentence before wireframes exist. If nobody on the team can say what it is without reaching for \"clean\" or \"premium,\" it doesn't exist yet.\n- Run [[ai-slop]] and [[homogenized-premium]] as literal checklists against the *built* site, not just the mockup — both genres are structural, not decorative, and often survive a static comps review only to surface once real content and real breakpoints land.\n- Pressure-test for at least 3 concrete DNA points a teammate or agent could apply without cloning the whole reference site — the same steal-ability bar this library holds every card to.\n- Decide the money-surface rule explicitly: does the mechanism switch off at checkout, contact, or pricing (Liquid Death, mschf), or stay present but calmer (Criterion's essay-first PDP)? Never leave this undecided — it defaults to \"loud everywhere\" or \"quiet everywhere,\" and both are wrong.\n- Budget craft, not just concept: the mechanism needs real photography, real motion tuning, or real copywriting behind it. An unmistakable idea executed at template quality still reads cheap.\n- Show the mechanism to someone outside the project cold. If they describe the site using a competitor's name or \"looks like [template],\" the mechanism didn't land — iterate before shipping, not after launch feedback arrives.\n- Pick the movement deliberately and write the one-line reason down. \"Whatever the starter kit shipped with\" is not a movement choice, it's [[ai-slop]] or [[homogenized-premium]] by default.\n\n## Failure modes\n- **Quiet-luxury cosplay:** withholding chrome, adding a hairline border and a serif headline, calling it done — restraint with no mechanism and no material or claim underneath is [[homogenized-premium]], not craft. [[brand-quiet-luxury]] says it plainly: this system \"is earned, not a starting position.\"\n- **WebGL gimmick without craft:** bolting on a Three.js scene or a scroll-hijack because [[bruno-simon-portfolio]] is in this stack, then shipping it with default easing, no sound design, and no physics tuning — a mechanism without craft behind it reads as a template plugin, not an invention.\n- **Cloning one reference wholesale:** reskinning mschf's black-on-white numbered-drop grammar or Criterion's exact spine-number treatment onto an unrelated category with no original mechanism underneath — it still fails the logo test, it just fails against a different, more specific competitor.\n- **\"Unique\" as random chaos with no system:** scattering odd fonts, colors, and interactions with no repeating logic. A mechanism has to recur and compound — Criterion's number on every release, mschf's number on every drop — or it reads as noise, not as a signature. Chaos without a system belongs to [[chaos-brand-unhinged]], a different card entirely, and even that one needs its own internal discipline to work.","thumb":"svg"},{"slug":"recipe-agent-console","title":"Agent / trading console","kind":"recipe","category":"tools","tier":"S","platforms":["web","desktop"],"tags":["recipe","dense","dashboard","agents","trading","keyboard"],"patterns":["command-palettes-and-keyboard-ux","data-dense-dashboards"],"updated":"2026-07-25","links":{},"one_liner":"Ship an operator surface that feels like a cockpit: keyboard-first, dense data, clear hierarchy — never a marketing landing pretending to be a tool.","words":444,"file":"recipes/recipe-agent-console.md","thumb":"svg"},{"slug":"recipe-docs-as-product","title":"Docs as product","kind":"recipe","category":"tools","tier":"A","platforms":["web"],"tags":["recipe","documentation","changelog","developer-trust","api"],"patterns":["docs-and-changelogs","changelog-and-release-notes-inapp","tables-and-dense-data"],"updated":"2026-07-26","links":{},"one_liner":"Build documentation and release notes as a first-class, dated, honestly-written product surface — the thing a skeptical developer checks before believing anything else on the marketing page — instead of a buried README that quietly drifts out of sync with what actually shipped.","words":863,"file":"recipes/recipe-docs-as-product.md","thumb":"svg"},{"slug":"priced-in-decoration-2026","title":"Priced-in decoration (2026) — the anti-stack","kind":"stack","category":"anti","tier":"S","platforms":["web"],"tags":["anti-reference","priced-in","ai-slop","decoration","motion-for-its-own-sake","component-kit"],"patterns":[],"updated":"2026-09-10","links":{"primary":"https://www.creativeboom.com/insight/10-trends-creatives-are-so-over-in-2026/","award":"https://www.awwwards.com/sites/lando-norris"},"one_liner":"Sixteen 2026 \"I installed a library\" tells — cheap, free to generate, instantly read as decoration standing in for a decision.","words":999,"file":"stack/priced-in-decoration-2026.md","body":"# Priced-in decoration (2026) — the anti-stack\n\n**One-liner:** Sixteen 2026 \"I installed a library\" tells — cheap, free to generate, instantly read as decoration standing in for a decision.\n\n## Tells\n- Parallax for depth alone: a checkbox since 2015, now baseline not differentiation per agency copy (low-confidence); detect scrollY-multiplier translation with no content change, or Rellax/data-parallax; soft.\n- Flat glassmorphism cards: Creative Boom (2026-04-21) lists it as over, though agency sources still push it — contested; detect backdrop-filter: blur, low-alpha background, sub-0.25-alpha border, no state change; soft.\n- Liquid-glass copycats: Apple's 2025 launch \"turbocharged the aesthetic exactly as backlash was building\" (Creative Boom); detect liquid-glass/glass-panel classes with backdrop-filter and saturate(); soft.\n- Lottie as a loader or hero illustration: passive playback is convenience, not craft — interactive Rive or state-bound dotLottie is the 2026 pick; detect lottie-player/window.lottie with no bound inputs; soft.\n- Gradient blobs behind the hero: free to generate, signaling default over decision (Phogat, 2026-08; Creative Boom); detect blurred 40px+ round elements 150px+, or three-plus stacked radials; soft, hard at three-plus.\n- Purposeless particle canvas: ambient dots, no interaction, \"motion for its own sake\" (Creative Boom #10); detect tsParticles/particlesJS or a particle canvas 60%+ viewport width with no pointer handlers; hard.\n- Uniform fade-up on every section: proof a library got installed, not a choice made; detect five-plus [data-aos] or six-plus fade-up classes; hard.\n- Bento grid of identical tiles: \"ubiquitous… simultaneously overused yet still functional\" (Creative Boom #9); detect one radius/shadow across a uniform-card grid (review's uniform_bento tell); hard.\n- Sparkle icon as the AI badge: the industry's universal AI glyph; detect a Lucide/Heroicons sparkles icon (review's sparkle_badge tell); hard.\n- Typewriter hero and marquee tickers: generic patterns needing no bespoke decision (weaker sourcing); detect window.Typed/typewriter or marquee classes; soft.\n- Unmodified component-kit primitives: Aceternity/Magic UI shimmer, beams, meteors, spotlight cards are marketed as the launch-page look, recognizable verbatim; detect classes shimmer, animated-beam, meteor, spotlight-card, border-beam, magic-card, sparkles-core, bg-grid-white, dot-pattern; hard.\n- Grain overlay on a gradient: the fallback when a gradient looks \"too digital\" — itself a checkbox (studio2am); detect grain/noise classes with an feTurbulence filter; soft.\n- Gradient-clipped text: the same blue-to-purple move as purple_gradient_default; detect background-clip: text on a gradient; soft.\n- Three feature cards in a row: \"icons, headings, two lines of text\" is a named AI-UI pattern (Phogat, 2026-08); detect a row of exactly three icon+heading+paragraph children; soft.\n- Framer/Webflow template defaults left as shipped: the platform isn't the tell — 2025's Site of the Year runs on Webflow — unmodified spacing tokens and Inter-only type are; detect w-*/framer-* classes with no overrides, or Inter-only stacks; soft.\n- AI-generated hero imagery: technically proficient, no originality (Creative Boom #1) — house policy bans emoji art and AI renders without the adoption gate; no DOM signal, review by eye; soft.\n\n## The award bar\nShader/WebGL sits on the bench, but \"signature of every Site of the Year\" doesn't hold up: Awwwards' 2025 pick, Lando Norris by OFF+BRAND, is WebGL plus GSAP on Webflow, a two-color #D2FF00/#111112 system, no named shader-transition technique. Codrops' 2025 review confirms shader transitions and WebGPU scroll pipelines as the theme (Shader.se, 2026-05-19). Craft is one technique serving one idea, not a checklist. None of the sites below carry a tell above.\n\n- Lando Norris (landonorris.com) — Site of the Year 2025 + Users' Choice — WebGL, GSAP, Webflow. https://www.awwwards.com/sites/lando-norris\n- Messenger — Site of the Day + Developer Award, 2025-11-10 (not Site of the Year — corrects a wrong snippet) — Three.js, WebSockets. https://www.awwwards.com/sites/messenger\n- By-Kin — SOTD + Developer Award, FWA, CSSDA — Next.js, GSAP. https://www.hontran.dev/blog/best-award-winning-websites-2026\n- Iventions — CSSDA Site of Month Oct 2025, SOTD + Developer Award — Three.js, GSAP, spotlight 3D. https://www.hontran.dev/blog/best-award-winning-websites-2026\n- Shader.se — Codrops case study, a technical exemplar not an award — WebGPU pipeline, React Three Fiber. https://tympanus.net/codrops/2026/05/19/80s-business-tech-seamless-scene-transitions-inside-shader-ses-scroll-driven-webgpu-pipeline/\n\n## Support\nn/a — a checklist. Verified 2026-09-10.\n\n## Use when\nRun against a built page before calling it done, never as a build target: count fade-up elements (five/six-plus fails); grep class names for the component-kit list above (any hit fails); check for a large particle canvas with no pointer handlers; count blurred blobs or stacked gradients (three-plus fails); scan for the bento grid and sparkle badge; read hero and feature rows against the soft tells for a missing reason.\n\n## Build recipe\nThe fix is deletion, then either nothing or a technique from the award bar — never a different decoration. Strip the particle canvas rather than retuning it. Replace a gradient blob with nothing unless the brand's own palette calls for one. Replace an unmodified shimmer button with a custom interaction from the product's motion vocabulary, or a plain button if it has none. Every decision left standing traces to a fact about this product — its palette, hierarchy, voice. A component identical on another product after a find-and-replace is priced-in.\n\n## Failure modes\n- Swapping one convergence for another — blobs for neubrutalism, glass for grain — a different silhouette, not an escape.\n- Treating a hard tell as branding — keeping the sparkle badge or bento grid because \"it's our look.\"\n- Passing because it renders fine in Chrome — backdrop-filter and WebGPU degrade elsewhere; Chrome-only isn't a pass.\n- Running the checklist once at the end, so a tell ships as \"just this card.\"\n- Keeping AI-generated hero imagery because no automated tell caught it — eyes-only.\n\n## Evidence probe\nn/a — collect-evidence v2 reports stack.priced_in entries keyed to the collector tell ids: aos_fadeup, uniform_fadeup_classes, particles_bg, component_kit_tell (hard); gradient_blob, glass_card_flat (soft, hard at three-plus); lottie_present, typewriter_hero, marquee_ticker, parallax_lib, mesh_gradient, grain_overlay, gradient_text, three_card_feature_row (soft). Hard means a slop tell surfaces in review; soft is a signal, not a fail alone.\n\n## Replaces\nn/a\n\n## Sources\n- Creative Boom, \"10 trends creatives are so over in 2026\", 2026-04-21 — primary.\n- Mohit Phogat, \"AI design slop\", Medium, 2026-08 — secondary.\n- pkgpulse.com, \"Aceternity UI vs Magic UI vs shadcn animated React\" — secondary.\n- Awwwards, landonorris.com, read 2026-09 — primary.","surfaces":["site","storefront","app","docs","3d","backend"],"default_for":[],"slot":"anti","role":"anti","probe":"n/a","support":"n/a — a checklist, not a feature","verified":"2026-09-10","fallback":"n/a","cost":"$0 to delete","replaces":"n/a","thumb":"svg"},{"slug":"better-auth-passkeys","title":"Passkeys as primary sign-in with Better Auth","kind":"stack","category":"backend","tier":"S","platforms":["web","server"],"tags":["passkeys","webauthn","better-auth","passwordless","phishing-resistant","checkout"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://www.better-auth.com/docs/plugins/passkey","source":"https://caniuse.com/webauthn"},"one_liner":"Better Auth's passkey plugin runs WebAuthn registration and sign-in through SimpleWebAuthn, so an account is a public key on the user's device instead of a password row you have to protect.","words":681,"file":"stack/better-auth-passkeys.md","surfaces":["backend","app","storefront"],"default_for":["backend","app"],"slot":"auth","role":"default","probe":"attest","support":"WebAuthn 94.05% global (91.99% + 2.06%, caniuse, secondary); Conditional Get ~97%, Conditional Create 84% (Firefox ~5%, Signal API 0%)","verified":"2026-09-10","fallback":"magic-link email or the password plugin","cost":"$0 (self-hosted library, no per-MAU fee)","replaces":"password + email/SMS OTP flows, and paid identity providers (Auth0, Clerk)","thumb":"svg"},{"slug":"cloudflare-data-primitives","title":"D1, R2, KV, Durable Objects, Queues: the $0 data layer","kind":"stack","category":"backend","tier":"S","platforms":["web","server"],"tags":["d1","r2","kv","durable-objects","queues","sqlite","zero-egress"],"patterns":[],"updated":"2026-09-10","links":{"pricing":"https://developers.cloudflare.com/d1/platform/pricing/","docs":"https://developers.cloudflare.com/r2/pricing/","source":"https://developers.cloudflare.com/workers/platform/pricing/"},"one_liner":"Five Cloudflare primitives — a SQLite database, object storage with no egress bill, an edge key-value store, per-key stateful coordination, and a queue — bind into one wrangler.toml and deploy with the Worker that uses them.","words":565,"file":"stack/cloudflare-data-primitives.md","surfaces":["backend","storefront","app"],"default_for":["backend"],"slot":"data","role":"default","probe":"attest","support":"n/a (platform)","verified":"2026-09-10","fallback":"Neon or Supabase Postgres + R2/S3 + Upstash when caps are exceeded","cost":"$0 — D1 5M reads/day, 100k writes/day, 5 GB; R2 10 GB with zero egress; KV 100k reads/day (verify); DO free tier","replaces":"managed Postgres + S3 + Redis + a stateful coordinator, each billed separately","thumb":"svg"},{"slug":"cloudflare-workers-edge-runtime","title":"Cloudflare Workers + Static Assets as the $0 edge runtime","kind":"stack","category":"backend","tier":"S","platforms":["web","server"],"tags":["cloudflare","workers","edge","static-assets","serverless","free-tier"],"patterns":[],"updated":"2026-09-10","links":{"pricing":"https://developers.cloudflare.com/workers/platform/pricing/","docs":"https://developers.cloudflare.com/workers/static-assets/migration-guides/migrate-from-pages/"},"one_liner":"A single wrangler.toml binds static assets and API routes to one Worker, so the front-end and the back-end deploy together at the edge with no server to provision.","words":512,"file":"stack/cloudflare-workers-edge-runtime.md","surfaces":["backend","storefront","site","app"],"default_for":["backend"],"slot":"runtime","role":"default","probe":"attest","support":"n/a (platform); response carries cf-ray / server: cloudflare","verified":"2026-09-10","fallback":"Workers Paid ($5/mo) when the daily cap or CPU limit is hit","cost":"$0 — 100,000 requests/day, 10 ms CPU per invocation","replaces":"a $5–20/mo VPS or dyno; Cloudflare Pages for new projects","thumb":"svg"},{"slug":"hono-drizzle-typed-edge-api","title":"Hono + Drizzle: the typed edge API","kind":"stack","category":"backend","tier":"A","platforms":["web","server"],"tags":["hono","drizzle","typed-api","edge","orm","validation"],"patterns":[],"updated":"2026-09-10","links":{"source":"https://registry.npmjs.org/hono","docs":"https://registry.npmjs.org/drizzle-orm"},"one_liner":"Hono handles routing and middleware with full TypeScript inference, Drizzle handles the SQL with a typed schema-as-code layer, and both run on Workers, Node, Bun, or Deno without a rewrite.","words":482,"file":"stack/hono-drizzle-typed-edge-api.md","surfaces":["backend","app"],"default_for":["backend"],"slot":"api-layer","role":"default","probe":"attest","support":"runs on Workers, Node, Bun, Deno; Hono 4.13.7 · Drizzle 0.45.2 stable (1.0 in release candidate)","verified":"2026-09-10","fallback":"raw fetch handler + D1 prepared statements","cost":"$0","replaces":"Express-style servers that cannot run at the edge; hand-written SQL strings","thumb":"svg"},{"slug":"neon-branching-postgres","title":"Neon: branchable serverless Postgres","kind":"stack","category":"backend","tier":"A","platforms":["web","server"],"tags":["neon","postgres","branching","serverless","preview-databases"],"patterns":[],"updated":"2026-09-10","links":{"pricing":"https://neon.com/pricing"},"one_liner":"Postgres that suspends to zero when idle and branches like git, so every pull request gets its own live database instead of a shared staging table.","words":529,"file":"stack/neon-branching-postgres.md","surfaces":["backend","app"],"default_for":[],"slot":"data","role":"recommended","probe":"attest","support":"n/a (managed service; acquired by Databricks May 2025)","verified":"2026-09-10","fallback":"Supabase Postgres or Turso","cost":"$0 — 0.5 GB storage/project, 100 CU-hours/month, 10 branches/project, scale-to-zero after 5 min idle","replaces":"a $7–15/mo managed Postgres instance","thumb":"svg"},{"slug":"resend-transactional-email","title":"Resend for transactional email","kind":"stack","category":"backend","tier":"A","platforms":["web","server"],"tags":["resend","email","transactional","dmarc","deliverability"],"patterns":[],"updated":"2026-09-10","links":{"pricing":"https://resend.com/pricing","docs":"https://resend.com/docs","guide":"https://resend.com/docs/dashboard/domains/introduction"},"one_liner":"One HTTP call sends the email, domain verification sets SPF/DKIM/DMARC once, and webhooks report back whether it actually landed.","words":496,"file":"stack/resend-transactional-email.md","surfaces":["backend","storefront"],"default_for":[],"slot":"email","role":"recommended","probe":"attest","support":"n/a (managed API + SMTP)","verified":"2026-09-10","fallback":"Cloudflare Email Workers (send-only) or a paid tier","cost":"$0 — 3,000 emails/month, 100/day, 3 domains","replaces":"self-managed SMTP and paid SendGrid/Postmark plans","thumb":"svg"},{"slug":"sentry-error-tracing","title":"Sentry Developer tier: errors and traces at $0","kind":"stack","category":"backend","tier":"A","platforms":["web","server"],"tags":["sentry","observability","errors","tracing","replay"],"patterns":[],"updated":"2026-09-10","links":{"pricing":"https://sentry.io/pricing/","docs":"https://docs.sentry.io/platforms/javascript/guides/cloudflare/"},"one_liner":"The Sentry Developer plan ships stack traces, distributed traces, and a replay of the user's session for a production error, before the customer emails, for $0 on one seat.","words":573,"file":"stack/sentry-error-tracing.md","surfaces":["backend","app"],"default_for":[],"slot":"observability","role":"recommended","probe":"attest","support":"n/a (managed)","verified":"2026-09-10","fallback":"Cloudflare Workers Logs; an OpenTelemetry collector to a free sink (specifics unverified)","cost":"$0 — 5,000 errors/mo, 5M spans, 50 replays, 5 GB logs + 5 GB metrics, 30-day retention, 1 seat","replaces":"a paid APM seat, or grepping logs blind","thumb":"svg"},{"slug":"supabase-bundle","title":"Supabase: Postgres + Auth + Storage + Realtime in one","kind":"stack","category":"backend","tier":"B","platforms":["web","server"],"tags":["supabase","postgres","auth","realtime","storage","baas"],"patterns":[],"updated":"2026-09-10","links":{"pricing":"https://supabase.com/pricing"},"one_liner":"Postgres, auth, file storage, realtime channels, and edge functions sit behind a single project and a single client library, so a small app skips assembling those five pieces itself.","words":488,"file":"stack/supabase-bundle.md","surfaces":["backend","app"],"default_for":[],"slot":"data","role":"optional","probe":"attest","support":"n/a (managed)","verified":"2026-09-10","fallback":"Neon + Better Auth + R2","cost":"$0 — 500 MB Postgres, 50k MAU, 1 GB storage, 5 GB egress, 500k edge invocations/mo, 2 active projects, pauses after 1 week idle","replaces":"Firebase, or a hand-assembled Postgres+Auth+S3 stack","thumb":"svg"},{"slug":"turso-libsql-per-tenant","title":"Turso (libSQL): SQLite per tenant at the edge","kind":"stack","category":"backend","tier":"B","platforms":["web","server"],"tags":["turso","libsql","sqlite","multi-tenant","embedded-replica"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://docs.turso.tech","pricing":"https://turso.tech/pricing"},"one_liner":"Turso gives every tenant its own libSQL database with an embedded replica near the request, so isolation is physical and reads never leave the machine.","words":567,"file":"stack/turso-libsql-per-tenant.md","surfaces":["backend"],"default_for":[],"slot":"data","role":"optional","probe":"attest","support":"n/a (managed libSQL)","verified":"2026-09-10","fallback":"Cloudflare D1 (same SQLite model)","cost":"$0 — 5 GB storage, 500M rows read/month, 10M rows written/month, 100 databases","replaces":"a fleet of per-tenant Postgres databases","thumb":"svg"},{"slug":"vercel-hobby-fluid-compute","title":"Vercel Hobby + Fluid compute (non-commercial only)","kind":"stack","category":"backend","tier":"B","platforms":["web","server"],"tags":["vercel","fluid-compute","hobby","non-commercial","functions"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://vercel.com/docs/plans/hobby"},"one_liner":"Fluid compute charges a function for the CPU time it actually burns, not the wall time it sits waiting on I/O, so a webhook or streaming endpoint that mostly waits costs almost nothing on the Hobby plan — but the plan's terms restrict it to non-commercial projects.","words":485,"file":"stack/vercel-hobby-fluid-compute.md","surfaces":["backend"],"default_for":[],"slot":"runtime","role":"optional","probe":"attest","support":"n/a (platform); x-vercel-id response header","verified":"2026-09-10","fallback":"Cloudflare Workers — the $0 tier that allows commercial use","cost":"$0 for personal, NON-COMMERCIAL use only — 1M invocations, 4 Active-CPU-hours, 360 GB-hrs, 300s timeout; commercial = Pro at $20/seat/mo (paid)","replaces":"an always-on Node process billed for idle time","thumb":"svg"},{"slug":"web-push-vapid","title":"Web Push with VAPID","kind":"stack","category":"backend","tier":"A","platforms":["web","server"],"tags":["web-push","vapid","notifications","service-worker","pwa"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/API/Push_API","source":"https://caniuse.com/push-api"},"one_liner":"The service worker subscribes to the browser's push service, the server signs each send with a VAPID key pair, and no third-party push SDK sits between them.","words":495,"file":"stack/web-push-vapid.md","surfaces":["backend","storefront","app"],"default_for":[],"slot":"push","role":"optional","probe":"attest","support":"Push API 96.27% global; Safari macOS 18+ full; iOS Safari 16.4–26.6 partial (installed PWA only)","verified":"2026-09-10","fallback":"email for iOS users","cost":"$0 (protocol-level, no service fee)","replaces":"a paid push SaaS (OneSignal and similar)","thumb":"svg"},{"slug":"workers-ai-edge-inference","title":"Workers AI: 10,000 free neurons a day","kind":"stack","category":"backend","tier":"B","platforms":["web","server"],"tags":["workers-ai","inference","embeddings","edge","open-models"],"patterns":[],"updated":"2026-09-10","links":{"pricing":"https://developers.cloudflare.com/workers-ai/platform/pricing/"},"one_liner":"env.AI.run() calls open-weight embedding, small-LLM, and image models straight from the Worker, paid for out of a free daily neuron allotment instead of a metered bill.","words":516,"file":"stack/workers-ai-edge-inference.md","surfaces":["backend"],"default_for":[],"slot":"edge-inference","role":"optional","probe":"attest","support":"n/a (platform)","verified":"2026-09-10","fallback":"a paid inference API","cost":"$0 — 10,000 Neurons/day, resets 00:00 UTC","replaces":"a metered LLM API call for lightweight tasks","thumb":"svg"},{"slug":"agentic-commerce-feed","title":"Agentic commerce: the product feed, ACP, and llms.txt","kind":"stack","category":"commerce","tier":"S","platforms":["web"],"tags":["agentic-commerce","acp","product-feed","llms-txt","instant-checkout","ai-agents"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developers.openai.com/commerce/specs","guide":"https://developers.openai.com/commerce/llms.txt","source":"https://github.com/agentic-commerce-protocol/agentic-commerce-protocol"},"one_liner":"A refreshed product feed plus a server-side Agentic Commerce Protocol integration turns an off-platform store from something an AI agent can describe into something it can check out.","words":600,"file":"stack/agentic-commerce-feed.md","surfaces":["storefront"],"default_for":[],"slot":"agent-discovery","role":"recommended","probe":"attest","support":"n/a (server-to-server protocol + feed + a text file)","verified":"2026-09-10","fallback":"Product JSON-LD + sitemap only — discoverable, not transactable","cost":"$0 to implement the specs; Stripe fees on actual checkout","replaces":"being invisible to ChatGPT shopping and other agent buyers","thumb":"svg"},{"slug":"cloudflare-image-transforms","title":"Cloudflare Image Transformations at $0","kind":"stack","category":"commerce","tier":"B","platforms":["web"],"tags":["cloudflare-images","transformations","avif","resize","cdn-cgi"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developers.cloudflare.com/images/transform-images/","pricing":"https://theimagecdn.com/docs/cloudflare-images-pricing"},"one_liner":"A /cdn-cgi/image/ URL prefix resizes, crops, and converts to AVIF or WebP on the fly at Cloudflare's edge, free up to 5,000 unique transformations a month.","words":559,"file":"stack/cloudflare-image-transforms.md","surfaces":["storefront","site"],"default_for":[],"slot":"image-cdn","role":"recommended","probe":"attest","support":"n/a (edge service)","verified":"2026-09-10","fallback":"build-time AVIF encoding (see the images card)","cost":"$0 for 5,000 unique transformations/month; then $0.50/1,000 (paid); storage $5/100k, delivery $1/100k (secondary sources)","replaces":"a Cloudinary-class image CDN subscription","thumb":"svg"},{"slug":"model-viewer-ar-quicklook","title":"<model-viewer> with AR Quick Look and Scene Viewer","kind":"stack","category":"commerce","tier":"S","platforms":["web"],"tags":["model-viewer","ar","quick-look","scene-viewer","usdz","gltf","webxr"],"patterns":[],"updated":"2026-09-10","links":{"scene-viewer":"https://developers.google.com/ar/develop/scene-viewer","releases":"https://github.com/google/model-viewer/releases"},"one_liner":"Google's <model-viewer> renders glTF in-page and hands off to native AR — AR Quick Look on iOS, Scene Viewer on Android — from a plain HTML page, so a shopper places the product in their own room with one tap and no app install.","words":424,"file":"stack/model-viewer-ar-quicklook.md","surfaces":["storefront"],"default_for":[],"slot":"pdp-ar","role":"recommended","probe":"html.model_viewer>0","support":"iOS Safari to AR Quick Look (USDZ); Android Chrome to Scene Viewer or in-browser WebXR; WebXR itself is Chromium/ARCore only","verified":"2026-09-10","fallback":"the component's fallback mode: a fullscreen non-AR 3D viewer","cost":"$0","replaces":"static product photos for anything a shopper wants to place in a room","thumb":"svg"},{"slug":"payment-request-express-checkout","title":"Express checkout: Payment Request API, Apple Pay, Stripe Express Checkout Element","kind":"stack","category":"commerce","tier":"S","platforms":["web"],"tags":["payment-request","apple-pay","google-pay","express-checkout","stripe","link","one-tap"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://docs.stripe.com/elements/express-checkout-element","source":"https://caniuse.com/payment-request"},"one_liner":"The browser-native Payment Request sheet and Stripe's Express Checkout Element put Apple Pay, Google Pay, Link, PayPal, Klarna, and Amazon Pay in one row above the card form, so an independent store gets the same one-tap checkout a platform store gets.","words":522,"file":"stack/payment-request-express-checkout.md","surfaces":["storefront"],"default_for":["storefront"],"slot":"express-pay","role":"default","probe":"attest","support":"Payment Request API: Chrome 78+ · Safari 12.1+ · Firefox partial, off by default · 91.57% global","verified":"2026-09-10","fallback":"the standard card form / processor-hosted checkout","cost":"$0 to implement; per-transaction processor fees (not a recurring platform cost)","replaces":"a typed card form as the only door; the deprecated Stripe Payment Request Button","thumb":"svg"},{"slug":"product-jsonld-merchant-listing","title":"Product JSON-LD and merchant-listing structured data","kind":"stack","category":"commerce","tier":"S","platforms":["web"],"tags":["json-ld","schema-org","product","offer","merchant-listing","rich-results","agents"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://schema.org/Product","source":"https://support.google.com/merchants/answer/7331077?hl=en"},"one_liner":"A schema.org/Product JSON-LD block on every product page, kept in sync with the live price, is what turns a product page into a listing a search engine can render as a rich card and an AI shopping agent can read as an offer.","words":477,"file":"stack/product-jsonld-merchant-listing.md","surfaces":["storefront"],"default_for":["storefront"],"slot":"structured-data","role":"default","probe":"html.jsonld_types~Product","support":"n/a (markup)","verified":"2026-09-10","fallback":"none — this is the floor","cost":"$0","replaces":"an unstructured product page invisible to rich results and shopping agents","thumb":"svg"},{"slug":"splat-pdp-hero","title":"The Gaussian-splat product page","kind":"stack","category":"commerce","tier":"S","platforms":["web"],"tags":["gaussian-splatting","pdp","product-viewer","photoreal","spark","sog"],"patterns":[],"updated":"2026-09-10","links":{"spark":"https://sparkjs.dev/","playcanvas":"https://blog.playcanvas.com/gaussian-splatting-for-e-commerce-developer-spotlight-on-reflct/"},"one_liner":"Capture the actual unit as a Gaussian splat and drop it into the hero slot with orbit and zoom, streamed as SPZ/SOG behind a poster frame, so the shopper inspects the real object instead of a flattering photo set.","words":507,"file":"stack/splat-pdp-hero.md","surfaces":["storefront"],"default_for":[],"slot":"pdp-3d","role":"recommended","probe":"libs.spark|libs.playcanvas","support":"WebGL2 via Spark or PlayCanvas — Chrome, Safari, Firefox","verified":"2026-09-10","fallback":"a static image carousel, or model-viewer with a glTF","cost":"$0 runtime; capture at $0 with Scaniverse + SuperSplat","replaces":"the six-photo gallery and the 360 photo spin","thumb":"svg"},{"slug":"web-share-native-sheet","title":"Web Share API: the native share sheet","kind":"stack","category":"commerce","tier":"B","platforms":["web"],"tags":["web-share","share-sheet","navigator-share","mobile"],"patterns":[],"updated":"2026-09-10","links":{"source":"https://caniuse.com/web-share"},"one_liner":"navigator.share({ title, url }) on a user gesture hands off to the phone's own share sheet instead of loading a third-party share widget.","words":494,"file":"stack/web-share-native-sheet.md","surfaces":["storefront","site"],"default_for":[],"slot":"share","role":"optional","probe":"attest","support":"Chrome 128+ · Safari 12.1+ · Firefox desktop unsupported · 88.36% global","verified":"2026-09-10","fallback":"copy-link plus a small row of intent URLs","cost":"$0","replaces":"a third-party share widget script and a row of social icons","thumb":"svg"},{"slug":"cross-document-view-transitions","title":"Cross-document View Transitions","kind":"stack","category":"motion","tier":"S","platforms":["web"],"tags":["view-transitions","mpa","navigation","page-feel","zero-js","progressive-enhancement"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition","guide":"https://developer.chrome.com/docs/web-platform/view-transitions/cross-document"},"one_liner":"One CSS at-rule makes every same-origin navigation animate — shared elements morph, the rest cross-fades — so a static site feels installed without shipping a client router.","words":562,"file":"stack/cross-document-view-transitions.md","surfaces":["site","storefront","docs"],"default_for":["site","storefront","docs"],"slot":"navigation-feel","role":"default","probe":"vt.cross_document","support":"Chrome/Edge 126+ · Safari 18.2+ · Firefox not in stable (bug 1860854) · 87.78% global","verified":"2026-09-10","fallback":"plain navigation — the browser ignores the rule","cost":"$0","replaces":"SPA router + JS page-transition library on a multi-page site","thumb":"svg"},{"slug":"css-scroll-driven-animations","title":"CSS scroll-driven animations","kind":"stack","category":"motion","tier":"S","platforms":["web"],"tags":["scroll-driven","animation-timeline","compositor","reveal","progress"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations","guide":"https://developer.chrome.com/blog/scroll-triggered-animations"},"one_liner":"animation-timeline: scroll() or view() ties a CSS animation's progress to scroll position instead of time, and compositor-friendly properties run off the JS main thread.","words":498,"file":"stack/css-scroll-driven-animations.md","surfaces":["site","storefront","docs","app"],"default_for":["site","storefront"],"slot":"scroll-choreography","role":"default","probe":"css.scroll_driven>0|css.scroll_driven_rules>0","support":"Chrome 115+ · Safari 26+ · Firefox preview only (not stable) · 87.22% global (secondary)","verified":"2026-09-10","fallback":"IntersectionObserver class toggles, or GSAP ScrollTrigger","cost":"$0","replaces":"scroll listeners + rAF, AOS-style reveal libraries","thumb":"svg"},{"slug":"gsap-scrolltrigger-lenis","title":"GSAP ScrollTrigger + Lenis","kind":"stack","category":"motion","tier":"S","platforms":["web"],"tags":["gsap","scrolltrigger","lenis","smooth-scroll","timeline","agency-stack"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://gsap.com/pricing/","guide":"https://lenis.dev/"},"one_liner":"GSAP timelines pinned and scrubbed by ScrollTrigger, riding Lenis's eased virtual scroll, sequence scroll choreography that CSS alone cannot express.","words":415,"file":"stack/gsap-scrolltrigger-lenis.md","surfaces":["site","storefront","3d"],"default_for":["site","storefront","3d"],"slot":"scroll-choreography","role":"default","probe":"libs.gsap|libs.lenis","support":"JS libraries — every evergreen browser; GSAP 3.15.0 · Lenis 1.3.26","verified":"2026-09-10","fallback":"native scroll + CSS transitions","cost":"$0","replaces":"paid Club GSAP plugins (now free), Locomotive Scroll, jQuery scroll hacks","thumb":"svg"},{"slug":"gsap-splittext-kinetic-type","title":"Kinetic type with GSAP SplitText","kind":"stack","category":"motion","tier":"A","platforms":["web"],"tags":["kinetic-type","splittext","gsap","headline","stagger"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://webflow.com/updates/gsap-becomes-free","source":"https://gsap.com/pricing/"},"one_liner":"SplitText breaks a headline into lines, words, or characters so GSAP can stagger and scroll-link the motion, with the 3.13 rewrite keeping the split text readable to screen readers.","words":403,"file":"stack/gsap-splittext-kinetic-type.md","surfaces":["site","storefront"],"default_for":["site"],"slot":"type-motion","role":"default","probe":"libs.gsap","support":"JS library; GSAP 3.13+ rewrote SplitText (smaller, screen-reader aware)","verified":"2026-09-10","fallback":"static headline; or a CSS-only stagger via sibling-index()","cost":"$0","replaces":"hand-rolled per-character span wrapping; formerly a paid Club plugin","thumb":"svg"},{"slug":"interpolate-size-auto-transitions","title":"interpolate-size: animate to height auto","kind":"stack","category":"motion","tier":"B","platforms":["web"],"tags":["interpolate-size","calc-size","accordion","height-auto","chrome-only"],"patterns":[],"updated":"2026-09-10","links":{"source":"https://raw.githubusercontent.com/mdn/browser-compat-data/main/css/properties/interpolate-size.json"},"one_liner":"interpolate-size: allow-keywords and calc-size() let a CSS transition target intrinsic sizes like auto, fit-content, and max-content, so accordions and disclosures animate open without measuring height in JS.","words":392,"file":"stack/interpolate-size-auto-transitions.md","surfaces":["app","site"],"default_for":[],"slot":"layout-transitions","role":"optional","probe":"css.interpolate_size","support":"Chrome/Edge 129+ only; Firefox and Safari unsupported","verified":"2026-09-10","fallback":"ResizeObserver-measured height transitions, or grid-template-rows: 0fr → 1fr","cost":"$0","replaces":"JS height measurement for accordion/disclosure animation","thumb":"svg"},{"slug":"invoker-commands-native-overlays","title":"Native overlays: command/commandfor, popover, dialog","kind":"stack","category":"motion","tier":"S","platforms":["web"],"tags":["invoker-commands","popover","dialog","top-layer","zero-js","focus-management"],"patterns":[],"updated":"2026-09-10","links":{"source":"https://raw.githubusercontent.com/mdn/browser-compat-data/main/html/elements/button.json"},"one_liner":"A button with command=\"show-modal\" commandfor=\"id\" (or toggle-popover) opens native <dialog> and popover elements — top-layer rendering, focus trapping, light dismiss, and Escape, all handled by the platform.","words":403,"file":"stack/invoker-commands-native-overlays.md","surfaces":["app","site","storefront","docs"],"default_for":["app","storefront"],"slot":"overlays","role":"default","probe":"html.invoker_commands>0|html.popover>0|html.dialog>0","support":"command/commandfor: Chrome 135+ · Firefox 144+ · Safari 26.2+; popover and <dialog> Baseline","verified":"2026-09-10","fallback":"a JS click handler calling showModal()/showPopover()","cost":"$0","replaces":"Headless-UI-style dialog and dropdown controllers","thumb":"svg"},{"slug":"motion-library-react","title":"Motion (formerly Framer Motion)","kind":"stack","category":"motion","tier":"B","platforms":["web"],"tags":["motion","framer-motion","react","spring","layout-animation","gesture"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://motion.dev/"},"one_liner":"Motion (package name motion, imported as motion/react) is a spring-physics, layout-animation, and gesture library built on the Web Animations API, with a hybrid hardware-accelerated and JS-fallback engine.","words":421,"file":"stack/motion-library-react.md","surfaces":["app"],"default_for":[],"slot":"component-motion","role":"optional","probe":"libs.motion","support":"JS library — React, Vue, vanilla; v12.x","verified":"2026-09-10","fallback":"CSS transitions","cost":"$0","replaces":"the unmaintained framer-motion package name","thumb":"svg"},{"slug":"rapier-wasm-physics","title":"Rapier physics (WASM)","kind":"stack","category":"motion","tier":"A","platforms":["web"],"tags":["physics","rapier","wasm","draggable","collision","throwable"],"patterns":[],"updated":"2026-09-10","links":{"source":"https://registry.npmjs.org/@dimforge/rapier3d"},"one_liner":"Rapier is a Rust rigid-body physics engine compiled to WebAssembly, giving collision, joints, and weighted throw-and-settle behavior to UI objects instead of an eased approximation.","words":436,"file":"stack/rapier-wasm-physics.md","surfaces":["site","3d"],"default_for":[],"slot":"physics","role":"optional","probe":"libs.rapier","support":"WebAssembly — every evergreen browser; -simd variant needs simd128","verified":"2026-09-10","fallback":"CSS spring easing, or Motion's spring()","cost":"$0","replaces":"cannon-es, Ammo.js, Matter.js, hand-tuned spring math","thumb":"svg"},{"slug":"reduced-motion-contract","title":"The reduced-motion contract","kind":"stack","category":"motion","tier":"S","platforms":["web"],"tags":["prefers-reduced-motion","accessibility","motion","insurance","wcag"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"},"one_liner":"prefers-reduced-motion: reduce gates every motion technique on the page — view transitions, scroll-driven animation, GSAP, Rive, physics, kinetic type — with a designed static state, checked in both CSS and JS.","words":423,"file":"stack/reduced-motion-contract.md","surfaces":["site","storefront","app","docs","3d"],"default_for":["site","storefront","app","docs","3d"],"slot":"motion-a11y","role":"insurance","probe":"css.reduced_motion","support":"prefers-reduced-motion — universal in evergreen browsers","verified":"2026-09-10","fallback":"n/a — this is the fallback","cost":"$0","replaces":"nothing; it is the obligation every motion card above carries","thumb":"svg"},{"slug":"rive-state-machine-animation","title":"Rive state-machine animation","kind":"stack","category":"motion","tier":"A","platforms":["web"],"tags":["rive","state-machine","vector","micro-interaction","interactive"],"patterns":[],"updated":"2026-09-10","links":{"guide":"https://unicornicons.com/learn/rive-vs-lottie"},"one_liner":"The Rive web runtime loads compact .riv files into a canvas and runs an authored state machine — idle, hover, press, data-bound states — so the animation responds to the user instead of looping.","words":483,"file":"stack/rive-state-machine-animation.md","surfaces":["site","storefront","app"],"default_for":[],"slot":"vector-animation","role":"recommended","probe":"libs.rive","support":"WASM + canvas/WebGL2 runtime — every evergreen browser","verified":"2026-09-10","fallback":"static SVG, or dotLottie with its state machines","cost":"$0 runtime (MIT); editor freemium, team plans from $24/editor/mo — paid, flag it","replaces":"Lottie JSON playback for anything that must react to cursor, click, or data","thumb":"svg"},{"slug":"same-document-view-transitions","title":"Same-document View Transitions","kind":"stack","category":"motion","tier":"S","platforms":["web"],"tags":["view-transitions","spa","state-change","morph","baseline"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition","source":"https://caniuse.com/mdn-api_document_startviewtransition"},"one_liner":"document.startViewTransition() snapshots the DOM before and after a state change and animates old to new — cross-fade by default, shared-element morph for anything named — with no animation library.","words":459,"file":"stack/same-document-view-transitions.md","surfaces":["app","storefront","site"],"default_for":["app","storefront"],"slot":"navigation-feel","role":"default","probe":"vt.same_document","support":"Chrome 111+ · Safari 18.0+ · Firefox 144+ · 91.75% global","verified":"2026-09-10","fallback":"instant DOM swap, no animation","cost":"$0","replaces":"FLIP animation libraries for state-change transitions","thumb":"svg"},{"slug":"starting-style-entry-transitions","title":"@starting-style entry transitions","kind":"stack","category":"motion","tier":"A","platforms":["web"],"tags":["starting-style","entry-animation","display-none","allow-discrete"],"patterns":[],"updated":"2026-09-10","links":{"source":"https://caniuse.com/wf-starting-style"},"one_liner":"@starting-style declares the \"from\" state for an element's very first render, including from display: none, so popovers, dialogs, toasts, and inserted list items transition in with plain CSS.","words":387,"file":"stack/starting-style-entry-transitions.md","surfaces":["app","site","storefront","docs"],"default_for":[],"slot":"entry-transitions","role":"recommended","probe":"css.starting_style","support":"Chrome 117+ · Safari 17.5+ · Firefox 129+ · Baseline Newly available since 2024-08","verified":"2026-09-10","fallback":"double-rAF class toggle","cost":"$0","replaces":"requestAnimationFrame class-toggle entry hacks","thumb":"svg"},{"slug":"webcodecs-scroll-scrub","title":"Scroll-scrubbed frame sequences with WebCodecs","kind":"stack","category":"motion","tier":"S","platforms":["web"],"tags":["webcodecs","videodecoder","scroll-scrub","product-film","apple-style"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API","source":"https://github.com/diffusionstudio/webcodecs-scroll-sync"},"one_liner":"WebCodecs' VideoDecoder decodes individual frames of a single compressed video on demand, and scroll position picks the frame — the Apple product-page camera move without hundreds of JPEGs.","words":444,"file":"stack/webcodecs-scroll-scrub.md","surfaces":["site","storefront"],"default_for":[],"slot":"product-film","role":"recommended","probe":"attest","support":"VideoDecoder: Chrome 94+ · Firefox 130+ · Safari 16.4+ (medium confidence)","verified":"2026-09-10","fallback":"a sparse JPEG image sequence, or a muted autoplay <video> with a CSS scroll timeline","cost":"$0","replaces":"200 JPEGs loaded into a canvas — the old Apple product-page technique","thumb":"svg"},{"slug":"chrome-builtin-ai-apis","title":"Chrome built-in AI: Summarizer, Translator, Prompt API (Gemini Nano)","kind":"stack","category":"on-device-ai","tier":"B","platforms":["web"],"tags":["chrome-ai","gemini-nano","summarizer","translator","prompt-api","desktop-only"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.chrome.com/docs/ai/built-in-apis","guide":"https://developer.chrome.com/docs/ai/prompt-api"},"one_liner":"Chrome 138+ exposes Summarizer, Translator, LanguageDetector, and a Prompt API backed by an on-device Gemini Nano the browser downloads once per origin, so summaries and translations run with zero API calls on desktop Chrome.","words":524,"file":"stack/chrome-builtin-ai-apis.md","surfaces":["app","docs"],"default_for":[],"slot":"on-device-llm","role":"optional","probe":"attest","support":"Chrome 138+ desktop only (Windows, macOS 13+, Linux, Chromebook Plus); no Android/iOS; not Safari/Firefox","verified":"2026-09-10","fallback":"server-side summarization/translation when the global is undefined or availability() is 'unavailable'","cost":"$0; requires roughly 22GB free disk and a GPU with >4GB VRAM or 16GB RAM plus 4 cores for the Nano download","replaces":"cloud summarize/translate/detect calls, for Chrome-desktop users","thumb":"svg"},{"slug":"transformers-js-image-tasks","title":"On-device image tasks: background removal and segmentation","kind":"stack","category":"on-device-ai","tier":"A","platforms":["web"],"tags":["background-removal","segmentation","rmbg","transformers-js","vision"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://huggingface.co/docs/transformers.js/index","guide":"https://huggingface.co/posts/Xenova/262978955052408"},"one_liner":"A segmentation pipeline like RMBG-1.4 strips a background client-side with WebGPU acceleration, so a seller or operator gets an instant cut-out with nothing leaving the browser.","words":496,"file":"stack/transformers-js-image-tasks.md","surfaces":["app","storefront"],"default_for":[],"slot":"on-device-vision","role":"optional","probe":"libs.transformers","support":"same as Transformers.js — WASM everywhere, WebGPU acceleration on Chrome 113+ · Safari 26+ · Firefox off by default through v158 · 87.35% global — verified 2026-09-10","verified":"2026-09-10","fallback":"WASM execution; a server job for batch processing","cost":"$0 compute — but RMBG-1.4's license is not confirmed permissive for commercial use; verify before shipping","replaces":"a cloud background-removal API billed per image","thumb":"svg"},{"slug":"transformers-js-semantic-search","title":"On-device semantic search with Transformers.js","kind":"stack","category":"on-device-ai","tier":"S","platforms":["web"],"tags":["transformers-js","embeddings","semantic-search","webgpu","onnx","minilm"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://huggingface.co/docs/transformers.js/index","guide":"https://huggingface.co/blog/transformersjs-v3"},"one_liner":"A feature-extraction pipeline turns the catalog and the query into vectors on the visitor's own device, so \"something for sore knees\" matches the right product with no API call per keystroke.","words":533,"file":"stack/transformers-js-semantic-search.md","surfaces":["storefront","docs","app"],"default_for":[],"slot":"on-device-search","role":"recommended","probe":"libs.transformers","support":"WASM everywhere; WebGPU acceleration on Chrome 113+ · Safari 26+ · Firefox off by default through v158 · 87.35% global — verified 2026-09-10","verified":"2026-09-10","fallback":"device:'wasm' automatically when navigator.gpu is absent; server-side search for huge catalogs","cost":"$0 — client compute; model downloaded once from the Hub and cached","replaces":"a per-query embedding API call (OpenAI/Cohere) and a hosted vector DB for small catalogs","thumb":"svg"},{"slug":"transformers-js-voice-input","title":"On-device voice input with Whisper (Transformers.js)","kind":"stack","category":"on-device-ai","tier":"A","platforms":["web"],"tags":["whisper","speech-to-text","voice","transformers-js","privacy"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://huggingface.co/docs/transformers.js/index","guide":"https://huggingface.co/blog/transformersjs-v3"},"one_liner":"An automatic-speech-recognition pipeline runs a small Whisper ONNX conversion in the browser, so a voice search or a spoken command gets transcribed and matched locally, with the audio never leaving the device.","words":481,"file":"stack/transformers-js-voice-input.md","surfaces":["app","storefront"],"default_for":[],"slot":"on-device-voice","role":"optional","probe":"libs.transformers","support":"same as Transformers.js — WASM everywhere, WebGPU acceleration on Chrome 113+ · Safari 26+ · Firefox off by default through v158 · 87.35% global — verified 2026-09-10","verified":"2026-09-10","fallback":"WASM execution; the Web Speech API where privacy is not the point","cost":"$0","replaces":"cloud speech-to-text billed per minute","thumb":"svg"},{"slug":"webllm-in-browser-chat","title":"In-browser text generation with WebLLM","kind":"stack","category":"on-device-ai","tier":"A","platforms":["web"],"tags":["webllm","mlc","llm","webgpu","chat","on-device"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://github.com/mlc-ai/web-llm/releases","source":"https://www.npmjs.com/package/@mlc-ai/web-llm"},"one_liner":"WebLLM loads a small or mid-size language model in MLC format and runs it entirely on the visitor's GPU through WebGPU, so a docs assistant or form helper answers with no per-token bill and no server call.","words":476,"file":"stack/webllm-in-browser-chat.md","surfaces":["app","docs"],"default_for":[],"slot":"on-device-llm","role":"optional","probe":"libs.webllm","support":"WebGPU required — Chrome 113+ · Safari 26+ · not Firefox by default","verified":"2026-09-10","fallback":"none on-device — degrade to a server API or hide the feature when navigator.gpu is absent","cost":"$0 compute; weights downloaded once (hundreds of MB to GB)","replaces":"hosted LLM inference per request for small tasks","thumb":"svg"},{"slug":"avif-responsive-images","title":"AVIF in <picture> with responsive sources","kind":"stack","category":"perf-verify","tier":"S","platforms":["web"],"tags":["avif","picture","srcset","sizes","responsive-images","jpeg-xl"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://caniuse.com/avif","source":"https://caniuse.com/jpegxl"},"one_liner":"A <picture> element serves AVIF to the 95% of browsers that decode it and falls back to WebP or JPEG for the rest, so every raster image ships smaller without betting on a format most browsers don't render yet.","words":526,"file":"stack/avif-responsive-images.md","surfaces":["site","storefront","docs","app"],"default_for":["site","storefront","docs"],"slot":"images","role":"default","probe":"html.avif_sources>0","support":"AVIF: Chrome 85+ · Firefox 93+ · Safari 16.4+ · 95.36% global; JPEG XL flag-only in Chrome, partial Safari — not a default","verified":"2026-09-10","fallback":"WebP, then JPEG","cost":"$0 (encode at build; Cloudflare transforms 5,000/month free)","replaces":"WebP as the modern default; JPEG XL as a premature bet","thumb":"svg"},{"slug":"axe-core-a11y-floor","title":"axe-core: the accessibility floor in CI","kind":"stack","category":"perf-verify","tier":"S","platforms":["web"],"tags":["axe-core","accessibility","wcag","a11y","gate"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://github.com/dequelabs/axe-core#readme","guide":"https://playwright.dev/docs/accessibility-testing","source":"https://github.com/dequelabs/axe-core"},"one_liner":"axe-core runs inside the Playwright page on every build and fails it on any critical or serious WCAG violation, so contrast, names, roles, and focus order stop being someone's opinion.","words":539,"file":"stack/axe-core-a11y-floor.md","surfaces":["site","storefront","app","docs"],"default_for":["site","storefront","app","docs"],"slot":"a11y-gate","role":"default","probe":"attest","support":"n/a (JS engine, runs in Playwright)","verified":"2026-09-10","fallback":"Lighthouse's a11y category","cost":"$0","replaces":"a manual screen-reader pass as the only check","thumb":"svg"},{"slug":"bfcache-eligibility","title":"Back/forward cache eligibility","kind":"stack","category":"perf-verify","tier":"A","platforms":["web"],"tags":["bfcache","back-navigation","pageshow","unload"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://web.dev/articles/bfcache","guide":"https://developer.chrome.com/docs/devtools/application/back-forward-cache"},"one_liner":"A page with no unload listeners and cache-friendly headers gets frozen in memory on navigation away, so pressing Back restores it instantly instead of re-fetching.","words":449,"file":"stack/bfcache-eligibility.md","surfaces":["site","storefront","docs","app"],"default_for":[],"slot":"bfcache","role":"recommended","probe":"attest","support":"Chrome 96+; Safari and Firefox native","verified":"2026-09-10","fallback":"none — full reload","cost":"$0","replaces":"unload-handler caching hacks","thumb":"svg"},{"slug":"content-visibility-long-pages","title":"content-visibility for long pages","kind":"stack","category":"perf-verify","tier":"A","platforms":["web"],"tags":["content-visibility","contain-intrinsic-size","rendering","long-pages"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://web.dev/articles/content-visibility","guide":"https://web.dev/articles/content-visibility"},"one_liner":"content-visibility: auto tells the browser to skip layout and paint on sections that are off-screen, so a long catalog or article renders its first screen without a virtual-scroll library.","words":490,"file":"stack/content-visibility-long-pages.md","surfaces":["site","docs","storefront"],"default_for":[],"slot":"render-budget","role":"recommended","probe":"css.content_visibility>0","support":"Baseline Sept 2024 — Chrome 85+ · Firefox 125+ · Safari 18.1+","verified":"2026-09-10","fallback":"IntersectionObserver-gated rendering","cost":"$0","replaces":"virtualization libraries for simple long lists","thumb":"svg"},{"slug":"core-web-vitals-gate","title":"Core Web Vitals as a numeric gate","kind":"stack","category":"perf-verify","tier":"S","platforms":["web"],"tags":["core-web-vitals","inp","lcp","cls","rum","gate"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://web.dev/articles/inp","guide":"https://web.dev/articles/vitals"},"one_liner":"web-vitals in the field and Lighthouse in the lab turn \"feels fast\" into three numbers a CI gate checks before ship.","words":462,"file":"stack/core-web-vitals-gate.md","surfaces":["site","storefront","app","docs","3d"],"default_for":["site","storefront","app","docs","3d"],"slot":"cwv-gate","role":"default","probe":"attest","support":"RUM metric; INP is the responsiveness vital since 2024","verified":"2026-09-10","fallback":"Lighthouse lab TBT/LCP as a proxy before real traffic","cost":"$0 (web-vitals, Cloudflare Web Analytics, Lighthouse)","replaces":"'feels fast' as a sign-off","thumb":"svg"},{"slug":"early-hints-103","title":"103 Early Hints from the edge","kind":"stack","category":"perf-verify","tier":"A","platforms":["web"],"tags":["early-hints","103","preload","preconnect","http2","cloudflare"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/103","guide":"https://developer.chrome.com/docs/web-platform/early-hints","source":"https://developers.cloudflare.com/cache/reference/early-hints/"},"one_liner":"The server fires an interim 103 response with Link: preload/preconnect headers while the backend is still working, so the browser starts fetching the hero image and fonts during that think-time instead of after it.","words":534,"file":"stack/early-hints-103.md","surfaces":["backend","site","storefront"],"default_for":[],"slot":"early-hints","role":"recommended","probe":"attest","support":"Chrome/Edge 103+ (preload + preconnect) · Firefox 123+ · Safari 17+ preconnect only; HTTP/2 or 3 required","verified":"2026-09-10","fallback":"<link rel=preload> in the HTML head","cost":"$0 on Cloudflare (edge-cached 103 with Link headers)","replaces":"waiting for the full HTML before any preload starts","thumb":"svg"},{"slug":"font-loading-discipline","title":"Font loading discipline: preload, size-adjust, subsets","kind":"stack","category":"perf-verify","tier":"S","platforms":["web"],"tags":["fonts","preload","size-adjust","unicode-range","font-display","variable-font","cls"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://raw.githubusercontent.com/mdn/browser-compat-data/main/css/at-rules/font-face.json","guide":"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display"},"one_liner":"Self-host a subset variable font, preload it, and give the fallback matching metrics with size-adjust so text shows immediately and never shifts when the real font swaps in.","words":478,"file":"stack/font-loading-discipline.md","surfaces":["site","storefront","docs","app"],"default_for":["site","storefront","docs","app"],"slot":"fonts","role":"default","probe":"fonts.preloaded>0|fonts.size_adjust>0","support":"size-adjust: Chrome 92+ · Firefox 92+ · Safari 17+; font-display and unicode-range universal","verified":"2026-09-10","fallback":"system font stack","cost":"$0","replaces":"FOUT layout jumps and 400 KB of unused glyphs","thumb":"svg"},{"slug":"lcp-priority-fetchpriority","title":"LCP priority: fetchpriority and preload on the one element","kind":"stack","category":"perf-verify","tier":"S","platforms":["web"],"tags":["fetchpriority","preload","lcp","hero-image","priority-hints"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/fetchpriority","guide":"https://web.dev/articles/fetch-priority","source":"https://web.dev/articles/fetch-priority"},"one_liner":"fetchpriority=\"high\" on the single image that will be Largest Contentful Paint, plus a matching <link rel=preload> when it is not the first thing in the DOM, so that one request starts before anything else competes for bandwidth.","words":511,"file":"stack/lcp-priority-fetchpriority.md","surfaces":["site","storefront","docs","app"],"default_for":["site","storefront"],"slot":"lcp-priority","role":"default","probe":"html.fetchpriority_high>0","support":"fetchpriority: Chrome 102+ · Safari 17.2+ · Firefox 132+","verified":"2026-09-10","fallback":"browser default priority heuristics","cost":"$0","replaces":"letting the hero image queue behind twelve icons","thumb":"svg"},{"slug":"lighthouse-devtools-mcp-audit","title":"Lighthouse + Chrome DevTools MCP as the agent's audit surface","kind":"stack","category":"perf-verify","tier":"S","platforms":["web"],"tags":["lighthouse","devtools-mcp","performance-trace","audit","agent"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://github.com/ChromeDevTools/chrome-devtools-mcp","source":"https://github.com/ChromeDevTools/chrome-devtools-mcp/releases/tag/chrome-devtools-mcp-v1.6.0"},"one_liner":"Chrome DevTools MCP exposes live performance traces, network, console, and Lighthouse to an agent as tool calls, so the build-verify loop runs before a human ever opens the Performance panel.","words":447,"file":"stack/lighthouse-devtools-mcp-audit.md","surfaces":["site","storefront","app","docs","3d"],"default_for":["site","storefront","app","docs"],"slot":"audit","role":"default","probe":"attest","support":"n/a; Lighthouse 13.4 (Chrome 152 DevTools; chrome-devtools-mcp v1.6.0 bundles 13.4.0)","verified":"2026-09-10","fallback":"PageSpeed Insights API (free, rate-limited)","cost":"$0","replaces":"a human reading the Performance panel","thumb":"svg"},{"slug":"playwright-verification","title":"Playwright as the proof layer","kind":"stack","category":"perf-verify","tier":"S","platforms":["web"],"tags":["playwright","e2e","trace-viewer","ui-mode","webkit","firefox","gate"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://playwright.dev/docs/intro","source":"https://playwright.dev/docs/release-notes"},"one_liner":"Playwright 1.63 runs the real user flow in three engines and hands back a replayable trace, so \"it works\" means it worked in the browser that actually lacks the feature, not just Chrome.","words":517,"file":"stack/playwright-verification.md","surfaces":["site","storefront","app","docs","3d","backend"],"default_for":["app","storefront"],"slot":"e2e","role":"default","probe":"attest","support":"n/a (Node; drives Chromium, Firefox, WebKit)","verified":"2026-09-10","fallback":"headless CI run without UI Mode (trace still captured)","cost":"$0","replaces":"Cypress/Selenium; the experimental-ct-* component packages (deprecated)","thumb":"svg"},{"slug":"speculation-rules-prerender","title":"Speculation Rules: prerender the next click","kind":"stack","category":"perf-verify","tier":"S","platforms":["web"],"tags":["speculation-rules","prerender","prefetch","instant-navigation","mpa"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API","guide":"https://developer.chrome.com/docs/web-platform/prerender-pages"},"one_liner":"A <script type=\"speculationrules\"> JSON block tells Chromium which links to prefetch or fully prerender, so the next click resolves against an already-rendered page instead of a cold navigation.","words":409,"file":"stack/speculation-rules-prerender.md","surfaces":["site","storefront","docs"],"default_for":["site","storefront","docs"],"slot":"prerender","role":"default","probe":"html.speculation_rules","support":"Chrome/Edge 109+ · Safari 26.2 off by default · Firefox not supported","verified":"2026-09-10","fallback":"prefetch-only rules, or <link rel=prefetch>","cost":"$0","replaces":"deprecated <link rel=prerender> and mouseover prefetch hacks","thumb":"svg"},{"slug":"vitest-4-browser-mode","title":"Vitest 4 Browser Mode for components","kind":"stack","category":"perf-verify","tier":"A","platforms":["web"],"tags":["vitest","browser-mode","component-tests","visual-regression"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://vitest.dev/guide/browser/","source":"https://voidzero.dev/posts/announcing-vitest-4"},"one_liner":"Vitest 4.0 made Browser Mode stable, so component tests execute in an actual browser through Playwright, with visual regression and Playwright traces built in, instead of approximating the DOM in Node.","words":520,"file":"stack/vitest-4-browser-mode.md","surfaces":["app"],"default_for":[],"slot":"component-tests","role":"recommended","probe":"attest","support":"n/a (Node ≥ 22.12.0, Vite ≥ 6.4.0); 5.0.0 stable 2026-09-03","verified":"2026-09-10","fallback":"jsdom mode for pure logic","cost":"$0","replaces":"jsdom-only rendering tests that miss layout and CSS bugs","thumb":"svg"},{"slug":"blender-signature-asset","title":"Blender signature asset","kind":"stack","category":"render","tier":"S","platforms":["web"],"tags":["blender","gltf","glb","draco","meshopt","ktx2","turntable","avif-sequence","signature-object","the-bar"],"patterns":["landing-page-anatomy","product-detail-pages"],"updated":"2026-09-16","links":{"docs":"https://docs.blender.org/manual/en/latest/addons/scene_gltf2.html","gltfpack":"https://github.com/zeux/meshoptimizer/tree/master/gltf"},"one_liner":"the product's signature object — what the hero viewport shows when the signature is an object, the lane [[signature-canvas-hero]] occupies when it's drawn data instead — is modeled or scanned, lit, and exported from a .blend through Blender's own glTF exporter and gltfpack, then mounted by a renderer that actually loads a GLB, never a marketplace asset, never an AI still standing in for geometry.","words":1448,"file":"stack/blender-signature-asset.md","surfaces":["site","storefront","app","3d"],"default_for":["site","storefront","3d"],"slot":"signature-asset","role":"default","probe":"assets.glb>0|assets.blender>0|attest","support":"Blender 5.2 LTS (current stable line, Sept 2026) ships glTF 2.0 export in core via io_scene_gltf2; three.js ships DRACOLoader, KTX2Loader and a meshopt decoder; <model-viewer> supports Draco natively and meshopt/KTX2 through decoder-location config","verified":"2026-09-16","fallback":"a baked AVIF still rendered from the same .blend at the hero's rest frame, then the inline SVG mark already in the DOM","cost":"$0","replaces":"stock 3D marketplace models, AI-generated hero renders, a flat DOM hero, a generic particle field"},{"slug":"gaussian-splat-viewer-spark","title":"Gaussian splat rendering with Spark","kind":"stack","category":"render","tier":"S","platforms":["web"],"tags":["gaussian-splatting","3dgs","spark","photoreal","capture","webgl2"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://github.com/sparkjsdev/spark","guide":"https://sparkjs.dev/"},"one_liner":"Spark (@sparkjsdev/spark, World Labs, MIT) is a 3D Gaussian Splatting renderer built on three.js that streams level-of-detail splat worlds of 100M-plus splats with foveated detail biasing, running on plain WebGL2.","words":416,"file":"stack/gaussian-splat-viewer-spark.md","surfaces":["3d","storefront"],"default_for":[],"slot":"capture-3d","role":"recommended","probe":"libs.spark|libs.playcanvas","support":"WebGL2 (not WebGPU) — runs wherever three.js WebGLRenderer runs","verified":"2026-09-10","fallback":"static 360 photo or video turntable, or a baked low-poly glTF","cost":"$0","replaces":"photogrammetry mesh + baked textures for captured objects and spaces","thumb":"svg"},{"slug":"gpu-curtains-dom-webgpu","title":"gpu-curtains (direct-to-WebGPU, DOM-synced)","kind":"stack","category":"render","tier":"B","platforms":["web"],"tags":["webgpu","dom-sync","gpu-curtains","planes","shader"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://github.com/martinlaxenaire/gpu-curtains"},"one_liner":"gpu-curtains is a from-scratch WebGPU engine, a rewrite of curtains.js rather than a three.js wrapper, with built-in classes that keep 3D planes and objects locked to DOM element position and size.","words":426,"file":"stack/gpu-curtains-dom-webgpu.md","surfaces":["site","3d"],"default_for":[],"slot":"render-engine","role":"optional","probe":"libs.gpu_curtains","support":"WebGPU only — Chrome/Edge 113+ · Safari 26+ (partial) · Firefox off by default · 87.35% global","verified":"2026-09-10","fallback":"curtains.js (WebGL2) with the equivalent DOM-sync API","cost":"$0","replaces":"curtains.js and raw WebGL DOM-sync hacks","thumb":"svg"},{"slug":"shader-image-transitions","title":"Shader image transitions (displacement and noise reveals)","kind":"stack","category":"render","tier":"S","platforms":["web"],"tags":["shader","displacement","noise","image-transition","hero","gallery"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://github.com/martinlaxenaire/gpu-curtains","source":"https://www.awwwards.com/sites/lando-norris"},"one_liner":"A displacement map or noise field distorts the outgoing image into the incoming one on a DOM-synced WebGL or WebGPU plane, so the transition itself is a designed asset instead of a library default.","words":468,"file":"stack/shader-image-transitions.md","surfaces":["site","storefront","3d"],"default_for":["3d"],"slot":"image-transition","role":"default","probe":"canvas.webgl|canvas.webgpu|libs.gpu_curtains","support":"WebGL2 everywhere; WebGPU per the shared support line (Chrome/Edge 113+ · Safari 26+ partial · Firefox off by default · 87.35% global)","verified":"2026-09-10","fallback":"CSS cross-fade or a same-document view transition on the image","cost":"$0","replaces":"opacity cross-fades and slider libraries","thumb":"svg"},{"slug":"signature-canvas-hero","title":"Signature canvas hero","kind":"stack","category":"render","tier":"S","platforms":["web"],"tags":["canvas","webgl2","hero","signature","kit","degradation","reduced-motion"],"patterns":[],"updated":"2026-09-15","links":{"kit":"https://saturnai.tools/design/kit/"},"one_liner":"the first thing a visitor meets is a canvas drawing the one mechanism this product actually has — its data, its mark, its state — mounted from a hosted, zero-dependency kit instead of authored from scratch.","words":861,"file":"stack/signature-canvas-hero.md","surfaces":["site","storefront","app"],"default_for":["site","storefront","app"],"slot":"signature-hero","role":"default","probe":"canvas.hero","support":"WebGL2 in every current engine; the 2D fallback covers the rest, and the static mark covers no-JS","verified":"2026-09-15","fallback":"2D canvas at the same geometry, then the inline SVG mark already in the DOM","cost":"$0","replaces":"a flat DOM hero, a stock photograph, or a generic particle background"},{"slug":"splat-capture-pipeline","title":"Phone-to-web splat pipeline (SuperSplat, SPZ/SOG)","kind":"stack","category":"render","tier":"A","platforms":["web"],"tags":["capture","scaniverse","supersplat","spz","sog","gaussian-splatting"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.playcanvas.com/user-manual/gaussian-splatting/formats/spz/","guide":"https://blog.playcanvas.com/playcanvas-open-sources-sog-format-for-gaussian-splatting/"},"one_liner":"Consumer capture apps turn a phone walk-around into a Gaussian splat; PlayCanvas SuperSplat edits and exports it to SOG or SPZ, the two formats built for streaming on the web.","words":573,"file":"stack/splat-capture-pipeline.md","surfaces":["3d","storefront"],"default_for":[],"slot":"capture-3d","role":"recommended","probe":"attest","support":"n/a — capture apps and file formats, not a browser API","verified":"2026-09-10","fallback":"paid capture service, or PLY export compressed to SOG/SPZ","cost":"$0 with Scaniverse + SuperSplat; Polycam free tier is glTF-only; KIRI free = 3 scans then paid ~$10/mo; PostShot free blocks PLY export (paid Indie tier); Luma minimal free tier","replaces":"a photogrammetry rig and Blender/RealityCapture cleanup","thumb":"svg"},{"slug":"tsl-compute-effects","title":"TSL compute shaders (particles, fluid, cloth, SDF)","kind":"stack","category":"render","tier":"A","platforms":["web"],"tags":["compute-shader","particles","fluid","cloth","sdf-raymarching","webgpu"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://github.com/mrdoob/three.js/releases"},"one_liner":"TSL exposes compute-stage node functions, with updateBefore/updateAfter hooks per the r186 changelog, directly inside WebGPURenderer, so particles, cloth, fluid-like fields, and SDF raymarching run entirely on the GPU without a separate simulation library.","words":437,"file":"stack/tsl-compute-effects.md","surfaces":["3d"],"default_for":[],"slot":"gpu-sim","role":"recommended","probe":"attest","support":"WebGPU backend only (compute stage); no WebGL2 equivalent","verified":"2026-09-10","fallback":"pre-baked or CPU-driven particles via InstancedMesh on WebGLRenderer, or a static poster on non-WebGPU devices","cost":"$0","replaces":"CPU particle systems and transform-feedback WebGL hacks","thumb":"svg"},{"slug":"tsl-post-processing-stack","title":"TSL post-processing as the look","kind":"stack","category":"render","tier":"S","platforms":["web"],"tags":["post-processing","film-grain","bloom","chromatic-aberration","dithering","depth-of-field","tsl"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://github.com/mrdoob/three.js/releases"},"one_liner":"three.js's PostProcessing class (renamed RenderPipeline at r183) chains TSL node functions — bloom(), dof(), chromaticAberration(), dotScreen(), film grain — into one graph instead of a linear list of ShaderPass objects.","words":474,"file":"stack/tsl-post-processing-stack.md","surfaces":["3d"],"default_for":["3d"],"slot":"post-look","role":"default","probe":"attest","support":"ships with three r186 (three/addons/tsl/display); WebGPU or WebGL2 backend","verified":"2026-09-10","fallback":"bloom + vignette only, or no post stack, on low-tier GPUs detected by feature probe","cost":"$0","replaces":"EffectComposer + a chain of GLSL ShaderPass objects","thumb":"svg"},{"slug":"webgl2-fallback-layer","title":"WebGL2 fallback layer","kind":"stack","category":"render","tier":"S","platforms":["web"],"tags":["fallback","webgl2","feature-detection","insurance"],"patterns":[],"updated":"2026-09-10","links":{"source":"https://caniuse.com/webgpu"},"one_liner":"Every WebGPU build ships a working WebGL2 code path, chosen at runtime by navigator.gpu feature detection, with compute-only effects swapped for a designed substitute instead of a blank canvas.","words":450,"file":"stack/webgl2-fallback-layer.md","surfaces":["3d"],"default_for":["3d"],"slot":"render-fallback","role":"insurance","probe":"attest","support":"WebGL2 near-universal; WebGPU 87.35% and off by default in Firefox","verified":"2026-09-10","fallback":"static poster image or looping video for compute-only effects","cost":"$0","replaces":"n/a — this is the insurance, not the effect","thumb":"svg"},{"slug":"webgpu-tsl-renderer","title":"Three.js WebGPURenderer + TSL","kind":"stack","category":"render","tier":"S","platforms":["web"],"tags":["webgpu","tsl","three-js","node-materials","compute","hero"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://github.com/mrdoob/three.js/releases","source":"https://caniuse.com/webgpu"},"one_liner":"TSL compiles one JavaScript node graph to WGSL for WebGPU or GLSL for WebGL2, so compute-driven particles, fluid, and cloth run on the browser GPU from a single material definition.","words":457,"file":"stack/webgpu-tsl-renderer.md","surfaces":["3d","site","storefront"],"default_for":["3d"],"slot":"render-engine","role":"default","probe":"canvas.webgpu","support":"Chrome/Edge 113+ · Safari 26+ · Firefox off by default · 87.35% global","verified":"2026-09-10","fallback":"same TSL graph through WebGLRenderer (WebGL2)","cost":"$0","replaces":"WebGLRenderer + hand-written GLSL","thumb":"svg"},{"slug":"astro-7-islands-mpa","title":"Astro 7: zero-JS pages, islands, and native view transitions","kind":"stack","category":"tooling","tier":"S","platforms":["web"],"tags":["astro","islands","mpa","server-islands","fonts-api","csp","content-collections"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://astro.build/blog/astro-6/","release":"https://registry.npmjs.org/astro"},"one_liner":"Astro renders full HTML with zero client JavaScript by default and hydrates only the components you mark as islands, so a content site ships a fraction of the runtime a full framework would.","words":516,"file":"stack/astro-7-islands-mpa.md","surfaces":["site","docs","storefront"],"default_for":["site","docs"],"slot":"framework","role":"default","probe":"attest","support":"n/a (framework); deploys to Workers, Pages, Vercel, static","verified":"2026-09-10","fallback":"Astro 6 static build if a request-time content source is unavailable","cost":"$0","replaces":"an SPA framework adopted only for routing; hand-rolled static generators","thumb":"svg"},{"slug":"biome-2-oxlint","title":"Biome 2 or Oxlint + Oxfmt instead of ESLint + Prettier","kind":"stack","category":"tooling","tier":"A","platforms":["web"],"tags":["biome","oxlint","oxfmt","lint","format","rust"],"patterns":[],"updated":"2026-09-10","links":{"source":"https://jsmanifest.com/biome-oxlint-comparison-2026"},"one_liner":"Biome bundles lint and format into a single Rust binary with roughly 200 rules, and Oxlint pairs roughly 787 rules (type-aware via the native TypeScript compiler) with the Oxfmt formatter, so a 180k-line repo lints and formats in under a second instead of fourteen, per a secondary benchmark.","words":505,"file":"stack/biome-2-oxlint.md","surfaces":["site","storefront","app","docs","3d","backend"],"default_for":[],"slot":"lint-format","role":"recommended","probe":"attest","support":"n/a (Rust binaries)","verified":"2026-09-10","fallback":"ESLint + Prettier where a plugin has no equivalent","cost":"$0","replaces":"the ESLint + Prettier dual toolchain","thumb":"svg"},{"slug":"bun-or-pnpm","title":"Bun or pnpm — pick by native-addon needs","kind":"stack","category":"tooling","tier":"B","platforms":["web"],"tags":["bun","pnpm","package-manager","test-runner","monorepo"],"patterns":[],"updated":"2026-09-10","links":{"source":"https://reintech.io/blog/npm-vs-yarn-vs-pnpm-vs-bun-2026-comparison"},"one_liner":"Bun is a runtime, bundler, test runner, and package manager in one binary that implements Node-API from scratch, and pnpm is a package manager with a content-addressable store and full Node compatibility — the native-addon question decides which one a project can actually use, but the line is narrower than \"Bun supports no addons.\"","words":557,"file":"stack/bun-or-pnpm.md","surfaces":["site","storefront","app","docs","3d","backend"],"default_for":[],"slot":"package-manager","role":"recommended","probe":"attest","support":"n/a","verified":"2026-09-10","fallback":"npm for maximum compatibility","cost":"$0","replaces":"npm/yarn installs; a separate test runner when Bun's is used","thumb":"svg"},{"slug":"eleventy-3-static","title":"Eleventy 3 for pure static","kind":"stack","category":"tooling","tier":"A","platforms":["web"],"tags":["eleventy","11ty","static","zero-js","mpa"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://www.11ty.dev/blog/review-2025/","release":"https://www.11ty.dev/"},"one_liner":"Eleventy compiles content into plain HTML with no client JavaScript unless you add it by hand, so a docs site or portfolio ships nothing to hydrate.","words":440,"file":"stack/eleventy-3-static.md","surfaces":["site","docs"],"default_for":["site","docs"],"slot":"framework","role":"default","probe":"attest","support":"n/a; Node ESM","verified":"2026-09-10","fallback":"Astro when interactivity needs grow","cost":"$0","replaces":"Jekyll/Hugo for JS teams; a full framework for content-only sites","thumb":"svg"},{"slug":"nextjs-16-react-19","title":"Next.js 16 on React 19.3","kind":"stack","category":"tooling","tier":"A","platforms":["web"],"tags":["nextjs","react-19","rsc","view-transitions","activity","app-router"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://react.dev/blog","release":"https://registry.npmjs.org/next"},"one_liner":"React 19.3 adds View Transitions, Fragment Refs, browser(), and Trusted Types, and Next.js's App Router pairs that with Activity-style pre-rendering of hidden subtrees, so route navigation animates without a third-party transition wrapper.","words":537,"file":"stack/nextjs-16-react-19.md","surfaces":["app","storefront"],"default_for":["app"],"slot":"framework","role":"default","probe":"attest","support":"n/a; Vercel, Workers (OpenNext), Node","verified":"2026-09-10","fallback":"CSS-only transitions on older React","cost":"$0","replaces":"Framer Motion route-transition wrappers for simple navigation animation","thumb":"svg"},{"slug":"sveltekit-2-svelte-5-runes","title":"SvelteKit 2 + Svelte 5 runes","kind":"stack","category":"tooling","tier":"A","platforms":["web"],"tags":["sveltekit","svelte-5","runes","no-vdom","fine-grained"],"patterns":[],"updated":"2026-09-10","links":{"source":"https://sadiqueali.medium.com/sveltekit-2-in-2026-the-lean-full-stack-framework-built-for-speed-04522b1ea6fd"},"one_liner":"Runes ($state, $derived, $effect, $props) make Svelte 5's reactivity explicit and fine-grained, so the compiler ships less code and re-renders less work than a virtual-DOM framework on the same dashboard.","words":496,"file":"stack/sveltekit-2-svelte-5-runes.md","surfaces":["app","storefront"],"default_for":["app"],"slot":"framework","role":"default","probe":"attest","support":"n/a; adapters for Workers, Vercel, Node, static","verified":"2026-09-10","fallback":"Svelte 4 + stores for an unmigrated codebase","cost":"$0","replaces":"Svelte 4 store-based reactivity; a React app where bundle size matters more than ecosystem","thumb":"svg"},{"slug":"tanstack-start","title":"TanStack Start (and SolidStart 2) — typed alternatives to Next","kind":"stack","category":"tooling","tier":"B","platforms":["web"],"tags":["tanstack-start","tanstack-router","solidstart","type-safe","server-functions"],"patterns":[],"updated":"2026-09-10","links":{"source":"https://tanstack.com/blog/announcing-tanstack-start-v1","release":"https://github.com/solidjs/solid-start/discussions/2281"},"one_liner":"TanStack Router plus Vite plus Nitro gives fully type-safe file routing and isomorphic server functions for teams that want React without the App Router's conventions; SolidStart 2 pairs the same idea with Solid's fine-grained, no-virtual-DOM reactivity.","words":543,"file":"stack/tanstack-start.md","surfaces":["app"],"default_for":[],"slot":"framework","role":"optional","probe":"attest","support":"n/a; Vite-based, Nitro adapters","verified":"2026-09-10","fallback":"Next.js App Router, or Vite + React Router SSR","cost":"$0","replaces":"Next.js when App Router conventions are unwanted","thumb":"svg"},{"slug":"turborepo-nx-monorepo","title":"Turborepo or Nx once a repo has five packages","kind":"stack","category":"tooling","tier":"B","platforms":["web"],"tags":["turborepo","nx","monorepo","remote-cache","affected"],"patterns":[],"updated":"2026-09-10","links":{"source":"https://dev.to/zny10289/monorepos-in-2026-turborepo-vs-nx-vs-bazel-what-actually-works-1j85"},"one_liner":"Turborepo and Nx cache each package's build and test output keyed to its inputs, so a repeat build only redoes the packages that actually changed instead of the whole tree.","words":470,"file":"stack/turborepo-nx-monorepo.md","surfaces":["app","backend"],"default_for":[],"slot":"monorepo","role":"optional","probe":"attest","support":"n/a","verified":"2026-09-10","fallback":"plain workspaces for tiny monorepos","cost":"$0 (self-hosted or free-tier remote cache)","replaces":"Lerna and hand-rolled workspace scripts","thumb":"svg"},{"slug":"typescript-7-native","title":"TypeScript 7: the native compiler line","kind":"stack","category":"tooling","tier":"A","platforms":["web"],"tags":["typescript","tsgo","type-checking","native-compiler"],"patterns":[],"updated":"2026-09-10","links":{"release":"https://registry.npmjs.org/typescript","source":"https://www.infoq.com/news/2026/08/typescript-7-released/"},"one_liner":"TypeScript 7 is the native-compiler line, reported by secondary sources as a Go reimplementation cutting a large codebase's type-check time from minutes to seconds, so watch mode and editor feedback stop being the bottleneck.","words":467,"file":"stack/typescript-7-native.md","surfaces":["site","storefront","app","docs","3d","backend"],"default_for":[],"slot":"types","role":"recommended","probe":"attest","support":"n/a; latest 7.0.2 (2026-07-08)","verified":"2026-09-10","fallback":"TypeScript 6.x for tools not yet compatible with the 7 API","cost":"$0","replaces":"the JavaScript-implemented tsc and its watch-mode bottlenecks","thumb":"svg"},{"slug":"vite-8-rolldown","title":"Vite 8 with Rolldown","kind":"stack","category":"tooling","tier":"S","platforms":["web"],"tags":["vite","rolldown","bundler","hmr","rust"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://vite.dev/blog/announcing-vite8","release":"https://registry.npmjs.org/vite"},"one_liner":"Rolldown replaces the esbuild-dev / Rollup-prod split with a single Rust bundler, so cold builds and HMR both run on the same fast engine instead of two different ones with two sets of quirks.","words":523,"file":"stack/vite-8-rolldown.md","surfaces":["site","storefront","app","docs","3d"],"default_for":["app","storefront","3d"],"slot":"bundler","role":"default","probe":"attest","support":"n/a (build tool); Node.js 20.19+ or 22.12+","verified":"2026-09-10","fallback":"Vite 7 with the legacy Rollup build when a plugin is Rolldown-incompatible","cost":"$0","replaces":"webpack, and the old esbuild-dev / Rollup-prod split","thumb":"svg"},{"slug":"astra-launch-grammar","title":"Astra launch grammar","kind":"stack","category":"type-css","tier":"S","platforms":["web"],"tags":["the-bar","fluid-type","clamp","reading-measure","evidence-blocks","black-canvas","launch-page"],"patterns":["landing-page-anatomy"],"updated":"2026-09-16","links":{"reference":"https://openai.com/index/gpt-6-astra/"},"one_liner":"every site, storefront front and app landing view is composed toward the grammar of [[openai-gpt-6-astra]] — fluid clamp() type tokens, one reading measure, one family in two weights plus a mono for numbers, white-at-alpha surfaces on a true canvas, evidence blocks in place of adjectives, one motion that carries the product — and the collector proves the measurable half of it.","words":952,"file":"stack/astra-launch-grammar.md","surfaces":["site","storefront","app"],"default_for":["site","storefront","app"],"slot":"launch-grammar","role":"default","probe":"css.fluid_type>0","support":"font-size: clamp() in every current engine (Chrome 79+, Edge 79+, Safari 13.1+, Firefox 75+); the measure and family counts are reported by the collector, never gating","verified":"2026-09-16","fallback":"a static rem ladder — the page still renders; the slot is then declared with a reason, not proven","cost":"$0","replaces":"a fixed px type ladder, a gray-ramp dark theme, stat strips and adjective sections where a measured comparison belongs"},{"slug":"corner-shape-squircle","title":"corner-shape: squircle","kind":"stack","category":"type-css","tier":"A","platforms":["web"],"tags":["corner-shape","squircle","superellipse","continuous-corners","chrome-only"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape","source":"https://caniuse.com/mdn-css_properties_corner-shape"},"one_liner":"corner-shape: squircle paired with border-radius draws the continuous, iOS-style superellipse corner instead of the ordinary circular-arc rounded corner, with no clip-path and no asset.","words":406,"file":"stack/corner-shape-squircle.md","surfaces":["site","app","storefront"],"default_for":[],"slot":"surface-geometry","role":"recommended","probe":"css.corner_shape","support":"Chrome/Edge 139+ only · Firefox none · Safari Technology Preview only","verified":"2026-09-10","fallback":"border-radius alone, or an SVG clip-path squircle","cost":"$0","replaces":"clip-path squircle hacks and squircle.js","thumb":"svg"},{"slug":"css-anchor-positioning","title":"CSS anchor positioning","kind":"stack","category":"type-css","tier":"S","platforms":["web"],"tags":["anchor-positioning","anchor-name","position-anchor","position-try","popover","tooltip"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning","source":"https://groups.google.com/a/mozilla.org/g/dev-platform/c/B71NFNrZ8Lo/m/e1ZMg8fjCAAJ"},"one_liner":"anchor-name on the target plus position-anchor, position-area, and position-try fallbacks on the positioned element let the browser tether and flip tooltips, menus, and popovers natively, tracking scroll and resize with zero JavaScript.","words":440,"file":"stack/css-anchor-positioning.md","surfaces":["app","storefront","site","docs"],"default_for":["app"],"slot":"anchored-ui","role":"default","probe":"css.anchor","support":"Chrome/Edge 125+ · Safari 26+ · Firefox 147+ (2026-01-13) — tri-engine","verified":"2026-09-10","fallback":"Floating UI","cost":"$0","replaces":"Floating UI / Popper / Tippy for tooltips, popovers, menus","thumb":"svg"},{"slug":"oklch-color-system","title":"oklch + color-mix + @property color system","kind":"stack","category":"type-css","tier":"S","platforms":["web"],"tags":["oklch","color-mix","@property","display-p3","contrast-color","wide-gamut","tokens"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/CSS/color-mix","guide":"https://web.dev/blog/at-property-baseline","source":"https://developer.chrome.com/blog/new-in-web-ui-io26"},"one_liner":"A palette authored in oklch() for perceptually uniform lightness, chroma, and hue, with derived shades from color-mix(in oklch, …), typed animatable tokens via @property, and contrast-color() for automatic ink, replaces the whole Sass color-function toolchain with the platform.","words":418,"file":"stack/oklch-color-system.md","surfaces":["site","storefront","app","docs","3d"],"default_for":["site","storefront","app","docs"],"slot":"color-system","role":"default","probe":"css.oklch>0|css.color_mix>0","support":"color-mix Baseline 2023 (Chrome 111 / Firefox 113 / Safari 16.2); @property Baseline 2024-07; contrast-color() Chrome 147 / Firefox 146 / Safari 26","verified":"2026-09-10","fallback":"hex/hsl with pre-computed mixes","cost":"$0","replaces":"Sass lighten/darken/mix and JS color libraries","thumb":"svg"},{"slug":"scroll-state-container-queries","title":"@container scroll-state(): style the moment it sticks","kind":"stack","category":"type-css","tier":"A","platforms":["web"],"tags":["scroll-state","container-queries","sticky","snapped","scrollable","chrome-only"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/CSS/@container","source":"https://developer.chrome.com/blog/css-scroll-state-queries"},"one_liner":"container-type: scroll-state on a sticky header, a snap item, or a scroller lets its descendants query stuck, snapped, or scrollable and restyle themselves in a @container rule, with no scroll listener at all.","words":390,"file":"stack/scroll-state-container-queries.md","surfaces":["site","app","storefront","docs"],"default_for":[],"slot":"sticky-state","role":"recommended","probe":"css.scroll_state","support":"Chrome/Edge 133+ only","verified":"2026-09-10","fallback":"IntersectionObserver class toggle","cost":"$0","replaces":"scroll listeners and sentinel observers for sticky/snap state","thumb":"svg"},{"slug":"sibling-index-stagger","title":"sibling-index() staggers in pure CSS","kind":"stack","category":"type-css","tier":"A","platforms":["web"],"tags":["sibling-index","sibling-count","stagger","calc","list-animation"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-index","source":"https://caniuse.com/mdn-css_types_sibling-index"},"one_liner":"sibling-index() and sibling-count() return an element's position and its sibling total as plain numbers usable inside calc(), so a grid's entrance stagger, hover ripple, or rotation ramp needs one rule instead of per-child markup.","words":417,"file":"stack/sibling-index-stagger.md","surfaces":["site","app","storefront"],"default_for":[],"slot":"stagger","role":"recommended","probe":"css.sibling_index","support":"Chrome 138+ · Safari 26.2+ · Firefox 154+ · 82.26% global","verified":"2026-09-10","fallback":"a per-child --i custom property set in the template, or nth-child rules","cost":"$0","replaces":"JS index injection for staggered delays","thumb":"svg"},{"slug":"svg-filter-liquid-glass","title":"SVG turbulence and displacement: liquid, gooey, refraction glass","kind":"stack","category":"type-css","tier":"A","platforms":["web"],"tags":["svg-filter","feturbulence","fedisplacementmap","liquid-glass","gooey","refraction"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap","guide":"https://github.com/mdn/browser-compat-data/issues/24110","source":"https://bugs.webkit.org/show_bug.cgi?id=245510"},"one_liner":"An inline <filter> chaining feTurbulence into feDisplacementMap, referenced from filter: or backdrop-filter: url(#id), distorts a surface or the content behind it to produce the liquid-glass and gooey-merge look without a shader.","words":482,"file":"stack/svg-filter-liquid-glass.md","surfaces":["site","storefront"],"default_for":[],"slot":"refraction","role":"optional","probe":"css.backdrop_svg_filter|svg.displacement>0","support":"backdrop-filter: url(#svg) works in Chrome and Safari, not Firefox (open Mozilla Connect request; MDN BCD issue 24110) — verified 2026-09-10","verified":"2026-09-10","fallback":"backdrop-filter: blur() only","cost":"$0","replaces":"WebGL shader glass for small surfaces","thumb":"svg"},{"slug":"text-box-trim-optical-leading","title":"text-box-trim: true optical leading","kind":"stack","category":"type-css","tier":"S","platforms":["web"],"tags":["text-box-trim","text-box-edge","leading","optical-alignment","cap-height"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/CSS/text-box-trim","source":"https://caniuse.com/mdn-css_properties_text-box-trim"},"one_liner":"text-box: trim-both cap alphabetic strips the font's half-leading above cap height and below the baseline, so a headline or button box lands exactly on the spacing grid instead of a few pixels off.","words":467,"file":"stack/text-box-trim-optical-leading.md","surfaces":["site","storefront","docs","app"],"default_for":["site","storefront"],"slot":"type-precision","role":"default","probe":"css.text_box_trim","support":"Chrome 133+ · Safari 18.2+ · Firefox 154+","verified":"2026-09-10","fallback":"line-height: 1 plus calibrated negative margins","cost":"$0","replaces":"fudged padding to make cap-height sit on the grid","thumb":"svg"},{"slug":"text-wrap-balance-pretty","title":"text-wrap: balance and pretty","kind":"stack","category":"type-css","tier":"A","platforms":["web"],"tags":["text-wrap","balance","pretty","orphans","headlines"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap","guide":"https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap-style"},"one_liner":"text-wrap: balance evens out line lengths in short blocks like headlines, and text-wrap: pretty improves paragraph line-breaking to avoid orphans, both with one declaration and no script.","words":449,"file":"stack/text-wrap-balance-pretty.md","surfaces":["site","storefront","docs","app"],"default_for":[],"slot":"type-wrap","role":"recommended","probe":"css.text_wrap","support":"balance is Baseline (Chrome 114 / Firefox 121 / Safari 17.5); pretty is Chrome 117+ / Safari 26+, Firefox not yet — verified 2026-09-10","verified":"2026-09-10","fallback":"normal wrap — graceful","cost":"$0","replaces":"balance-text JS libraries and manual <br>","thumb":"svg"},{"slug":"variable-font-axis-animation","title":"Variable font axes animated by scroll or cursor","kind":"stack","category":"type-css","tier":"S","platforms":["web"],"tags":["variable-fonts","font-variation-settings","kinetic","wght","wdth","opsz","cursor-proximity"],"patterns":[],"updated":"2026-09-10","links":{"docs":"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings","guide":"https://css-irl.info/variable-font-animation-with-css-and-splitting-js/","source":"https://fontfyi.com/blog/best-variable-fonts/"},"one_liner":"One variable font file whose axes — wght, wdth, opsz, slnt, or a custom axis — are driven by scroll progress, cursor distance, or a keyframe, so the letterforms change shape instead of swapping files.","words":520,"file":"stack/variable-font-axis-animation.md","surfaces":["site","storefront"],"default_for":["site","storefront"],"slot":"type-motion","role":"default","probe":"fonts.axis_animation|fonts.variable_axes>2","support":"font-variation-settings Baseline; the animation is CSS transitions/keyframes or JS on pointermove/scroll","verified":"2026-09-10","fallback":"static weight; reduced-motion pins a mid-axis value","cost":"$0 (Google Fonts, Fontshare, open foundries)","replaces":"static weight swaps between font files; canvas glyph morphing","thumb":"svg"}]}