界面与范例Interfaces & examples

给 AI 看得懂的组件、网页和交互参考。Components, web examples, and interactions to build with AI.

共 179 条 · 最新在前179 resources · Newest first

Agent 接口Agent API

figma-pilot：用代码执行驱动 Figma 的 MCP（少量工具）figma-pilot — MCP that drives Figma via JS code execution

三个工具：查连接、跑一段 JS、读 API 说明。Three tools: check the connection, run some JS, read the API notes.

github.com

组件Component

affectUI：面向 AI 产品的 React 组件/屏幕块（可 shadcn 安装，带 MCP）affectUI: React components and screens for AI products (shadcn install + MCP)

聊天、引用、审批卡这类 AI 界面零件，可拷贝或让助手装。AI chat, citation, and approval UI you can copy—or let an agent install.

affectui.com

组件Component

Rayden UI：MIT 的 React/Tailwind 组件库，还给编程助手配了 MCPRayden UI: MIT React/Tailwind components with an MCP companion for coding agents

一套可主题化的 React 零件，助手能直接读组件与 token。Themeable React parts your agent can read via MCP manifests and tokens.

rayden-ui.dev

Agent 接口Agent API

Aria Icons：百万级开源 SVG 图标，给 Agent 配好 MCP / CLIAria Icons: 1M+ open SVG icons with MCP and CLI for coding agents

搜图标别让助手手画：MCP 直接把 SVG 装进项目。Stop freehanding icons—MCP searches and installs real SVGs.

icons.leularia.com

组件Component

NS UI：542 个可给 Agent 装的 React 组件登记处（带 MCP 与 CLI）NS UI: a 542-component React registry agents can install via MCP and CLI

五百多个可装进项目的 React 零件，助手也能搜着装。500+ install-as-source React parts your agent can search and add.

design.helpmarq.com

组件Component

Moodi：给界面状态用的小 3D 角色（加载、思考、出错…）Moodi: a tiny 3D character for UI states (loading, thinking, error…)

加载圈换成会眨眼的小 3D 角色，状态一变表情跟着变。Swap the spinner for a blinking 3D buddy that changes with UI state.

getmoodi.dev

界面件UI piece

Agent Standup：把 Claude Code 的子 Agent 变成一场带配音的视频站会Agent Standup: your Claude Code sub-agents as a voiced, animated stand-up call

Claude Code 的子 Agent 开起视频站会，谁卡住一眼看到。Claude Code sub-agents become talking coworkers, so you see who is stuck.

atoll92.github.io

互动网页Interactive

M3E Canvas：在浏览器里拖出 Material 3 界面草图，一键变成给 AI 写 App 的提示词M3E Canvas: sketch Material 3 Expressive screens in the browser and turn them into a prompt for your AI coding tool

拖零件拼 Material 3 界面，一键写成给 AI 的提示词。Drag Material 3 parts into screens, then copy one prompt for your AI coding tool.

lnkiai.github.io

组件库Library

Prompt Motion：200 多条 Claude 做的动效视频，每条都附上做它的提示词Prompt Motion: 200+ motion videos made with Claude, each with the prompt behind it

200 多条 AI 动效片，每条旁边都摆着做它的提示词。200+ AI motion videos, each shown next to the prompt that made it.

prompt-motion.com

Agent 接口Agent API

Open Intelligent UI：开源版「会自己出界面的聊天」，换上你的设计系统和组件Open Intelligent UI: an open-source chat that answers with interactive UI, built on your design system

开源的会出界面的聊天，能换成你自己的设计系统。Open-source chat that answers with interactive UI, styled by your design system.

github.com

互动网页Interactive

CUBE Type：打几个字，变成等距方块字，免费导出图片或循环动图CUBE Type: type a few words and get isometric block letters, free image or loop export

打几个字变成等距方块字，配色画幅随便调，导出免费商用。Type a few words, get isometric block letters, and export them free for commercial use.

typeincube.com

网页游戏Web game

Triple-A Minesweeper：把扫雷做成「3A 大作」的恶搞网页游戏Triple-A Minesweeper: classic Minesweeper parodied as a AAA blockbuster in the browser

一盘普通扫雷，硬塞进开场动画、全程配音和剧情电话。Plain Minesweeper stuffed with splash screens, nonstop voice lines, and story calls.

minesweeper.mikelacher.com

网页游戏Web game

Quake-SRP：1996 年的《雷神之锤》用纯安全 Rust 重写，浏览器里直接玩，代码几乎全由 Claude Code 写Quake-SRP: 1996's Quake ported to dependency-free safe Rust, playable in the browser, written mostly by Claude Code

点开就能玩雷神之锤，整套移植由一群智能体完成。Play Quake in the browser, ported to safe Rust by a fleet of Claude Code agents.

quake-srp.pages.dev

网页工具Web tool

SVG Spark：浏览器里的 10 个本地小工具（SVG 转图、对比度、社交图裁切…）SVG Spark: 10 client-side tools (SVG convert, contrast, social crop, and more)

SVG 转图、对比度、社交裁切，全在本地浏览器里完成。SVG convert, contrast, and social crop—all local in the browser.

svg-spark.vercel.app

互动网页Interactive

demoscene-recomp：把 90 年代 DOS 经典演示片逐条指令重编译，直接在浏览器里跑demoscene-recomp: classic 1990s DOS demos recompiled instruction by instruction to run in the browser

Second Reality 原样在网页里跑，还能切 CRT 扫描线。Second Reality runs in the page as it did in 1993, CRT scanlines optional.

treylorswift.github.io

互动网页Interactive

