ThreeUI: First Open-Source Three.js Component Library with 164+ 3D Components

What Is ThreeUI?

ThreeUI is a visual component library built specifically for Three.js and WebGL. It organizes effects into a familiar UI component library catalog with 10 categories : Landing Pages, Hero, Three.js, Motion Design, Sections, Backgrounds, Buttons, Text Animation, UI Elements, and CSS.

The workflow mirrors shadcn/ui: find an effect → preview online → adjust parameters → view source code → copy into your project. Unlike a black-box npm package, ThreeUI opens the implementation source and assets for every component.

Six Core Component Types

1. Landing Page / Hero

Complete interactive pages with layout, scroll, interaction, and Three.js scenes. Examples: Kage – Japanese temple theme with night scene, lanterns, cherry blossoms, 3D environment, and mouse/keyboard/scroll/navigation interactions.

Complete Shelf

Bestsellers Book Showcase

Previously such pages required weeks of custom work; now developers can start from a complete effect and modify.

2. Three.js 3D Scenes

Core of ThreeUI. Ready-made scenes include:

Temple Night

Japanese Tower

Bookshelf

Globe

Orbital Sphere

Landscape

Camera, Light, Material, and Animation basics are pre-encapsulated. Ideal for AI product sites, SaaS, portfolios, Web3, and developer tools where Hero sections need 3D depth.

3. Shader / Dynamic Backgrounds

Fluid, particle, nebula, dot-matrix, and space-warping effects for high-end backgrounds:

Liquid Form

Dot Matrix

Warp Field

Nebula Background

Particle Network

Flux Vortex

Dropping these into a hero background instantly elevates page texture.

4. Buttons

Buttons now incorporate Shader effects far beyond CSS hover:

Liquid Metal Button

Plasma Button

Thinking Button

Glassmorphism CTA

Gradient Beam CTA

Fluid, metal, glass, light, gradient, and particle effects packed into a single button.

5. Text Animation

Rich typography effects using particles, morphing, and path motion:

Typography Vortex

Morphing Glyph Cloud

Particle Wordmark

Neon Typography

Suited for product logos, hero headlines, brand showcases. Previously required hand-rolled GSAP + Canvas + Shader; now available as ready implementations.

6. UI Elements

Smaller widgets for direct business-page integration:

Genie Dock

Animated Top Dock

Gallery

Uplink Loader

Performance Gauges

Skeuomorphic Toggle

Common UI patterns (Dock, Loading, Gallery, Toggle, Gauges) enhanced with Three.js and Motion.

Community Version: 164 Browsable Effects

Official README lists:

50 Community parent components

111 Community Routes

141 free Variants

23 standalone components

Total 164 browsable effects

All Community component source code and assets are open. ThreeUI does not hide logic inside a closed npm package.

Built for AI Coding

ThreeUI targets AI Coding workflows. Beyond viewing source, it provides Prompt-related capabilities. Developers can feed a chosen effect's source or Prompt into agents like:

Codex

Claude Code

Cursor

Example natural-language edits:

“Switch overall to dark-blue tech style.”

“Reduce particle count.”

“Soften the lighting.”

“Lower animation speed by 30%.”

The AI modifies the existing Three.js code directly. This solves the classic problem: developers understand the visual result but struggle to tweak Camera, Material, or Shader parameters.

New workflow: Find near-target effect → Let AI modify .

MCP (Model Context Protocol) Integration

ThreeUI ships its own MCP server, enabling MCP-compatible AI Coding Clients to access the ThreeUI Catalog directly. Provided capabilities: search_catalog – search components and templates. get_catalog_item – fetch component info, resources, usage. get_item_source – read full source code. get_item_prompt – retrieve implementation Prompt for the component.

Future flow: Requirement → AI Agent → ThreeUI → Component Source → Page . MCP is currently a Pro feature, but the direction is clear.

Conclusion

Following Canvas UI 's push of WebGL into everyday UI, ThreeUI advances further. From buttons, text, backgrounds to full 3D scenes and Landing Pages, more hand-crafted visual effects are becoming drop-in components. Combined with AI Agents — Find effect → Grab source → Describe need → AI modifies — the barrier to Three.js is dropping rapidly. Building a premium-looking 3D website may soon be far easier than before.

ThreeUI Website: https://threeui.com GitHub Repository:

https://github.com/MengTo/threeui