{ "meta": { "updatedAt": "2026-09-12T12:15:00Z", "timezone": "Asia/Shanghai", "version": "1.4.12", "count": 46 }, "items": [ { "id": "uplink-loader", "slug": "uplink-loader", "title": "Uplink Loader", "titleEn": "Uplink Loader", "summary": "ThreeUI Community 赛博上行加载条：阶梯进度、遥测刻度、霓虹读数、角标与扫描线颗粒，CSS/DOM 运行时。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community cinematic uplink loader: stepped progress, telemetry ticks, neon readouts, corner markers, scanlines and grain on a DOM/CSS runtime. No login; copy the prompt.", "sourceUrl": "https://threeui.com/css/uplink-loader", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/uplink-loader.webp", "npmPackage": "@designcodeio/threeui", "promptHint": "用 Uplink Loader 做 Agent 控制台加载态。保持 Community 免费件，只改文案与霓虹色。", "promptHintEn": "Use Uplink Loader for an Agent-console loading state. Keep the free Community piece; only retint neon and labels.", "types": [ "ui", "motion" ], "tags": [ "threeui", "community", "loader", "css", "agent-console" ], "featured": true, "qualityNote": "Community 免费 CSS 加载件（2026-09-12 核到 Copy Prompt，无 Pro template 遮罩）。复制 prompt，勿手写着色器。", "qualityNoteEn": "Free Community CSS loader (Copy Prompt present, no Pro template overlay, checked 2026-09-12). Copy the prompt; don’t hand-write shaders.", "publishedAt": "2026-09-12", "updatedAt": "2026-09-12T12:15:00Z" }, { "id": "spark-badge", "slug": "spark-badge", "title": "Spark Badge · Badge", "titleEn": "Spark Badge · Badge", "summary": "ThreeUI Community 光雨徽章背景：Badge / Browser / iPhone / Studio Display 四免费变体，Canvas 2D 光雨与 curl-noise 余烬拼出凭证感徽章，适合 Agent 成就 / 密钥卡氛围底。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community luminous-rain badge background: four free variants (Badge / Browser / iPhone / Studio Display). Canvas 2D rain and curl-noise embers assemble a credential-style badge — fits Agent achievement / key-card atmospheres. No login; copy the prompt.", "sourceUrl": "https://threeui.com/backgrounds/spark-badge/badge", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/spark-badge.webp", "npmPackage": "@designcodeio/threeui", "promptHint": "用 Spark Badge 免费 Badge 变体做成就卡背景。可换 Browser / iPhone，保持 Community。", "promptHintEn": "Use the free Badge variant of Spark Badge as an achievement-card background. Browser / iPhone variants also work; keep Community.", "types": [ "background", "ui" ], "tags": [ "threeui", "community", "badge", "background", "canvas" ], "featured": true, "qualityNote": "Community 免费背景（2026-09-12 核到 Copy Prompt，无 Pro template 遮罩）。四变体均按免费收录。", "qualityNoteEn": "Free Community background (Copy Prompt present, no Pro template overlay, checked 2026-09-12). All four variants treated as free.", "publishedAt": "2026-09-12", "updatedAt": "2026-09-12T12:15:00Z" }, { "id": "3d-paper", "slug": "3d-paper", "title": "3D Paper · Original", "titleEn": "3D Paper · Original", "summary": "ThreeUI Community 立体纸张：Original / Site of the Year / Japanese / Certificate 四免费变体，适合 Agent 作品集封面与证书卡。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community dimensional paper: free Original / Site of the Year / Japanese / Certificate variants. Fits Agent portfolio covers and certificate cards. No login; copy the prompt.", "sourceUrl": "https://threeui.com/three-js/3d-paper/original", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/3d-paper.webp", "npmPackage": "@designcodeio/threeui", "promptHint": "用 3D Paper 的免费 Original 或 Certificate 变体做封面卡。保持 Community，勿用 PRO。", "promptHintEn": "Use the free Original or Certificate variant of 3D Paper as a cover card. Keep Community; skip PRO.", "types": [ "ui", "threejs" ], "tags": [ "threeui", "community", "paper", "hero" ], "featured": true, "qualityNote": "Community 免费 Three.js 纸张组件（浏览墙无 PRO 角标）。复制 prompt，勿手写着色器。", "qualityNoteEn": "Free Community Three.js paper component (no PRO badge on the browse wall). Copy the prompt — do not hand-write the shader.", "publishedAt": "2026-09-11", "updatedAt": "2026-09-11T01:10:00Z" }, { "id": "woven-cloth", "slug": "woven-cloth", "title": "Woven Cloth · Woven Cloth", "titleEn": "Woven Cloth · Woven Cloth", "summary": "ThreeUI Community 编织布料 Three.js 背景：Woven Cloth / Iridescent Silk / Atelier Flag / Washi Noren 四免费变体，适合 Agent 落地页材质底。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community woven-cloth Three.js background: free Woven Cloth / Iridescent Silk / Atelier Flag / Washi Noren variants. Fits an Agent landing material base. No login; copy the prompt.", "sourceUrl": "https://threeui.com/three-js/woven-cloth/woven-cloth", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/woven-cloth.webp", "npmPackage": "@designcodeio/threeui", "promptHint": "用 Woven Cloth 免费变体做落地页材质背景。可换 Iridescent Silk 或 Washi Noren，保持 Community。", "promptHintEn": "Use a free Woven Cloth variant as a landing material background. Iridescent Silk or Washi Noren also work; keep Community.", "types": [ "background", "threejs" ], "tags": [ "threeui", "community", "webgl", "fabric", "background" ], "featured": true, "qualityNote": "Community 免费 Three.js 背景（浏览墙无 PRO 角标）。复制 prompt，勿手写着色器。", "qualityNoteEn": "Free Community Three.js background (no PRO badge on the browse wall). Copy the prompt — do not hand-write the shader.", "publishedAt": "2026-09-11", "updatedAt": "2026-09-11T01:10:00Z" }, { "id": "matrix-field", "slug": "matrix-field", "title": "Matrix Junction · Laser", "titleEn": "Matrix Junction · Laser", "summary": "ThreeUI Community 指针响应激光矩阵背景：Laser 家族 4 个免费变体（Matrix Junction / Atmospheric Blade / Vanishing Array / Halftone Relay），Raw WebGL 单 pass，可调速度、尺寸、长度、密度、色相与不透明度，适合 Agent 面板氛围底。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community pointer-reactive laser matrix background: four free Laser-family variants (Matrix Junction / Atmospheric Blade / Vanishing Array / Halftone Relay), single raw-WebGL pass with live speed, size, length, density, hue and opacity controls — fits an Agent-panel atmosphere base. No login; copy the prompt.", "sourceUrl": "https://threeui.com/backgrounds/matrix-field/matrix-field", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/matrix-field.webp", "npmPackage": "@designcodeio/threeui", "promptHint": "用 Matrix Field 的免费 Matrix Junction 变体做 Agent 面板背景。保持 Community 变体，只改色相与密度。", "promptHintEn": "Use the free Matrix Junction variant of Matrix Field as an Agent-panel background. Keep the Community variant; only retint hue and density.", "types": [ "background", "threejs" ], "tags": [ "threeui", "community", "webgl", "background", "laser", "matrix" ], "featured": true, "qualityNote": "Community 免费背景（无 PRO 角标，在 THREEUI 免费栏目下的 Laser 家族）。复制 prompt，勿手写着色器。预览为 ThreeUI 官方缩略图裁 3:2。", "qualityNoteEn": "Free Community background (no PRO badge; Laser family under the free THREEUI section). Copy the prompt — do not hand-write the shader. Preview is ThreeUI’s official thumbnail cropped to 3:2.", "publishedAt": "2026-09-10", "updatedAt": "2026-09-10T12:00:00Z" }, { "id": "liquid-metal-button", "slug": "liquid-metal-button", "title": "Liquid Metal Button · Pill", "titleEn": "Liquid Metal Button · Pill", "summary": "ThreeUI Community 液态金属 CTA：Sign up Pill / Liquid Orb / Play Circle 三个免费变体，Raw WebGL 2 + DOM/CSS 原生 button，指针跟随金属光谱与 bloom、按压出多面涟漪，支持 Enter/Space 触发与 reduced-motion 冻结。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community liquid-metal CTA: three free variants (Sign up Pill / Liquid Orb / Play Circle) on a native button with raw WebGL 2 + DOM/CSS — pointer-following spectral metal and bloom, faceted press ripples, Enter/Space activation and a reduced-motion freeze. No login; copy the prompt.", "sourceUrl": "https://threeui.com/buttons/liquid-metal-button/pill", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/liquid-metal-button.webp", "npmPackage": "@designcodeio/threeui", "promptHint": "用 Liquid Metal Button 的免费 Pill 变体做 Agent 主按钮。保持 Community，只改文案与色相。", "promptHintEn": "Use the free Pill variant of Liquid Metal Button as the Agent primary button. Keep the Community variant; only change the label and hue.", "types": [ "button", "ui" ], "tags": [ "threeui", "community", "webgl", "button", "cta", "liquid-metal" ], "featured": true, "qualityNote": "Community 免费界面件（无 PRO 角标，在 THREEUI 免费栏目 Buttons 下）。复制 prompt，只改文案与色相，勿手写着色器。预览为现场演示帧（指针悬停态）裁 3:2。", "qualityNoteEn": "Free Community UI piece (no PRO badge; under Buttons in the free THREEUI section). Copy the prompt and only change label / hue — do not hand-write the shader. Preview is a live demo frame (pointer-hover state) cropped to 3:2.", "publishedAt": "2026-09-10", "updatedAt": "2026-09-10T12:00:00Z" }, { "id": "energy-orb", "slug": "energy-orb", "title": "Energy Orb · Globe", "titleEn": "Energy Orb · Globe", "summary": "ThreeUI Community 能量球体背景：分层 FBM 球体、边缘辉光与星场，适合 Agent 面板的 WebGL 氛围底。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community energy globe background: layered FBM sphere, rim glow, and star field for Agent-panel WebGL atmosphere. No login; copy the prompt.", "sourceUrl": "https://threeui.com/backgrounds/energy-orb/energy-orb", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/energy-orb.webp", "npmPackage": "@designcodeio/threeui", "promptHint": "用 Energy Orb 的免费 Globe 变体做 Agent 面板氛围底。保持 Community 变体，只改色相与不透明度。", "promptHintEn": "Use the free Energy Orb Globe variant as an Agent-panel atmosphere. Keep the Community variant; only retint hue and opacity.", "types": [ "background", "threejs" ], "tags": [ "threeui", "community", "webgl", "background", "globe" ], "featured": true, "qualityNote": "Community 免费背景（无 PRO 角标）。复制 prompt 只改色相/透明度，不要手写着色器。", "qualityNoteEn": "Free Community background (no PRO badge). Copy the prompt and only retint hue/opacity — do not hand-write the shader.", "publishedAt": "2026-09-10", "updatedAt": "2026-09-10T01:40:00Z" }, { "id": "generative-tree", "slug": "generative-tree", "title": "Elements · Generative Tree", "titleEn": "Elements · Generative Tree", "summary": "ThreeUI Community Elements 变体：画笔感树枝从赭石长到金尖，指针风吹并掉落微粒。适合 Agent 等待/氛围页。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community Elements variant: a painterly branching tree grows from warm sienna to golden tips, sways with pointer wind, and sheds motes — good for Agent wait/atmosphere pages. No login; copy the prompt.", "sourceUrl": "https://threeui.com/backgrounds/elements/generative-tree", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/generative-tree.webp", "npmPackage": "@designcodeio/threeui", "promptHint": "用 Elements 的免费 Generative Tree 做 Agent 氛围页。保持 Community 变体，只改色相与粒子量。", "promptHintEn": "Use the free Elements Generative Tree for an Agent atmosphere page. Keep the Community variant; only retint hue and particle amount.", "types": [ "background", "threejs", "motion" ], "tags": [ "threeui", "community", "webgl", "tree", "background" ], "featured": true, "qualityNote": "Community 免费 Elements 变体（无 PRO 角标）。复制 prompt 只改色相与粒子，不要手写动效。", "qualityNoteEn": "Free Community Elements variant (no PRO badge). Copy the prompt and only retint hue / particles — do not hand-write motion.", "publishedAt": "2026-09-10", "updatedAt": "2026-09-10T01:40:00Z" }, { "id": "performance-gauges", "slug": "performance-gauges", "title": "PerformanceGauges · Tachometer", "titleEn": "PerformanceGauges · Tachometer", "summary": "ThreeUI Community 性能仪表盘：tachometer 等 4 个免费变体，适合 Agent 面板上的实时指标装饰。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community performance gauges: free tachometer and three sibling variants for live-metric Agent panel ornament. No login; copy the prompt.", "sourceUrl": "https://threeui.com/css/performance-gauges/tachometer", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/performance-gauges.webp", "npmPackage": "@designcodeio/threeui", "promptHint": "用 PerformanceGauges 的免费 tachometer 做 Agent 面板指标。保持 Community 变体，只改色相与量程文案。", "promptHintEn": "Use the free PerformanceGauges tachometer for Agent panel metrics. Keep the Community variant; only retint hue and gauge labels.", "types": [ "ui", "css" ], "tags": [ "threeui", "community", "gauge", "dashboard", "css" ], "featured": true, "stars": 4, "qualityNote": "Community 免费界面件（无 PRO 角标）。复制 prompt 只改色相与文案，不要手写动效。", "qualityNoteEn": "Free Community UI piece (no PRO badge). Copy the prompt and only retint hue / labels — do not hand-write motion.", "publishedAt": "2026-09-09", "updatedAt": "2026-09-09T01:15:00Z" }, { "id": "circle-buttons", "slug": "circle-buttons", "title": "CircleButtons · Play", "titleEn": "CircleButtons · Play", "summary": "ThreeUI Community 圆形按钮族：Play / Plus / Mail 等免费变体，暗玻璃表面与旋转锥光，适合紧凑 CTA。", "summaryEn": "ThreeUI Community circle buttons: free Play / Plus / Mail variants with dark-glass surfaces and a moving conic light. Fits compact CTAs.", "sourceUrl": "https://threeui.com/buttons/circle-buttons/play", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/circle-buttons.webp", "npmPackage": "@designcodeio/threeui", "promptHint": "从 CircleButtons 挑免费 Play 做紧凑播放/开始按钮。主色换成站点强调色，保持圆形遮罩。", "promptHintEn": "Pick the free Play variant from CircleButtons as a compact play/start control. Swap the accent to the site color; keep the circular mask.", "types": [ "button", "ui" ], "tags": [ "threeui", "community", "button", "circle", "cta" ], "featured": false, "stars": 4, "qualityNote": "Community 免费界面件（无 PRO 角标）。复制 prompt，改主色即可。", "qualityNoteEn": "Free Community UI piece (no PRO badge). Copy the prompt and retint the accent.", "publishedAt": "2026-09-09", "updatedAt": "2026-09-09T01:15:00Z" }, { "id": "wireframe-forms-cube", "slug": "wireframe-forms-cube", "title": "Wireframe Forms · Cube", "titleEn": "Wireframe Forms · Cube", "summary": "ThreeUI Community 的棱镜线框立方体：cube / cylinders / sphere 免费变体，Canvas 2D，适合 Agent 界面装饰。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community prismatic wireframe cube: free variants cube / cylinders / sphere on Canvas 2D. Fits Agent UI ornament. No login; copy the prompt.", "types": [ "ui", "threejs" ], "sourceUrl": "https://threeui.com/ui-elements/wireframe-forms/cube", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "stars": 4, "publishedAt": "2026-09-02", "updatedAt": "2026-09-02T01:10:00Z", "qualityNote": "Community 免费界面件（无 PRO 角标）。复制 prompt 只改 speed / opacity / hue，不要手写粒子。", "qualityNoteEn": "Free Community UI piece (no PRO badge). Copy the prompt and only tweak speed / opacity / hue — do not hand-write particles.", "tags": [ "threeui", "community", "wireframe", "ui" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Wireframe Forms 的 cube 做 Agent 面板装饰。保持免费 Community 变体，线框疏一点、色相偏冷。", "promptHintEn": "Use Wireframe Forms cube as Agent panel ornament. Keep the free Community variant, thin the wireframe, cool the hue.", "previewImage": "/previews/wireframe-forms-cube.webp" }, { "id": "three-ws", "slug": "three-ws", "title": "three.ws", "titleEn": "three.ws", "summary": "开源 3D AI Agent 平台（Apache-2.0）：两行 HTML 嵌入 agent-3d，文字/自拍造形象，语音与记忆可选。免登录可玩 Forge 与嵌入预览。", "summaryEn": "Open-source 3D AI agent platform (Apache-2.0): embed agent-3d in two lines of HTML, build avatars from text or selfies, optional voice and memory. Forge and embed previews work without login.", "types": [ "threejs", "ui", "landing" ], "sourceUrl": "https://three.ws", "secondaryUrls": [ "https://github.com/nirholas/three.ws", "https://www.npmjs.com/package/@three-ws/sdk" ], "featured": true, "stars": 4, "publishedAt": "2026-04-29", "updatedAt": "2026-08-31T01:28:18Z", "qualityNote": "免费开源可公开访问；给 Agent 用的可复制嵌入层，不是 Pro 付费墙。", "qualityNoteEn": "Free, open-source, publicly reachable — a copyable embed layer for Agents, not a Pro paywall.", "tags": [ "three.js", "web-component", "agent", "open-source" ], "npmPackage": "@three-ws/sdk", "promptHint": "用 three.ws 的 agent-3d 嵌入做站点里的 3D 助手壳；保持开源嵌入，换我们的形象与人设。", "promptHintEn": "Embed three.ws agent-3d as the site’s 3D assistant shell; keep the open-source embed and swap in our avatar and persona.", "previewImage": "/previews/three-ws.webp" }, { "id": "shadcn-ui", "slug": "shadcn-ui", "title": "shadcn/ui", "titleEn": "shadcn/ui", "summary": "开源、开代码的设计系统地基。组件可复制进项目再改，是 Agent 拼界面时最稳的默认库。", "summaryEn": "Open-source, open-code design-system foundation. Copy components into the project and make them yours — the safest default kit for an Agent assembling UI.", "types": [ "ui" ], "sourceUrl": "https://ui.shadcn.com", "secondaryUrls": [ "https://x.com/grgerwcwetwet/status/2092937412490260513" ], "featured": true, "stars": 5, "publishedAt": "2026-08-27", "updatedAt": "2026-08-28T00:56:00Z", "qualityNote": "五站里最通用的底座。和 beUI 的 shadcn add 流程能接上。", "qualityNoteEn": "The most general base of the five. Connects to beUI’s shadcn add flow.", "tags": [ "ui", "css" ], "promptHint": "先用 shadcn/ui 搭按钮、表单和对话框，再往上叠 Beautiful UI 的 Agent 原语。", "promptHintEn": "Build buttons, forms, and dialogs with shadcn/ui first, then stack Beautiful UI’s agent primitives on top.", "previewImage": "/previews/shadcn-ui.webp" }, { "id": "transitions-dev", "slug": "transitions-dev", "title": "Transitions.dev", "titleEn": "Transitions.dev", "summary": "给 AI Agent 用的 UI 过渡合集：卡片缩放、数字翻动、流式文字、思考态。首页免费可逛，部分效果标了 Pro。", "summaryEn": "UI transitions for AI agents: card resize, number pop, streaming text, thinking states. The gallery is free to browse; some effects are Pro.", "types": [ "motion", "ui" ], "sourceUrl": "https://transitions.dev", "secondaryUrls": [ "https://x.com/grgerwcwetwet/status/2092937412490260513" ], "featured": true, "publishedAt": "2026-08-27", "updatedAt": "2026-08-28T00:56:00Z", "qualityNote": "免费区够 Agent 抄过渡。不收 Pro 单独条目。", "qualityNoteEn": "The free gallery is enough for an Agent to copy transitions. No separate Pro entries.", "tags": [ "motion", "ui", "css" ], "promptHint": "从 Transitions.dev 免费区抄一个流式文字或思考态过渡，接到现有 Chat 组件上。", "promptHintEn": "Copy one free streaming-text or thinking-state transition from Transitions.dev onto the existing Chat component.", "previewImage": "/previews/transitions-dev.webp" }, { "id": "rare-ui", "slug": "rare-ui", "title": "Rare UI", "titleEn": "Rare UI", "summary": "少见的动效 React 组件合集，偏展示和交互实验，适合给 Agent 当高完成度参考。", "summaryEn": "A collection of uncommon animated React components — more showcase and interaction experiments. A high-finish reference for an Agent.", "types": [ "ui", "motion" ], "sourceUrl": "https://rareui.com", "secondaryUrls": [ "https://x.com/grgerwcwetwet/status/2092937412490260513" ], "featured": true, "publishedAt": "2026-08-27", "updatedAt": "2026-08-28T00:56:00Z", "qualityNote": "周览资源五站之一。站点偏作品集，抄之前先看授权和依赖。", "qualityNoteEn": "One of the five sites in the post. More of a showcase; check license and deps before copying.", "tags": [ "ui", "motion" ], "promptHint": "参考 Rare UI 的动效密度，只抄一个交互进现有页面，不要整站换皮。", "promptHintEn": "Take Rare UI’s motion density; copy one interaction into the existing page, don’t reskin the whole site.", "previewImage": "/previews/rare-ui.webp" }, { "id": "beui", "slug": "beui", "title": "beUI", "titleEn": "beUI", "summary": "React / Next.js 动效组件，带 Agent 指南和 registry。npx shadcn add 就能装，还有 MCP 和 OpenUI 用法。", "summaryEn": "Animated React / Next.js components with an agent guide and registry. Install via npx shadcn add; MCP and OpenUI docs included.", "types": [ "ui", "motion" ], "sourceUrl": "https://beui.dev", "secondaryUrls": [ "https://beui.dev/r", "https://x.com/grgerwcwetwet/status/2092937412490260513" ], "featured": true, "publishedAt": "2026-08-27", "updatedAt": "2026-08-28T00:56:00Z", "qualityNote": "开源，组件 JSON 可给 Agent 直接读。适合当乐高块。", "qualityNoteEn": "Open source; component JSON is agent-readable. Fits the Lego-block workflow.", "tags": [ "ui", "motion", "css" ], "promptHint": "从 beUI registry 装一个 Prompt Input 和 Approval Card，动效跟项目主色走。", "promptHintEn": "Install a Prompt Input and Approval Card from the beUI registry. Match motion to the project’s primary color.", "previewImage": "/previews/beui.webp" }, { "id": "beautiful-ui", "slug": "beautiful-ui", "title": "Beautiful UI", "titleEn": "Beautiful UI", "summary": "给 AI 原生界面用的组件原语：加载、思考轨迹、流式文本、审批卡、工具芯片、Prompt Bar。可直接丢给 Agent 抄进项目。", "summaryEn": "Primitives for AI-native interfaces: loading, thinking traces, streaming text, approval cards, tool chips, prompt bar. Hand the page to an Agent and let it pick.", "types": [ "ui" ], "sourceUrl": "https://beautifului.dev", "secondaryUrls": [ "https://x.com/grgerwcwetwet/status/2092937412490260513" ], "featured": true, "publishedAt": "2026-08-27", "updatedAt": "2026-08-28T00:56:00Z", "qualityNote": "周览资源那条里的第一站。专门给 Agent 界面，不是通用按钮库。", "qualityNoteEn": "First of the five sites in 周览资源’s post. Built for agent UIs, not a generic button kit.", "tags": [ "ui", "css" ], "promptHint": "用 Beautiful UI 的 Approval Card 和 Thinking 做 Agent 对话页。保持深色，审批默认停住。", "promptHintEn": "Use Beautiful UI’s Approval Card and Thinking for an agent chat. Keep it dark; approvals stay blocked by default.", "previewImage": "/previews/beautiful-ui.webp" }, { "id": "buttermax", "slug": "buttermax", "title": "Buttermax", "titleEn": "Buttermax", "summary": "Buttermax 数字制作作品集站：鼠标跟随、3D、液态动效和页面转场都做得很顺，适合拆个人作品集的交互。", "summaryEn": "Buttermax’s digital-production site: mouse-follow, 3D, liquid motion, and page transitions done smoothly — worth taking apart if you’re building a personal portfolio.", "types": [ "landing", "motion", "hero" ], "sourceUrl": "https://buttermax.net/", "secondaryUrls": [ "https://x.com/sts81998850/status/2092631071120920605" ], "featured": true, "publishedAt": "2026-08-26", "updatedAt": "2026-08-27T15:30:00Z", "qualityNote": "风间推荐的交互参考站，标语是 The gold standard in buttery smooth digital production。免登录可逛。", "qualityNoteEn": "An interaction reference recommended for portfolio work. Tagline: the gold standard in buttery smooth digital production. No login to browse.", "tags": [ "landing", "motion", "3d", "portfolio", "hero" ], "promptHint": "参考 Buttermax 的首屏：大字标 + 中间一件 3D 物 + 少按钮。转场和鼠标跟随要慢、要润，不要堆特效。", "promptHintEn": "Take Buttermax’s first screen: big wordmark, one 3D object in the middle, few buttons. Keep transitions and mouse-follow slow and smooth — don’t pile on effects.", "previewImage": "/previews/buttermax.webp" }, { "id": "metalforge-progress", "slug": "metalforge-progress", "title": "MetalForge Progress", "titleEn": "MetalForge Progress", "summary": "MetalForge 的 Progress 进度条着色器：浏览器里免费调参、WebGPU 实时预览，可导出 SwiftUI Metal 或 React Native Skia（导出要 Pro）。", "summaryEn": "MetalForge’s Progress bar shaders: free in-browser tweaking with a live WebGPU preview; export SwiftUI Metal or React Native Skia (export is Pro).", "types": [ "ui", "motion" ], "sourceUrl": "https://metalforge.xyz/", "secondaryUrls": [ "https://x.com/sucodeee/status/2092222674478993525" ], "featured": true, "publishedAt": "2026-08-25", "updatedAt": "2026-08-27T15:30:00Z", "qualityNote": "来自 @sucodeee 的进度条动画。现有库以 ThreeUI 为主，这条是同类 GPU UI 动效，编辑器免费可玩，导出文件要 Pro。", "qualityNoteEn": "From @sucodeee’s progress-bar demo. The library is mostly ThreeUI; this is the same GPU-UI family. The editor is free to play; shipping files is Pro.", "tags": [ "shader", "progress", "webgpu", "swiftui", "motion", "ui" ], "promptHint": "用 MetalForge Progress 做同步/加载进度条。先在编辑器里选 Spring 或 Slosh，换成我们的主色，导出前先截预览给设计看。", "promptHintEn": "Use MetalForge Progress for a sync/loading bar. Pick Spring or Slosh in the editor, switch to our primary color, and screenshot the preview for design before exporting.", "previewImage": "/previews/metalforge-progress.webp" }, { "id": "structure-flow", "slug": "structure-flow", "title": "Structure Flow", "summary": "ThreeUI Community 的三维场研究：结构流、轨道球、点阵、星云与流体场等免费变体。免登录，可在浏览页直接预览。", "types": [ "threejs", "background", "hero" ], "sourceUrl": "https://threeui.com/three-js/structure-flow/structure-flow", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "适合当 Agent 的第一块三维 Hero：复制页面里的 prompt / Skill.md，只改色相、点大小和运动速度，不必手改 procedural JS。", "tags": [ "threeui", "community", "threejs", "hero", "field" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Structure Flow 做产品首屏背景。保持免费 Community 变体，换成我们的主色，放慢速度，点更疏一点。", "previewImage": "/previews/structure-flow.webp", "titleEn": "Structure Flow", "summaryEn": "A ThreeUI Community 3D field study: free variants for structure flow, orbit orbs, lattices, nebulae, and fluid fields. No login; preview on the browse page.", "qualityNoteEn": "A good first 3D hero for an Agent: copy the page prompt / Skill.md and only change hue, point size, and speed — no hand-editing of procedural JS.", "promptHintEn": "Use Structure Flow as a product first-screen background. Keep the free Community variant, switch to our primary color, slow it down, and thin out the points." }, { "id": "predictive-arc", "slug": "predictive-arc", "title": "Predictive Arc", "summary": "Canvas / WebGL 信号弧：预测弧、像素弧、粒子、网格与半调流动。免费变体都在 Community 目录里。", "types": [ "background", "motion", "ui" ], "sourceUrl": "https://threeui.com/backgrounds/predictive-arc/predictive", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "仪表盘或「推理中」状态很好用。把 prompt 交给 Agent，调 hue / speed，做成自己的数据弧，不要去碰 Pro 变体。", "tags": [ "threeui", "community", "canvas", "webgl", "signal" ], "npmPackage": "@designcodeio/threeui", "promptHint": "把 Predictive Arc 嵌进控制台顶栏。用免费变体，改成品牌琥珀色，速度放慢，保持可读。", "previewImage": "/previews/predictive-arc.webp", "titleEn": "Predictive Arc", "summaryEn": "Canvas / WebGL signal arcs: predictive arc, pixel arc, particles, grid, and halftone flow. Free variants live in the Community directory.", "qualityNoteEn": "Works well for a dashboard or “thinking” state. Hand the prompt to an Agent, tune hue / speed, and make it your data arc — stay off Pro variants.", "promptHintEn": "Drop Predictive Arc into a console top bar. Use a free variant, switch to brand amber, slow it down, and keep it readable." }, { "id": "brand-orbs", "slug": "brand-orbs", "title": "Brand Orbs", "summary": "一组 Canvas 品牌球：Claude、Cursor、GitHub、Figma 等免费变体，适合做工具墙或集成列表。", "types": [ "ui", "motion" ], "sourceUrl": "https://threeui.com/ui-elements/brand-orbs/cursor", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": false, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "集成页图标墙的现成起点。Skill 侧只需换 logo 与尺寸，主题可整组一起改。", "tags": [ "threeui", "community", "brand", "orb", "canvas" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Brand Orbs 做「已接入工具」一排。只保留免费变体，尺寸统一，悬停轻轻转。", "previewImage": "/previews/brand-orbs.webp", "titleEn": "Brand Orbs", "summaryEn": "A set of Canvas brand orbs: free Claude, Cursor, GitHub, Figma, and other variants. Fits a tools wall or integrations list.", "qualityNoteEn": "A ready start for an integrations icon wall. On the Skill side, swap logos and size; the theme can change as a group.", "promptHintEn": "Use Brand Orbs as a “tools we connect” row. Keep free variants only, unify the size, and let hover spin gently." }, { "id": "rectangle-buttons", "slug": "rectangle-buttons", "title": "Rectangle Buttons", "summary": "Community 矩形按钮族：暗玻璃、Launch、点边框、滑动文字、渐变光束等免费 CTA，纯 CSS/DOM。", "types": [ "button", "ui" ], "sourceUrl": "https://threeui.com/buttons/rectangle-buttons/dark-pill", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": false, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "落地页主按钮最快可换的一套。复制 prompt，改主色和文案即可，Agent 不用重写动效。", "tags": [ "threeui", "community", "button", "cta", "css" ], "npmPackage": "@designcodeio/threeui", "promptHint": "从 Rectangle Buttons 挑一个免费 CTA。文案改成「开始试用」，主色换成站点强调色。", "previewImage": "/previews/rectangle-buttons.webp", "titleEn": "Rectangle Buttons", "summaryEn": "Community rectangle button family: dark glass, Launch, dotted borders, sliding type, gradient beams, and other free CTAs. Pure CSS/DOM.", "qualityNoteEn": "The fastest swap for a landing primary button. Copy the prompt, change color and copy; the Agent does not need to rewrite motion.", "promptHintEn": "Pick a free CTA from Rectangle Buttons. Change the copy to “Start trial” and the color to the site accent." }, { "id": "shader-buttons", "slug": "shader-buttons", "title": "Shader Buttons", "summary": "着色器按钮：Star Portal、Ignition、Plasma、Thinking 等免费 WebGL 变体，适合高能量 CTA。", "types": [ "button", "threejs", "motion" ], "sourceUrl": "https://threeui.com/buttons/star-portal/thinking-button", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "想让 Agent 做出「会呼吸」的按钮时用这组。Skill.md 里改色相就够，别手写 GLSL。", "tags": [ "threeui", "community", "shader", "button", "webgl" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Shader Buttons 的免费 Thinking 变体做「生成中」按钮。换成靛紫色，亮度略降。", "previewImage": "/previews/shader-buttons.webp", "titleEn": "Shader Buttons", "summaryEn": "Shader buttons: free WebGL variants such as Star Portal, Ignition, Plasma, and Thinking. Fits a high-energy CTA.", "qualityNoteEn": "Use this set when you want an Agent to make a button that “breathes.” Changing hue in Skill.md is enough — do not hand-write GLSL.", "promptHintEn": "Use the free Thinking variant from Shader Buttons as a “generating” button. Switch to indigo and drop the brightness a little." }, { "id": "constellation-field", "slug": "constellation-field", "title": "Constellation Field", "summary": "粒子星座场：漂移、网络、关口流、连线与等高线等免费 Canvas 变体，适合做连接感背景。", "types": [ "background", "motion" ], "sourceUrl": "https://threeui.com/backgrounds/constellation-field/constellation-field", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "多 Agent / 网络叙事的背景。把 prompt 交给 Agent，调密度和描边，主题一换就走。", "tags": [ "threeui", "community", "particles", "network", "canvas" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Constellation Field 做「协作网络」背景。粒子疏一点，线细一点，颜色跟纸色底和解。", "previewImage": "/previews/constellation-field.webp", "titleEn": "Constellation Field", "summaryEn": "Particle constellation fields: free Canvas variants for drift, networks, gate flow, links, and contours. Fits a connected-feeling background.", "qualityNoteEn": "A background for multi-agent / network stories. Hand the prompt to an Agent, tune density and stroke; once the theme changes, ship it.", "promptHintEn": "Use Constellation Field as a “collaboration network” background. Fewer particles, thinner lines, colors that sit with the paper base." }, { "id": "landscape", "slug": "landscape", "title": "Landscape", "summary": "可切换晨昏与天气的三维地貌：日出、正午、日落、夜晚、雨、雪等免费变体。", "types": [ "threejs", "background", "hero" ], "sourceUrl": "https://threeui.com/three-js/landscape/sunrise", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": false, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "氛围页或天气产品的现成场景。Agent 按 Skill 换时段即可，不必重建地形。", "tags": [ "threeui", "community", "landscape", "weather", "threejs" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Landscape 的日落变体做封面。保持 Community 免费集，不要换成 Pro 地貌。", "previewImage": "/previews/landscape.webp", "titleEn": "Landscape", "summaryEn": "A 3D landscape that can switch time of day and weather: free sunrise, noon, sunset, night, rain, and snow variants.", "qualityNoteEn": "A ready scene for an atmosphere page or weather product. The Agent only needs to change the time of day per the Skill — no need to rebuild terrain.", "promptHintEn": "Use the Landscape sunset variant as a cover. Stay on the free Community set; do not switch to Pro terrain." }, { "id": "sketchbook", "slug": "sketchbook", "title": "Sketchbook", "summary": "MengTo Sketchbook 落地页：像一本可翻的速写本，Community 整页可打开，免登录。", "types": [ "landing", "section" ], "sourceUrl": "https://threeui.com/landing-pages/meng-to-sketchbook-landing-page", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": false, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "作品集叙事的整页模板。把 prompt 交给 Agent，换封面字与纸色，结构先别拆。", "tags": [ "threeui", "community", "landing", "sketchbook", "portfolio" ], "npmPackage": "@designcodeio/threeui", "promptHint": "以 Sketchbook 落地页为骨架，改成我们的作品集首页。保留翻页节奏，只换文案与主色。", "previewImage": "/previews/sketchbook.webp", "titleEn": "Sketchbook", "summaryEn": "MengTo Sketchbook landing: like a flip-through sketchbook. The full Community page opens with no login.", "qualityNoteEn": "A full-page template for portfolio narrative. Hand the prompt to an Agent, swap cover type and paper color, and leave the structure alone at first.", "promptHintEn": "Use the Sketchbook landing as the skeleton of our portfolio home. Keep the page-turn rhythm; only change copy and primary color." }, { "id": "kage", "slug": "kage", "title": "Kage", "summary": "Kage 落地页：偏影与留白的整页模板，Community 免费，可调标题字体与主色。", "types": [ "landing", "hero" ], "sourceUrl": "https://threeui.com/landing-pages/kage-landing-page", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "安静品牌站的好起点。Skill 控制字体与主色，Agent 换主题比重写布局更快。", "tags": [ "threeui", "community", "landing", "kage", "editorial" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Kage 做品牌介绍页。标题换成我们的中文名，主色用靛蓝，保持大留白。", "previewImage": "/previews/kage.webp", "titleEn": "Kage", "summaryEn": "Kage landing: a full-page template of shadow and leftover space. Community-free; title type and primary color can be tuned.", "qualityNoteEn": "A good start for a quiet brand site. The Skill controls type and primary color; an Agent rethemes faster than rewriting layout.", "promptHintEn": "Use Kage as a brand intro page. Change the title to our Chinese name, use indigo as the primary, and keep the large leftover space." }, { "id": "complete-shelf", "slug": "complete-shelf", "title": "Complete Shelf", "summary": "整面书架落地页：适合书店、课程目录或「全部作品」索引。Community 免费整页。", "types": [ "landing", "section" ], "sourceUrl": "https://threeui.com/hero/complete-shelf-landing-page", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": false, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "目录型站点可直接复用。让 Agent 按 Skill 换书脊颜色与标题，不要重做货架几何。", "tags": [ "threeui", "community", "landing", "shelf", "catalog" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Complete Shelf 做课程目录。每本书脊写一门课名，主色跟随站点纸色。", "previewImage": "/previews/complete-shelf.webp", "titleEn": "Complete Shelf", "summaryEn": "A full-wall bookshelf landing: fits a bookstore, course catalog, or “all work” index. Free Community full page.", "qualityNoteEn": "Catalog sites can reuse this as-is. Let the Agent change spine colors and titles per the Skill — do not rebuild the shelf geometry.", "promptHintEn": "Use Complete Shelf as a course catalog. Each spine is a course name; primary color follows the site paper tone." }, { "id": "sylva-living-green", "slug": "sylva-living-green", "title": "Sylva · Living Green", "summary": "Sylva 落地页的免费 Living Green 变体：整页森林氛围。同系列 Sakura / Maple / Sequoia 是 Pro，本库不收录。", "types": [ "landing", "hero", "threejs" ], "sourceUrl": "https://threeui.com/hero/sylva/living-green", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "自然向产品的免费整页。只链 Living Green； sakura / maple 等 Pro 变体不要打开、不要写进 prompt。", "tags": [ "threeui", "community", "sylva", "landing", "forest" ], "npmPackage": "@designcodeio/threeui", "promptHint": "只用 Sylva 的 Living Green。改标题和主色，不要切换到标了 PRO 的季节变体。", "previewImage": "/previews/sylva-living-green.webp", "titleEn": "Sylva · Living Green", "summaryEn": "The free Living Green variant of the Sylva landing: a full-page forest mood. Sakura / Maple / Sequoia in the same series are Pro and are not listed here.", "qualityNoteEn": "A free full page for nature-leaning products. Link Living Green only; do not open or prompt sakura / maple and other Pro variants.", "promptHintEn": "Use only Sylva’s Living Green. Change the title and primary color. Do not switch to seasonal variants marked PRO." }, { "id": "text-path-studies", "slug": "text-path-studies", "title": "Text Path Studies", "summary": "路径字研究：地球字、轮廓流动、字形云、布料、涟漪与球体等免费 Canvas 变体。", "types": [ "text-animation", "motion" ], "sourceUrl": "https://threeui.com/text-animation/globe-study/globe-study", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": false, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "章节标题想「会走路径」时用。Agent 改字与色相即可，几何交给现成 Skill。", "tags": [ "threeui", "community", "typography", "path", "canvas" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Text Path Studies 做章节大标题。文字改成中文产品名，色相跟纸色底协调。", "previewImage": "/previews/text-path-studies.webp", "titleEn": "Text Path Studies", "summaryEn": "Path-type studies: free Canvas variants for globe type, outline flow, glyph clouds, cloth, ripples, and spheres.", "qualityNoteEn": "Use when a chapter title should “walk a path.” The Agent only changes the words and hue; geometry stays with the existing Skill.", "promptHintEn": "Use Text Path Studies for a chapter title. Change the words to the Chinese product name; hue should sit with the paper base." }, { "id": "gallery-heading", "slug": "gallery-heading", "title": "Gallery Heading", "summary": "画廊字标：斜向升起、坠落、横扫与循环等免费变体，适合作品集分节。", "types": [ "text-animation", "section" ], "sourceUrl": "https://threeui.com/text-animation/gallery-heading/rising-diagonal", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": false, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "分节标题的现成动效。复制 prompt 换字体与色相，Agent 不用重做扫光。", "tags": [ "threeui", "community", "gallery", "heading", "typography" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Gallery Heading 做作品集分节。标题换成「精选」，字体粗一点，色相偏靛。", "previewImage": "/previews/gallery-heading.webp", "titleEn": "Gallery Heading", "summaryEn": "Gallery wordmarks: free rising-diagonal, falling, sweep, and loop variants. Fits portfolio section breaks.", "qualityNoteEn": "Ready motion for section titles. Copy the prompt to change type and hue; the Agent does not need to rebuild the sweep.", "promptHintEn": "Use Gallery Heading for portfolio sections. Change the title to “Featured,” make the type a bit heavier, hue toward indigo." }, { "id": "article-headings", "slug": "article-headings", "title": "Article Headings", "summary": "文章开头字标：介绍字、粒子词标与音频词标等免费变体，适合长文或更新日志顶栏。", "types": [ "text-animation", "section", "ui" ], "sourceUrl": "https://threeui.com/text-animation/article-headings/threeui-intro", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": false, "publishedAt": "2026-08-22", "updatedAt": "2026-08-24T09:10:00Z", "qualityNote": "博客/日志标题可复用。把 Skill 交给 Agent 换文案和节奏，粒子密度别开太高。", "tags": [ "threeui", "community", "article", "heading", "wordmark" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Article Headings 做更新日志顶栏。文字改成「今日收录」，粒子少一点，方便阅读。", "previewImage": "/previews/article-headings.webp", "titleEn": "Article Headings", "summaryEn": "Article-open wordmarks: free intro type, particle wordmarks, and audio wordmarks. Fits a long-form or changelog header.", "qualityNoteEn": "Reusable for blog/log titles. Hand the Skill to an Agent to change copy and rhythm; keep particle density low.", "promptHintEn": "Use Article Headings as a changelog header. Change the words to “Listed today,” fewer particles, easier to read." }, { "id": "koi-studies", "slug": "koi-studies", "title": "Koi Studies", "titleEn": "Koi Studies", "summary": "ThreeUI Community 的锦鲤卡片叠：CSS 3D 深度、指针倾斜、拖拽/键盘翻页，三张日本画风研究（Kōhaku / Shūsui / Utsuri）。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community koi card stack: CSS 3D depth, pointer tilt, drag and keyboard paging, three Japanese studies (Kōhaku / Shūsui / Utsuri). No login; copy the prompt.", "types": [ "ui", "motion", "threejs" ], "sourceUrl": "https://threeui.com/css/koi-studies", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/koi-studies.webp", "featured": true, "publishedAt": "2026-08-22", "updatedAt": "2026-08-26T01:20:00Z", "qualityNote": "Community 免费组件，出现在 ThreeUI 公开「最新」列表。复制 Skill.md 只改纸色、印章红和翻页速度即可，不必手写 CSS 3D。", "qualityNoteEn": "A free Community component on ThreeUI’s public Newest list. Copy Skill.md and only change paper color, seal red, and flip speed — no hand-written CSS 3D.", "tags": [ "threeui", "community", "css", "cards", "koi" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Koi Studies 做作品集封面。保持 Community 免费变体，换成我们的纸色和主红，翻页慢一点，打开减弱动效时用静态叠。", "promptHintEn": "Use Koi Studies as a portfolio cover. Keep the free Community variant, switch to our paper color and primary red, slow the flip, and use a static stack when reduced motion is on." }, { "id": "bestsellers-book-showcase", "slug": "bestsellers-book-showcase", "title": "Bestsellers Book Showcase", "titleEn": "Bestsellers Book Showcase", "summary": "ThreeUI Community 的完整 Field Manuals 书封陈列落地页：编辑式排版、作者动效、嵌入媒体，可改标题字体与主色。免登录。", "summaryEn": "ThreeUI Community’s complete Field Manuals book-cover showcase landing page: editorial layout, authored motion, embedded media, with heading font and primary color controls. No login.", "types": [ "landing", "hero", "section" ], "sourceUrl": "https://threeui.com/hero/bestsellers-book-showcase", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/bestsellers-book-showcase.webp", "featured": true, "publishedAt": "2026-08-22", "updatedAt": "2026-08-26T01:20:00Z", "qualityNote": "Community 免费完整 HTML 落地页，不是 Pro。适合让 Agent 当「书/系列产品首屏」模板，只改字体和主色。", "qualityNoteEn": "A free Community full-HTML landing page, not Pro. A good Agent template for a book/series first screen: change font and primary color only.", "tags": [ "threeui", "community", "landing", "hero", "books" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Bestsellers Book Showcase 做系列手册首屏。保持 Community 免费版，换成我们的书名、主色和衬线字体，不要加 Pro 变体。", "promptHintEn": "Use Bestsellers Book Showcase as a series-manual first screen. Keep the free Community edition, swap in our titles, primary color, and serif; do not add Pro variants." }, { "id": "japanese-tower", "slug": "country-towers", "title": "Country Towers", "titleEn": "Country Towers", "summary": "ThreeUI Community 的六国塔楼场景：日式天守、中式、越南、泰国、高棉、奥斯曼，程序化地形上自动搭建，可轨道旋转。免登录。", "summaryEn": "ThreeUI Community six-country tower scene: Japanese tenshu, Chinese, Vietnamese, Thai, Khmer, and Ottoman, assembling on a procedural landscape with orbit controls. No login.", "types": [ "threejs", "hero", "background" ], "sourceUrl": "https://threeui.com/three-js/japanese-tower/japan", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/japanese-tower.webp", "featured": false, "publishedAt": "2026-08-22", "updatedAt": "2026-08-26T01:20:00Z", "qualityNote": "Community 免费 Three.js 场景，六个国家变体都在免费目录里。适合当地理/建筑向 Hero，不要写成 Pro。", "qualityNoteEn": "A free Community Three.js scene; all six country variants are in the free catalog. A good geography/architecture hero. Do not describe it as Pro.", "tags": [ "threeui", "community", "threejs", "architecture", "landscape" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Country Towers 的 Japan 变体做文化产品首屏。保持 Community 免费版，相机再远一点，搭建动画放慢，地形再绿一些。", "promptHintEn": "Use the Japan variant of Country Towers as a cultural-product first screen. Keep the free Community edition, pull the camera back, slow the build animation, and make the terrain a bit greener." }, { "id": "character-carousel", "slug": "character-carousel", "title": "Character Carousel", "titleEn": "Character Carousel", "summary": "ThreeUI Community 的角色卡片走马灯：浅色胶片带与深色波浪两种免费变体，指针/滚轮/键盘切换人像卡片。适合 Agent 团队墙。免登录。", "summaryEn": "ThreeUI Community character-card carousel: a light filmstrip and a dark wave as free variants, with pointer, wheel, and keyboard switching. A good Agent team wall. No login.", "types": [ "ui", "motion", "section" ], "sourceUrl": "https://threeui.com/ui-elements/character-carousel/character-filmstrip", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "previewImage": "/previews/character-carousel.webp", "featured": false, "publishedAt": "2026-08-22", "updatedAt": "2026-08-26T01:20:00Z", "qualityNote": "Community 免费 UI 件，和已有 Brand Orbs 不同：这是人像卡片而不是 logo 球。复制 prompt 换名字、职位和配色即可。", "qualityNoteEn": "A free Community UI piece, distinct from Brand Orbs: portrait cards, not logo orbs. Copy the prompt and swap names, titles, and palette.", "tags": [ "threeui", "community", "carousel", "cards", "ui" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Character Carousel 的 filmstrip 变体做 Agent 团队墙。保持 Community 免费版，换成我们的人名与职责，主色跟品牌走。", "promptHintEn": "Use the filmstrip variant of Character Carousel as an Agent team wall. Keep the free Community edition, swap in our names and roles, and match the brand color." }, { "id": "warp-field", "slug": "warp-field", "title": "Warp Field", "titleEn": "Warp Field", "summary": "ThreeUI Community 的跃迁拖影场：streaks 等免费变体，适合 Agent 落地页首屏。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community warp-streak field: free variants such as streaks. Fits an Agent landing hero. No login; copy the prompt.", "types": [ "threejs", "hero", "background" ], "sourceUrl": "https://threeui.com/three-js/warp-field/streaks", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "publishedAt": "2026-08-25", "updatedAt": "2026-09-01T01:41:20Z", "qualityNote": "Community 免费三维 Hero。复制 prompt 只改色相和拖影密度，不要手写粒子系统。", "qualityNoteEn": "A free Community 3D hero. Copy the prompt and only change hue and streak density — do not hand-write a particle system.", "tags": [ "threeui", "community", "threejs", "hero" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Warp Field 的 streaks 做产品首屏背景。保持免费 Community 变体，换成靛紫，拖影疏一点。", "promptHintEn": "Use Warp Field streaks as the product first-screen background. Keep the free Community variant, switch to indigo, and thin the streaks.", "previewImage": "/previews/warp-field.webp" }, { "id": "diagnostics-panel", "slug": "diagnostics-panel", "title": "Diagnostics Panel", "titleEn": "Diagnostics Panel", "summary": "ThreeUI Community 的等距诊断台：layers / nodes / flow 免费变体，适合 Agent 运维或系统可视化。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community isometric diagnostics board: free variants layers / nodes / flow. Fits Agent ops or systems visuals. No login; copy the prompt.", "types": [ "ui", "threejs" ], "sourceUrl": "https://threeui.com/ui-elements/diagnostics-panel/layers", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "publishedAt": "2026-08-25", "updatedAt": "2026-09-01T01:41:20Z", "qualityNote": "Community 免费界面件。复制 Skill.md 换成我们的层色和节点标签即可。", "qualityNoteEn": "A free Community UI piece. Copy Skill.md and swap in our layer colors and node labels.", "tags": [ "threeui", "community", "ui", "dashboard" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Diagnostics Panel 的 layers 变体做状态页。保持免费 Community 变体，层色换成我们的主色。", "promptHintEn": "Use the layers variant of Diagnostics Panel as a status page. Keep the free Community variant and switch layer colors to ours.", "previewImage": "/previews/diagnostics-panel.webp" }, { "id": "liquid-form", "slug": "liquid-form", "title": "Liquid Form", "titleEn": "Liquid Form", "summary": "ThreeUI Community 的液态金属 WebGL 背景：光线步进，体积小，适合 Hero 底。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community liquid-metal WebGL background: ray-marched, compact, fits a hero base. No login; copy the prompt.", "types": [ "background", "threejs" ], "sourceUrl": "https://threeui.com/backgrounds/liquid-form", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "publishedAt": "2026-08-25", "updatedAt": "2026-09-01T01:41:20Z", "qualityNote": "Community 免费背景场。复制 prompt 只改金属色和流动速度。", "qualityNoteEn": "A free Community background. Copy the prompt and only change metal color and flow speed.", "tags": [ "threeui", "community", "background", "webgl" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Liquid Form 做首屏背景。保持免费 Community 变体，金属色换成我们的主色，流动放慢。", "promptHintEn": "Use Liquid Form as the first-screen background. Keep the free Community variant, switch the metal to our primary color, and slow the flow.", "previewImage": "/previews/liquid-form.webp" }, { "id": "crt", "slug": "crt", "title": "CRT", "titleEn": "CRT", "summary": "ThreeUI Community 的 CRT 曲面玻璃背景：Terminal / Cinematic / Blue Screen / Nintendo 四变体，适合复古 Agent 首屏。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community curved-glass CRT background: Terminal / Cinematic / Blue Screen / Nintendo variants. Fits a retro Agent hero. No login; copy the prompt.", "types": [ "background", "threejs" ], "sourceUrl": "https://threeui.com/backgrounds/crt", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "publishedAt": "2026-09-04", "updatedAt": "2026-09-04T02:00:14Z", "qualityNote": "Community 免费背景场。复制 prompt 只改色相与速度，保持免费变体。", "qualityNoteEn": "A free Community background. Copy the prompt and only change hue and speed — keep the free variant.", "tags": [ "threeui", "community", "background", "webgl" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 CRT 做首屏背景。保持免费 Community 变体，色相换成我们的主色，速度放慢。", "promptHintEn": "Use CRT as the first-screen background. Keep the free Community variant, switch hue to our primary, and slow the speed.", "previewImage": "/previews/crt.webp" }, { "id": "skeuomorphic-toggle", "slug": "skeuomorphic-toggle", "title": "Skeuomorphic Toggle", "titleEn": "Skeuomorphic Toggle", "summary": "ThreeUI Community 的拟物开关：Skeuomorphic / Modern / Glass / Shader 四变体，自动适配亮暗。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community skeuomorphic toggle: Skeuomorphic / Modern / Glass / Shader variants, auto light/dark. No login; copy the prompt.", "types": [ "ui", "threejs" ], "sourceUrl": "https://threeui.com/ui-elements/skeuomorphic-toggle", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "publishedAt": "2026-09-04", "updatedAt": "2026-09-04T02:00:14Z", "qualityNote": "Community 免费界面件。复制 prompt 只改尺寸和色相，保持免费变体。", "qualityNoteEn": "A free Community UI piece. Copy the prompt and only change size and hue — keep the free variant.", "tags": [ "threeui", "community", "ui", "skeuomorphic" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Skeuomorphic Toggle 做设置页开关。保持免费 Community 变体，色相换成我们的主色。", "promptHintEn": "Use Skeuomorphic Toggle for settings switches. Keep the free Community variant; switch hue to our primary.", "previewImage": "/previews/skeuomorphic-toggle.webp" }, { "id": "portal-field", "slug": "portal-field", "title": "Portal Field", "titleEn": "Portal Field", "summary": "ThreeUI Community 背景场：Portal / Cloud / Flow / Bell / Stream Convergence 等免费变体，免登录，可复制 prompt。", "summaryEn": "ThreeUI Community background field: free Portal / Cloud / Flow / Bell / Stream Convergence variants. No login; copy the prompt.", "types": [ "background", "threejs" ], "sourceUrl": "https://threeui.com/backgrounds/portal-field/portal-field", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "publishedAt": "2026-09-07", "updatedAt": "2026-09-07T01:23:22Z", "qualityNote": "Community 同步报告含 portal-field 父组件。只收免费变体，避开标 PRO 的衍生页。", "qualityNoteEn": "Community sync report includes the portal-field parent. Catalogue free variants only; skip PRO-marked derivatives.", "tags": [ "threeui", "community", "background", "field" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Portal Field 做落地页背景。保持免费 Community 变体，只调速度和色相。", "promptHintEn": "Use Portal Field as a landing background. Keep the free Community variant; only tweak speed and hue.", "previewImage": "/previews/portal-field.webp" }, { "id": "canvas-ui", "slug": "canvas-ui", "title": "Canvas UI", "titleEn": "Canvas UI", "summary": "开源「HTML-in-canvas」着色器组件库：Liquid/Glass 等效果叠在可交互 DOM 上，shadcn 式复制进仓库，并带 MCP 安装路径。", "summaryEn": "Open-source html-in-canvas shader components: Liquid/Glass and more over live interactive DOM, shadcn-style copy-into-repo, with an MCP install path.", "types": [ "ui", "shader", "library" ], "sourceUrl": "https://canvasui.dev/", "secondaryUrls": [ "https://github.com/DavidHDev/canvas-ui" ], "featured": true, "publishedAt": "2026-09-07", "updatedAt": "2026-09-07T01:23:22Z", "qualityNote": "面向 Agent 的可复制组件目录（非 ThreeUI）。免费开源；安装用官方 npx/registry，不收付费墙条目。", "qualityNoteEn": "Agent-oriented copyable component catalog (not ThreeUI). Free/open source; use the official npx/registry — no paywalled items.", "tags": [ "canvas", "shader", "shadcn-registry", "mcp" ], "npmPackage": "@canvas-ui/core", "promptHint": "从 Canvas UI 复制 Liquid 组件进项目，保持 DOM 可选中可点击，并做无 html-in-canvas 时的降级。", "promptHintEn": "Copy Canvas UI's Liquid into the project; keep DOM selectable/clickable and keep the non-html-in-canvas fallback.", "previewImage": "/previews/canvas-ui.webp" }, { "id": "temple-night", "slug": "temple-night", "title": "Temple Night", "titleEn": "Temple Night", "summary": "ThreeUI Community 的京都夜寺场景：默认 Temple Night 免费，雨雾叶与指针光点；其余日落变体标 PRO 不收。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community Kyoto night-temple scene: free default Temple Night with rain, mist, leaves, and pointer wisps. Sunset variants marked PRO are skipped. No login; copy the prompt.", "types": [ "threejs", "hero" ], "sourceUrl": "https://threeui.com/three-js/temple-night/temple-night", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": true, "publishedAt": "2026-09-08", "updatedAt": "2026-09-08T01:27:40Z", "qualityNote": "只收免费默认变体 Temple Night；Yosemite/Presidio/Lake Louise 为 PRO。", "qualityNoteEn": "Catalogue only the free default Temple Night; Yosemite / Presidio / Lake Louise are PRO.", "tags": [ "threeui", "community", "temple", "bloom" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Temple Night 做暗色落地首屏。保持免费 Community 变体，不要切到 PRO 日落。", "promptHintEn": "Use Temple Night for a dark landing hero. Keep the free Community variant; do not switch to PRO sunsets.", "previewImage": "/previews/temple-night.webp" }, { "id": "animated-top-dock", "slug": "animated-top-dock", "title": "Animated Top Dock", "titleEn": "Animated Top Dock", "summary": "ThreeUI Community 顶部停靠栏：Sable / Command Bar / Pixel Terminal / Liquid Glass 四免费变体，适合 Agent 控制台顶栏。免登录，可复制 prompt。", "summaryEn": "ThreeUI Community top dock: free Sable / Command Bar / Pixel Terminal / Liquid Glass variants. Fits an agent console header. No login; copy the prompt.", "types": [ "ui", "section" ], "sourceUrl": "https://threeui.com/css/animated-top-dock/sable", "secondaryUrls": [ "https://github.com/MengTo/threeui", "https://threeui.com/browse" ], "featured": false, "publishedAt": "2026-09-08", "updatedAt": "2026-09-08T01:27:40Z", "qualityNote": "Community CSS UI 父组件，四变体均免费。", "qualityNoteEn": "Community CSS UI parent; all four variants are free.", "tags": [ "threeui", "community", "dock", "css" ], "npmPackage": "@designcodeio/threeui", "promptHint": "用 Animated Top Dock 做控制台顶栏。选 Sable 或 Liquid Glass，保持免费变体。", "promptHintEn": "Use Animated Top Dock as a console top bar. Pick Sable or Liquid Glass; keep the free variants.", "previewImage": "/previews/animated-top-dock.webp" } ] }