{
  "version": "2026-05-31",
  "title": "Design Better — five disciplines · Articulate database",
  "owner": "Anthony Booth · Articulate",
  "scoring_framework": "Claude/hype-radar.md · P/Q/S",
  "categories": [
    {
      "id": "nav",
      "code": "01",
      "name": "Navigation & Wayfinding",
      "summary": "How users move through and orient themselves in a site or app — top-level nav, in-app navigation, search.",
      "techniques": [
        {
          "name": "Floating pill nav",
          "summary": "Pill-shaped nav floats over content, magnetic indicator follows active item.",
          "example_url": "https://ui.aceternity.com/components/floating-navbar",
          "lives_at": [
            {
              "label": "Aceternity floating navbar",
              "url": "https://ui.aceternity.com/components/floating-navbar"
            },
            {
              "label": "Vercel.com nav",
              "url": "https://vercel.com"
            },
            {
              "label": "Linear.app marketing nav",
              "url": "https://linear.app"
            }
          ],
          "code_id": "Floating pill nav"
        },
        {
          "name": "Magnetic dock",
          "summary": "macOS-dock-style nav with magnification on hover. Common in portfolios + creative SaaS.",
          "example_url": "https://magicui.design/docs/components/dock",
          "lives_at": [
            {
              "label": "Magic UI dock",
              "url": "https://magicui.design/docs/components/dock"
            },
            {
              "label": "macOS-style portfolio docks",
              "url": "https://www.awwwards.com"
            }
          ],
          "code_id": "Magnetic dock"
        },
        {
          "name": "Command palette",
          "summary": "Cmd+K spotlight-style search/action surface. Now table-stakes for any tool.",
          "example_url": "https://cmdk.paco.me",
          "lives_at": [
            {
              "label": "cmdk by Paco Coursey",
              "url": "https://cmdk.paco.me"
            },
            {
              "label": "Linear Cmd+K",
              "url": "https://linear.app"
            },
            {
              "label": "Vercel dashboard",
              "url": "https://vercel.com"
            }
          ],
          "code_id": "Command palette"
        },
        {
          "name": "Resizable navbar",
          "summary": "Nav shrinks/changes shape on scroll — saves vertical space without losing presence.",
          "example_url": "https://ui.aceternity.com/components/resizable-navbar",
          "lives_at": [
            {
              "label": "Aceternity resizable navbar",
              "url": "https://ui.aceternity.com/components/resizable-navbar"
            }
          ],
          "code_id": "Resizable navbar"
        },
        {
          "name": "Sticky-serif wordmark header",
          "summary": "Editorial-leaning, lower-attention nav that lets type lead. Articulate-native.",
          "example_url": "https://uncommon.studio",
          "lives_at": [
            {
              "label": "Uncommon Studio",
              "url": "https://uncommon.studio"
            },
            {
              "label": "The New York Times (web)",
              "url": "https://www.nytimes.com"
            }
          ],
          "code_id": "Sticky-serif wordmark header"
        },
        {
          "name": "Mega menu with thumbnails",
          "summary": "Multi-column flyout with visual previews per item. SaaS marketing-site standard.",
          "example_url": "https://stripe.com",
          "lives_at": [
            {
              "label": "Stripe",
              "url": "https://stripe.com"
            },
            {
              "label": "Shopify",
              "url": "https://www.shopify.com"
            }
          ],
          "code_id": "Mega menu with thumbnails"
        },
        {
          "name": "Breadcrumb + back-button hybrid",
          "summary": "Native-app pattern now in web apps — orient + retreat in one move.",
          "example_url": "https://linear.app",
          "lives_at": [
            {
              "label": "Linear",
              "url": "https://linear.app"
            },
            {
              "label": "Vercel dashboard",
              "url": "https://vercel.com"
            }
          ],
          "code_id": "Breadcrumb + back-button hybrid"
        }
      ],
      "fish_for_100_at": [
        {
          "label": "Mobbin web navigation section",
          "url": "https://mobbin.com/browse/web/sections/navigation"
        },
        {
          "label": "Aceternity nav components",
          "url": "https://ui.aceternity.com/components/floating-navbar"
        },
        {
          "label": "Magic UI dock",
          "url": "https://magicui.design/docs/components/dock"
        },
        {
          "label": "21st.dev community nav",
          "url": "https://21st.dev"
        },
        {
          "label": "Origin UI primitives",
          "url": "https://originui.com"
        }
      ],
      "shortlist": [
        "Floating pill",
        "Magnetic dock",
        "cmdk command palette",
        "Sticky-serif wordmark"
      ],
      "discipline": "ux"
    },
    {
      "id": "layout",
      "code": "02",
      "name": "Layout & Hero Composition",
      "summary": "First-impression structure — hero, bento, grid systems, asymmetric layouts, card stacks.",
      "techniques": [
        {
          "name": "Asymmetric bento grid",
          "summary": "Mixed-size tiles each showing one product capability. Apple-set the ceiling; Aceternity made it accessible.",
          "example_url": "https://ui.aceternity.com/blocks/bento-grids",
          "lives_at": [
            {
              "label": "Apple iPhone pages",
              "url": "https://www.apple.com/iphone/"
            },
            {
              "label": "Aceternity bento blocks",
              "url": "https://ui.aceternity.com/blocks/bento-grids"
            },
            {
              "label": "Magic UI bento",
              "url": "https://magicui.design/docs/components/bento-grid"
            }
          ],
          "code_id": "Asymmetric bento grid"
        },
        {
          "name": "Typographic full-bleed hero",
          "summary": "Display serif fills viewport. No image. Editorial confidence. Articulate-native.",
          "example_url": "https://uncommon.studio",
          "lives_at": [
            {
              "label": "Uncommon Studio",
              "url": "https://uncommon.studio"
            },
            {
              "label": "Hoodzpah",
              "url": "https://hoodzpah.com"
            }
          ],
          "code_id": "Typographic full-bleed hero"
        },
        {
          "name": "Split 50:50 hero (text + visual)",
          "summary": "Classic SaaS — copy left, product mock right. Still works.",
          "example_url": "https://linear.app",
          "lives_at": [
            {
              "label": "Linear",
              "url": "https://linear.app"
            },
            {
              "label": "Notion",
              "url": "https://www.notion.so"
            }
          ],
          "code_id": "Split 50:50 hero (text + visual)"
        },
        {
          "name": "Live-data hero",
          "summary": "Real product UI animated in the hero. Stripe's signature; now Vercel, Linear, Resend all use it.",
          "example_url": "https://stripe.com",
          "lives_at": [
            {
              "label": "Stripe",
              "url": "https://stripe.com"
            },
            {
              "label": "Resend",
              "url": "https://resend.com"
            },
            {
              "label": "Vercel",
              "url": "https://vercel.com"
            }
          ],
          "code_id": "Live-data hero"
        },
        {
          "name": "Scroll-linked product mock",
          "summary": "Product UI swaps/animates as user scrolls. Apple, Linear, Stripe.",
          "example_url": "https://linear.app",
          "lives_at": [
            {
              "label": "Linear",
              "url": "https://linear.app"
            },
            {
              "label": "Apple AirPods Pro page",
              "url": "https://www.apple.com/airpods-pro/"
            }
          ],
          "code_id": "Scroll-linked product mock"
        },
        {
          "name": "Card stack with depth",
          "summary": "Layered cards with parallax/peel. Often hero secondary support.",
          "example_url": "https://ui.aceternity.com/components/3d-card-effect",
          "lives_at": [
            {
              "label": "Aceternity 3D card",
              "url": "https://ui.aceternity.com/components/3d-card-effect"
            }
          ],
          "code_id": "Card stack with depth"
        },
        {
          "name": "Pinned-section content swap",
          "summary": "Section pins; content swaps via scroll progress. GSAP ScrollTrigger classic.",
          "example_url": "https://gsap.com/docs/v3/Plugins/ScrollTrigger/",
          "lives_at": [
            {
              "label": "GSAP ScrollTrigger demos",
              "url": "https://gsap.com/docs/v3/Plugins/ScrollTrigger/"
            },
            {
              "label": "Apple product pages",
              "url": "https://www.apple.com"
            }
          ],
          "code_id": "Pinned-section content swap"
        }
      ],
      "fish_for_100_at": [
        {
          "label": "Aceternity bento blocks",
          "url": "https://ui.aceternity.com/blocks/bento-grids"
        },
        {
          "label": "bentogrids.com",
          "url": "https://bentogrids.com"
        },
        {
          "label": "Awwwards bento collection",
          "url": "https://www.awwwards.com/inspiration/interavtive-bento-grid-with-hover-and-scroll-effects-pixlspace-creative-studio"
        },
        {
          "label": "SaaS Pages hero",
          "url": "https://saaspages.xyz"
        },
        {
          "label": "Land-book hero filter",
          "url": "https://land-book.com"
        }
      ],
      "shortlist": [
        "Asymmetric bento",
        "Typographic full-bleed",
        "Live-data hero",
        "Scroll-linked product mock"
      ],
      "discipline": "ux"
    },
    {
      "id": "motion",
      "code": "03",
      "name": "Motion & Micro-interaction",
      "summary": "Hover, focus, click, idle — the details that turn a static page into a felt experience.",
      "techniques": [
        {
          "name": "3D tilt on hover",
          "summary": "Card tilts to follow cursor — perspective transform + mouse-tracking.",
          "example_url": "https://ui.aceternity.com/components/3d-card-effect",
          "lives_at": [
            {
              "label": "Aceternity 3D card",
              "url": "https://ui.aceternity.com/components/3d-card-effect"
            },
            {
              "label": "Vanilla-tilt.js",
              "url": "https://micku7zu.github.io/vanilla-tilt.js/"
            }
          ],
          "code_id": "3D tilt on hover"
        },
        {
          "name": "Magnetic cursor draw",
          "summary": "Buttons/cards attract the cursor when near. Subtle, satisfying.",
          "example_url": "https://motion-primitives.com",
          "lives_at": [
            {
              "label": "Motion Primitives magnetic",
              "url": "https://motion-primitives.com"
            },
            {
              "label": "basement.studio portfolio buttons",
              "url": "https://basement.studio"
            }
          ],
          "code_id": "Magnetic cursor draw"
        },
        {
          "name": "Spring physics on click/drag",
          "summary": "Motion v12's signature — natural overshoot + settle. Emil Kowalski's animations.dev textbook.",
          "example_url": "https://animations.dev",
          "lives_at": [
            {
              "label": "animations.dev (the course)",
              "url": "https://animations.dev"
            },
            {
              "label": "Motion v12",
              "url": "https://motion.dev"
            }
          ],
          "code_id": "Spring physics on click/drag"
        },
        {
          "name": "Hover shimmer / glow border",
          "summary": "Animated gradient border on card hover. Aceternity / Magic UI staple.",
          "example_url": "https://magicui.design",
          "lives_at": [
            {
              "label": "Aceternity moving border",
              "url": "https://ui.aceternity.com"
            },
            {
              "label": "Magic UI shine border",
              "url": "https://magicui.design"
            }
          ],
          "code_id": "Hover shimmer / glow border"
        },
        {
          "name": "Easter-egg confetti / micro-celebration",
          "summary": "Surprise feedback on milestone actions. Linear's checkbox flourish; many in Design Spells.",
          "example_url": "https://designspells.com",
          "lives_at": [
            {
              "label": "Linear checkbox flourish",
              "url": "https://linear.app"
            },
            {
              "label": "Design Spells archive",
              "url": "https://designspells.com"
            }
          ],
          "code_id": "Easter-egg confetti / micro-celebration"
        },
        {
          "name": "Animated icon swap (Lucide / phosphor)",
          "summary": "Icon morphs between states. Theme toggle, like/unlike, copy/copied.",
          "example_url": "https://lucide.dev",
          "lives_at": [
            {
              "label": "Lucide.dev",
              "url": "https://lucide.dev"
            },
            {
              "label": "Phosphor icons",
              "url": "https://phosphoricons.com"
            }
          ],
          "code_id": "Animated icon swap (Lucide / phosphor)"
        },
        {
          "name": "Text mask reveal",
          "summary": "Text reveals via animated clip-path mask on scroll. React Bits + GSAP.",
          "example_url": "https://www.reactbits.dev",
          "lives_at": [
            {
              "label": "React Bits text effects",
              "url": "https://www.reactbits.dev"
            },
            {
              "label": "GSAP SplitText",
              "url": "https://gsap.com/docs/v3/Plugins/SplitText/"
            }
          ],
          "code_id": "Text mask reveal"
        }
      ],
      "fish_for_100_at": [
        {
          "label": "Design Spells",
          "url": "https://designspells.com"
        },
        {
          "label": "animations.dev",
          "url": "https://animations.dev"
        },
        {
          "label": "Motion Primitives",
          "url": "https://motion-primitives.com"
        },
        {
          "label": "React Bits",
          "url": "https://www.reactbits.dev"
        },
        {
          "label": "Magic UI effects",
          "url": "https://magicui.design"
        }
      ],
      "shortlist": [
        "3D tilt on hover",
        "Magnetic cursor draw",
        "Spring physics click",
        "Hover shimmer border"
      ],
      "discipline": "ux"
    },
    {
      "id": "transitions",
      "code": "04",
      "name": "Transitions & Scroll",
      "summary": "Movement between pages, sections, and states — what happens when the user changes context.",
      "techniques": [
        {
          "name": "View Transitions API (native)",
          "summary": "Browser-native cross-document transitions. Free app-grade polish on multi-page sites.",
          "example_url": "https://developer.chrome.com/docs/web-platform/view-transitions",
          "lives_at": [
            {
              "label": "Chrome docs",
              "url": "https://developer.chrome.com/docs/web-platform/view-transitions"
            },
            {
              "label": "Astro docs",
              "url": "https://docs.astro.build/en/guides/view-transitions/"
            }
          ],
          "code_id": "View Transitions API (native)"
        },
        {
          "name": "Scroll-driven animations (CSS)",
          "summary": "Pure-CSS scroll progress. No JS, no Lenis, no GSAP needed for many cases.",
          "example_url": "https://scroll-driven-animations.style",
          "lives_at": [
            {
              "label": "scroll-driven-animations.style",
              "url": "https://scroll-driven-animations.style"
            },
            {
              "label": "Bram.us writeups",
              "url": "https://www.bram.us"
            }
          ],
          "code_id": "Scroll-driven animations (CSS)"
        },
        {
          "name": "Pinned section with content swap",
          "summary": "Section pins to viewport; inner content swaps via scroll. GSAP ScrollTrigger.",
          "example_url": "https://gsap.com/docs/v3/Plugins/ScrollTrigger/",
          "lives_at": [
            {
              "label": "GSAP ScrollTrigger",
              "url": "https://gsap.com/docs/v3/Plugins/ScrollTrigger/"
            },
            {
              "label": "Linear marketing site",
              "url": "https://linear.app"
            }
          ],
          "code_id": "Pinned section with content swap"
        },
        {
          "name": "Horizontal scroll inside vertical page",
          "summary": "Vertical scroll drives horizontal pan of a section. Studio-favourite editorial move.",
          "example_url": "https://locomotive.ca",
          "lives_at": [
            {
              "label": "Locomotive portfolio",
              "url": "https://locomotive.ca"
            },
            {
              "label": "14islands portfolio",
              "url": "https://14islands.com"
            }
          ],
          "code_id": "Horizontal scroll inside vertical page"
        },
        {
          "name": "Sticky reveal stack",
          "summary": "Cards stack as user scrolls past — each pinned briefly. Apple AirPods page.",
          "example_url": "https://www.apple.com/airpods-pro/",
          "lives_at": [
            {
              "label": "Apple AirPods Pro page",
              "url": "https://www.apple.com/airpods-pro/"
            }
          ],
          "code_id": "Sticky reveal stack"
        },
        {
          "name": "Scroll-linked SVG draw",
          "summary": "Path-length stroke-dashoffset trick. SVG draws itself as user scrolls.",
          "example_url": "https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/",
          "lives_at": [
            {
              "label": "GSAP DrawSVGPlugin",
              "url": "https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/"
            }
          ],
          "code_id": "Scroll-linked SVG draw"
        },
        {
          "name": "Smooth scroll (Lenis)",
          "summary": "Inertial scroll baseline under most Awwwards winners.",
          "example_url": "https://lenis.darkroom.engineering",
          "lives_at": [
            {
              "label": "Lenis",
              "url": "https://lenis.darkroom.engineering"
            },
            {
              "label": "Every Awwwards SOTY winner",
              "url": "https://www.awwwards.com/awards/"
            }
          ],
          "code_id": "Smooth scroll (Lenis)"
        },
        {
          "name": "Page-load curtain wipe",
          "summary": "Full-screen mask wipes as page loads. Studio signature move.",
          "example_url": "https://basement.studio",
          "lives_at": [
            {
              "label": "basement.studio portfolio",
              "url": "https://basement.studio"
            },
            {
              "label": "Lusion microsites",
              "url": "https://lusion.co"
            }
          ],
          "code_id": "Page-load curtain wipe"
        }
      ],
      "fish_for_100_at": [
        {
          "label": "scroll-driven-animations.style",
          "url": "https://scroll-driven-animations.style"
        },
        {
          "label": "Awwwards transitions collection",
          "url": "https://www.awwwards.com/awwwards/collections/transitions/"
        },
        {
          "label": "Awwwards animation collection",
          "url": "https://www.awwwards.com/websites/animation/"
        },
        {
          "label": "Lenis examples",
          "url": "https://lenis.darkroom.engineering"
        },
        {
          "label": "GSAP showcase",
          "url": "https://gsap.com/showcase"
        }
      ],
      "shortlist": [
        "View Transitions API",
        "Pinned-section swap",
        "Sticky reveal stack",
        "Scroll-linked SVG draw"
      ],
      "discipline": "ux"
    },
    {
      "id": "type",
      "code": "05",
      "name": "Typography & Voice",
      "summary": "Display, body, kinetic type, italic discipline. How the page sounds, not just how it looks.",
      "techniques": [
        {
          "name": "Display serif heroes",
          "summary": "Heavy contemporary serif as full-bleed display. Articulate-native, Uncommon-set ceiling.",
          "example_url": "https://uncommon.studio",
          "lives_at": [
            {
              "label": "Uncommon Studio",
              "url": "https://uncommon.studio"
            },
            {
              "label": "Articulate AI",
              "url": "https://articulate-ai.work"
            }
          ],
          "code_id": "Display serif heroes"
        },
        {
          "name": "Variable-font axis animation",
          "summary": "Weight/width/slant animate on hover or scroll. Modern OpenType-Var trick.",
          "example_url": "https://v-fonts.com",
          "lives_at": [
            {
              "label": "v-fonts.com",
              "url": "https://v-fonts.com"
            },
            {
              "label": "DIA Studio kinetic type",
              "url": "https://dia.tv"
            }
          ],
          "code_id": "Variable-font axis animation"
        },
        {
          "name": "Kinetic marquee text",
          "summary": "Continuously scrolling text band. Brand-statement repeating mark.",
          "example_url": "https://www.framer.com/marketplace/",
          "lives_at": [
            {
              "label": "Framer marketplace",
              "url": "https://www.framer.com/marketplace/"
            },
            {
              "label": "Uncommon Studio",
              "url": "https://uncommon.studio"
            }
          ],
          "code_id": "Kinetic marquee text"
        },
        {
          "name": "Letter-by-letter reveal",
          "summary": "Char-split entrance with stagger. Motion v12 signature.",
          "example_url": "https://motion.dev",
          "lives_at": [
            {
              "label": "Motion v12",
              "url": "https://motion.dev"
            },
            {
              "label": "GSAP SplitText",
              "url": "https://gsap.com/docs/v3/Plugins/SplitText/"
            }
          ],
          "code_id": "Letter-by-letter reveal"
        },
        {
          "name": "Sans italic for emphasis (not serif)",
          "summary": "Articulate rule — italics stay in body sans face. Avoids voice change mid-paragraph.",
          "example_url": "https://articulate-ai.work",
          "lives_at": [
            {
              "label": "Articulate AI brand spec",
              "url": "https://articulate-ai.work"
            }
          ],
          "code_id": "Sans italic for emphasis (not serif)"
        },
        {
          "name": "Mono metadata labels",
          "summary": "JetBrains/IBM Plex Mono for eyebrow + section labels. Editorial-meets-systems look.",
          "example_url": "https://vercel.com",
          "lives_at": [
            {
              "label": "Vercel marketing",
              "url": "https://vercel.com"
            },
            {
              "label": "Stripe docs",
              "url": "https://stripe.com"
            }
          ],
          "code_id": "Mono metadata labels"
        }
      ],
      "fish_for_100_at": [
        {
          "label": "Fonts In Use",
          "url": "https://fontsinuse.com"
        },
        {
          "label": "Typewolf",
          "url": "https://www.typewolf.com"
        },
        {
          "label": "Sidebar (curated)",
          "url": "https://sidebar.io"
        },
        {
          "label": "Uncommon Studio portfolio",
          "url": "https://uncommon.studio"
        },
        {
          "label": "Hoodzpah portfolio",
          "url": "https://hoodzpah.com"
        }
      ],
      "shortlist": [
        "Display serif heroes",
        "Variable-font axis animation",
        "Letter-by-letter reveal",
        "Mono metadata labels"
      ],
      "discipline": "ux"
    },
    {
      "id": "immersive",
      "code": "06",
      "name": "3D, WebGL & Immersive",
      "summary": "Shader beds, Three.js scenes, parallax depth, interactive product 3D. Where the brand sells the future.",
      "techniques": [
        {
          "name": "WebGL shader bed",
          "summary": "GLSL gradient noise as full-bleed hero. basement.studio set the SaaS reference.",
          "example_url": "https://basement.studio",
          "lives_at": [
            {
              "label": "basement.studio",
              "url": "https://basement.studio"
            },
            {
              "label": "Cursor.com",
              "url": "https://www.cursor.com"
            }
          ],
          "code_id": "WebGL shader bed"
        },
        {
          "name": "Three.js hero scene",
          "summary": "Custom 3D scene driving the hero. Lusion, Active Theory specialty.",
          "example_url": "https://lusion.co",
          "lives_at": [
            {
              "label": "Lusion",
              "url": "https://lusion.co"
            },
            {
              "label": "Active Theory",
              "url": "https://activetheory.net"
            }
          ],
          "code_id": "Three.js hero scene"
        },
        {
          "name": "React Three Fiber components",
          "summary": "R3F + Drei = 3D as React tree. The standard way to ship 3D in React apps.",
          "example_url": "https://docs.pmnd.rs/react-three-fiber",
          "lives_at": [
            {
              "label": "R3F docs",
              "url": "https://docs.pmnd.rs/react-three-fiber"
            },
            {
              "label": "Drei helpers",
              "url": "https://github.com/pmndrs/drei"
            }
          ],
          "code_id": "React Three Fiber components"
        },
        {
          "name": "Spline 3D embed",
          "summary": "No-code 3D scene via Spline. Designers ship 3D without learning Three.js.",
          "example_url": "https://spline.design",
          "lives_at": [
            {
              "label": "Spline community",
              "url": "https://app.spline.design/community"
            }
          ],
          "code_id": "Spline 3D embed"
        },
        {
          "name": "Parallax depth layers",
          "summary": "Multi-plane parallax via scroll or mouse. Cheap depth illusion.",
          "example_url": "https://lusion.co",
          "lives_at": [
            {
              "label": "Lusion microsites",
              "url": "https://lusion.co"
            }
          ],
          "code_id": "Parallax depth layers"
        },
        {
          "name": "GLSL gradient noise",
          "summary": "Animated organic gradient via shader. Cursor, Resend, Replicate all use it.",
          "example_url": "https://www.cursor.com",
          "lives_at": [
            {
              "label": "Cursor.com hero",
              "url": "https://www.cursor.com"
            },
            {
              "label": "Resend.com",
              "url": "https://resend.com"
            }
          ],
          "code_id": "GLSL gradient noise"
        }
      ],
      "fish_for_100_at": [
        {
          "label": "basement.studio portfolio",
          "url": "https://basement.studio"
        },
        {
          "label": "Lusion portfolio",
          "url": "https://lusion.co"
        },
        {
          "label": "14islands portfolio",
          "url": "https://14islands.com"
        },
        {
          "label": "Awwwards 3D collection",
          "url": "https://www.awwwards.com/inspiration_search/?text=3d"
        },
        {
          "label": "Spline community",
          "url": "https://app.spline.design/community"
        }
      ],
      "shortlist": [
        "WebGL shader bed",
        "Three.js hero scene",
        "Spline 3D embed",
        "GLSL gradient noise"
      ],
      "discipline": "ux"
    },
    {
      "id": "forms",
      "code": "07",
      "name": "Forms, Input & Data Interaction",
      "summary": "Inputs, validation, tables, multi-step flows. Where the actual work happens.",
      "techniques": [
        {
          "name": "Inline validation with state colour",
          "summary": "Live as-you-type validation. Three states: neutral / valid / error.",
          "example_url": "https://originui.com/inputs",
          "lives_at": [
            {
              "label": "Origin UI inputs",
              "url": "https://originui.com/inputs"
            },
            {
              "label": "Stripe checkout",
              "url": "https://stripe.com"
            }
          ],
          "code_id": "Inline validation with state colour"
        },
        {
          "name": "Multi-step with progress arc",
          "summary": "Stripe-style segmented progress. Reduces abandonment vs all-at-once.",
          "example_url": "https://stripe.com",
          "lives_at": [
            {
              "label": "Stripe checkout",
              "url": "https://stripe.com"
            },
            {
              "label": "Typeform",
              "url": "https://www.typeform.com"
            }
          ],
          "code_id": "Multi-step with progress arc"
        },
        {
          "name": "Animated range / price slider",
          "summary": "Spring-physics range input with live value display.",
          "example_url": "https://motion.dev",
          "lives_at": [
            {
              "label": "Motion v12 examples",
              "url": "https://motion.dev"
            }
          ],
          "code_id": "Animated range / price slider"
        },
        {
          "name": "Spreadsheet-style data grid",
          "summary": "Cell editing, virtual scroll, keyboard nav. TanStack Table standard.",
          "example_url": "https://tanstack.com/table",
          "lives_at": [
            {
              "label": "TanStack Table",
              "url": "https://tanstack.com/table"
            },
            {
              "label": "AG Grid",
              "url": "https://www.ag-grid.com"
            }
          ],
          "code_id": "Spreadsheet-style data grid"
        },
        {
          "name": "Date picker primitives",
          "summary": "Shadcn-derived date picker — keyboard accessible, range, presets.",
          "example_url": "https://ui.shadcn.com/docs/components/date-picker",
          "lives_at": [
            {
              "label": "shadcn date picker",
              "url": "https://ui.shadcn.com/docs/components/date-picker"
            }
          ],
          "code_id": "Date picker primitives"
        },
        {
          "name": "Drag-to-reorder list",
          "summary": "dnd-kit / Framer Motion reorder. Standard in dashboards + agent task UI.",
          "example_url": "https://dndkit.com",
          "lives_at": [
            {
              "label": "dnd-kit",
              "url": "https://dndkit.com"
            },
            {
              "label": "Linear task reordering",
              "url": "https://linear.app"
            }
          ],
          "code_id": "Drag-to-reorder list"
        }
      ],
      "fish_for_100_at": [
        {
          "label": "Mobbin web forms section",
          "url": "https://mobbin.com/browse/web/patterns"
        },
        {
          "label": "Origin UI inputs",
          "url": "https://originui.com/inputs"
        },
        {
          "label": "shadcn forms",
          "url": "https://ui.shadcn.com/docs/components/form"
        },
        {
          "label": "Refero filters",
          "url": "https://refero.design"
        }
      ],
      "shortlist": [
        "Inline validation",
        "Multi-step with progress",
        "Date picker primitives",
        "Drag-to-reorder list"
      ],
      "discipline": "ux"
    },
    {
      "id": "state",
      "code": "08",
      "name": "State, Feedback & AI Surfaces",
      "summary": "Loading, empty, error, AI streaming, agent reasoning. The fast-growing category.",
      "techniques": [
        {
          "name": "Skeleton screens",
          "summary": "Layout-shaped grey blocks while data loads. Eliminates layout shift, perceived faster.",
          "example_url": "https://ui.shadcn.com/docs/components/skeleton",
          "lives_at": [
            {
              "label": "shadcn skeleton",
              "url": "https://ui.shadcn.com/docs/components/skeleton"
            },
            {
              "label": "Linear loading states",
              "url": "https://linear.app"
            }
          ],
          "code_id": "Skeleton screens"
        },
        {
          "name": "Streaming text (AI chat)",
          "summary": "Token-by-token text appearance. Vercel AI SDK standard. Now a brand cue.",
          "example_url": "https://chat.vercel.ai",
          "lives_at": [
            {
              "label": "Vercel AI SDK",
              "url": "https://chat.vercel.ai"
            },
            {
              "label": "Claude.ai",
              "url": "https://claude.ai"
            }
          ],
          "code_id": "Streaming text (AI chat)"
        },
        {
          "name": "Tool-call cards (agent UI)",
          "summary": "Collapsible card per tool call in an agent stream. Inline result preview.",
          "example_url": "https://v0.dev",
          "lives_at": [
            {
              "label": "v0.dev",
              "url": "https://v0.dev"
            },
            {
              "label": "Claude Code transcripts",
              "url": "https://docs.claude.com"
            }
          ],
          "code_id": "Tool-call cards (agent UI)"
        },
        {
          "name": "Toast / Sonner notifications",
          "summary": "Stacked, dismissible, queued toasts. Emil Kowalski's Sonner is now ubiquitous.",
          "example_url": "https://sonner.emilkowal.ski",
          "lives_at": [
            {
              "label": "Sonner",
              "url": "https://sonner.emilkowal.ski"
            },
            {
              "label": "shadcn toast",
              "url": "https://ui.shadcn.com/docs/components/sonner"
            }
          ],
          "code_id": "Toast / Sonner notifications"
        },
        {
          "name": "Empty state with illustration + action",
          "summary": "First-run zero-state with named CTA. Linear's pattern is the textbook.",
          "example_url": "https://linear.app",
          "lives_at": [
            {
              "label": "Linear empty states",
              "url": "https://linear.app"
            },
            {
              "label": "Notion empty states",
              "url": "https://www.notion.so"
            }
          ],
          "code_id": "Empty state with illustration + action"
        },
        {
          "name": "Loading shimmer (Pulse)",
          "summary": "Animated gradient sweep across skeleton blocks.",
          "example_url": "https://ui.shadcn.com/docs/components/skeleton",
          "lives_at": [
            {
              "label": "shadcn skeleton",
              "url": "https://ui.shadcn.com/docs/components/skeleton"
            }
          ],
          "code_id": "Loading shimmer (Pulse)"
        },
        {
          "name": "Streaming markdown render",
          "summary": "Render in-progress markdown as tokens arrive — code blocks, lists, tables.",
          "example_url": "https://chat.vercel.ai",
          "lives_at": [
            {
              "label": "Vercel AI SDK",
              "url": "https://chat.vercel.ai"
            },
            {
              "label": "Claude.ai",
              "url": "https://claude.ai"
            }
          ],
          "code_id": "Streaming markdown render"
        },
        {
          "name": "Optimistic UI with rollback",
          "summary": "Action applies immediately; rolls back on server error. Modern app default.",
          "example_url": "https://linear.app",
          "lives_at": [
            {
              "label": "Linear",
              "url": "https://linear.app"
            },
            {
              "label": "Vercel dashboard",
              "url": "https://vercel.com"
            }
          ],
          "code_id": "Optimistic UI with rollback"
        }
      ],
      "fish_for_100_at": [
        {
          "label": "Vercel AI SDK chat examples",
          "url": "https://chat.vercel.ai"
        },
        {
          "label": "v0.dev (agent UI reference)",
          "url": "https://v0.dev"
        },
        {
          "label": "Mobbin empty-state pattern browse",
          "url": "https://mobbin.com/browse/web/patterns"
        },
        {
          "label": "Page Flows onboarding archive",
          "url": "https://pageflows.com"
        }
      ],
      "shortlist": [
        "Streaming text",
        "Tool-call cards",
        "Skeleton screens",
        "Sonner toasts"
      ],
      "discipline": "ux"
    },
    {
      "id": "wordmarks",
      "code": "01",
      "discipline": "logo",
      "name": "Wordmarks",
      "summary": "Pure-type marks. Pentagram-class. Custom-cut letterforms, weight studies, kerning systems.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "monograms",
      "code": "02",
      "discipline": "logo",
      "name": "Monograms & Letterforms",
      "summary": "Single letter, ligatures, two-letter combinations. Heritage marks.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "pictorial",
      "code": "03",
      "discipline": "logo",
      "name": "Pictorial Marks",
      "summary": "Figurative — recognisable object simplified to mark.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "abstract",
      "code": "04",
      "discipline": "logo",
      "name": "Abstract & Symbolic Marks",
      "summary": "Non-representational. Pure geometric symbol. Nike-swoosh class.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "lockups",
      "code": "05",
      "discipline": "logo",
      "name": "Combination Marks & Lockups",
      "summary": "Wordmark + symbol relationships. Primary, secondary, horizontal, stacked.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "responsive-marks",
      "code": "06",
      "discipline": "logo",
      "name": "Responsive & Adaptive Marks",
      "summary": "Identities that scale across contexts. Heydays / DesignStudio / Manual lineage.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "generative-id",
      "code": "07",
      "discipline": "logo",
      "name": "Generative & System Identities",
      "summary": "Flexible identity systems. Wolff Olins, MetaHaven, Studio Dumbar.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "motion-id",
      "code": "08",
      "discipline": "logo",
      "name": "Motion Identities",
      "summary": "Animated marks — title sequences for the brand itself.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "sub-brand",
      "code": "09",
      "discipline": "logo",
      "name": "Sub-brand & Family Systems",
      "summary": "How a master mark spawns variants — sub-brands, product lines, regional marks.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "brand-films",
      "code": "01",
      "discipline": "video",
      "name": "Brand Films",
      "summary": "Cinematic, 60s+. Anthem pieces. The 'manifesto' film.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "commercials",
      "code": "02",
      "discipline": "video",
      "name": "Commercials & Spots",
      "summary": "Broadcast-shaped 15/30/60s. Single-message work.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "social-verticals",
      "code": "03",
      "discipline": "video",
      "name": "Social Verticals",
      "summary": "Reels / Shorts / TikTok-native 9:16. Hook-led, sound-on optional.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "product-films",
      "code": "04",
      "discipline": "video",
      "name": "Product & Explainer Films",
      "summary": "Demos, walkthroughs, 'how this works' films.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "testimonial-films",
      "code": "05",
      "discipline": "video",
      "name": "Testimonial & Case-study Films",
      "summary": "Customer-led narrative. The Articulate GIG-reel pattern.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "motion-graphics",
      "code": "06",
      "discipline": "video",
      "name": "Motion Graphics & Kinetic Type",
      "summary": "Animated info, typography in motion, info-graphic films.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "titles-openers",
      "code": "07",
      "discipline": "video",
      "name": "Title Sequences & Openers",
      "summary": "Saul Bass lineage. Show titles, film openers, branded intros.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "ai-video",
      "code": "08",
      "discipline": "video",
      "name": "AI-generated Video",
      "summary": "Higgsfield, Kling, Runway, Sora-class output. The 2026 frontier.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "documentary",
      "code": "09",
      "discipline": "video",
      "name": "Documentary & Long-form",
      "summary": "5min+ narrative work. Brand documentary. Founder films.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "print-ads",
      "code": "01",
      "discipline": "ad",
      "name": "Print Ads",
      "summary": "Magazine, broadsheet, FT-Weekend-class. The discipline Ogilvy built.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "ooh",
      "code": "02",
      "discipline": "ad",
      "name": "Out-of-home (OOH)",
      "summary": "Billboards, transit, posters, environmental. The 6-second discipline.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "digital-display",
      "code": "03",
      "discipline": "ad",
      "name": "Digital Display",
      "summary": "Banners, programmatic, IAB-standard. Performance discipline.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "social-static",
      "code": "04",
      "discipline": "ad",
      "name": "Social Static & Carousel",
      "summary": "Paid + organic single-frame ads on IG / LI / FB / X.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "social-video-ads",
      "code": "05",
      "discipline": "ad",
      "name": "Social Video Ads",
      "summary": "6/15/30s paid placements. Vertical + horizontal.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "native-advertorial",
      "code": "06",
      "discipline": "ad",
      "name": "Native & Advertorial",
      "summary": "Sponsored content that reads as editorial. The branded-feature pattern.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "audio-ads",
      "code": "07",
      "discipline": "ad",
      "name": "Audio Ads",
      "summary": "Radio + podcast + Spotify. Sound-only craft.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "performance-creative",
      "code": "08",
      "discipline": "ad",
      "name": "Performance / DR Creative",
      "summary": "Direct-response ads, conversion-led. The Clicksco discipline.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "long-copy",
      "code": "09",
      "discipline": "ad",
      "name": "Long-copy & Heritage Ads",
      "summary": "Ogilvy 'At 60 miles an hour' lineage. Body-copy as craft.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "brand-campaigns",
      "code": "01",
      "discipline": "campaign",
      "name": "Brand Campaigns",
      "summary": "Long-arc awareness work. 'Always' / 'Real Beauty' / 'Just Do It' lineage.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "product-launches",
      "code": "02",
      "discipline": "campaign",
      "name": "Product Launches",
      "summary": "New-product introductions. Apple-keynote-class moment design.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "always-on",
      "code": "03",
      "discipline": "campaign",
      "name": "Always-on Content Series",
      "summary": "Recurring formats. Mailchimp's recurring craft.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "perf-campaigns",
      "code": "04",
      "discipline": "campaign",
      "name": "Performance Campaigns",
      "summary": "Funnel-shaped, conversion-led, multi-touch.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "cultural",
      "code": "05",
      "discipline": "campaign",
      "name": "Cultural & Moment Campaigns",
      "summary": "Super Bowl, holiday, sports-tentpole, news-jacking.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "b2b-vertical",
      "code": "06",
      "discipline": "campaign",
      "name": "B2B & Vertical Campaigns",
      "summary": "Long-cycle sales-led work. The Articulate own-business archetype.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "pr-led",
      "code": "07",
      "discipline": "campaign",
      "name": "PR-led & Earned Campaigns",
      "summary": "Story-first, paid-amplified-after.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "influencer-partnership",
      "code": "08",
      "discipline": "campaign",
      "name": "Influencer & Partnership",
      "summary": "Creator-led, co-branded execution.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    },
    {
      "id": "integrated",
      "code": "09",
      "discipline": "campaign",
      "name": "Integrated Multi-channel",
      "summary": "Master case studies — 'Dove Real Beauty across 12 touchpoints' lineage.",
      "techniques": [],
      "fish_for_100_at": [],
      "shortlist": []
    }
  ],
  "entries": [
    {
      "id": "rauno-freiberg",
      "kind": "design-engineer",
      "name": "Rauno Freiberg",
      "schtick": "Devour the details.",
      "role": "Staff design engineer · Vercel",
      "categories": [
        "motion",
        "nav",
        "transitions"
      ],
      "primary_url": "https://rauno.me",
      "links": [
        {
          "label": "rauno.me",
          "url": "https://rauno.me"
        },
        {
          "label": "Devouring Details",
          "url": "https://devouringdetails.com"
        },
        {
          "label": "X",
          "url": "https://x.com/raunofreiberg"
        }
      ],
      "notes": "The single most-copied portfolio of the year. Author of Devouring Details — the interaction-quality manual.",
      "bio": "Estonian design engineer based in NYC. Joined Vercel from Framer in 2022. His personal site rauno.me became the single most-studied design-engineer portfolio of 2025-26 — every micro-interaction documented, every easing curve named.",
      "thesis": "Interaction quality is the new typography — and it's everyone's job to learn it.",
      "magic": [
        "Treats every transition as a tiny film cut",
        "Documents his own easing curves like emotional vocabulary",
        "Ships demos with the source visible — every detail is teachable",
        "Refuses to release until it feels inevitable"
      ],
      "works": [
        {
          "label": "rauno.me — portfolio",
          "url": "https://rauno.me",
          "what": "The reference portfolio. Every animation hand-tuned."
        },
        {
          "label": "Devouring Details",
          "url": "https://devouringdetails.com",
          "what": "His ongoing interaction-design manual."
        },
        {
          "label": "Vercel Geist",
          "url": "https://vercel.com/geist/introduction",
          "what": "Contributions to Vercel's design system."
        },
        {
          "label": "rauno.me/craft — writeups",
          "url": "https://rauno.me",
          "what": "His writeups on shipped product details (linked from rauno.me)."
        }
      ],
      "quotes": [
        {
          "text": "Build until you feel there's nothing more to add.",
          "by": "Rauno Freiberg",
          "source": "Dive Club interview, 2025"
        },
        {
          "text": "His portfolio is the single most-copied site of the year.",
          "by": "UX Tools annual review",
          "source": "uxtools.co 2026"
        }
      ]
    },
    {
      "id": "emil-kowalski",
      "kind": "design-engineer",
      "name": "Emil Kowalski",
      "schtick": "Spring physics, by the gram.",
      "role": "Design engineer · Linear",
      "categories": [
        "motion",
        "state",
        "transitions"
      ],
      "primary_url": "https://emilkowal.ski",
      "links": [
        {
          "label": "emilkowal.ski",
          "url": "https://emilkowal.ski"
        },
        {
          "label": "animations.dev (course)",
          "url": "https://animations.dev"
        },
        {
          "label": "Sonner",
          "url": "https://sonner.emilkowal.ski"
        },
        {
          "label": "Vaul",
          "url": "https://vaul.emilkowal.ski"
        },
        {
          "label": "X",
          "url": "https://x.com/emilkowalski_"
        }
      ],
      "notes": "animations.dev productised his spring-physics doctrine. Sonner + Vaul ship in half the Vercel-orbit web.",
      "bio": "Polish design engineer at Linear. Author of Sonner (the toast component everyone copies) and Vaul (the drawer). His paid course animations.dev productised his spring-physics doctrine into a $200 manual that 10k+ designers paid for.",
      "thesis": "Spring physics — not duration — is the right vocabulary for product animation.",
      "magic": [
        "Spring stiffness as a UX decision, not a default",
        "Component primitives that ship as <100-line libraries",
        "Every Sonner toast feels like it overshoots and settles",
        "Course-as-distribution — taste packaged for sale"
      ],
      "works": [
        {
          "label": "animations.dev — the course",
          "url": "https://animations.dev",
          "what": "$200 spring-physics textbook."
        },
        {
          "label": "Sonner — toast library",
          "url": "https://sonner.emilkowal.ski",
          "what": "The toast everyone copies. Used by half of Vercel-orbit."
        },
        {
          "label": "Vaul — drawer",
          "url": "https://vaul.emilkowal.ski",
          "what": "Bottom-sheet drawer primitive."
        },
        {
          "label": "emilkowal.ski — portfolio",
          "url": "https://emilkowal.ski",
          "what": "Personal site. Shipped as a manifesto."
        }
      ],
      "quotes": [
        {
          "text": "Easing is a feeling, not a number.",
          "by": "Emil Kowalski",
          "source": "animations.dev intro"
        }
      ]
    },
    {
      "id": "jhey-tompkins",
      "kind": "design-engineer",
      "name": "Jhey Tompkins",
      "schtick": "\"Wait, you can do that with one CSS property?\"",
      "role": "DevRel · GSAP / freelance",
      "categories": [
        "motion",
        "type",
        "transitions"
      ],
      "primary_url": "https://jhey.dev",
      "links": [
        {
          "label": "jhey.dev",
          "url": "https://jhey.dev"
        },
        {
          "label": "X",
          "url": "https://x.com/jh3yy"
        },
        {
          "label": "CodePen",
          "url": "https://codepen.io/jh3y"
        }
      ],
      "notes": "Every CSS magic-trick demo on X has his signature.",
      "bio": "UK-based developer advocate at GSAP, formerly Google. Famous for CSS demos that go viral on X — typically a single CSS property doing something unexpected. His CodePen is the largest single source of \"wait, you can do that?\" moments in modern frontend.",
      "thesis": "CSS is more powerful than you think. Show, don't tell.",
      "magic": [
        "One-property surprise demos that fit in a tweet",
        "Sneaker-designer attention to small visual details",
        "Open CodePens — copy-paste-able, learnable",
        "GSAP + CSS hybrid choreography"
      ],
      "works": [
        {
          "label": "jhey.dev — portfolio",
          "url": "https://jhey.dev",
          "what": "Personal site."
        },
        {
          "label": "CodePen profile",
          "url": "https://codepen.io/jh3y",
          "what": "Hundreds of open demos."
        },
        {
          "label": "@jh3yy on X",
          "url": "https://x.com/jh3yy",
          "what": "Where the daily CSS-magic ships."
        }
      ],
      "quotes": [
        {
          "text": "Jhey is what you'd get if you combined a sneaker designer with a front-end engineer.",
          "by": "Designer Tom",
          "source": "Instagram, Mar 2025"
        }
      ]
    },
    {
      "id": "paco-coursey",
      "kind": "design-engineer",
      "name": "Paco Coursey",
      "schtick": "The command bar, fixed for everyone.",
      "role": "Design engineer · Vercel (ex-Family)",
      "categories": [
        "nav",
        "motion"
      ],
      "primary_url": "https://paco.me",
      "links": [
        {
          "label": "paco.me",
          "url": "https://paco.me"
        },
        {
          "label": "cmdk",
          "url": "https://cmdk.paco.me"
        }
      ],
      "notes": "cmdk fixed nav for half the SaaS web. Vaul co-author.",
      "bio": "Design engineer at Vercel, previously at Family. Authored cmdk — the command-palette primitive now table-stakes in every modern SaaS tool. Co-author of Vaul. His personal site paco.me is the long-running case study for design-engineering as a craft.",
      "thesis": "The command bar is the new home screen. Build for keyboard-first power users.",
      "magic": [
        "cmdk as the keyboard-first interface backbone",
        "Composable component primitives over monolithic libs",
        "Personal site as engineering proof",
        "Animation tuned by ear, then locked"
      ],
      "works": [
        {
          "label": "cmdk — the primitive",
          "url": "https://cmdk.paco.me",
          "what": "Command palette for half the SaaS web."
        },
        {
          "label": "paco.me — portfolio",
          "url": "https://paco.me",
          "what": "Long-running personal craft showcase."
        },
        {
          "label": "Vaul co-author",
          "url": "https://vaul.emilkowal.ski",
          "what": "Bottom-sheet drawer with Emil Kowalski."
        }
      ],
      "quotes": [
        {
          "text": "Make it feel inevitable.",
          "by": "Paco Coursey",
          "source": "paco.me"
        }
      ]
    },
    {
      "id": "shadcn",
      "kind": "design-engineer",
      "name": "shadcn",
      "schtick": "Copy-paste, you own the source.",
      "role": "Designer · Vercel",
      "categories": [
        "layout",
        "forms",
        "state"
      ],
      "primary_url": "https://ui.shadcn.com",
      "links": [
        {
          "label": "ui.shadcn.com",
          "url": "https://ui.shadcn.com"
        },
        {
          "label": "X",
          "url": "https://x.com/shadcn"
        }
      ],
      "notes": "Invented the distribution model the rest of the marketplace mimics.",
      "bio": "Vercel designer. Pseudonymous online. Single-handedly broke the component-library distribution model with shadcn/ui — instead of npm-installing a black-box dependency, you copy-paste source you own forever. Subsequently shipped v0.dev, the AI-component generator.",
      "thesis": "Own your source. Component libraries should be starting points, not lifetime dependencies.",
      "magic": [
        "Copy-paste-not-install distribution",
        "CLI-based component installation (npx shadcn add button)",
        "Radix primitives + Tailwind as the substrate the whole new wave sits on",
        "Open-source the registry; everyone else's library extends it"
      ],
      "works": [
        {
          "label": "ui.shadcn.com — the library",
          "url": "https://ui.shadcn.com",
          "what": "The substrate of the 2026 component-shop economy."
        },
        {
          "label": "v0.dev — AI generator",
          "url": "https://v0.dev",
          "what": "Vercel's AI UI generation tool, built on shadcn."
        },
        {
          "label": "Taxonomy — example app",
          "url": "https://tx.shadcn.com",
          "what": "Reference Next.js application."
        },
        {
          "label": "shadcn registry",
          "url": "https://ui.shadcn.com/docs/registry",
          "what": "Standard for sharing components."
        }
      ],
      "quotes": [
        {
          "text": "I don't even consider this a component library. It's a collection of re-usable components that you can copy and paste into your apps.",
          "by": "shadcn",
          "source": "ui.shadcn.com"
        }
      ]
    },
    {
      "id": "lee-robinson",
      "kind": "design-engineer",
      "name": "Lee Robinson",
      "schtick": "\"This is how we ship.\"",
      "role": "VP DX · Vercel",
      "categories": [
        "layout",
        "transitions"
      ],
      "primary_url": "https://leerob.com",
      "links": [
        {
          "label": "leerob.com",
          "url": "https://leerob.com"
        },
        {
          "label": "X",
          "url": "https://x.com/leeerob"
        }
      ],
      "notes": "Most-shared essays on the Vercel-stack design canon."
    },
    {
      "id": "karri-saarinen",
      "kind": "design-engineer",
      "name": "Karri Saarinen",
      "schtick": "Linear's calm-precision standard.",
      "role": "Co-founder · Linear",
      "categories": [
        "layout",
        "state",
        "nav"
      ],
      "primary_url": "https://karrisaarinen.com",
      "links": [
        {
          "label": "karrisaarinen.com",
          "url": "https://karrisaarinen.com"
        },
        {
          "label": "X",
          "url": "https://x.com/karrisaarinen"
        },
        {
          "label": "Linear",
          "url": "https://linear.app"
        }
      ],
      "notes": "Set the calm-precision aesthetic that the entire B2B-SaaS new wave now copies.",
      "bio": "Finnish co-founder of Linear and ex-Airbnb design lead. Set Linear's calm-precision aesthetic — neutral palette, tight type, no decoration — which has since become the default visual register for every modern B2B SaaS tool. The reason your competitor's app looks just like Linear.",
      "thesis": "Restraint is the differentiator. Calm interfaces feel professional.",
      "magic": [
        "Greyscale-first colour discipline",
        "Tight typographic hierarchy at small sizes",
        "Optimistic UI as a brand cue, not an optimisation",
        "Build for power users; let the rest catch up"
      ],
      "works": [
        {
          "label": "Linear — the product",
          "url": "https://linear.app",
          "what": "The reference modern B2B tool."
        },
        {
          "label": "karrisaarinen.com",
          "url": "https://karrisaarinen.com",
          "what": "Personal site + writing."
        },
        {
          "label": "Linear's design system",
          "url": "https://linear.app/method",
          "what": "Linear Method — published design principles."
        }
      ],
      "quotes": [
        {
          "text": "We obsess over the details so our customers don't have to.",
          "by": "Karri Saarinen",
          "source": "Linear blog"
        }
      ]
    },
    {
      "id": "brian-lovin",
      "kind": "design-engineer",
      "name": "Brian Lovin",
      "schtick": "Design-engineering, narrated.",
      "role": "Design engineer · Vercel (ex-Campsite, ex-GitHub)",
      "categories": [
        "layout",
        "nav"
      ],
      "primary_url": "https://brianlovin.com",
      "links": [
        {
          "label": "brianlovin.com",
          "url": "https://brianlovin.com"
        },
        {
          "label": "X",
          "url": "https://x.com/brian_lovin"
        },
        {
          "label": "Design Details (podcast)",
          "url": "https://designdetails.fm"
        }
      ],
      "notes": "Personal site is a long-running case study of design-engineering in public."
    },
    {
      "id": "basement-studio",
      "kind": "studio-webgl",
      "name": "basement.studio",
      "schtick": "WebGL hero ceiling for SaaS.",
      "role": "Studio · Toronto / Buenos Aires",
      "categories": [
        "immersive",
        "transitions",
        "layout"
      ],
      "primary_url": "https://basement.studio",
      "links": [
        {
          "label": "basement.studio",
          "url": "https://basement.studio"
        }
      ],
      "notes": "Cursor, Replicate, Stripe work set the 2025-26 SaaS hero ceiling.",
      "bio": "Web studio with offices in Buenos Aires and Toronto. Founded 2020. Their work for Cursor, Replicate, Stripe and Resend defined the SaaS hero-section ceiling in 2025-26 — WebGL shader beds, scroll-narrative product reveals, the look every other studio is now reverse-engineering.",
      "thesis": "Marketing sites should ship like products. The hero is the pitch.",
      "magic": [
        "WebGL gradient beds as default hero treatment",
        "Scroll as cinematography",
        "Custom shader work, not Spline embeds",
        "Tightly-paired with the developer-tools wave"
      ],
      "works": [
        {
          "label": "basement.studio — portfolio",
          "url": "https://basement.studio",
          "what": "Their own site is the proof."
        },
        {
          "label": "Cursor.com (their work)",
          "url": "https://www.cursor.com",
          "what": "Reference AI-coder hero."
        },
        {
          "label": "Replicate.com (their work)",
          "url": "https://replicate.com",
          "what": "Reference inference-platform hero."
        },
        {
          "label": "Resend.com (their work)",
          "url": "https://resend.com",
          "what": "Reference email-API hero."
        }
      ],
      "quotes": [
        {
          "text": "basement.studio set the 2025-26 SaaS hero-section ceiling.",
          "by": "Articulate hype-radar",
          "source": "internal"
        }
      ]
    },
    {
      "id": "lusion",
      "kind": "studio-webgl",
      "name": "Lusion",
      "schtick": "Magic microsites.",
      "role": "Studio · Toronto",
      "categories": [
        "immersive",
        "transitions"
      ],
      "primary_url": "https://lusion.co",
      "links": [
        {
          "label": "lusion.co",
          "url": "https://lusion.co"
        }
      ],
      "notes": "The Whirl, Anatomy of an AI Assistant.",
      "bio": "Toronto-based magical-microsite studio. The Whirl. Anatomy of an AI Assistant. Their work is the answer to \"can a website feel like a feature film?\" Big-budget brand microsite specialists; if Awwwards gave a Best Microsite category, they'd win it most years.",
      "thesis": "Microsites can be cinema. Don't compromise.",
      "magic": [
        "Custom Three.js scenes per project",
        "Sound + motion choreographed together",
        "Long-form scroll-narrative as the structure",
        "No template work — every project bespoke"
      ],
      "works": [
        {
          "label": "lusion.co — portfolio",
          "url": "https://lusion.co",
          "what": "Studio site — proof in itself."
        },
        {
          "label": "The Whirl",
          "url": "https://thewhirl.lusion.co",
          "what": "Their flagship interactive scene."
        },
        {
          "label": "Anatomy of an AI Assistant",
          "url": "https://lusion.co",
          "what": "Linked from their portfolio — major microsite work."
        }
      ],
      "quotes": []
    },
    {
      "id": "14islands",
      "kind": "studio-scroll",
      "name": "14islands",
      "schtick": "Scroll like a film cut.",
      "role": "Studio · Lisbon / Stockholm",
      "categories": [
        "transitions",
        "immersive"
      ],
      "primary_url": "https://14islands.com",
      "links": [
        {
          "label": "14islands.com",
          "url": "https://14islands.com"
        },
        {
          "label": "Lenis (via Darkroom)",
          "url": "https://lenis.darkroom.engineering"
        }
      ],
      "notes": "Author of Lenis. Studio under nine of ten Awwwards SOTY.",
      "bio": "Frontend-craft studio with offices in Lisbon and Stockholm. Authors of Lenis (via their R&D arm Darkroom) — the smooth-scroll library now under nine out of ten Awwwards Site of the Year winners. Long-running, quiet, prolific.",
      "thesis": "Scroll is the most underused control on the web. Treat it like a film cut.",
      "magic": [
        "Lenis as the standard inertial-scroll baseline",
        "Scroll-linked storytelling as a core narrative format",
        "Frontend craft as a public discipline",
        "Lab-style R&D arm (Darkroom)"
      ],
      "works": [
        {
          "label": "14islands.com — portfolio",
          "url": "https://14islands.com",
          "what": "Studio site."
        },
        {
          "label": "Lenis (via Darkroom)",
          "url": "https://lenis.darkroom.engineering",
          "what": "The scroll library everyone uses."
        },
        {
          "label": "Darkroom Engineering",
          "url": "https://darkroom.engineering",
          "what": "Their R&D + open-source arm."
        }
      ],
      "quotes": []
    },
    {
      "id": "active-theory",
      "kind": "studio-webgl",
      "name": "Active Theory",
      "schtick": "Webby-cabinet immersive work.",
      "role": "Studio · LA",
      "categories": [
        "immersive"
      ],
      "primary_url": "https://activetheory.net",
      "links": [
        {
          "label": "activetheory.net",
          "url": "https://activetheory.net"
        }
      ],
      "notes": "Long-running immersive specialist. Big-budget brand microsites."
    },
    {
      "id": "locomotive",
      "kind": "studio-scroll",
      "name": "Locomotive",
      "schtick": "Repeat SOTY winners.",
      "role": "Studio · Montreal",
      "categories": [
        "transitions"
      ],
      "primary_url": "https://locomotive.ca",
      "links": [
        {
          "label": "locomotive.ca",
          "url": "https://locomotive.ca"
        },
        {
          "label": "Locomotive Scroll",
          "url": "https://github.com/locomotivemtl/locomotive-scroll"
        }
      ]
    },
    {
      "id": "uncommon",
      "kind": "studio-brand",
      "name": "Uncommon",
      "schtick": "Brand IS the website.",
      "role": "Studio · London",
      "categories": [
        "type",
        "layout"
      ],
      "primary_url": "https://uncommon.studio",
      "links": [
        {
          "label": "uncommon.studio",
          "url": "https://uncommon.studio"
        }
      ],
      "notes": "Typographic web identity (Deliveroo, Tony's, Bumble). Strong Articulate-serif reference.",
      "bio": "London brand-identity studio. Behind Deliveroo's rebrand, Tony's Chocolonely, Bumble. They made type-led identity a thing again — the bold-wordmark-plus-quiet-supporting-system that defined editorial brand work in the late 2010s and early 2020s.",
      "thesis": "Brand is type. Get the wordmark right, the rest follows.",
      "magic": [
        "Custom wordmarks over off-the-shelf type",
        "Editorial colour palettes (warm, restrained)",
        "Brand as a publishing system, not a logo",
        "Strong cross-medium discipline — pixel + print"
      ],
      "works": [
        {
          "label": "uncommon.studio — portfolio",
          "url": "https://uncommon.studio",
          "what": "Studio site — typographic identity built in."
        },
        {
          "label": "Deliveroo rebrand (case)",
          "url": "https://uncommon.studio/work",
          "what": "Their highest-profile B2C rebrand."
        },
        {
          "label": "Tony's Chocolonely (case)",
          "url": "https://uncommon.studio/work",
          "what": "Brand-as-publishing-system reference."
        }
      ],
      "quotes": [
        {
          "text": "Type is brand. Everything else is dressing.",
          "by": "Uncommon (paraphrase)",
          "source": "uncommon.studio"
        }
      ]
    },
    {
      "id": "hoodzpah",
      "kind": "studio-brand",
      "name": "Hoodzpah",
      "schtick": "Type-led identity. Works in print + pixels.",
      "role": "Studio · LA",
      "categories": [
        "type",
        "layout"
      ],
      "primary_url": "https://hoodzpah.com",
      "links": [
        {
          "label": "hoodzpah.com",
          "url": "https://hoodzpah.com"
        }
      ]
    },
    {
      "id": "dia-studio",
      "kind": "studio-brand",
      "name": "DIA Studio",
      "schtick": "Kinetic-type masters.",
      "role": "Studio · NYC",
      "categories": [
        "type",
        "immersive"
      ],
      "primary_url": "https://dia.tv",
      "links": [
        {
          "label": "dia.tv",
          "url": "https://dia.tv"
        }
      ],
      "notes": "Variable-font and kinetic-type pioneer. Reference for type that moves."
    },
    {
      "id": "josh-comeau",
      "kind": "author",
      "name": "Josh Comeau",
      "schtick": "CSS, taught with delight.",
      "role": "Author + educator",
      "categories": [
        "motion",
        "type",
        "transitions"
      ],
      "primary_url": "https://www.joshwcomeau.com",
      "links": [
        {
          "label": "joshwcomeau.com",
          "url": "https://www.joshwcomeau.com"
        },
        {
          "label": "CSS for JS",
          "url": "https://css-for-js.dev"
        }
      ],
      "notes": "CSS for JS Developers — the most-recommended modern CSS course."
    },
    {
      "id": "andy-bell",
      "kind": "author",
      "name": "Andy Bell",
      "schtick": "Build excellent websites.",
      "role": "Author · Set Studio",
      "categories": [
        "layout",
        "type"
      ],
      "primary_url": "https://buildexcellentwebsit.es",
      "links": [
        {
          "label": "buildexcellentwebsit.es",
          "url": "https://buildexcellentwebsit.es"
        },
        {
          "label": "Set Studio",
          "url": "https://set.studio"
        }
      ],
      "notes": "CUBE CSS, every-layout co-author. Frontend fundamentals authority."
    },
    {
      "id": "steve-schoger",
      "kind": "author",
      "name": "Steve Schoger + Adam Wathan",
      "schtick": "Refactor your UI.",
      "role": "Authors · Tailwind Labs",
      "categories": [
        "layout",
        "type",
        "forms"
      ],
      "primary_url": "https://www.refactoringui.com",
      "links": [
        {
          "label": "Refactoring UI",
          "url": "https://www.refactoringui.com"
        },
        {
          "label": "Tailwind UI",
          "url": "https://tailwindui.com"
        },
        {
          "label": "Tailwind CSS",
          "url": "https://tailwindcss.com"
        }
      ],
      "notes": "Refactoring UI ($149) — the textbook. Tailwind UI subscription is the seal-of-approval template kit."
    },
    {
      "id": "sam-selikoff",
      "kind": "author",
      "name": "Sam Selikoff",
      "schtick": "Build UI, on camera.",
      "role": "Author · Build UI",
      "categories": [
        "motion",
        "transitions"
      ],
      "primary_url": "https://buildui.com",
      "links": [
        {
          "label": "buildui.com",
          "url": "https://buildui.com"
        }
      ],
      "notes": "Long-form video courses building real Motion + React UI from scratch."
    },
    {
      "id": "design-spells",
      "kind": "curator",
      "name": "Design Spells",
      "schtick": "Easter eggs & seemingly extra details.",
      "role": "Newcomer · biweekly newsletter",
      "categories": [
        "motion",
        "state"
      ],
      "primary_url": "https://designspells.com",
      "links": [
        {
          "label": "designspells.com",
          "url": "https://designspells.com"
        },
        {
          "label": "Product Hunt",
          "url": "https://www.producthunt.com/products/design-spells"
        },
        {
          "label": "Founder Wyatt Feaster",
          "url": "https://www.linkedin.com/in/wyattfeaster"
        }
      ]
    },
    {
      "id": "sidebar",
      "kind": "curator",
      "name": "Sidebar",
      "schtick": "Five links a day since 2012.",
      "role": "Curator · veteran",
      "categories": [
        "nav",
        "layout",
        "type"
      ],
      "primary_url": "https://sidebar.io",
      "links": [
        {
          "label": "sidebar.io",
          "url": "https://sidebar.io"
        },
        {
          "label": "Sacha Greif",
          "url": "https://x.com/sachagreif"
        }
      ]
    },
    {
      "id": "toools-design",
      "kind": "curator",
      "name": "toools.design",
      "schtick": "The curator of curators.",
      "role": "Meta-curator · 2026 master list",
      "categories": [
        "nav",
        "layout",
        "type",
        "motion"
      ],
      "primary_url": "https://www.toools.design",
      "links": [
        {
          "label": "toools.design",
          "url": "https://www.toools.design"
        },
        {
          "label": "Inspiration sites list",
          "url": "https://www.toools.design/ui-web-design-inspiration-websites"
        },
        {
          "label": "Best design newsletters 2026",
          "url": "https://www.toools.design/blog-posts/best-design-newsletters"
        }
      ]
    },
    {
      "id": "ux-collective",
      "kind": "curator",
      "name": "UX Collective",
      "schtick": "The Substack of record.",
      "role": "Newsletter · Fabricio Teixeira",
      "categories": [
        "layout",
        "forms",
        "state"
      ],
      "primary_url": "https://uxdesign.cc",
      "links": [
        {
          "label": "uxdesign.cc",
          "url": "https://uxdesign.cc"
        }
      ]
    },
    {
      "id": "figmalion",
      "kind": "curator",
      "name": "Figmalion",
      "schtick": "Cool thing of the week.",
      "role": "Newsletter",
      "categories": [
        "motion",
        "nav",
        "layout"
      ],
      "primary_url": "https://figmalion.com",
      "links": [
        {
          "label": "figmalion.com",
          "url": "https://figmalion.com"
        }
      ]
    },
    {
      "id": "mobbin",
      "kind": "showcase",
      "name": "Mobbin",
      "schtick": "1,000 iOS apps. 400 web. 8,000 screens.",
      "role": "Subscription · $15/mo",
      "categories": [
        "nav",
        "layout",
        "forms",
        "state"
      ],
      "primary_url": "https://mobbin.com",
      "links": [
        {
          "label": "mobbin.com",
          "url": "https://mobbin.com"
        }
      ],
      "notes": "Default reference layer. Standing Articulate sub."
    },
    {
      "id": "godly",
      "kind": "showcase",
      "name": "Godly",
      "schtick": "Inspiration that's actually inspiring.",
      "role": "Curated gallery",
      "categories": [
        "layout",
        "immersive",
        "type"
      ],
      "primary_url": "https://godly.website",
      "links": [
        {
          "label": "godly.website",
          "url": "https://godly.website"
        }
      ]
    },
    {
      "id": "cosmos",
      "kind": "showcase",
      "name": "Cosmos",
      "schtick": "Pinterest for designers with taste.",
      "role": "Curated library",
      "categories": [
        "layout",
        "type",
        "immersive"
      ],
      "primary_url": "https://cosmos.so",
      "links": [
        {
          "label": "cosmos.so",
          "url": "https://cosmos.so"
        }
      ]
    },
    {
      "id": "refero",
      "kind": "showcase",
      "name": "Refero",
      "schtick": "Patterns & pages, filterable.",
      "role": "Newcomer · PH darling",
      "categories": [
        "nav",
        "layout",
        "forms"
      ],
      "primary_url": "https://refero.design",
      "links": [
        {
          "label": "refero.design",
          "url": "https://refero.design"
        }
      ]
    },
    {
      "id": "dark-design",
      "kind": "showcase",
      "name": "Dark.Design",
      "schtick": "Dark mode only. No exceptions.",
      "role": "Newcomer · niche curator",
      "categories": [
        "layout",
        "type"
      ],
      "primary_url": "https://dark.design",
      "links": [
        {
          "label": "dark.design",
          "url": "https://dark.design"
        }
      ]
    },
    {
      "id": "page-flows",
      "kind": "showcase",
      "name": "Page Flows",
      "schtick": "Watch the flow, don't screenshot it.",
      "role": "Curated · recorded flows",
      "categories": [
        "forms",
        "state",
        "nav"
      ],
      "primary_url": "https://pageflows.com",
      "links": [
        {
          "label": "pageflows.com",
          "url": "https://pageflows.com"
        }
      ]
    },
    {
      "id": "saas-pages",
      "kind": "showcase",
      "name": "SaaS Pages",
      "schtick": "Hero, pricing, footer — section by section.",
      "role": "Curated · SaaS specific",
      "categories": [
        "layout"
      ],
      "primary_url": "https://saaspages.xyz",
      "links": [
        {
          "label": "saaspages.xyz",
          "url": "https://saaspages.xyz"
        }
      ]
    },
    {
      "id": "land-book",
      "kind": "showcase",
      "name": "Land-book",
      "schtick": "7,000 landing pages, tagged.",
      "role": "Curated · landing pages",
      "categories": [
        "layout"
      ],
      "primary_url": "https://land-book.com",
      "links": [
        {
          "label": "land-book.com",
          "url": "https://land-book.com"
        }
      ]
    },
    {
      "id": "awwwards",
      "kind": "showcase",
      "name": "Awwwards",
      "schtick": "SOTY winners. The WebGL ceiling.",
      "role": "Industry yardstick",
      "categories": [
        "immersive",
        "transitions",
        "layout"
      ],
      "primary_url": "https://www.awwwards.com",
      "links": [
        {
          "label": "awwwards.com",
          "url": "https://www.awwwards.com"
        },
        {
          "label": "Animation collection",
          "url": "https://www.awwwards.com/websites/animation/"
        },
        {
          "label": "Transitions collection",
          "url": "https://www.awwwards.com/awwwards/collections/transitions/"
        }
      ]
    },
    {
      "id": "21st-dev",
      "kind": "showcase",
      "name": "21st.dev",
      "schtick": "Community-driven Tailwind blocks.",
      "role": "Newcomer · community blocks",
      "categories": [
        "nav",
        "layout",
        "forms"
      ],
      "primary_url": "https://21st.dev",
      "links": [
        {
          "label": "21st.dev",
          "url": "https://21st.dev"
        }
      ]
    },
    {
      "id": "bentogrids",
      "kind": "showcase",
      "name": "BentoGrids",
      "schtick": "Just bento. Just inspiration.",
      "role": "Curated · one element",
      "categories": [
        "layout"
      ],
      "primary_url": "https://bentogrids.com",
      "links": [
        {
          "label": "bentogrids.com",
          "url": "https://bentogrids.com"
        }
      ]
    },
    {
      "id": "shadcn-ui",
      "kind": "marketplace",
      "name": "shadcn/ui",
      "schtick": "The base layer.",
      "role": "Substrate · MIT",
      "price": "Free",
      "categories": [
        "layout",
        "forms",
        "state",
        "nav"
      ],
      "primary_url": "https://ui.shadcn.com",
      "links": [
        {
          "label": "ui.shadcn.com",
          "url": "https://ui.shadcn.com"
        }
      ]
    },
    {
      "id": "aceternity",
      "kind": "marketplace",
      "name": "Aceternity UI",
      "schtick": "Hero treatments that punch.",
      "role": "Motion-forward · Free + Pro",
      "price": "Free + Pro",
      "categories": [
        "motion",
        "layout",
        "transitions",
        "immersive"
      ],
      "primary_url": "https://ui.aceternity.com",
      "links": [
        {
          "label": "ui.aceternity.com",
          "url": "https://ui.aceternity.com"
        },
        {
          "label": "Pro",
          "url": "https://pro.aceternity.com"
        },
        {
          "label": "Bento blocks",
          "url": "https://ui.aceternity.com/blocks/bento-grids"
        },
        {
          "label": "Floating navbar",
          "url": "https://ui.aceternity.com/components/floating-navbar"
        }
      ]
    },
    {
      "id": "magic-ui",
      "kind": "marketplace",
      "name": "Magic UI",
      "schtick": "150+ effects, plays nicely with shadcn.",
      "role": "Animated · MIT + Pro",
      "price": "MIT + Pro",
      "categories": [
        "motion",
        "transitions"
      ],
      "primary_url": "https://magicui.design",
      "links": [
        {
          "label": "magicui.design",
          "url": "https://magicui.design"
        },
        {
          "label": "Pro",
          "url": "https://pro.magicui.design"
        },
        {
          "label": "Dock",
          "url": "https://magicui.design/docs/components/dock"
        },
        {
          "label": "Bento",
          "url": "https://magicui.design/docs/components/bento-grid"
        }
      ]
    },
    {
      "id": "origin-ui",
      "kind": "marketplace",
      "name": "Origin UI",
      "schtick": "500+ primitives. Less wow, more workhorse.",
      "role": "System-grade · MIT",
      "price": "Free",
      "categories": [
        "forms",
        "nav",
        "layout"
      ],
      "primary_url": "https://originui.com",
      "links": [
        {
          "label": "originui.com",
          "url": "https://originui.com"
        }
      ]
    },
    {
      "id": "cult-ui",
      "kind": "marketplace",
      "name": "Cult UI",
      "schtick": "Family Sites energy.",
      "role": "Bold treatments · free",
      "price": "Free",
      "categories": [
        "motion",
        "layout"
      ],
      "primary_url": "https://www.cult-ui.com",
      "links": [
        {
          "label": "cult-ui.com",
          "url": "https://www.cult-ui.com"
        }
      ]
    },
    {
      "id": "reactbits",
      "kind": "marketplace",
      "name": "React Bits",
      "schtick": "Text effects, backgrounds, the fun stuff.",
      "role": "Animation specialist · OSS",
      "price": "Free",
      "categories": [
        "motion",
        "type",
        "immersive"
      ],
      "primary_url": "https://www.reactbits.dev",
      "links": [
        {
          "label": "reactbits.dev",
          "url": "https://www.reactbits.dev"
        }
      ]
    },
    {
      "id": "skiper-ui",
      "kind": "marketplace",
      "name": "Skiper UI",
      "schtick": "Your competitors don't have this.",
      "role": "Bespoke · Free + Pro",
      "price": "Free + Pro",
      "categories": [
        "motion",
        "layout"
      ],
      "primary_url": "https://skiper-ui.com",
      "links": [
        {
          "label": "skiper-ui.com",
          "url": "https://skiper-ui.com"
        }
      ]
    },
    {
      "id": "animata",
      "kind": "marketplace",
      "name": "Animata",
      "schtick": "Motion-first React + Tailwind.",
      "role": "Highly animated · MIT",
      "price": "Free",
      "categories": [
        "motion",
        "transitions"
      ],
      "primary_url": "https://animata.design",
      "links": [
        {
          "label": "animata.design",
          "url": "https://animata.design"
        }
      ]
    },
    {
      "id": "once-ui",
      "kind": "marketplace",
      "name": "Once UI",
      "schtick": "One cohesive set, not magpie mix.",
      "role": "Full design system · tokens",
      "price": "Free + Pro",
      "categories": [
        "layout",
        "forms",
        "type"
      ],
      "primary_url": "https://once-ui.com",
      "links": [
        {
          "label": "once-ui.com",
          "url": "https://once-ui.com"
        }
      ]
    },
    {
      "id": "motion-primitives",
      "kind": "marketplace",
      "name": "Motion Primitives",
      "schtick": "Magnetic, tilt, scroll-linked. Nothing else.",
      "role": "Motion-only · Free + Pro",
      "price": "Free + Pro",
      "categories": [
        "motion",
        "transitions"
      ],
      "primary_url": "https://motion-primitives.com",
      "links": [
        {
          "label": "motion-primitives.com",
          "url": "https://motion-primitives.com"
        }
      ]
    },
    {
      "id": "untitled-ui",
      "kind": "marketplace",
      "name": "Untitled UI React",
      "schtick": "The Figma empire, in React.",
      "role": "Premium · paid license",
      "price": "$349 one-time",
      "categories": [
        "layout",
        "forms",
        "nav"
      ],
      "primary_url": "https://www.untitledui.com",
      "links": [
        {
          "label": "untitledui.com",
          "url": "https://www.untitledui.com"
        },
        {
          "label": "Pricing",
          "url": "https://www.untitledui.com/pricing"
        }
      ]
    },
    {
      "id": "tailark",
      "kind": "marketplace",
      "name": "Tailark",
      "schtick": "Hero, features, pricing — block by block.",
      "role": "Marketing blocks · Free + Pro",
      "price": "Free + Pro",
      "categories": [
        "layout"
      ],
      "primary_url": "https://tailark.com",
      "links": [
        {
          "label": "tailark.com",
          "url": "https://tailark.com"
        }
      ]
    },
    {
      "id": "tailwind-ui",
      "kind": "marketplace",
      "name": "Tailwind UI",
      "schtick": "The seal-of-approval template kit.",
      "role": "Premium · Tailwind Labs",
      "price": "Subscription",
      "categories": [
        "layout",
        "forms",
        "nav"
      ],
      "primary_url": "https://tailwindui.com",
      "links": [
        {
          "label": "tailwindui.com",
          "url": "https://tailwindui.com"
        }
      ]
    },
    {
      "id": "gsap",
      "kind": "engine",
      "name": "GSAP v3.14",
      "schtick": "Free for commercial since the Webflow buy.",
      "role": "Engine · industry standard",
      "price": "Free",
      "categories": [
        "motion",
        "transitions",
        "immersive"
      ],
      "primary_url": "https://gsap.com",
      "links": [
        {
          "label": "gsap.com",
          "url": "https://gsap.com"
        },
        {
          "label": "Showcase",
          "url": "https://gsap.com/showcase"
        },
        {
          "label": "ScrollTrigger",
          "url": "https://gsap.com/docs/v3/Plugins/ScrollTrigger/"
        },
        {
          "label": "DrawSVG",
          "url": "https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/"
        }
      ]
    },
    {
      "id": "motion",
      "kind": "engine",
      "name": "Motion v12 (ex-Framer Motion)",
      "schtick": "Spring physics, declarative.",
      "role": "Engine · React-first",
      "price": "Free",
      "categories": [
        "motion",
        "transitions",
        "state"
      ],
      "primary_url": "https://motion.dev",
      "links": [
        {
          "label": "motion.dev",
          "url": "https://motion.dev"
        },
        {
          "label": "vs GSAP",
          "url": "https://motion.dev/docs/gsap-vs-motion"
        }
      ]
    },
    {
      "id": "animejs",
      "kind": "engine",
      "name": "Anime.js v4",
      "schtick": "Lightweight, no React tax.",
      "role": "Engine · framework-agnostic",
      "price": "Free",
      "categories": [
        "motion",
        "transitions"
      ],
      "primary_url": "https://animejs.com",
      "links": [
        {
          "label": "animejs.com",
          "url": "https://animejs.com"
        }
      ]
    },
    {
      "id": "theatre",
      "kind": "engine",
      "name": "Theatre.js",
      "schtick": "Choreograph in a browser timeline.",
      "role": "Engine · visual editor",
      "price": "Free",
      "categories": [
        "motion",
        "immersive"
      ],
      "primary_url": "https://www.theatrejs.com",
      "links": [
        {
          "label": "theatrejs.com",
          "url": "https://www.theatrejs.com"
        }
      ]
    },
    {
      "id": "lenis",
      "kind": "engine",
      "name": "Lenis",
      "schtick": "Under every \"this scrolls amazingly\" site.",
      "role": "Smooth scroll · by Darkroom",
      "price": "Free",
      "categories": [
        "transitions"
      ],
      "primary_url": "https://lenis.darkroom.engineering",
      "links": [
        {
          "label": "lenis.darkroom.engineering",
          "url": "https://lenis.darkroom.engineering"
        }
      ]
    },
    {
      "id": "view-transitions",
      "kind": "engine",
      "name": "View Transitions API",
      "schtick": "Pages now move like apps. For free.",
      "role": "Native · browser API",
      "price": "Free",
      "categories": [
        "transitions"
      ],
      "primary_url": "https://developer.chrome.com/docs/web-platform/view-transitions",
      "links": [
        {
          "label": "Chrome docs",
          "url": "https://developer.chrome.com/docs/web-platform/view-transitions"
        },
        {
          "label": "MDN",
          "url": "https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API"
        }
      ]
    },
    {
      "id": "react-three-fiber",
      "kind": "engine",
      "name": "React Three Fiber + Drei",
      "schtick": "3D as a React tree.",
      "role": "3D engine · pmndrs",
      "price": "Free",
      "categories": [
        "immersive"
      ],
      "primary_url": "https://docs.pmnd.rs/react-three-fiber",
      "links": [
        {
          "label": "R3F docs",
          "url": "https://docs.pmnd.rs/react-three-fiber"
        }
      ]
    },
    {
      "id": "spline",
      "kind": "engine",
      "name": "Spline",
      "schtick": "3D without writing GLSL.",
      "role": "No-code 3D scene editor",
      "price": "Free + Paid",
      "categories": [
        "immersive"
      ],
      "primary_url": "https://spline.design",
      "links": [
        {
          "label": "spline.design",
          "url": "https://spline.design"
        }
      ]
    },
    {
      "id": "scroll-driven-style",
      "kind": "engine",
      "name": "Scroll-driven animations (native CSS)",
      "schtick": "No JS. Just scroll().",
      "role": "Native · CSS API",
      "price": "Free",
      "categories": [
        "transitions",
        "motion"
      ],
      "primary_url": "https://scroll-driven-animations.style",
      "links": [
        {
          "label": "scroll-driven-animations.style",
          "url": "https://scroll-driven-animations.style"
        }
      ]
    },
    {
      "id": "sonner",
      "kind": "engine",
      "name": "Sonner",
      "schtick": "The toast everyone copies.",
      "role": "Component · Emil Kowalski",
      "price": "Free",
      "categories": [
        "state"
      ],
      "primary_url": "https://sonner.emilkowal.ski",
      "links": [
        {
          "label": "sonner.emilkowal.ski",
          "url": "https://sonner.emilkowal.ski"
        }
      ]
    },
    {
      "id": "cmdk",
      "kind": "engine",
      "name": "cmdk",
      "schtick": "The command-bar primitive.",
      "role": "Component · Paco Coursey",
      "price": "Free",
      "categories": [
        "nav"
      ],
      "primary_url": "https://cmdk.paco.me",
      "links": [
        {
          "label": "cmdk.paco.me",
          "url": "https://cmdk.paco.me"
        }
      ]
    },
    {
      "id": "tinywow",
      "kind": "asset-library",
      "asset_kind": "utility",
      "name": "TinyWow",
      "schtick": "Free file converter — PDF, image, video, audio, all in one.",
      "role": "Utility · free",
      "categories": [],
      "primary_url": "https://tinywow.com",
      "links": [
        {
          "label": "tinywow.com",
          "url": "https://tinywow.com"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: utility."
    },
    {
      "id": "microcopy-me",
      "kind": "asset-library",
      "asset_kind": "writing",
      "name": "Microcopy.me",
      "schtick": "UX copy generator. Paste a button, get the words.",
      "role": "Writing tool · AI",
      "categories": [],
      "primary_url": "https://microcopy.me",
      "links": [
        {
          "label": "microcopy.me",
          "url": "https://microcopy.me"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: writing."
    },
    {
      "id": "fontjoy",
      "kind": "asset-library",
      "asset_kind": "type",
      "name": "Fontjoy",
      "schtick": "Font pairing, AI-driven. Lock the body, generate the display.",
      "role": "Type tool · free",
      "categories": [],
      "primary_url": "https://fontjoy.com",
      "links": [
        {
          "label": "fontjoy.com",
          "url": "https://fontjoy.com"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: type."
    },
    {
      "id": "iconoir",
      "kind": "asset-library",
      "asset_kind": "icons",
      "name": "Iconoir",
      "schtick": "1,151 hand-crafted icons. Open source.",
      "role": "Icons · MIT",
      "categories": [],
      "primary_url": "https://iconoir.com",
      "links": [
        {
          "label": "iconoir.com",
          "url": "https://iconoir.com"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: icons."
    },
    {
      "id": "mixkit",
      "kind": "asset-library",
      "asset_kind": "stock",
      "name": "Mixkit",
      "schtick": "Free stock videos. No login, no watermark.",
      "role": "Stock · free",
      "categories": [],
      "primary_url": "https://mixkit.co",
      "links": [
        {
          "label": "mixkit.co",
          "url": "https://mixkit.co"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: stock."
    },
    {
      "id": "screenlane",
      "kind": "asset-library",
      "asset_kind": "inspiration",
      "name": "Screenlane",
      "schtick": "Real product UI screens for mobile + web.",
      "role": "Showcase · curated",
      "categories": [],
      "primary_url": "https://screenlane.com",
      "links": [
        {
          "label": "screenlane.com",
          "url": "https://screenlane.com"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: inspiration."
    },
    {
      "id": "happyhues-asset",
      "kind": "asset-library",
      "asset_kind": "color",
      "name": "Happy Hues",
      "schtick": "Color palette inspiration with live mockups.",
      "role": "Color · free",
      "categories": [],
      "primary_url": "https://www.happyhues.co",
      "links": [
        {
          "label": "happyhues.co",
          "url": "https://www.happyhues.co"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: color."
    },
    {
      "id": "growth-design",
      "kind": "asset-library",
      "asset_kind": "education",
      "name": "Growth.Design",
      "schtick": "Case studies as beautiful, scrollable stories.",
      "role": "Education · case studies",
      "categories": [],
      "primary_url": "https://growth.design",
      "links": [
        {
          "label": "growth.design",
          "url": "https://growth.design"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: education."
    },
    {
      "id": "basicons",
      "kind": "asset-library",
      "asset_kind": "icons",
      "name": "Basicons",
      "schtick": "Pixel-perfect, minimalist icons.",
      "role": "Icons · free",
      "categories": [],
      "primary_url": "https://basicons.xyz",
      "links": [
        {
          "label": "basicons.xyz",
          "url": "https://basicons.xyz"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: icons."
    },
    {
      "id": "briefup",
      "kind": "asset-library",
      "asset_kind": "utility",
      "name": "Brief Up",
      "schtick": "Design brief generator. Practice on real-shaped briefs.",
      "role": "Tool · free",
      "categories": [],
      "primary_url": "https://briefup.co",
      "links": [
        {
          "label": "briefup.co",
          "url": "https://briefup.co"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: utility."
    },
    {
      "id": "meshgradient",
      "kind": "asset-library",
      "asset_kind": "color",
      "name": "Mesh Gradient",
      "schtick": "Build mesh gradients in the browser. Export CSS or PNG.",
      "role": "Color · tool",
      "categories": [],
      "primary_url": "https://meshgradient.com",
      "links": [
        {
          "label": "meshgradient.com",
          "url": "https://meshgradient.com"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: color."
    },
    {
      "id": "iconer",
      "kind": "asset-library",
      "asset_kind": "icons",
      "name": "Iconer",
      "schtick": "32,000+ free icons across families. One search.",
      "role": "Icons · free + Pro",
      "categories": [],
      "primary_url": "https://iconer.app",
      "links": [
        {
          "label": "iconer.app",
          "url": "https://iconer.app"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: icons."
    },
    {
      "id": "3dicons",
      "kind": "asset-library",
      "asset_kind": "icons",
      "name": "3D Icons",
      "schtick": "120+ free 3D-rendered icons. Pull request a 4th-grader's stickers, but tasteful.",
      "role": "Icons · 3D · free",
      "categories": [],
      "primary_url": "https://3dicons.co",
      "links": [
        {
          "label": "3dicons.co",
          "url": "https://3dicons.co"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: icons."
    },
    {
      "id": "shapefest",
      "kind": "asset-library",
      "asset_kind": "illustrations",
      "name": "Shapefest",
      "schtick": "100,000+ free 3D shapes + illustrations.",
      "role": "3D + illustrations · free",
      "categories": [],
      "primary_url": "https://shapefest.com",
      "links": [
        {
          "label": "shapefest.com",
          "url": "https://shapefest.com"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: illustrations."
    },
    {
      "id": "saaslandingpage",
      "kind": "asset-library",
      "asset_kind": "inspiration",
      "name": "SaaS Landing Page",
      "schtick": "Hand-picked SaaS landing pages — the cousin to SaaS Pages.",
      "role": "Showcase · SaaS",
      "categories": [],
      "primary_url": "https://saaslandingpage.com",
      "links": [
        {
          "label": "saaslandingpage.com",
          "url": "https://saaslandingpage.com"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: inspiration."
    },
    {
      "id": "onepagelove",
      "kind": "asset-library",
      "asset_kind": "inspiration",
      "name": "One Page Love",
      "schtick": "Single-page websites only. Awwwards' quiet older cousin.",
      "role": "Showcase · veteran",
      "categories": [],
      "primary_url": "https://onepagelove.com",
      "links": [
        {
          "label": "onepagelove.com",
          "url": "https://onepagelove.com"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: inspiration."
    },
    {
      "id": "lapa-ninja",
      "kind": "asset-library",
      "asset_kind": "inspiration",
      "name": "Lapa Ninja",
      "schtick": "5,000+ landing pages, tagged + ranked.",
      "role": "Showcase · curated",
      "categories": [],
      "primary_url": "https://lapa.ninja",
      "links": [
        {
          "label": "lapa.ninja",
          "url": "https://lapa.ninja"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: inspiration."
    },
    {
      "id": "colorhunt-asset",
      "kind": "asset-library",
      "asset_kind": "color",
      "name": "Color Hunt",
      "schtick": "Daily curated color palettes. The fastest way to start a brand.",
      "role": "Color · free",
      "categories": [],
      "primary_url": "https://colorhunt.co",
      "links": [
        {
          "label": "colorhunt.co",
          "url": "https://colorhunt.co"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: color."
    },
    {
      "id": "stocksnap",
      "kind": "asset-library",
      "asset_kind": "stock",
      "name": "StockSnap.io",
      "schtick": "Free stock photos, CC0. Updated daily.",
      "role": "Stock · free",
      "categories": [],
      "primary_url": "https://stocksnap.io",
      "links": [
        {
          "label": "stocksnap.io",
          "url": "https://stocksnap.io"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: stock."
    },
    {
      "id": "angle-sh",
      "kind": "asset-library",
      "asset_kind": "mockups",
      "name": "Angle",
      "schtick": "Beautiful device mockups. Drag your screenshot in.",
      "role": "Mockups · free + Pro",
      "categories": [],
      "primary_url": "https://angle.sh",
      "links": [
        {
          "label": "angle.sh",
          "url": "https://angle.sh"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: mockups."
    },
    {
      "id": "fontpair",
      "kind": "asset-library",
      "asset_kind": "type",
      "name": "Font Pair",
      "schtick": "Curated font pairings, Google Fonts only. Copy-paste CSS.",
      "role": "Type · free",
      "categories": [],
      "primary_url": "https://fontpair.co",
      "links": [
        {
          "label": "fontpair.co",
          "url": "https://fontpair.co"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: type."
    },
    {
      "id": "designspiration",
      "kind": "asset-library",
      "asset_kind": "inspiration",
      "name": "Designspiration",
      "schtick": "The OG visual inspiration board. Since 2010, still going.",
      "role": "Showcase · veteran",
      "categories": [],
      "primary_url": "https://designspiration.net",
      "links": [
        {
          "label": "designspiration.net",
          "url": "https://designspiration.net"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: inspiration."
    },
    {
      "id": "heroicons",
      "kind": "asset-library",
      "asset_kind": "icons",
      "name": "Heroicons",
      "schtick": "Hand-crafted SVG icons by the Tailwind team. The default.",
      "role": "Icons · MIT · by Tailwind Labs",
      "categories": [],
      "primary_url": "https://heroicons.com",
      "links": [
        {
          "label": "heroicons.com",
          "url": "https://heroicons.com"
        }
      ],
      "notes": "Added from Anthony's designer-toolbox list 2026-05-29. Category: icons."
    },
    {
      "id": "siteinspire",
      "name": "SiteInspire",
      "kind": "curator",
      "primary_url": "https://www.siteinspire.com",
      "role": "Web-design showcase since 2008",
      "categories": [
        "layout",
        "type"
      ],
      "schtick": "Lower-noise Awwwards.",
      "thesis": "Editorial restraint outlasts trend-chasing.",
      "bio": "The long-running curated web-design gallery — well-tagged, low-on-bombast filter. Submissions reviewed.",
      "links": [
        {
          "label": "SiteInspire",
          "url": "https://www.siteinspire.com"
        }
      ],
      "magic": [
        "Tag filter actually works",
        "No 'awesomeness score' nonsense",
        "Old submissions stay browsable"
      ],
      "works": [
        {
          "label": "Tag browse",
          "url": "https://www.siteinspire.com/websites",
          "what": "Browse by type, style, subject, platform."
        }
      ],
      "notes": "Articulate-friendly filter. Subscribe.",
      "quotes": []
    },
    {
      "id": "curated-design",
      "name": "Curated Design",
      "kind": "curator",
      "primary_url": "https://curated.design",
      "role": "Daily web-design pick",
      "categories": [
        "layout"
      ],
      "schtick": "One link a day, kept honest.",
      "thesis": "Constraint is the curator's main craft.",
      "bio": "Daily curated web-design list. Sharper filter than Awwwards; rewards craft over maximalism.",
      "links": [
        {
          "label": "Curated Design",
          "url": "https://curated.design"
        }
      ],
      "magic": [
        "One-a-day cadence",
        "Editorial restraint",
        "Worth a daily glance, not a deep scroll"
      ],
      "works": [
        {
          "label": "Daily feed",
          "url": "https://curated.design",
          "what": "The list."
        }
      ],
      "notes": "Re-check daily during pilot kickoff weeks.",
      "quotes": []
    },
    {
      "id": "saaspo",
      "name": "SaaSpo",
      "kind": "curator",
      "primary_url": "https://saaspo.com",
      "role": "SaaS-only website gallery",
      "categories": [
        "layout"
      ],
      "schtick": "SaaS websites only, filterable by section.",
      "thesis": "Section-by-section reference beats whole-site dazzle.",
      "bio": "SaaS-website-only showcase. Browse by industry, by section (hero, pricing, footer, features). Useful when scoping a SaaS landing-page rebuild.",
      "links": [
        {
          "label": "SaaSpo",
          "url": "https://saaspo.com"
        }
      ],
      "magic": [
        "Section-level filtering",
        "Tight category (no portfolio noise)",
        "Easy compare across SaaS in same vertical"
      ],
      "works": [
        {
          "label": "Section browse",
          "url": "https://saaspo.com/sections",
          "what": "Hero / pricing / feature / footer browse."
        }
      ],
      "notes": "Bookmark for any SaaS client kickoff.",
      "quotes": []
    },
    {
      "id": "landing-love",
      "name": "Landing Love",
      "kind": "curator",
      "primary_url": "https://landing.love",
      "role": "Landing-page gallery",
      "categories": [
        "layout"
      ],
      "schtick": "Landing pages, screenshot-first.",
      "thesis": "Static screenshot is the right resolution for landing-page reference.",
      "bio": "Landing-page-only curator. Screenshot-heavy feed; useful for compositional reference at the section level.",
      "links": [
        {
          "label": "Landing Love",
          "url": "https://landing.love"
        }
      ],
      "magic": [
        "Screenshot-only — no interaction noise",
        "Easy compare across DTC / SaaS / agency LP archetypes"
      ],
      "works": [
        {
          "label": "Feed",
          "url": "https://landing.love",
          "what": "The landing-page wall."
        }
      ],
      "notes": "Complements SaaSpo for non-SaaS landing pages.",
      "quotes": []
    },
    {
      "id": "navbar-gallery",
      "name": "Navbar Gallery",
      "kind": "curator",
      "primary_url": "https://navbar.gallery",
      "role": "Navbar-only showcase",
      "categories": [
        "nav"
      ],
      "schtick": "Just navbars.",
      "thesis": "Sometimes you just need to look at twenty navbars.",
      "bio": "Single-component curator — navbars across types (sticky, mega-menu, floating, command-palette).",
      "links": [
        {
          "label": "Navbar Gallery",
          "url": "https://navbar.gallery"
        }
      ],
      "magic": [
        "Single-component focus",
        "Mirrors what's already in Design/ReferenceDB/navbars/"
      ],
      "works": [
        {
          "label": "Browse",
          "url": "https://navbar.gallery",
          "what": "The wall of navbars."
        }
      ],
      "notes": "Already mirrored locally in ReferenceDB/navbars/ via ingest pipeline.",
      "quotes": []
    },
    {
      "id": "cta-gallery",
      "name": "CTA Gallery",
      "kind": "curator",
      "primary_url": "https://cta.gallery",
      "role": "CTA-section showcase",
      "categories": [
        "state"
      ],
      "schtick": "Just CTAs.",
      "thesis": "The dullest brief and the most-copied component.",
      "bio": "Single-component curator — the call-to-action / footer-CTA / closing-section pattern across web.",
      "links": [
        {
          "label": "CTA Gallery",
          "url": "https://cta.gallery"
        }
      ],
      "magic": [
        "Single-component focus",
        "Surface the boring-but-load-bearing component"
      ],
      "works": [
        {
          "label": "Browse",
          "url": "https://cta.gallery",
          "what": "The wall of CTAs."
        }
      ],
      "notes": "One bookmark, used at the page-tail of every new microsite.",
      "quotes": []
    },
    {
      "id": "appmotion-design",
      "name": "App Motion Design",
      "kind": "curator",
      "primary_url": "https://appmotion.design",
      "role": "Mobile-app motion curator",
      "categories": [
        "motion"
      ],
      "schtick": "Mobile app motion only.",
      "thesis": "Mobile motion is different from web motion — needs its own gallery.",
      "bio": "Curator focused exclusively on mobile-app motion design. Cleaner than Mobbin for animation, narrower than Awwwards.",
      "links": [
        {
          "label": "App Motion Design",
          "url": "https://appmotion.design"
        }
      ],
      "magic": [
        "Mobile-only focus",
        "Animation-specific filter beats Mobbin's general pattern browse"
      ],
      "works": [
        {
          "label": "Feed",
          "url": "https://appmotion.design",
          "what": "The mobile-motion wall."
        }
      ],
      "notes": "Pair with Mobbin for any mobile-app pilot.",
      "quotes": []
    },
    {
      "id": "60fps-design",
      "name": "60fps.design",
      "kind": "curator",
      "primary_url": "https://60fps.design",
      "role": "Animation showreel curator",
      "categories": [
        "motion"
      ],
      "schtick": "Curated on perceived smoothness, not just visual taste.",
      "thesis": "Frame-rate quality is the measurable interaction-design axis.",
      "bio": "Animation showcase that judges entries on perceived smoothness and easing quality — not just aesthetic.",
      "links": [
        {
          "label": "60fps.design",
          "url": "https://60fps.design"
        }
      ],
      "magic": [
        "Quality-filter that names what it measures",
        "Useful for showing clients what 'good motion' actually looks like"
      ],
      "works": [
        {
          "label": "Feed",
          "url": "https://60fps.design",
          "what": "The animation wall."
        }
      ],
      "notes": "Pair with Rauno Freiberg's Devouring Details as the interaction-quality canon.",
      "quotes": []
    },
    {
      "id": "logggos-club",
      "name": "Logggos Club",
      "kind": "curator",
      "primary_url": "https://logggos.club",
      "role": "Logo gallery, independent submissions",
      "categories": [
        "type"
      ],
      "schtick": "Independent designers, recent work, lower polish than Logoed.",
      "thesis": "Currency beats polish for logo inspiration.",
      "bio": "Logo-submission gallery skewed to independent designers and recent work. Less curation than Logoed; more new submissions.",
      "links": [
        {
          "label": "Logggos Club",
          "url": "https://logggos.club"
        }
      ],
      "magic": [
        "Independent designer focus",
        "High submission volume = good for finding recent moves"
      ],
      "works": [
        {
          "label": "Browse",
          "url": "https://logggos.club",
          "what": "The logo wall."
        }
      ],
      "notes": "Pair with agency-references.md Tier-1 list for technique-vs-currency triangulation.",
      "quotes": []
    },
    {
      "id": "uncut-wtf",
      "name": "Uncut",
      "kind": "curator",
      "primary_url": "https://uncut.wtf",
      "role": "Type-specimen curator with attitude",
      "categories": [
        "type"
      ],
      "schtick": "Display-type-leaning, attitude-forward type curator.",
      "thesis": "Type inspiration sites can have a voice.",
      "bio": "Type-specimen browser with editorial point of view. Display-type heavy. Twin to Fonts In Use but punchier.",
      "links": [
        {
          "label": "Uncut",
          "url": "https://uncut.wtf"
        }
      ],
      "magic": [
        "Display-type focus",
        "Editorial voice in the curation itself"
      ],
      "works": [
        {
          "label": "Browse",
          "url": "https://uncut.wtf",
          "what": "The type wall."
        }
      ],
      "notes": "Pair with Fonts In Use and Typewolf for working set.",
      "quotes": []
    },
    {
      "id": "thiings-co",
      "name": "Thiings",
      "kind": "asset-library",
      "primary_url": "https://thiings.co",
      "role": "3D-object library by Lucas Pikuet",
      "categories": [
        "immersive",
        "layout"
      ],
      "schtick": "Tactile cartoon-realism 3D objects, free for personal.",
      "thesis": "3D iconography is the new flat-icon — but only if it's tactile.",
      "bio": "3D-object library by Lucas Pikuet — tactile, slightly cartoonish, very recognisable single style. Free for personal use, paid for commercial.",
      "links": [
        {
          "label": "Thiings",
          "url": "https://thiings.co"
        },
        {
          "label": "Creator (Lucas Pikuet)",
          "url": "https://x.com/lucaspikuet"
        }
      ],
      "magic": [
        "Single recognisable style across thousands of objects",
        "Tactile feel that flat icons can't match",
        "Free personal-use tier for prototyping"
      ],
      "works": [
        {
          "label": "Browse library",
          "url": "https://thiings.co",
          "what": "The 3D-object catalogue."
        }
      ],
      "notes": "Check commercial licence before any client use. Articulate-fit for warm/playful brands; wrong for fintech/healthcare.",
      "quotes": []
    },
    {
      "id": "coolshap-es",
      "name": "Cool Shapes",
      "kind": "asset-library",
      "primary_url": "https://coolshap.es",
      "role": "Free SVG shapes (CC0)",
      "categories": [
        "layout"
      ],
      "schtick": "Free abstract SVG shapes, CC0 licensed.",
      "thesis": "Hero secondaries shouldn't cost anything.",
      "bio": "Free SVG shape library — abstract blobs, geometric forms, background marks. CC0 — drop-in for hero secondaries with no licence overhead.",
      "links": [
        {
          "label": "Cool Shapes",
          "url": "https://coolshap.es"
        }
      ],
      "magic": [
        "CC0 licence — no friction for commercial use",
        "Style-agnostic shapes that work across brand registers"
      ],
      "works": [
        {
          "label": "Library",
          "url": "https://coolshap.es",
          "what": "The SVG shape catalogue."
        }
      ],
      "notes": "Default hero-secondary source. Faster than commissioning illustration.",
      "quotes": []
    },
    {
      "id": "grainient-supply",
      "name": "Grainient Supply",
      "kind": "asset-library",
      "primary_url": "https://grainient.supply",
      "role": "Premium gradient + grain backgrounds",
      "categories": [
        "layout",
        "immersive"
      ],
      "schtick": "Gradients with grain texture, premium.",
      "thesis": "Pure gradients read flat in 2026 — grain is the new minimum.",
      "bio": "Premium pack-shop for gradient + film-grain background textures. Pairs well with the dark palette ingested same day; saves a Photoshop pass.",
      "links": [
        {
          "label": "Grainient Supply",
          "url": "https://grainient.supply"
        }
      ],
      "magic": [
        "Pre-tuned grain over gradient — saves the texture pass",
        "Pack-based licensing — predictable cost"
      ],
      "works": [
        {
          "label": "Packs",
          "url": "https://grainient.supply",
          "what": "The background catalogue."
        }
      ],
      "notes": "Check licence per pack. Articulate-fit for editorial, premium, music/lifestyle clients.",
      "quotes": []
    },
    {
      "id": "fontshare",
      "name": "Fontshare",
      "kind": "asset-library",
      "primary_url": "https://fontshare.com",
      "role": "Indian Type Foundry — free commercial fonts",
      "categories": [
        "type"
      ],
      "schtick": "Free-for-commercial professional font library.",
      "thesis": "Modern brand identity should not be gated by foundry licensing.",
      "bio": "Indian Type Foundry's free-for-commercial library. Geist Mono, Satoshi, Cabinet Grotesk, General Sans, Switzer. Articulate's working font set lives here.",
      "links": [
        {
          "label": "Fontshare",
          "url": "https://fontshare.com"
        },
        {
          "label": "Indian Type Foundry",
          "url": "https://indiantypefoundry.com"
        }
      ],
      "magic": [
        "Free commercial licence — no per-project font cost",
        "Production-grade families (variable axes, full character sets)",
        "Indian Type Foundry's actual paid library, gifted"
      ],
      "works": [
        {
          "label": "Browse",
          "url": "https://fontshare.com/fonts",
          "what": "The free-commercial font catalogue."
        },
        {
          "label": "Articulate brand set",
          "url": "https://fontshare.com/fonts/geist",
          "what": "Geist family — Articulate's working set."
        }
      ],
      "notes": "Default font source for any new Articulate or client project unless brand spec explicitly requires paid foundry.",
      "quotes": []
    },
    {
      "id": "midjourney",
      "name": "Midjourney",
      "kind": "engine",
      "primary_url": "https://midjourney.com",
      "role": "Image generation",
      "categories": [
        "immersive"
      ],
      "schtick": "Editorial-stylised image gen.",
      "thesis": "Image gen as part of the creative process, not as the output.",
      "bio": "Image-generation platform. Strongest editorial / stylised register among the frontier image models. Articulate's fallback when Higgsfield Soul Cinema is wrong tool (single composition, no character-lock, no scene-cinema requirement).",
      "links": [
        {
          "label": "Midjourney",
          "url": "https://midjourney.com"
        }
      ],
      "magic": [
        "Editorial stylisation that Higgsfield doesn't lean into",
        "Strong typography rendering in v6+",
        "Discord + web UI parity"
      ],
      "works": [
        {
          "label": "Web app",
          "url": "https://www.midjourney.com/explore",
          "what": "Browser-based generation + explore feed."
        }
      ],
      "notes": "Subject to AI Image discipline per Articulate/offer.md — brand anchor library prepend, $10/day cost gate, real-people rule.",
      "quotes": []
    },
    {
      "id": "klingai",
      "name": "Kling AI",
      "kind": "engine",
      "primary_url": "https://klingai.com",
      "role": "Video animation engine",
      "categories": [
        "motion"
      ],
      "schtick": "Animate any image into short motion.",
      "thesis": "Short motion bursts are the new still image.",
      "bio": "Video / animation engine — generates short motion clips from image or prompt. Complement to Higgsfield Soul Cinema for the shorter-burst use case (3-5s product loops, hero clips).",
      "links": [
        {
          "label": "Kling AI",
          "url": "https://klingai.com"
        }
      ],
      "magic": [
        "Image-to-motion in seconds",
        "Cleaner short-clip output than competitors",
        "Strong on tactile / product motion"
      ],
      "works": [
        {
          "label": "Web app",
          "url": "https://klingai.com",
          "what": "Generate from image or prompt."
        }
      ],
      "notes": "Pair with Higgsfield (long-form character-scene) and Midjourney (still composition) for the full motion stack. Subject to AI discipline.",
      "quotes": []
    },
    {
      "id": "remove-bg",
      "name": "remove.bg",
      "kind": "engine",
      "primary_url": "https://remove.bg",
      "role": "Background-removal utility",
      "categories": [
        "state"
      ],
      "schtick": "One-click background removal.",
      "thesis": "Utility tools earn their bookmark by being instantly correct.",
      "bio": "Image background-removal utility. Trivial but high-frequency — used 50+ times per pilot for product/portrait isolation. API and web UI; no installs.",
      "links": [
        {
          "label": "remove.bg",
          "url": "https://remove.bg"
        },
        {
          "label": "API docs",
          "url": "https://www.remove.bg/api"
        }
      ],
      "magic": [
        "One-shot accurate",
        "API integrates into any pipeline",
        "Edge handling on hair/glass beats Photoshop's quick-select"
      ],
      "works": [
        {
          "label": "Web tool",
          "url": "https://www.remove.bg/upload",
          "what": "Drop image, get cutout."
        }
      ],
      "notes": "Articulate workflow staple. Use behind brand-anchor library when output enters AI image gen pipeline.",
      "quotes": []
    },
    {
      "id": "shadergpt-14islands",
      "name": "ShaderGPT (14islands)",
      "kind": "engine",
      "primary_url": "https://shadergpt.14islands.com",
      "role": "GLSL shader generation from prompt",
      "categories": [
        "immersive"
      ],
      "schtick": "Shader bed shortcut for non-shader people.",
      "thesis": "WebGL beds are mainstream now — the tooling should reflect that.",
      "bio": "Generate GLSL fragment shaders from natural-language prompts. Output drops into Three.js / R3F directly. By Stockholm studio 14islands (already in this database).",
      "links": [
        {
          "label": "ShaderGPT",
          "url": "https://shadergpt.14islands.com"
        },
        {
          "label": "14islands",
          "url": "https://14islands.com"
        }
      ],
      "magic": [
        "Prompt-to-shader removes the GLSL learning curve for designers",
        "Output works in any WebGL context",
        "Free preview, no signup"
      ],
      "works": [
        {
          "label": "Generator",
          "url": "https://shadergpt.14islands.com",
          "what": "Prompt-to-shader."
        }
      ],
      "notes": "Use for WebGL hero beds when a custom shader is overkill but a CSS gradient is too flat.",
      "quotes": []
    },
    {
      "id": "endlesstools",
      "name": "Endless Tools",
      "kind": "curator",
      "primary_url": "https://endlesstools.io",
      "role": "Meta-curator of design tools",
      "categories": [
        "state"
      ],
      "schtick": "Tools that find tools.",
      "thesis": "The radar needs a radar.",
      "bio": "Meta-curator — directory of design tools across categories (AI, motion, type, prototyping, asset libraries). Re-check monthly to catch new entrants.",
      "links": [
        {
          "label": "Endless Tools",
          "url": "https://endlesstools.io"
        }
      ],
      "magic": [
        "Cross-category tool discovery",
        "Monthly refresh worth"
      ],
      "works": [
        {
          "label": "Browse",
          "url": "https://endlesstools.io",
          "what": "The tool wall."
        }
      ],
      "notes": "Schedule monthly browse — feeds back into the gallery.",
      "quotes": []
    }
  ],
  "disciplines": [
    {
      "id": "ux",
      "code": "01",
      "name": "UX & Web Design",
      "summary": "How websites and apps move, navigate, and feel under the cursor in 2026.",
      "category_ids": [
        "nav",
        "layout",
        "motion",
        "transitions",
        "type",
        "immersive",
        "forms",
        "state"
      ]
    },
    {
      "id": "logo",
      "code": "02",
      "name": "Logo Production",
      "summary": "How marks are made — wordmarks, monograms, pictorial and abstract marks, responsive systems, motion identities.",
      "category_ids": [
        "wordmarks",
        "monograms",
        "pictorial",
        "abstract",
        "lockups",
        "responsive-marks",
        "generative-id",
        "motion-id",
        "sub-brand"
      ]
    },
    {
      "id": "video",
      "code": "03",
      "name": "Video Production",
      "summary": "How brand films, commercials, social verticals, product films and AI-generated video are made in 2026.",
      "category_ids": [
        "brand-films",
        "commercials",
        "social-verticals",
        "product-films",
        "testimonial-films",
        "motion-graphics",
        "titles-openers",
        "ai-video",
        "documentary"
      ]
    },
    {
      "id": "ad",
      "code": "04",
      "name": "Ad Production",
      "summary": "Print, OOH, digital display, social, audio — Ogilvy lineage meets 2026 distribution.",
      "category_ids": [
        "print-ads",
        "ooh",
        "digital-display",
        "social-static",
        "social-video-ads",
        "native-advertorial",
        "audio-ads",
        "performance-creative",
        "long-copy"
      ]
    },
    {
      "id": "campaign",
      "code": "05",
      "name": "Campaign Production",
      "summary": "Multi-asset, multi-channel work — brand campaigns, launches, always-on, performance, cultural moments.",
      "category_ids": [
        "brand-campaigns",
        "product-launches",
        "always-on",
        "perf-campaigns",
        "cultural",
        "b2b-vertical",
        "pr-led",
        "influencer-partnership",
        "integrated"
      ]
    }
  ]
}