The people holding up the internet：一页滚动数据故事，40 亿部手机靠一个人维护的时区文件The people holding up the internet: a scrolling data story on the time zone file four billion phones rely on

边往下滑边出数据，讲清一个人撑起全世界手机的时间。Data appears as you scroll: how one person keeps the world's phone clocks right.

sheets.works

组件Component

ascii.rest：191 个会动的 ASCII 字符画，一行标签放进网页ascii.rest: 191 animated ASCII pieces you can drop into a page with one tag

挑一个会动的字符画，一个标签放进网页。Pick an animated ASCII piece and drop it in with one tag.

ascii.rest

互动网页Interactive

BIGWORDS.PAGE：把任何屏幕变成大字牌，链接就是整个页面BIGWORDS.PAGE: turn any screen into a big sign, and the link is the whole page

打一句话铺满屏幕，链接就是整块牌子。Type a line to fill the screen; the link is the whole sign.

bigwords.page

互动网页Interactive

A Walkable History of Art：从维基百科搭出来的 3D 艺术史博物馆A Walkable History of Art: a 3D art-history museum built from Wikipedia

在时间轴上缩放穿越，再走进画廊看真画。Zoom through a timeline, then walk into galleries of real paintings.

artmuseum.artfrompixels.com

Agent 接口Agent API

Shaders：200+ 个开源 WebGPU 特效组件，编程助手可直接接Shaders: 200+ open-source WebGPU effect components your coding agent can use

200 多个 WebGPU 特效组件，装个 MCP 就能让助手来调。200+ WebGPU effect components, and one MCP install lets your agent tune them.

shaders.com

互动网页Interactive

Banyan：一个 HTML 文件里长出的程序化榕树Banyan: a procedural banyan tree grown in one HTML file

一个 HTML 文件，一个种子，长出一整棵能转着看的榕树。One HTML file and one seed grow a whole banyan you can orbit.

satyasairay.github.io

组件Component

Frutjam：纯 CSS、不用 JS 的 Tailwind 组件库Frutjam: a CSS-only Tailwind component library with no JavaScript

65 个组件全用 CSS 写，一行 JS 都不用。65 components in pure CSS, not a line of JavaScript.

frutjam.com

互动网页Interactive

GSS：用写 CSS 的方式写 3D 场景GSS: write 3D scenes the way you write CSS

会写 CSS 就能写 3D：选择器加动画，编译成一个着色器。If you can write CSS, you can write 3D: selectors and keyframes compiled to one shader.

gss-lang.dev

互动网页Interactive

Pumpkin Patch：认领一只南瓜，刻完让它亮着Pumpkin Patch: claim a pumpkin, carve it, and leave it glowing

一百万只南瓜里认领一只，刻完让它亮着。Claim one of a million pumpkins, carve it, leave it glowing.

pumpkins.sh

互动网页Interactive

Samon：一笔把沙子耙完的枯山水谜题Samon: a one-stroke Zen-garden raking puzzle

一笔把沙子耙完的枯山水谜题，页面里就能试。A one-stroke Zen-garden puzzle you can play on the page.

gwern.net

动效Motion

Thank you, Steve：滚动纪念乔布斯Thank you, Steve: a scrolling tribute to Steve Jobs

往下滚，走过乔布斯做过的那些屏幕。Scroll through the screens Steve Jobs made.

thankyousteve.org

互动网页Interactive

Flatten SF：在旧金山找最平的步行/骑车路线Flatten SF: the flattest walking or cycling route across San Francisco

一根滑杆，在少走路和少爬坡之间挑。One slider between shorter and flatter.

flattensf.com

网页游戏Web game

Island Three：在浏览器里走进一座 O’Neill 太空圆柱城Island Three: walk around an O’Neill cylinder in the browser

在浏览器里走进一座太空圆柱城。Walk into a space-colony cylinder in your browser.

islandthree.world

动效Motion

stillwet：AI 模型用代码一笔笔画油画，还能回放作画过程stillwet: AI models paint stroke by stroke in code, with replayable sessions

看 AI 用代码一笔笔把油画画出来。Watch AI paint an oil painting, one coded stroke at a time.

stillwet.art

互动网页Interactive

Lighthouses of the World：全球灯塔按真实闪光节奏亮起的地球Lighthouses of the World: every charted light on a globe, blinking on its real cycle

看全球灯塔按真实节奏一起闪。Watch the world's lighthouses blink in real rhythm.

mapped.earth

动效Motion

Timeline of the Far Future：把维基百科「遥远未来时间线」做成滚动旅程Timeline of the Far Future: Wikipedia’s far-future timeline as a scrolling journey

滚动穿越到宇宙的遥远未来。Scroll your way into the far future.

rivendell.dmitrybrant.com

互动网页Interactive

VB6 Studio Web：浏览器里的经典 Visual Basic 6 IDEVB6 Studio Web: the classic Visual Basic 6 IDE in your browser

在浏览器里拖控件做 VB6 窗体。Build VB6 forms in your browser.

wieslawsoltes.github.io

组件Component

CSS Bed：一套可切换的 classless CSS 主题床CSS Bed: a switchable bed of classless CSS themes

给纯 HTML 切换不同的 CSS 主题。Switch CSS themes for plain HTML.

cssbed.com

网页工具Web tool

Wave：Three.js 着色器层叠波浪渐变背景生成器Wave: Three.js shader layered wave-gradient background generator

在浏览器里生成层叠波浪背景。Generate layered wave backgrounds in your browser.

wave.subworkflow.ai

互动网页Interactive

56k.rip：浏览器里重演 1996 拨号上网56k.rip: the 1996 dial-up internet experience in a browser

