ThreeUI

Reach for this when a brief asks for a WebGL or Three.js hero rather than a flat CSS gradient — Paper Shaders covers the dependency-free 2D canvas case more cheaply, and ThreeUI starts to earn its price at real 3D scenes, orbs and shader buttons. Connect the MCP server at https://threeui.com/api/mcp rather than scraping the site: the pages are a client-rendered shell that returns the same 3.3 KB document for every route, so a plain fetch reads nothing, while the MCP tools return metadata, implementation prompts and complete source directly. The server needs an OAuth sign-in and an active Pro entitlement, and it fails closed for anonymous or lapsed clients, so treat catalog access as unavailable in an unattended run unless a token is already in place. Community items install from npm with no auth. Do not try to pull Pro source from the npm package; it is excluded from public build artifacts by design and only the CLI delivers it. Budget for React 18.2 or later and a WebGL-capable browser, and give every scene a static fallback for first paint and for reduced-motion users.

Why it is here. It is the clearest example so far of a paid component library treating an MCP server as the primary distribution surface rather than a marketing add-on — the same entitlement check gates the CLI and the agent, and the agent gets implementation prompts alongside the source. That pattern is where paid design resources are heading, and this is a working reference for it.

License

Source available, Commercial license

Pricing

Freemium, Subscription, One-time purchase, Paid

Framework

React

Styling

Shader / GLSL

Distribution

npm package, CLI installer, MCP server, Copy-paste snippet

Platform

Web

Content type

Code, 3D assets and scenes, Prompts

Agent readiness

MCP server, CLI installable, Structured documentation, Copy-paste ready code, Login required, Agent access behind payment, Client-rendered shell

Accessibility

Not applicable

Maturity

Actively maintained

Pricing detail

Community tier free. Pro $99 per year at launch, regular $199. Lifetime $199 one time at launch, regular $399. Both paid tiers unlock the Pro component library and authenticated MCP access. Commercial use is allowed in personal work, client projects and end products; reselling or redistributing Pro source as a standalone library or competing product is not. Checkout runs through Stripe with no account needed beforehand; a Google sign-in afterwards recovers access on another device.

Package

@designcodeio/threeui

• ↗
• ↗
• ↗
• ↗
• ↗
• ↗
• ↗
• ↗
• ↗

• 243-item catalog across nine sections
• 80 component pages with 202 named variants
• remote MCP server on the 2026-07-28 spec
• OAuth 2.1 with server-side entitlement checks
• Pro source withheld from npm, delivered by CLI
• launch pricing at $99 per year or $199 lifetime

Verified 2026-08-23. HTTP 200. https://threeui.com/ 200 but a 3323-byte client-rendered shell, identical bytes for / and /browse, so all page content below was read from a headless render; og:title "Three.js Components & Interactive Shaders | ThreeUI" and og:description "Browse high-quality Three.js hero components, 3D shaders, prompts, and templates with customizable variants. Framework-agnostic. Copy, paste, and ship."; https://threeui.com/sitemap.xml 200 lists 290 URLs — 80 two-segment component pages and 202 three-segment variant pages across three-js (23/70), backgrounds (12/49), ui-elements (7/31), buttons (4/25), hero (10/8), text-animation (5/13), landing-pages (11/0), css (5/4) and motion-design (3/2); https://threeui.com/pricing states Pro $99 per year discounted from $199, Lifetime $199 one time discounted from $399, Community components free, Stripe checkout without a prior account, and commercial use with no resale; https://threeui.com/installation documents npm install @designcodeio/threeui, the style.css import, peer dependencies react and react-dom >= 18.2.0, Node >= 20 for the Pro CLI, WebGL or WebGL2, and npx @designcodeio/threeui-cli add cross-beam with OAuth plus server-side entitlement; https://threeui.com/mcp documents the endpoint https://threeui.com/api/mcp, Streamable HTTP, OAuth 2.1, protocol version 2026-07-28, Supabase-verified tokens, and the tools search_catalog, get_catalog_item, get_item_source and get_item_prompt; the footer on every page reads "Full 243 collection", which does not reconcile with the 282 catalog URLs in the sitemap and is recorded here unresolved.

• Ditther · Browser tool for dither, halftone, ASCII, Lego and voxel effects on images and videoS
• fffuel · 67 free browser generators for SVG backgrounds, patterns, gradients and color toolsS
• Paper Shaders · 30 zero-dependency canvas shaders as React components or vanilla JS, Apache-2.0S
• Radiant · Zero-dependency generative shaders as single HTML files, embedded by iframeS
• Shader Lab · Browser shader compositor with a WebGPU React runtime for exportS
• Unsplash · 8.7M free-to-use photos with a free JSON API at 1,000 requests/hourS