在浏览器里体验拨号上网年代。Experience dial-up-era browsing in your browser.

56k.rip

互动网页Interactive

黑洞实时光线追踪：广义相对论测地线可视化Real-time black hole raytracer along GR geodesics

用实时光线追踪探索黑洞视觉。Explore black-hole visuals with real-time ray tracing.

rivendell.dmitrybrant.com

网页工具Web tool

Dental Scope：免费可互动的三维牙科解剖Dental Scope: free interactive 3D dental anatomy

用可互动的三维模型学习牙科解剖。Explore dental anatomy with an interactive 3D model.

dental-scope.com

网页工具Web tool

Halfspace：浏览器里用距离场做实体建模的实验 IDEHalfspace: experimental browser IDE for solid modeling with distance fields

在浏览器里用距离场做实体建模。Experiment with distance-field solid modeling in your browser.

mattkeeter.com

演示Demo

Enigma.design：可互动的三维恩尼格玛机教学页Enigma.design: an interactive 3D Enigma machine lesson

用三维互动演示理解恩尼格玛机。Understand the Enigma machine through an interactive 3D demo.

enigma.design

网页工具Web tool

Space Now：实时太阳系 + 52 万小行星与在轨卫星Space Now: real-time Solar System with 526k asteroids and tracked satellites

在浏览器里探索太阳系与小行星。Explore the Solar System and asteroids in your browser.

space.bl2.net

网页游戏Web game

Destroy Any Website：用火柴人把任意网页打成碎片Destroy Any Website: smash any page with a stickman

把网页变成火柴人的破坏游乐场。Turn a web page into a stickman destruction playground.

destroy.spritefusion.com

网页工具Web tool

MicroLLM Lab：浏览器里跑 / 测 7 个小模型MicroLLM Lab: run and benchmark 7 tiny LLMs in the browser

在浏览器里试跑小模型。Try small language models in your browser.

stateofutopia.com

互动网页Interactive

SkinLab：皮肤科医生做的浏览器 WebGL 皮肤生物物理模型SkinLab: a dermatologist’s browser WebGL biophysical skin model

用互动模型探索皮肤的生物物理。Explore skin biophysics with an interactive model.

drmagnuslynch.com

网页工具Web tool

Lofi Cities：像素夜城 + 浏览器里现场合成的 lofiLofi Cities: pixel night cities with lofi composed live in the browser

在像素夜城里合成轻松的音乐。Synthesize relaxed music in a pixel-art night city.

loficities.com

演示Demo

Tiny AI Arena：看四个模型在 8×8 格子里对打Tiny AI Arena: watch four models fight on an 8×8 grid

看不同模型在小棋盘里对战。Watch models compete on a small game board.

tinyaiarena.com

互动网页Interactive

The Last Day：互动恐龙绘画The Last Day: an interactive dinosaur painting

用互动绘画探索恐龙的最后一天。Explore the dinosaurs' last day through interactive art.

echohive.ai

互动网页Interactive

TiddlyInstall：单 HTML 做跨平台安装包TiddlyInstall: one HTML file that builds cross-platform installers

用单个 HTML 制作跨平台安装包。Make cross-platform installers with a single HTML file.

robertsdotpm.github.io

互动网页Interactive

Bastardica：浏览器里混字重的「bastard」字体工坊Bastardica: in-browser foundry for bastard web fonts

在浏览器里实验混合字重。Experiment with mixed font weights in your browser.

bastardica.mitpit.com

互动网页Interactive

koi.rest：和陌生人一起看锦鲤的安静池塘koi.rest: a quiet shared koi pond

和陌生人一起看一个安静的锦鲤池。Watch a quiet koi pond with strangers.

koi.rest

互动网页Interactive

PipeFitter：浏览器里参数化做异径管接头PipeFitter: parametric pipe connectors in the browser

用参数化工具设计异径管接头。Design pipe reducers with a parametric tool.

mankyd.github.io

互动网页Interactive

C3 Playground：浏览器里编图形与声音的 C3 游乐场C3 Playground: in-browser C3 with graphics and sound

在浏览器里编写图形与声音。Code graphics and sound in your browser.

play.c3-lang.org

互动网页Interactive

CMS-EP-SFX：气隙可用的自解密 HTML 加密页CMS-EP-SFX: air-gapped self-decrypting HTML encryption

用自解密 HTML 在离线环境分享密文。Share encrypted content offline through self-decrypting HTML.

cms-sfx-demo.apeleg.com

组件库Library

3d-retro：CC0 可整页粘贴的复古 3D 技巧博物馆3d-retro: CC0 museum of retro 3D tricks you can paste into a page

可整页粘贴的复古立体技巧，每件都是一个文件。A museum of retro 3D tricks, each one a single file you can paste into a page.

3d-retro.com

互动网页Interactive

Fractalysis：浏览器里无限放大的 Mandelbrot 查看器Fractalysis: browser Mandelbrot viewer with infinite zoom

在浏览器里把分形放大到普通精度之外。Zoom a fractal in the browser, far past ordinary precision.

erwindegroot.nl

互动网页Interactive

Simten NAND：在浏览器用 TypeScript 从门电路搭 CPUSimten NAND: build a CPU from gates in TypeScript in the browser

在浏览器用代码接线，从门电路搭起一台处理器。Wire gates in the browser and build a processor up from them.

play.simten.dev

界面件UI piece

RondoFlow：可视化编排本地 Claude Code Agent 团队RondoFlow: visually orchestrate local Claude Code agent teams

在画布上编排本机 Agent，真的会改文件、跑命令。Arrange local agents on a canvas that edits files and runs commands.

rondoflow.app

组件库Library

gpu-lexer：约 27KB 的语言无关 WebGPU 语法高亮gpu-lexer: ~27KB language-agnostic WebGPU syntax highlighter

语言无关的 WebGPU 高亮，没见过的语言也能猜类型。A language-agnostic WebGPU highlighter that guesses unseen languages.

gpu-lexer.vercel.app

网页游戏Web game

runboli.com：把 Halo 3 Guardian 做成可逛的个人站runboli.com: Halo 3 Guardian as an explorable personal site

把 Halo 3 大厅做成可逛的个人站，藏着照片和小游戏。Walk Halo 3's lobby as a personal site, with photos and mini-games tucked in.

runboli.com

互动网页Interactive

System Design Atlas：带交互架构图的系统设计阅读站System Design Atlas: system-design reading with interactive architecture diagrams

系统设计阅读站，点开文档就能看架构图。Read system-design notes and click through the architecture diagrams.

atlas-sysdes.vercel.app

互动网页Interactive

WebGCM：浏览器里跑的全球气候模型（WebGPU）WebGCM: a global climate model in the browser (WebGPU)

在浏览器里跑的全球气候模型，大气和海洋都在。A global climate model in the browser, atmosphere and ocean together.

gcm.echorelay.net

组件库Library

Facet：可复制粘贴的 React Three Fiber 3D 组件（含 MCP / llms.txt）Facet: copy-paste React Three Fiber 3D components (MCP / llms.txt)

30 个可复制进项目的三维组件，Agent 也能按目录装。30 copy-paste 3D components, with a catalog an agent can install from.

assetmaker-nine.vercel.app

互动网页Interactive

Transformer Explainer：浏览器里可视化 GPT-2 TransformerTransformer Explainer: GPT-2 Transformer visualized in the browser

在浏览器里跑 GPT-2，并能展开注意力和概率。Run GPT-2 in the browser and open attention and the probabilities.

poloclub.github.io

互动网页Interactive

GeoJSON Viewer：粘贴校验并画地图GeoJSON Viewer: paste, validate, and draw on a map

粘贴 GeoJSON，校验过再画上地图，全程不上传。Paste GeoJSON, validate it, and draw the map without uploading.

9revolution9.com

互动网页Interactive

GSB：按营收排金银铜的商业 triviaGSB: rank four companies by revenue (Gold Silver Bronze)

读当年的标题，按营收给公司排成金、银、铜。Read the year's headlines and rank companies by revenue.

playgsb.com

首屏Hero

GalleryGallery

弯曲图板绕柱旋转的英雄图带，可调速度和透明度。A hero ribbon of curved panels on a column, with speed and opacity.

threeui.com

互动网页Interactive

Scrolling Text Generator：浏览器跑马灯/字幕导出Scrolling Text Generator: browser marquee, ticker, and credits export

在浏览器里调跑马灯和字幕，再导出或嵌进网页。Tune a ticker or credits line in the browser, then export or embed it.

scrollingtextgenerator.space

文档Docs

AI 活动海报：别让生成图难看AI-generated posters don’t have to be horrible

同一张活动海报反复改风格，躲开千篇一律的默认样子。Restyle one event poster so it stops looking like the default.

john.hartnup.uk

互动网页Interactive

Sparse-SNN：浏览器里的类脑脉冲网络Sparse-SNN: connectome-inspired spiking network in the browser

在画板上写数字，让浏览器里的脉冲网络来认。Draw a digit and let an in-browser spiking network classify it.

awareliquid-sparse-snn-demo.static.hf.space

互动网页Interactive

Mineral Gems：程序化矿物宝石Mineral Gems: procedurally generated mineral gems

在浏览器里看程序化生成的矿物宝石。Procedurally generated mineral gems you can explore in the browser.

gems.0x0000007a.com

互动网页Interactive

Page Rage：在浏览器里砸烂任意网页Page Rage: smash any web page in the browser

在浏览器里砸预制网页；砸任意网页需要扩展。Smash ready-made pages in the browser; any page needs the extension.

page-rage.com

背景Background

Sylva Living WorldSylva Living World

免费的苔藓森林场景；同页的季节变体不收录。A free moss-forest scene; seasonal variants on the page are not listed.

threeui.com

网页工具Web tool

Green Screen Remover：浏览器里抠绿幕（视频/图片）Green Screen Remover: in-browser chroma key for video & image

把绿幕视频或图片拖进网页，在本地抠掉背景。Drop a green-screen clip or image in the page and key it locally.

greenscreenremover.net

网页工具Web tool

Visual HTML：保源码的 AI HTML 可视化编辑器Visual HTML: source-preserving WYSIWYG for AI-generated HTML

在画布上改邮件和网页，源码仍然留在你手里。Edit emails and pages on a canvas while the source stays yours.

kong75.github.io

3D 场景3D scene

BookshelfBookshelf

可以翻开检视的书架场景，封面带着箔印。A bookshelf scene you can open and page through, with foil covers.

threeui.com

网页工具Web tool

Paper Effects：浏览器里的报纸/杂志文字 Match CutPaper Effects: in-browser newspaper/magazine text match cuts

在浏览器里做报纸风的文字转场，还能导出动图。Make newspaper-style text cuts in the browser and export a GIF.

papereffects.site

组件Component

Engraved CertificateEngraved Certificate

雕版证书板面，圆形扭索纹会自己轮换状态。An engraved certificate whose guilloche rosettes cycle on their own.

threeui.com

模板Template

Capsule：单文件 Web 应用（UI + SQLite 打包分享）Capsule: single-file web apps (UI + SQLite, share like a doc)

把界面和本地数据库打成一个文件，像文档一样分享。Pack a UI and a local database into one file you can share.

withcapsule.app

互动网页Interactive

Redis City：浏览器里的 Redis 内部 3D 互动图Redis City: interactive 3D map of how Redis works

在立体场景里走一遍 Redis 内部是怎么工作的。Walk through how Redis works, as an interactive scene in the browser.

poltora.dev

Agent 接口Agent API

Zephyr：Agent 可操控的零运行时 Web ComponentsZephyr: agent-controllable zero-runtime web components

零运行时的网页组件，Agent 可以开窗、切页、推数据。Zero-runtime web components an agent can open, switch, and fill with data.

daltlc.github.io

组件Component

code-preview-element：可编辑的自渲染代码块code-preview-element: a code block that renders itself

代码块自己渲染成预览，改字的时候页面跟着变。A code block that renders itself, and updates as you edit.

stamat.github.io

组件Component

Neobrutalism.dev：粗野主义 React/Tailwind 组件Neobrutalism.dev: neobrutalist React/Tailwind components

粗野主义的 React 组件站，文档和演示不用登录。A public site of neobrutalist React components you can browse without signing in.

neobrutalism.dev

背景Background

Cloud FieldCloud Field

星空下的云层气流，适合做落地页或控制台的底。A starfield of drifting clouds, meant as atmosphere for a landing or a console.

threeui.com

按钮Button

Dot Border ButtonDot Border Button

四角点阵、虚线描边的按钮，适合控制台的主操作。A dotted-corner button with dashed borders, for a console's main action.

threeui.com

互动网页Interactive

Hopla Games：浏览器里的儿童体感游戏（无 Kinect）Hopla Games: Kinect-style kids games in the browser

免费儿童体感小游戏，摄像头画面留在本机。Free webcam movement games for kids, with the camera staying on the device.

hoplagames.com

互动网页Interactive

Soundmap：摄像头上的「声音相机」Soundmap: a sound camera on your webcam

把声音叠在摄像头画面上，在浏览器里看见它。See sound drawn over your webcam, right in the browser.

soundmap.darebuild.com

组件Component

Animata：MIT 可复制粘贴的动画组件Animata: MIT copy-paste animated React components

MIT 的 React 动画组件，按分类预览后直接复制。MIT React animations you preview by category, then copy the code.

animata.design

组件Component

React Bits：一键「高级感」动画组件库React Bits: animated React components for a premium look

公开的 React 动画组件站，可以按需单个复制。A public site of animated React components you can copy one by one.

reactbits.dev

组件Component

Vengeance UI：落地页向动画组件（VengenceUI）Vengeance UI: landing-page animated React components

偏落地页的 React 动画组件，复制后就能接进页面。Landing-page React animations you copy and drop into a page.

vengenceui.com

文字动效Text motion

Semantic BloomSemantic Bloom

可改的字标，粒子被吸向字母并把它点亮。A wordmark that pulls a particle field into its letters and lights them up.

threeui.com

文字动效Text motion

Typography VortexTypography Vortex

旋转的字环和漂浮字形，指针扫过会把字溶开。Spinning type rings and drifting letters that dissolve under the pointer.

threeui.com

互动网页Interactive

Programming Museum：能走进去的源代码博物馆Programming Museum: a walkable museum of source code

走进可漫游的房间，把能跑的源码当展品看。Walk through rooms where runnable source code hangs as the exhibits.

programmingmuseum.com

互动网页Interactive

Session Context：一页网页能「看懂」你什么Session Context: what one web page can learn about you

看清一张网页在要权限之前，能从浏览器知道什么。See what one page can learn about you before it asks for permission.

sessioncontext.org

背景Background

Spark Badge · BadgeSpark Badge · Badge

光雨拼出的徽章背景，适合成就或密钥卡的氛围。A badge assembled from luminous rain, for an achievement or key-card mood.

threeui.com

动效Motion

Uplink LoaderUplink Loader

赛博风的上行加载条，进度、刻度和霓虹读数都在。A cinematic uplink loader with stepped progress, ticks, and neon readouts.

threeui.com

互动网页Interactive

Bodily Oddities：身体也能「怪」一点的百科Bodily Oddities: strange things bodies can (sometimes) do

可检索的人体小怪癖百科，吓人的往往也正常。A searchable guide to odd bodily quirks, including the scary-but-normal ones.

vester.si

组件Component

SparkUI：给 AI Agent 用的一次性互动页（URL 即 UI）SparkUI: ephemeral interactive pages for AI agents (UI via URL)

给 Agent 的一次性互动页，点开链接就能操作。Ephemeral pages an agent can hand you: open the link, act, and send the result back.

sparkui.dev

3D 场景3D scene

3D Paper · Original3D Paper · Original

立体纸张封面，适合作品集和证书卡。Dimensional paper covers for a portfolio or a certificate card.

threeui.com

背景Background

Woven Cloth · Woven ClothWoven Cloth · Woven Cloth

编织布料的三维背景，适合落地页的材质底。A woven-cloth background for the material base of a landing page.

threeui.com

组件Component

DAUB：给 AI 用的 CSS 组件库（84 件 / llms.txt / MCP）DAUB: CSS component library for AI (84 parts / llms.txt / MCP)

给 AI 用的零构建 CSS 组件库，带目录和校验。A zero-build CSS kit for AI, with a catalog and a way to check the UI.

daub.dev

组件Component

njX UI：CDN 落地页 CSS 库（30+ 组件 / 9 主题）njX UI: CDN landing-page CSS kit (30+ components / 9 themes)

一条链接就能拼落地页的样式库，不用框架。A CSS landing kit from one link, with no framework and no build.

njxui.dev

按钮Button

Liquid Metal Button · PillLiquid Metal Button · Pill

液态金属按钮，指针带动光谱，按下泛起涟漪。A liquid-metal button whose color follows the pointer and ripples on press.

threeui.com

背景Background

Matrix Junction · LaserMatrix Junction · Laser

跟着指针走的激光矩阵，适合面板的氛围底。A pointer-reactive laser matrix for the atmosphere behind a panel.

threeui.com

互动网页Interactive

Relativity Park：光速降到步行时的狭义相对论Relativity Park: special relativity when light walks

把光速降到步行，在公园里看见相对论。Set the speed of light to a walking pace and watch relativity in a park.

rivendell.dmitrybrant.com

互动网页Interactive

Roadwright：画轮子，看它滚出的路面Roadwright: draw a wheel, see the road it rolls on

画一个轮子，立刻看到它无滑滚动时的路面。Draw a wheel and instantly see the road it rolls along without slipping.

baselashraf.com

背景Background

Energy Orb · GlobeEnergy Orb · Globe

带边缘辉光和星场的能量球，适合面板氛围。An energy globe with rim glow and a star field, for panel atmosphere.

threeui.com

背景Background

Elements · Generative TreeElements · Generative Tree

画笔感的树从根长到金尖，指针像风一样吹它。A painterly tree that grows to golden tips and sways as if the pointer were wind.

threeui.com

互动网页Interactive

NissyGirl：纯 HTML/CSS 的 3D 掌机演示NissyGirl: a 3D handheld console rendered in HTML/CSS

纯 HTML 和 CSS 做出可交互的立体掌机壳体。An interactive 3D handheld shell built in HTML and CSS.

nissygirl.com

组件Component

shadcss：无 JS 的 shadcn 风 HTML/CSS 组件shadcss: shadcn-look HTML/CSS with zero JS framework

把 shadcn 的样子做成纯 HTML 和 CSS，不靠框架。shadcn-style pieces in plain HTML and CSS, with no JavaScript framework.

shadcss.vercel.app

按钮Button

CircleButtons · PlayCircleButtons · Play

圆形按钮，暗玻璃表面上有一圈转动的光。Circle buttons on dark glass, with a light that travels the rim.

threeui.com

界面件UI piece

PerformanceGauges · TachometerPerformanceGauges · Tachometer

转速表一类的性能仪表，用来装饰实时指标。Performance gauges, including a tachometer, as ornament for live metrics.

threeui.com

组件Component

Maple：零构建原子 CSSMaple: zero-build atomic CSS

浏览器里按类名即时生成原子 CSS，不用构建。Atomic CSS generated in the browser as classes appear, with no build step.

maple.f12.io

互动网页Interactive

Topological Picture Book：钢笔拓扑曲面Topological Picture Book: pen-and-ink topology surfaces

用钢笔素描翻看拓扑曲面，在浏览器里就能读。Turn the pages of a pen-and-ink book of topology surfaces in the browser.

e-infinity.space

网页工具Web tool

SceneAI：UI 提示库（AETHER Claude 首屏演示同源）SceneAI: UI prompt library (source of AETHER’s Claude hero demo)

落地页和动态背景的文案库，首页可以免费看样本。A library of landing and background lines, with free samples on the homepage.

sceneai.art

区块Section

Animated Top DockAnimated Top Dock

顶部停靠栏，从命令条到液态玻璃都有。A top dock, from a command bar to liquid glass.

threeui.com

首屏Hero

Temple NightTemple Night

京都夜寺：雨、雾、叶，光点跟着指针走。A Kyoto temple at night, with rain, mist, leaves, and light that follows the pointer.

threeui.com

模板Template

HTML Presentation Editor：单文件自编辑演示稿HTML Presentation Editor: self-editing single-file slides

单文件演示稿编辑器，改完就写回原来的文件。A single-file slide editor: change it in the browser and save the same file.

itchernetski.github.io

互动网页Interactive

Ptree：可交互生命树Ptree: interactive tree of life

在浏览器里翻生命树，用性状滑块筛出类群。Browse a tree of life in the browser and filter groups with trait sliders.

ptree.org

组件库Library

Canvas UICanvas UI

把液态和玻璃效果叠在还能点的界面上。Liquid and glass effects laid over an interface you can still click.

canvasui.dev

背景Background

Portal FieldPortal Field

门户、云和气流一类的背景场，打开就能预览。Background fields of portals, clouds, and flow that you can preview right away.

threeui.com

模板Template

Cocoon：免费 Tailwind 4 单页模板Cocoon: free Tailwind CSS 4 one-page template

深色单页模板，免构建就能部署。A dark one-page template you can deploy with no build step.

cocoon.templatedeck.com

背景Background

CRTCRT

曲面玻璃的老显示器背景，适合复古的第一屏。A curved-glass screen background for a retro first screen.

threeui.com

3D 场景3D scene

Skeuomorphic ToggleSkeuomorphic Toggle

拟物开关，也有现代、玻璃和着色器几种样子。A toggle in skeuomorphic, modern, glass, and shader forms that follows light and dark.

threeui.com

互动网页Interactive

Sirenfall：浏览器民防警报场景Sirenfall: a browser civil-defense siren scene

雨夜里拉下闸，听浏览器实时合成的民防警报。Pull the breaker on a rainy night and hear a siren synthesized in the browser.

sirenfall.live

互动网页Interactive

Yan Texture Studio：浏览器纹理实验室Yan Texture Studio: in-browser texture lab

在本地生成纹理和故障滤镜，再导出图片。Generate textures and glitch filters locally, then export the image.

yan.yichenlab.com

互动网页Interactive

Laser Graffiti：浏览器激光涂鸦Laser Graffiti: draw on walls in the browser

用鼠标当激光在浏览器里涂鸦，也能接到墙上。Draw laser graffiti in the browser with your mouse, or aim a real pointer at a wall.

laser.consti.de

3D 场景3D scene

Wireframe Forms · CubeWireframe Forms · Cube

棱镜线框立方体，适合界面上的小装饰。A prismatic wireframe cube for a small ornament on an interface.

threeui.com

组件Component

Ambient CSS v3：物理光照 CSSAmbient CSS v3: physically based CSS

共享一盏光的 CSS，阴影和表面跟着光向走。Physically based CSS where shadows and surfaces follow one shared light.

ambientcss.vercel.app

3D 场景3D scene

Diagnostics PanelDiagnostics Panel

等距的诊断台，适合运维或系统结构的可视化。An isometric diagnostics board for operations or a view of a system.

threeui.com

背景Background

Liquid FormLiquid Form

液态金属的网页背景，体积小，适合垫在首屏下。A compact liquid-metal background that sits under a first screen.

threeui.com

首屏Hero

Warp FieldWarp Field

跃迁拖影场，适合落地页第一屏的速度感。A warp-streak field for the rush of a landing-page first screen.

threeui.com

组件Component

PolyCSS：不用 WebGL 的 CSS 3D 引擎PolyCSS: a CSS 3D engine without WebGL

不用 WebGL 的 CSS 立体引擎，每个面都能点。A CSS 3D engine without WebGL, where every polygon is a clickable element.

polycss.com

落地页Landing page

B2TF：复古 iOS 应用目录B2TF: vintage iOS app directory

复古手机应用的目录，格子里带着视频预览。A directory of retro phone apps, each tile with a video preview.

b2tf.app

落地页Landing page

three.wsthree.ws

两行 HTML 嵌入的三维形象，文字或自拍就能造。A 3D agent you embed in two lines of HTML and shape from text or a selfie.

three.ws

组件Component

Millenium Bug：90 年代银行风 CSSMillenium Bug: retro-banking CSS

把语义页面收成九十年代末的银行后台。Restyle a semantic page as a late-nineties bank back office.

mtct.github.io

互动网页Interactive

Single-File SaaS：单文件 BYOK 模板Single-File SaaS: BYOK in one HTML file

一整套自带密钥的应用脚手架，塞在一个文件里。A whole bring-your-own-key app scaffold, packed into one file.

0xelitesystem.github.io

网页工具Web tool

MotionSitesMotionSites

现成的落地页文案，复制就能交给编程助手。Ready-made landing-page lines you can paste into a coding agent.

motionsites.ai

互动网页Interactive

GlassBox：浏览器指纹台GlassBox: browser fingerprint bench

在浏览器里跑指纹探针，看自己有多好认。Run fingerprint probes in the browser and see how identifiable you are.

glassbox.codecanary.org

互动网页Interactive

Voronoi Go：没有网格的围棋Voronoi Go: Go without the grid

在没有方格的棋盘上下围棋，浏览器里就能开局。Play Go on a board with no grid, right in the browser.

voronoigo.com

界面件UI piece

Beautiful UIBeautiful UI

给 AI 界面的零件：思考轨迹、审批卡和输入条。Parts for an AI interface: thinking traces, approval cards, and a prompt bar.

beautifului.dev

动效Motion

beUIbeUI

带动效的 React 组件，附带给 Agent 的安装说明。Animated React components with install notes written for an agent.

beui.dev

动效Motion

Rare UIRare UI

少见的动效组件，适合给 Agent 当高完成度参考。Uncommon animated components, a high-finish reference for an agent.

rareui.com

界面件UI piece

shadcn/uishadcn/ui

开源的设计系统地基，组件复制进项目再改。An open design-system base: copy the components in and make them yours.

ui.shadcn.com

动效Motion

Transitions.devTransitions.dev

给 Agent 的界面过渡：卡片缩放、数字翻动、文字流出。Interface transitions for agents: cards resize, numbers pop, and text streams in.

transitions.dev

首屏Hero

ButtermaxButtermax

鼠标跟随、液态动效和转场都很顺的作品集站。A portfolio worth taking apart for its mouse-follow, liquid motion, and page changes.

buttermax.net

动效Motion

MetalForge ProgressMetalForge Progress

在浏览器里调进度条着色器，并能实时预览。Progress-bar shaders you can tweak in the browser with a live preview.

metalforge.xyz

互动网页Interactive

Don't WordleDon't Wordle

每天一词，规则像 Wordle，但猜中隐藏词就输。A daily word game with Wordle's rules, except guessing the hidden word loses.

dontwordle.com

互动网页Interactive

RACK-02：单文件 techno 机RACK-02: a techno machine in one HTML file

一整台 techno 机写在一个 HTML 文件里，打开即玩。A modular techno machine in one HTML file that plays in the browser.

ssx360.github.io

首屏Hero

Bestsellers Book ShowcaseBestsellers Book Showcase

一整页书封陈列，标题字体和主色都能改。A full page of book covers in an editorial layout, with type and color you can tune.

threeui.com

区块Section

Character CarouselCharacter Carousel

人像卡片走马灯，指针、滚轮和键盘都能换。A carousel of character cards you switch with the pointer, the wheel, or the keyboard.

threeui.com

首屏Hero

Country TowersCountry Towers

六国塔楼立在程序化的地形上，可以转着看。Towers from six countries stand on a generated landscape you can orbit.

threeui.com

3D 场景3D scene

Koi StudiesKoi Studies

可翻页的锦鲤卡片，指针一斜就有立体深度。A stack of koi cards with real depth that tilts under the pointer.

threeui.com

组件Component

slideVarsslideVars

自动给样式变量做出滑杆，改值页面立刻变。Builds sliders for style variables, and the page updates as you move them.

codepen.github.io

文字动效Text motion

Article HeadingsArticle Headings

文章开头的字标，适合长文或更新日志的顶栏。Wordmarks for the top of a long piece or a changelog.

threeui.com

动效Motion

Brand OrbsBrand Orbs

一排品牌球，适合做工具墙或集成列表。A row of brand orbs for a tools wall or an integrations list.

threeui.com

区块Section

Complete ShelfComplete Shelf

整面书架，适合书店、课程或全部作品。A full wall of shelves for a bookstore, a course list, or all of the work.

threeui.com

背景Background

Constellation FieldConstellation Field

粒子连成的星座场，适合做有连接感的背景。Particle constellations for a background that feels connected.

threeui.com

文字动效Text motion

Gallery HeadingGallery Heading

画廊用的字标，斜向升起、坠落或横扫。Gallery wordmarks that rise on a diagonal, fall, or sweep across.

threeui.com

首屏Hero

KageKage

偏影与留白的整页模板，标题字体和主色都能改。A full-page template of shadow and open space, with type and color you can tune.

threeui.com

首屏Hero

LandscapeLandscape

可切换晨昏和天气的三维地貌。A 3D landscape that switches time of day and weather.

threeui.com

背景Background

Predictive ArcPredictive Arc

预测弧、粒子和网格组成的信号弧，适合做流动背景。Signal arcs of prediction, particles, and grids, for a flowing background.

threeui.com

按钮Button

Rectangle ButtonsRectangle Buttons

矩形的主按钮，从暗玻璃到渐变光束都有。Rectangle actions, from dark glass to a gradient beam.

threeui.com

按钮Button

Shader ButtonsShader Buttons

从星门到等离子的着色器按钮，适合醒目的主操作。Shader buttons, from a star portal to plasma, for a high-energy action.

threeui.com

区块Section

SketchbookSketchbook

像一本可以翻开的速写本，整页打开就能看。A landing that opens like a sketchbook you can flip through.

threeui.com

首屏Hero

Structure FlowStructure Flow

结构流、星云和流体场，打开就能预览。A field study of structure flow, nebulae, and fluid you can preview without signing in.

threeui.com

首屏Hero

Sylva · Living GreenSylva · Living Green

整页森林氛围的落地页，这一版可以免费用。A full-page forest landing you can use for free.

threeui.com

文字动效Text motion

Text Path StudiesText Path Studies

字沿着路径走：地球、布料、涟漪和球体。Type that follows a path: a globe, cloth, ripples, and a sphere.

threeui.com

组件Component

css-doodlecss-doodle

用扩展的样式语法画网格和动画，文档页就是现场。Draw grids and motion with an extended style syntax; the docs are the live demo.

css-doodle.com

作品集Portfolio

CSS Zen GardenCSS Zen Garden

同一份 HTML，换一张样式表就变成另一座花园。The same HTML, restyled by other stylesheets into a different page.

csszengarden.com

动效Motion

Scroll-driven AnimationsScroll-driven Animations

用滚动驱动的演示：进度、封面和堆叠卡片。Scroll-driven demos for reading progress, cover flow, and stacked cards.

scroll-driven-animations.style

动效Motion

A Single DivA Single Div

每幅画只用一个 div，看纯 CSS 能画到哪。Each picture uses a single div, showing how far pure CSS can draw.

a.singlediv.com

动效Motion

Animate.cssAnimate.css

打开就能预览的 CSS 动画库，加上类名即用。A CSS animation library you can preview, then drop in with a class name.

animate.style

组件Component

Bootstrap ExamplesBootstrap Examples

封面、定价和仪表盘的完整页面，拿来就能改。Full pages for a cover, pricing, and a dashboard, ready to adapt.

getbootstrap.com

互动网页Interactive

CSS Grid GardenCSS Grid Garden

用浇水闯关来学网格布局。Learn grid layout as a game of watering a garden.

cssgridgarden.com

互动网页Interactive

Flexbox FroggyFlexbox Froggy

写 Flexbox 把青蛙放到荷叶上，用闯关来学。Learn Flexbox as a game: write the properties that land frogs on lily pads.

flexboxfroggy.com

落地页Landing page

HTML5 UPHTML5 UP

免费的响应式 HTML 模板，下载就能改。Free responsive HTML templates you can download and adapt.

html5up.net

组件Component

Open PropsOpen Props

颜色、阴影和动效的变量，可以直接引进普通页面。Color, shadow, and motion variables you can drop into a plain page.

open-props.style

组件Component

Pico CSSPico CSS

几乎不用类名，直接把原生表单和按钮变好看。Styles native forms and buttons with almost no class names.

picocss.com

组件Component

ShoelaceShoelace

用自定义元素把按钮和表单插进页面。Drop buttons and forms into a page as custom elements.

shoelace.style

互动网页Interactive

three.js examplesthree.js examples

一墙可在浏览器里跑的立体示例，点进去能看源码。A wall of 3D demos you can run in the browser and open to read the source.

threejs.org